/*
 * SOLV Case Studies - front
 *
 * Tokeny sa zgodne z design systemem SOLV (czerwien marki, zloto, skala ink,
 * Lato jako display, Open Sans jako tekst, zgodnie z reszta solv.pl). Zdefiniowane z fallbackiem, wiec
 * jesli motyw juz je wystawia, wygrywa motyw.
 */

.solv-cs,
.solv-cs-cards {
	--solv-red-500: var(--red-500, #E8352A);
	--solv-red-600: var(--red-600, #D0281F);
	--solv-red-700: var(--red-700, #C41F25);
	--solv-red-50:  var(--red-50, #FDECEA);
	/* Zloto zdjete z szablonu Case Study Template v3. Jeden kolor, bez odcieni. */
	--solv-gold: var(--gold-400, #EAA00A);

	--solv-ink-900: var(--ink-900, #202022);
	--solv-ink-800: var(--ink-800, #2B2B2E);
	--solv-ink-700: var(--ink-700, #3C3C3E);
	--solv-ink-600: var(--ink-600, #55555A);
	--solv-ink-500: var(--ink-500, #74747A);
	--solv-ink-400: var(--ink-400, #9A9AA0);
	--solv-ink-300: var(--ink-300, #C4C4C9);
	--solv-ink-200: var(--ink-200, #E2E2E6);
	--solv-ink-100: var(--ink-100, #F0F0F2);
	--solv-ink-50:  var(--ink-50, #F7F7F8);
	--solv-white:   var(--white, #FFFFFF);

	--solv-display: var(--font-display, 'Lato', 'Segoe UI', system-ui, sans-serif);
	--solv-body:    var(--font-body, 'Open Sans', 'Segoe UI', system-ui, sans-serif);
	--solv-mono:    var(--font-mono, 'JetBrains Mono', ui-monospace, Menlo, monospace);

	--solv-max: var(--solv-align-width, 1289px);
	--solv-narrow: var(--solv-align-width, 1289px);
	--solv-measure: 68ch;
	--solv-gutter: 20px;
	--solv-gutter-x2: 40px;
	--solv-rail: 190px;
	--solv-rail-gap: 56px;
	--solv-radius: var(--radius-md, 12px);
	--solv-shadow: var(--shadow-md, 0 10px 24px rgba(32, 32, 34, 0.09));
	--solv-ease: var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));

	font-family: var(--solv-body);
	color: var(--solv-ink-700);
	background: var(--solv-white);
}

/* ------------------------------------------------------------------ */
/* Ukladki                                                             */
/* ------------------------------------------------------------------ */

.solv-wrap {
	width: min(100% - var(--solv-gutter-x2), var(--solv-max));
	margin-inline: auto;
	padding: 0;
	box-sizing: border-box;
}

/* Zostawione dla zgodnosci szablonow. Od 1.1 kolumna czytelna siedzi
   na tresci, a nie na kontenerze, wiec wrap zawsze licuje z logiem. */
.solv-wrap--narrow {
	width: min(100% - var(--solv-gutter-x2), var(--solv-narrow));
}

.solv-sec {
	padding: 88px 0;
	border-top: 1px solid var(--solv-ink-200);
}

.solv-sec:first-of-type {
	border-top: 0;
}

/* ------------------------------------------------------------------ */
/* Typografia                                                          */
/* ------------------------------------------------------------------ */

.solv-eyebrow {
	margin: 0 0 4px;
	font-family: var(--solv-display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--solv-red-600);
}

.solv-eyebrow--muted {
	color: var(--solv-ink-500);
}

.solv-cs h1,
.solv-cs h2,
.solv-cs h3 {
	font-family: var(--solv-display);
	color: var(--solv-ink-900);
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.solv-hero__title {
	margin: 8px 0 0;
	max-width: 900px;
	font-weight: 300;
	font-size: clamp(32px, 4.2vw, 58px);
	line-height: 1.08;
}

.solv-hero__title strong,
.solv-h2 strong {
	font-weight: 600;
	color: var(--solv-red-500);
}

.solv-h2 {
	margin: 10px 0 0;
	font-weight: 300;
	font-size: clamp(24px, 2.4vw, 32px);
	line-height: 1.2;
}

.solv-h3 {
	margin: 0 0 6px;
	font-weight: 600;
	font-size: 20px;
	line-height: 1.3;
}

.solv-prose {
	max-width: var(--solv-measure);
	margin-top: 18px;
	font-size: 16px;
	line-height: 1.75;
	color: var(--solv-ink-800);
	max-width: 62ch;
}

.solv-prose--small {
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--solv-ink-600);
}

.solv-prose p {
	margin: 0 0 14px;
}

.solv-prose p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* Hero                                                               */
/* ------------------------------------------------------------------ */

.solv-hero {
	padding: 96px 0 64px;
	background: linear-gradient(180deg, var(--solv-ink-50) 0%, var(--solv-white) 100%);
}

.solv-hero__inner {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.solv-hero__lead {
	font-size: 17px;
	line-height: 1.75;
	color: var(--solv-ink-600);
	max-width: 58ch;
}

.solv-hero__lead p {
	margin: 0 0 12px;
}

.solv-hero__lead p:last-child {
	margin-bottom: 0;
}

.solv-meta {
	margin: 6px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 30px;
	font-size: 13px;
}

.solv-meta__item {
	display: flex;
	gap: 7px;
	align-items: baseline;
}

.solv-meta dt {
	font-family: var(--solv-display);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--solv-ink-500);
}

.solv-meta dd {
	margin: 0;
	font-weight: 600;
	color: var(--solv-ink-900);
}

.solv-nda-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 4px 0 0;
	padding: 7px 14px;
	border-radius: var(--radius-pill, 999px);
	background: var(--solv-white);
	border: 1px solid var(--solv-gold);
	font-size: 13px;
	color: var(--solv-ink-800);
	align-self: flex-start;
}

.solv-nda-chip span {
	color: var(--solv-gold);
	font-size: 9px;
}

/* ------------------------------------------------------------------ */
/* KPI                                                                */
/* ------------------------------------------------------------------ */

.solv-kpi {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
	gap: 40px 96px;
	align-items: start;
}

.solv-kpi__lead {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.solv-figure {
	display: flex;
	align-items: flex-end;
	gap: 16px;
	margin: 4px 0 0;
}

.solv-figure__value {
	font-family: var(--solv-display);
	font-weight: 700;
	font-size: clamp(64px, 9vw, 118px);
	line-height: 0.85;
	letter-spacing: -0.05em;
	color: var(--solv-red-500);
}

.solv-figure__unit {
	font-family: var(--solv-display);
	font-size: 20px;
	font-weight: 300;
	color: var(--solv-ink-900);
	padding-bottom: 10px;
}

.solv-figure__note {
	margin: 0;
	padding-top: 12px;
	border-top: 1px solid var(--solv-ink-200);
	font-size: 13px;
	line-height: 1.6;
	color: var(--solv-ink-500);
	max-width: 46ch;
}

.solv-kpi__list {
	margin: 0;
	display: flex;
	flex-direction: column;
}

.solv-kpi__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 0;
	border-top: 1px solid var(--solv-ink-200);
}

.solv-kpi__row:last-child {
	border-bottom: 1px solid var(--solv-ink-200);
}

.solv-kpi__row dt {
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--solv-ink-800);
	max-width: 34ch;
}

.solv-kpi__source {
	font-size: 12px;
	color: var(--solv-ink-500);
}

.solv-kpi__row dd {
	margin: 0;
	font-family: var(--solv-display);
	font-weight: 300;
	font-size: clamp(28px, 3.4vw, 38px);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--solv-ink-900);
	white-space: nowrap;
}

.solv-kpi__unit {
	white-space: nowrap;
	font-size: 14px;
	font-weight: 500;
	color: var(--solv-ink-500);
	margin-left: 4px;
}

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

.solv-sec__label {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
}

.solv-sec__num {
	font-family: var(--solv-display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	color: var(--solv-ink-700);
}

.solv-sec__label .solv-eyebrow {
	margin: 0;
}

.solv-marks {
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--solv-ink-700);
	max-width: 62ch;
}

.solv-marks li {
	display: flex;
	gap: 12px;
}

.solv-marks__x {
	color: var(--solv-red-500);
	font-weight: 800;
	line-height: 1.4;
}

/* ------------------------------------------------------------------ */
/* Tabele                                                             */
/* ------------------------------------------------------------------ */

.solv-tablewrap {
	margin-top: 28px;
	overflow-x: auto;
	border: 1px solid var(--solv-ink-200);
	border-radius: var(--solv-radius);
	background: var(--solv-white);
}

.solv-table th:first-child,
.solv-table tbody th {
	width: 24%;
	min-width: 170px;
}

.solv-table {
	min-width: 620px;
	width: 100%;
	border-collapse: collapse;
	font-size: 14.5px;
}

.solv-table th,
.solv-table td {
	text-align: left;
	padding: 13px 18px;
	border-bottom: 1px solid var(--solv-ink-200);
	vertical-align: top;
}

.solv-table thead th {
	font-family: var(--solv-display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--solv-ink-500);
	background: var(--solv-ink-50);
	white-space: nowrap;
}

.solv-table tbody th {
	font-weight: 600;
	color: var(--solv-ink-900);
}

.solv-table tbody tr:last-child th,
.solv-table tbody tr:last-child td {
	border-bottom: 0;
}

.solv-td-before {
	color: var(--solv-ink-500);
	font-variant-numeric: tabular-nums;
}

.solv-td-after {
	color: var(--solv-red-600);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ */
/* Wykres                                                             */
/* ------------------------------------------------------------------ */

.solv-chart {
	margin: 32px 0 0;
	padding: 18px 12px 8px;
	border: 1px solid var(--solv-ink-200);
	border-radius: var(--solv-radius);
	background: var(--solv-white);
}

.solv-chart svg {
	display: block;
	width: 100%;
	height: auto;
}

.solv-chart__grid {
	stroke: var(--solv-ink-200);
	stroke-width: 1;
}

.solv-chart__tick {
	fill: var(--solv-ink-400);
	font-family: var(--solv-mono);
	font-size: 11px;
}

.solv-chart__area {
	fill: var(--solv-red-50);
}

.solv-chart__line {
	fill: none;
	stroke: var(--solv-red-500);
	stroke-width: 2.5;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.solv-chart__dot {
	fill: var(--solv-white);
	stroke: var(--solv-red-500);
	stroke-width: 2;
}

.solv-chart__dot.is-last {
	fill: var(--solv-red-500);
}

.solv-chart__last {
	fill: var(--solv-red-600);
	font-family: var(--solv-display);
	font-size: 15px;
	font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* Frazy                                                              */
/* ------------------------------------------------------------------ */

.solv-frazy {
	margin-top: 42px;
	padding-top: 28px;
	border-top: 1px solid var(--solv-ink-200);
}

.solv-frazy__note {
	margin: 0 0 16px;
	font-size: 13px;
	color: var(--solv-ink-500);
	max-width: 56ch;
}

.solv-frazy__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.solv-frazy__list li {
	padding: 8px 14px;
	border: 1px solid var(--solv-ink-200);
	border-radius: var(--radius-pill, 999px);
	background: var(--solv-ink-50);
	font-size: 13.5px;
	color: var(--solv-ink-800);
}

/* ------------------------------------------------------------------ */
/* Proces                                                             */
/* ------------------------------------------------------------------ */

.solv-steps {
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--solv-ink-200);
}

.solv-steps__item {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 20px;
	padding: 22px 0;
	border-bottom: 1px solid var(--solv-ink-200);
}

.solv-steps__num {
	font-family: var(--solv-display);
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--solv-ink-300);
}

.solv-steps__title {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 600;
}

.solv-steps__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--solv-ink-700);
	max-width: 62ch;
}

.solv-steps__when {
	margin: 8px 0 0;
	font-family: var(--solv-mono);
	font-size: 12px;
	color: var(--solv-ink-500);
}

/* ------------------------------------------------------------------ */
/* Metodyka                                                           */
/* ------------------------------------------------------------------ */

.solv-sec--metoda {
	background: var(--solv-ink-50);
}

.solv-metoda {
	padding: 30px 32px;
	background: var(--solv-white);
	border: 1px solid var(--solv-ink-200);
	border-left: 3px solid var(--solv-red-500);
	border-radius: var(--solv-radius);
}

.solv-metoda__window {
	margin: 14px 0 0;
	font-family: var(--solv-mono);
	font-size: 12.5px;
	color: var(--solv-ink-500);
}

.solv-metoda__nda {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--solv-ink-200);
}

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

.solv-faq__note {
	margin: 14px 0 20px;
	font-size: 13px;
	color: var(--solv-ink-500);
}

.solv-faq {
	border-top: 1px solid var(--solv-ink-200);
}

.solv-faq__item {
	border-bottom: 1px solid var(--solv-ink-200);
}

.solv-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 18px 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--solv-display);
	font-size: 16.5px;
	font-weight: 500;
	color: var(--solv-ink-900);
}

.solv-faq__item summary::-webkit-details-marker {
	display: none;
}

.solv-faq__plus {
	flex: 0 0 auto;
	font-size: 22px;
	font-weight: 300;
	color: var(--solv-red-500);
	transition: transform var(--dur, 200ms) var(--solv-ease);
}

.solv-faq__item[open] .solv-faq__plus {
	transform: rotate(45deg);
}

.solv-faq__answer {
	padding: 0 0 20px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--solv-ink-700);
	max-width: 66ch;
}

.solv-faq__answer p {
	margin: 0 0 12px;
}

.solv-faq__answer p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* CTA                                                                */
/* ------------------------------------------------------------------ */

.solv-sec--cta {
	background: var(--solv-gold);
	color: var(--solv-ink-700);
	border-top: 0;
}

.solv-sec--cta .solv-h2 {
	color: var(--solv-ink-900);
}

.solv-cta__lead {
	margin: 12px 0 0;
	color: var(--solv-ink-600);
	font-size: 16px;
}

.solv-cta {
	margin-top: 34px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 18px;
}

.solv-cta__card {
	padding: 26px 28px;
	background: var(--solv-white);
	border: 0;
	border-radius: var(--radius-lg, 18px);
	box-shadow: 0 2px 10px rgba(32, 32, 34, 0.05);
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.solv-cta__card .solv-eyebrow--muted {
	color: var(--solv-ink-500);
}

.solv-cta__person {
	margin: 8px 0 0;
	font-family: var(--solv-display);
	font-size: 19px;
	font-weight: 600;
	color: var(--solv-ink-900);
}

.solv-cta__role {
	margin: 0;
	font-size: 13px;
	color: var(--solv-ink-500);
}

.solv-cta__text {
	margin: 10px 0 18px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--solv-ink-600);
}

.solv-btn {
	display: inline-block;
	align-self: flex-start;
	margin-top: auto;
	padding: 12px 22px;
	border-radius: var(--radius-pill, 999px);
	border: 1px solid var(--solv-ink-300);
	font-family: var(--solv-display);
	font-size: 14px;
	font-weight: 600;
	color: var(--solv-ink-900);
	text-decoration: none;
	transition: background var(--dur, 200ms) var(--solv-ease), border-color var(--dur, 200ms) var(--solv-ease);
}

.solv-btn:hover,
.solv-btn:focus-visible {
	background: var(--solv-ink-900);
	border-color: var(--solv-ink-900);
	color: var(--solv-white);
}

.solv-btn--primary {
	background: var(--solv-red-500);
	border-color: var(--solv-red-500);
	color: var(--solv-white);
	box-shadow: var(--shadow-brand, 0 12px 28px rgba(232, 53, 42, 0.28));
}

.solv-btn--primary:hover,
.solv-btn--primary:focus-visible {
	background: var(--solv-red-600);
	border-color: var(--solv-red-600);
}

/* ------------------------------------------------------------------ */
/* Karty                                                              */
/* ------------------------------------------------------------------ */

.solv-cs-cards {
	margin: 40px 0;
	font-family: var(--solv-body);
}

.solv-cs-cards__head {
	margin-bottom: 22px;
}

.solv-cs-cards__title {
	margin: 6px 0 0;
	font-family: var(--solv-display);
	font-weight: 300;
	font-size: clamp(22px, 2.2vw, 30px);
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--solv-ink-900);
}

.solv-cs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 18px;
}

.solv-cs-cards[data-columns="1"] .solv-cs-grid { grid-template-columns: 1fr; }
.solv-cs-cards[data-columns="2"] .solv-cs-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.solv-cs-cards[data-columns="4"] .solv-cs-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

.solv-card {
	background: var(--solv-white);
	border: 1px solid var(--solv-ink-200);
	border-radius: var(--radius-lg, 18px);
	overflow: hidden;
	transition: box-shadow var(--dur, 200ms) var(--solv-ease), transform var(--dur, 200ms) var(--solv-ease);
}

.solv-card:hover {
	box-shadow: var(--solv-shadow);
	transform: translateY(-2px);
}

.solv-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.solv-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	background-size: cover;
	background-position: center;
	background-color: var(--solv-ink-100);
}

.solv-card__media--figure {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 8px;
	background: var(--solv-ink-50);
	border-bottom: 1px solid var(--solv-ink-200);
}

.solv-card__figure {
	font-family: var(--solv-display);
	font-size: 56px;
	font-weight: 700;
	letter-spacing: -0.04em;
	color: var(--solv-red-500);
	align-self: center;
}

.solv-card__figure-unit {
	font-family: var(--solv-display);
	font-size: 15px;
	font-weight: 300;
	color: var(--solv-ink-600);
	align-self: center;
}

.solv-card__body {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 20px 22px 22px;
	flex: 1;
}

.solv-card__tag {
	font-family: var(--solv-display);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--solv-red-600);
}

.solv-card__title {
	font-family: var(--solv-display);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--solv-ink-900);
}

.solv-card__client {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--solv-ink-500);
}

.solv-card__cta {
	margin-top: auto;
	padding-top: 14px;
	font-family: var(--solv-display);
	font-size: 13px;
	font-weight: 600;
	color: var(--solv-red-600);
	display: inline-flex;
	gap: 6px;
	align-items: center;
}

.solv-card--bridge .solv-card__cta {
	color: var(--solv-ink-700);
}

/* ------------------------------------------------------------------ */
/* Hub                                                                */
/* ------------------------------------------------------------------ */

.solv-hub__head {
	padding: 84px 0 40px;
	background: linear-gradient(180deg, var(--solv-ink-50) 0%, var(--solv-white) 100%);
}

.solv-hub__title {
	margin: 8px 0 0;
	font-family: var(--solv-display);
	font-weight: 300;
	font-size: clamp(30px, 3.6vw, 50px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--solv-ink-900);
}

.solv-hub__lead {
	margin-top: 16px;
	max-width: 62ch;
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--solv-ink-600);
}

.solv-hub__lead p {
	margin: 0;
}

.solv-filters {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px 0 28px;
	border-bottom: 1px solid var(--solv-ink-200);
	margin-bottom: 28px;
}

.solv-filters__group {
	display: flex;
	align-items: baseline;
	gap: 14px;
	flex-wrap: wrap;
}

.solv-filters__label {
	font-family: var(--solv-display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--solv-ink-500);
	min-width: 60px;
}

.solv-filters__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.solv-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 15px;
	border-radius: var(--radius-pill, 999px);
	border: 1px solid var(--solv-ink-300);
	background: var(--solv-white);
	font-size: 13.5px;
	font-weight: 500;
	color: var(--solv-ink-700);
	text-decoration: none;
	transition: all var(--dur, 200ms) var(--solv-ease);
}

.solv-chip:hover,
.solv-chip:focus-visible {
	border-color: var(--solv-ink-900);
	color: var(--solv-ink-900);
}

.solv-chip.is-active {
	background: var(--solv-red-500);
	border-color: var(--solv-red-500);
	color: var(--solv-white);
}

.solv-chip--soft {
	border-color: var(--solv-ink-200);
	background: var(--solv-ink-50);
	font-size: 13px;
}

.solv-chip__count {
	font-family: var(--solv-mono);
	font-size: 11px;
	opacity: 0.65;
}

.solv-hub__grid {
	margin-bottom: 40px;
}

.solv-pagination {
	padding: 20px 0 70px;
}

.solv-empty {
	padding: 60px 0 80px;
	color: var(--solv-ink-500);
}

.solv-bridge-notice {
	padding: 14px 18px;
	background: var(--solv-ink-50);
	border-left: 3px solid var(--solv-red-500);
	border-radius: var(--radius-sm, 8px);
	font-size: 15px;
}

/* ------------------------------------------------------------------ */
/* Responsywnosc i dostepnosc                                          */
/* ------------------------------------------------------------------ */

.solv-cs a:focus-visible,
.solv-cs-cards a:focus-visible,
.solv-cs summary:focus-visible {
	outline: 3px solid var(--solv-red-500);
	outline-offset: 3px;
	border-radius: 4px;
}

@media (max-width: 900px) {
	.solv-kpi {
		grid-template-columns: 1fr;
		gap: 34px;
	}

	.solv-sec {
		padding: 60px 0;
	}

	.solv-hero {
		padding: 64px 0 44px;
	}

	.solv-metoda {
		padding: 24px 22px;
	}

	.solv-steps__item {
		grid-template-columns: 44px 1fr;
		gap: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.solv-cs *,
	.solv-cs-cards * {
		transition: none !important;
		animation: none !important;
	}
}

/* ------------------------------------------------------------------ */
/* Animacja wejscia sekcji. Dokladana przez JS, wiec strona bez JS      */
/* wyglada tak samo, tylko bez ruchu.                                   */
/* ------------------------------------------------------------------ */

.solv-cs .solv-anim {
	opacity: 1;
	transform: none;
	transition: opacity 0.6s var(--solv-ease), transform 0.6s var(--solv-ease);
}

.solv-cs .solv-anim:not(.is-in) {
	opacity: 0.001;
	transform: translateY(16px);
}

/* ------------------------------------------------------------------ */
/* Szyna sekcji. Numer i etykieta ida w lewa kolumne i przyklejaja sie */
/* do gory, dzieki czemu przy dlugiej sekcji widac, gdzie sie jest.    */
/* ------------------------------------------------------------------ */

.solv-sec__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 18px;
}

.solv-sec__main > *:first-child {
	margin-top: 0;
}

.solv-sec__main .solv-h2 {
	max-width: 22ch;
}

@media (min-width: 1000px) {
	.solv-sec__grid {
		grid-template-columns: var(--solv-rail) minmax(0, 1fr);
		column-gap: var(--solv-rail-gap);
		align-items: start;
	}

	.solv-sec__aside {
		position: sticky;
		top: 104px;
		padding-top: 10px;
	}

	.solv-sec__aside .solv-sec__label {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	.solv-sec__aside .solv-sec__num {
		font-size: 34px;
		font-weight: 200;
		line-height: 1;
		letter-spacing: -0.04em;
		color: var(--solv-ink-300);
	}
}

/* ------------------------------------------------------------------ */
/* Ruch. Wszystko sterowane klasa .solv-reveal dokladana przez JS,     */
/* wiec bez JS strona jest kompletna, tylko nieruchoma.                */
/* ------------------------------------------------------------------ */

.solv-cs .solv-reveal {
	opacity: 1;
	transform: none;
	transition:
		opacity 0.66s var(--solv-ease) calc(var(--solv-delay, 0) * 70ms),
		transform 0.66s var(--solv-ease) calc(var(--solv-delay, 0) * 70ms);
	will-change: opacity, transform;
}

.solv-cs .solv-reveal:not(.is-in) {
	opacity: 0.001;
	transform: translateY(22px);
}

.solv-cs .solv-reveal--left:not(.is-in) {
	transform: translateX(-18px);
}

.solv-cs .solv-reveal--scale:not(.is-in) {
	transform: translateY(14px) scale(0.985);
}

.solv-cs .solv-reveal.is-in {
	will-change: auto;
}

/* Kreska pod naglowkiem sekcji, rysowana przy wejsciu. */

.solv-sec__main .solv-h2::after {
	content: "";
	display: block;
	width: 0;
	height: 2px;
	margin-top: 18px;
	background: var(--solv-red-500);
	transition: width 0.8s var(--solv-ease) 0.2s;
}

.solv-sec__main .solv-h2.is-in::after {
	width: 56px;
}

/* Pasek postepu czytania. */

.solv-progress {
	position: fixed;
	inset: 0 auto auto 0;
	z-index: 60;
	width: 100%;
	height: 3px;
	background: transparent;
	pointer-events: none;
}

.solv-progress__bar {
	height: 100%;
	width: 0;
	background: var(--solv-red-500);
	transform-origin: 0 50%;
}

/* FAQ: plynne rozwijanie zamiast skoku. */

.solv-faq__item {
	transition: background 0.3s var(--solv-ease);
}

.solv-faq__item[open] {
	background: var(--solv-ink-50);
}

.solv-faq__item summary {
	transition: color 0.2s var(--solv-ease), padding-left 0.25s var(--solv-ease);
}

.solv-faq__item summary:hover {
	color: var(--solv-red-600);
}

.solv-faq__plus {
	transition: transform 0.35s var(--solv-ease), color 0.2s var(--solv-ease);
}

.solv-faq__item[open] .solv-faq__plus {
	transform: rotate(135deg);
	color: var(--solv-red-500);
}

.solv-faq__answer {
	overflow: hidden;
}

.solv-faq__item.is-animating .solv-faq__answer {
	transition: height 0.34s var(--solv-ease), opacity 0.34s var(--solv-ease);
}

/* Karty i kroki reaguja na kursor. */

.solv-steps__item {
	transition: transform 0.3s var(--solv-ease);
}

.solv-steps__item:hover .solv-steps__num {
	color: var(--solv-red-500);
}

.solv-steps__num {
	transition: color 0.3s var(--solv-ease);
}

.solv-kpi__row {
	transition: background 0.25s var(--solv-ease);
}

.solv-kpi__row:hover {
	background: var(--solv-ink-50);
}

@media (prefers-reduced-motion: reduce) {
	.solv-cs .solv-reveal,
	.solv-cs .solv-reveal:not(.is-in) {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.solv-sec__main .solv-h2::after {
		width: 56px;
		transition: none;
	}

	.solv-progress {
		display: none;
	}
}

/* Wyszukiwarka w hubie, dokladana przez JS */

.solv-hub__search {
	flex: 1 1 220px;
	min-width: 200px;
	max-width: 340px;
	padding: 9px 15px;
	border: 1px solid var(--solv-ink-300);
	border-radius: var(--radius-pill, 999px);
	background: var(--solv-white);
	font-family: var(--solv-body);
	font-size: 13.5px;
	color: var(--solv-ink-800);
}

.solv-hub__search:focus-visible {
	outline: 3px solid var(--solv-red-500);
	outline-offset: 2px;
	border-color: var(--solv-red-500);
}

/* ------------------------------------------------------------------ */
/* Dostrojenie szerokosci po zrownaniu kontenera z motywem.            */
/* Kontener jest teraz szeroki jak naglowek, wiec bloki, ktore zyja     */
/* z krotkiej linii, dostaja wlasne ograniczenie.                       */
/* ------------------------------------------------------------------ */

.solv-hero__lead,
.solv-cta__lead {
	max-width: 62ch;
}

.solv-faq {
	max-width: 900px;
}

.solv-frazy {
	max-width: 900px;
}

.solv-steps {
	max-width: 1000px;
}

/* Metodyka: opis pomiaru obok zakresu ujawnienia, zamiast pod nim. */

@media (min-width: 1000px) {
	.solv-metoda {
		display: grid;
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		column-gap: 56px;
		padding: 36px 40px;
	}

	.solv-metoda > .solv-eyebrow,
	.solv-metoda > .solv-h3 {
		grid-column: 1 / -1;
	}

	.solv-metoda > .solv-prose,
	.solv-metoda__window {
		grid-column: 1;
	}

	.solv-metoda__nda {
		grid-column: 2;
		grid-row: 3 / span 2;
		margin-top: 0;
		padding-top: 0;
		padding-left: 28px;
		border-top: 0;
		border-left: 1px solid var(--solv-ink-200);
	}
}

/* Hero: pasek meta nie moze sie rozjezdzac na calej szerokosci. */

.solv-meta {
	max-width: 1040px;
}

/* ------------------------------------------------------------------ */
/* Ozdobnik hero                                                       */
/*                                                                     */
/* Kompozycja siedzi po prawej stronie hero i nigdy nie wchodzi pod    */
/* tekst, bo kolumna tekstu ma wlasny sufit szerokosci. Ruch jest      */
/* wolny i o malej amplitudzie, zeby nie odciagac wzroku od naglowka.  */
/* ------------------------------------------------------------------ */

.solv-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.solv-hero__inner {
	position: relative;
	z-index: 1;
}

.solv-hero__inner > * {
	max-width: 640px;
}

.solv-hero__inner > .solv-meta {
	max-width: 720px;
}

.solv-hero__title {
	max-width: 640px;
}

.solv-decor {
	position: absolute;
	z-index: 0;
	top: 50%;
	right: max(0px, calc(((100vw - var(--solv-max)) / 2) - 70px));
	width: min(860px, 60vw);
	transform: translate3d(0, -50%, 0);
	pointer-events: none;
	user-select: none;
}

.solv-decor__svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* Luki: dwa szare i jeden ledwie rozowy, obracaja sie jako calosc. */

.solv-decor__luki path {
	fill: none;
	stroke: var(--solv-ink-200);
	stroke-width: 1;
	opacity: 0.75;
}

.solv-decor__luki path:nth-child(3) {
	stroke: var(--solv-red-500);
	opacity: 0.12;
}

.solv-decor__luki {
	transform-origin: 50% 50%;
	animation: solv-oddech 26s ease-in-out infinite;
}

/* Mgla: rozmyte plamy w kolorze marki pod tekstem. */

.solv-decor__mgla ellipse {
	fill: var(--solv-red-500);
	opacity: 0.05;
	filter: blur(26px);
}

.solv-decor__mgla {
	animation: solv-oddech 18s ease-in-out infinite;
}

/*
 * Trzy warstwy ruchu. Grupa zewnetrzna trzyma pozycje (atrybut transform),
 * srodkowa dryfuje, wewnetrzna obraca. Jeden element SVG ma jeden lancuch
 * transformacji, wiec obrot razem z dryfem w jednej klatkowce zawsze wraca
 * do zera i obrotu w praktyce nie widac.
 *
 * Punkt zaczepienia to 0 0, bo bryly sa wysrodkowane na wlasnym srodku
 * przez ujemne x i y. transform-box: fill-box dla use bywa liczone po
 * przesunieciu x i y, co wyrzucalo bryly poza kompozycje.
 */

.solv-decor__dryf,
.solv-decor__rot {
	transform-box: view-box;
	transform-origin: 0 0;
}

.solv-decor__dryf {
	animation: solv-dryf var(--dur, 26s) ease-in-out var(--del, 0s) infinite;
}

.solv-decor__rot {
	animation: solv-tumble var(--rdur, 28s) linear infinite var(--kier, normal);
}

/* Bryly: cienki kontur, bez wypelnienia. */

/*
 * use to statyczna kompozycja z PHP, path to bryly dorysowane w JS.
 * Krycie ustawia sie tylko dla use, bo wersja z JS ma je per bryla
 * w stylu inline, zeby kompozycja miala glebie.
 */
.solv-decor__bryly use,
.solv-decor__bryly path {
	stroke: var(--solv-ink-300);
	stroke-width: 1;
	fill: none;
	vector-effect: non-scaling-stroke;
}

.solv-decor__bryly use {
	opacity: 0.85;
}

.solv-decor__bryly > g:nth-child(even) use {
	opacity: 0.6;
}

/* Akcenty: jedyne elementy w kolorze marki. */

.solv-decor__kwadrat {
	fill: var(--solv-red-600);
	opacity: 0.9;
}

.solv-decor__bryla-pelna {
	fill: var(--solv-red-500);
	opacity: 0.5;
}

.solv-decor__trojkat {
	fill: var(--solv-red-500);
	opacity: 0.85;
}

.solv-decor__trojkat--jasny {
	opacity: 0.3;
}

@keyframes solv-dryf {
	0%,
	100% {
		transform: translate3d(0, 0, 0) rotate(0deg);
	}

	50% {
		transform: translate3d(var(--dx, 8px), var(--dy, -12px), 0) rotate(var(--dr, 8deg));
	}
}

/*
 * Obrot w plaszczyznie ekranu plus lekkie przechylenie w glab. Pelny obrot
 * 3D wyglada zle na plaskim ksztalcie, bo bryla przechodzi przez pozycje
 * krawedziowa i na ulamek sekundy znika. Kat przechylenia trzymany w
 * granicach dwudziestu paru stopni daje wrazenie bryly, ktora sie kreci,
 * i nigdy nie gubi konturu.
 */

@keyframes solv-tumble {
	0% {
		transform: rotate(0deg) rotate3d(var(--ax, 1), var(--ay, 0.6), 0, 0deg);
	}

	25% {
		transform: rotate(90deg) rotate3d(var(--ax, 1), var(--ay, 0.6), 0, 24deg);
	}

	50% {
		transform: rotate(180deg) rotate3d(var(--ax, 1), var(--ay, 0.6), 0, 0deg);
	}

	75% {
		transform: rotate(270deg) rotate3d(var(--ax, 1), var(--ay, 0.6), 0, -24deg);
	}

	100% {
		transform: rotate(360deg) rotate3d(var(--ax, 1), var(--ay, 0.6), 0, 0deg);
	}
}

@keyframes solv-obrot {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

@keyframes solv-oddech {
	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}

	50% {
		opacity: 0.7;
		transform: scale(1.06);
	}
}

/* Nadtytul hero: dwa znaki i zloto, jak w projekcie. */

.solv-eyebrow--hero {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--solv-gold);
}

.solv-eyebrow__znaki {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	line-height: 0;
}

.solv-eyebrow__znaki svg:first-child {
	color: var(--solv-red-500);
}

.solv-eyebrow__znaki svg:last-child {
	color: var(--solv-gold);
}

@media (max-width: 1100px) {
	.solv-decor {
		width: 62vw;
		opacity: 0.55;
	}
}

@media (max-width: 820px) {
	.solv-decor {
		top: auto;
		bottom: -40px;
		right: -80px;
		width: 90vw;
		opacity: 0.3;
		transform: none;
	}

	.solv-hero__inner > *,
	.solv-hero__title {
		max-width: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.solv-decor__luki,
	.solv-decor__mgla,
	.solv-decor__dryf,
	.solv-decor__rot {
		animation: none !important;
	}
}

/* ------------------------------------------------------------------ */
/* CTA: dwie twarze zamiast samego nazwiska                            */
/*                                                                     */
/* Zdjęcia domyślnie wskazują na zewnętrzne adresy awatarów. Działa od */
/* razu, ale docelowo warto je wgrać do biblioteki mediów i podmienić  */
/* adresy w ustawieniach wtyczki, bo zewnętrzne CDN-y potrafią zmienić */
/* adres bez uprzedzenia.                                              */
/* ------------------------------------------------------------------ */

.solv-cta__ludzie {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 2px 0 0;
}

.solv-cta__awatary {
	display: inline-flex;
	flex: 0 0 auto;
}

.solv-cta__awatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--solv-ink-100);
	border: 2px solid var(--solv-white);
	box-shadow: 0 1px 3px rgba(32, 32, 34, 0.16);
}

.solv-cta__awatar + .solv-cta__awatar {
	margin-left: -14px;
}

.solv-cta__kto {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.solv-cta__ludzie .solv-cta__person,
.solv-cta__ludzie .solv-cta__role {
	margin: 0;
}

/* ------------------------------------------------------------------ */
/* Wyniki w liczbach na dwie kolumny                                   */
/*                                                                     */
/* Sześć wskaźników w jednej kolumnie ciągnęło sekcję w dół i zostawiało */
/* pustą połowę pod tekstem. W układzie dwukolumnowym wiersz nie ma już */
/* miejsca na etykietę obok wartości, więc liczba idzie na górę,        */
/* a opis pod nią. To i tak czyta się lepiej, bo oko najpierw łapie     */
/* liczbę.                                                              */
/* ------------------------------------------------------------------ */

@media (min-width: 900px) {
	.solv-kpi {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: 40px 72px;
	}

	.solv-kpi__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 48px;
	}

	.solv-kpi__row {
		flex-direction: column-reverse;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 6px;
		padding: 18px 0 20px;
	}

	.solv-kpi__row dt {
		max-width: none;
	}

	.solv-kpi__row dd {
		font-size: clamp(30px, 3vw, 40px);
	}

	.solv-kpi__row:last-child {
		border-bottom: 0;
	}

	.solv-kpi__row:nth-last-child(-n+2) {
		border-bottom: 1px solid var(--solv-ink-200);
	}
}

/* ------------------------------------------------------------------ */
/* Tabela porownawcza jak w projekcie                                  */
/*                                                                     */
/* Bez ramek pionowych, bez pasow tla, bez zaokraglonej obwodki.       */
/* Zostaja same linie poziome i powietrze. Kolumna z klientem jest     */
/* pogrubiona, bo to ona niesie wynik, kolumna z liderami zostaje szara */
/* jako tlo porownania.                                                */
/* ------------------------------------------------------------------ */

.solv-table__caption {
	margin: 30px 0 6px;
	font-family: var(--solv-display);
	font-size: 16px;
	font-weight: 600;
	color: var(--solv-ink-900);
}

.solv-cs .solv-tablewrap {
	margin-top: 10px;
	border: 0;
	border-radius: 0;
	background: none;
	overflow-x: auto;
}

.solv-cs .solv-table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	font-size: 15px;
}

.solv-cs .solv-table thead th {
	padding: 0 22px 12px 0;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--solv-ink-200);
	font-family: var(--solv-display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--solv-ink-400);
	text-align: left;
	vertical-align: bottom;
	white-space: normal;
}

.solv-cs .solv-table tbody th,
.solv-cs .solv-table tbody td {
	padding: 18px 22px 18px 0;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--solv-ink-100);
	vertical-align: top;
	line-height: 1.45;
}

.solv-cs .solv-table tbody th {
	width: 30%;
	min-width: 180px;
	font-weight: 600;
	color: var(--solv-ink-900);
	text-align: left;
}

.solv-cs .solv-table tbody td:first-of-type {
	font-weight: 600;
	color: var(--solv-ink-900);
}

.solv-cs .solv-table tbody td {
	color: var(--solv-ink-500);
}

.solv-cs .solv-table tbody tr:last-child th,
.solv-cs .solv-table tbody tr:last-child td {
	border-bottom: 0;
}

/* Tabela przed i po zostaje ze swoim akcentem na kolumnie wyniku. */

.solv-cs .solv-table--beforeafter .solv-td-after {
	font-weight: 600;
	color: var(--solv-red-500);
}

.solv-cs .solv-table--beforeafter .solv-td-before {
	color: var(--solv-ink-400);
}

/* ------------------------------------------------------------------ */
/* Macierz cytowan                                                     */
/* ------------------------------------------------------------------ */

.solv-macierz {
	margin: 40px 0 0;
	max-width: 620px;
}

.solv-macierz__podpis {
	margin: 0 0 14px;
	font-family: var(--solv-display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--solv-ink-400);
	text-align: center;
}

.solv-macierz__siatka {
	display: grid;
	grid-template-columns: repeat(10, minmax(0, 1fr));
	gap: 8px;
}

.solv-macierz__komorka,
.solv-macierz__probka {
	display: block;
	border-radius: 6px;
	border: 1px solid var(--solv-ink-200);
	background: var(--solv-white);
}

.solv-macierz__komorka {
	aspect-ratio: 1 / 1;
}

.solv-macierz__komorka[data-poziom="1"],
.solv-macierz__probka[data-poziom="1"] {
	background: rgba(232, 53, 42, 0.26);
	border-color: transparent;
}

.solv-macierz__komorka[data-poziom="2"],
.solv-macierz__probka[data-poziom="2"] {
	background: rgba(232, 53, 42, 0.58);
	border-color: transparent;
}

.solv-macierz__komorka[data-poziom="3"],
.solv-macierz__probka[data-poziom="3"] {
	background: var(--solv-red-500);
	border-color: transparent;
}

.solv-macierz__legenda {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 22px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	color: var(--solv-ink-600);
}

.solv-macierz__legenda li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.solv-macierz__probka {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
}

@media (max-width: 640px) {
	.solv-macierz__siatka {
		grid-template-columns: repeat(8, minmax(0, 1fr));
		gap: 6px;
	}
}

/* Macierz w trybie szablonu: widoczna dla redakcji, nigdy dla odwiedzajacego. */

.solv-macierz--pusta {
	padding: 22px 24px 24px;
	border: 1px dashed var(--solv-ink-300);
	border-radius: var(--solv-radius);
	background: var(--solv-ink-50);
}

.solv-macierz__brak {
	margin: 0 0 16px;
	display: inline-block;
	padding: 4px 12px;
	border-radius: var(--radius-pill, 999px);
	background: var(--solv-gold);
	color: var(--solv-ink-900);
	font-family: var(--solv-display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.solv-macierz--pusta .solv-macierz__komorka {
	border-style: dashed;
}

/* ------------------------------------------------------------------ */
/* Scena WebGL w hero                                                  */
/*                                                                     */
/* Plotno lezy dokladnie tam, gdzie wczesniej SVG. Wersja SVG zostaje  */
/* w DOM i znika dopiero po pierwszej narysowanej klatce, wiec brak    */
/* WebGL nie zostawia dziury.                                          */
/* ------------------------------------------------------------------ */

.solv-decor__canvas {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 760 / 620;
}

.solv-decor--3d .solv-decor__svg {
	display: none;
}

/* ------------------------------------------------------------------ */
/* Pasek trzech aktow pod hero                                         */
/*                                                                     */
/* Steruje scena 3D, a przy okazji jest spisem tresci case study.      */
/* Bez JS zostaje zwyklym zestawem kotwic, wiec nic nie traci.         */
/* ------------------------------------------------------------------ */

.solv-akty {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	margin: 30px 0 0;
	max-width: 1040px;
	border-top: 1px solid var(--solv-ink-200);
}

.solv-akt {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 20px 16px 0;
	text-decoration: none;
	color: inherit;
	border-right: 1px solid var(--solv-ink-200);
	opacity: 0.55;
	transition: opacity 0.25s var(--solv-ease);
}

.solv-akt:last-child {
	border-right: 0;
}

.solv-akt:hover,
.solv-akt:focus-visible,
.solv-akt.is-active {
	opacity: 1;
}

.solv-akt__num {
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	font-family: var(--solv-display);
	font-weight: 800;
	font-size: 12px;
	background: var(--solv-ink-100);
	color: var(--solv-ink-900);
	transition: background 0.25s var(--solv-ease), color 0.25s var(--solv-ease);
}

.solv-akt.is-active .solv-akt__num {
	background: var(--solv-ink-900);
	color: var(--solv-white);
}

.solv-akt__tresc {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.solv-akt__label {
	font-family: var(--solv-display);
	font-size: 14px;
	font-weight: 600;
	color: var(--solv-ink-900);
}

.solv-akt__desc {
	font-size: 13px;
	line-height: 1.45;
	color: var(--solv-ink-500);
}

@media (max-width: 820px) {
	.solv-akty {
		grid-template-columns: 1fr;
	}

	.solv-akt {
		border-right: 0;
		border-bottom: 1px solid var(--solv-ink-200);
		padding-right: 0;
	}

	.solv-akt:last-child {
		border-bottom: 0;
	}
}

.solv-hero__inner > .solv-akty {
	max-width: 1040px;
}

/* ------------------------------------------------------------------ */
/* Poprawki po przegladzie na Chrome                                    */
/* ------------------------------------------------------------------ */

/* Nadtytul wchodzil pod krawedz naglowka serwisu. */

.solv-hero {
	padding-top: 128px;
}

/* Plotno ma stale proporcje, zeby bufor rysowania nie rozjezdzal sie
   z rozmiarem elementu. Bez tego bryly byly splaszczone. */

.solv-decor__canvas {
	aspect-ratio: 760 / 620;
	width: 100%;
	height: auto;
}

@media (max-width: 820px) {
	.solv-hero {
		padding-top: 72px;
	}
}

/* ------------------------------------------------------------------ */
/* Hero na cala pierwsza szybe                                         */
/*                                                                     */
/* Kompozycja 3D ma promien 2.7 i po obrocie grupy siega wysoko oraz   */
/* nisko. Przy hero wysokosci tresci pierscienie byly przycinane przez */
/* overflow. Pelna szyba daje im miejsce w kazdym akcie.               */
/* ------------------------------------------------------------------ */

.solv-hero {
	min-height: 100svh;
	padding-top: 128px;
	padding-bottom: 72px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.solv-hero .solv-decor {
	top: 50%;
	transform: translate3d(0, -50%, 0);
}

/* Podtytul: doprecyzowanie, ktore zeszlo z H1. */

.solv-hero__podtytul {
	margin: 14px 0 0;
	max-width: 640px;
	font-family: var(--solv-display);
	font-size: clamp(19px, 1.9vw, 26px);
	font-weight: 300;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--solv-ink-600);
}

/* Etykiety aktow: zloto marki zamiast czerni. */

.solv-akt.is-active .solv-akt__num {
	background: var(--solv-gold);
	color: var(--solv-ink-900);
}

@media (max-width: 820px) {
	.solv-hero {
		min-height: auto;
		padding-top: 72px;
		display: block;
	}
}


/* ------------------------------------------------------------------ */
/* v1.13.0                                                             */
/* ------------------------------------------------------------------ */

/* Podtytul hero: pogrubiony, w czerwieni marki. Selektor musi byc
   mocniejszy niz `.solv-cs h3`, ktory ustawia czern naglowkom. */

.solv-cs .solv-hero__podtytul {
	font-weight: 700;
	color: var(--solv-red-500);
}

/*
 * Dekoracja hero siega az pod naglowek serwisu i nie jest przycinana
 * ani u gory, ani po prawej. Plotno dostaje wlasna wysokosc zamiast
 * stalych proporcji, wiec kamera liczy aspekt z realnego pudelka i
 * zawsze miesci pierscien w kadrze.
 */

@media (min-width: 821px) {
	.solv-hero .solv-decor {
		top: 6px;
		bottom: auto;
		transform: none;
		width: min(1000px, 66vw);
	}

	.solv-decor__canvas {
		aspect-ratio: auto;
		width: 100%;
		height: min(92svh, 900px);
	}
}

/*
 * Tabela: wezsza, bo danych jest malo, i wiersz naglowka wysrodkowany
 * w pionie, zeby dwuliniowe naglowki nie kleily sie do gornej linii.
 */

.solv-cs .solv-tablewrap {
	max-width: 680px;
}

.solv-cs .solv-table {
	min-width: 420px;
	max-width: 680px;
}

.solv-cs .solv-table thead th {
	padding: 12px 22px 12px 0;
	vertical-align: middle;
}

.solv-cs .solv-table tbody th {
	width: 42%;
	min-width: 0;
}

/*
 * Macierz: po najechaniu komorka pokazuje odczyt dla pojedynczego
 * zapytania. Sama siatka zostaje obrazem z opisem, wiec czytnik ekranu
 * dostaje rozklad zbiorczy, a nie czterdziesci pustych kwadratow.
 */

.solv-macierz__komorka {
	position: relative;
	transition: box-shadow 0.14s ease;
}

.solv-macierz__komorka[data-opis]:hover {
	box-shadow: 0 0 0 2px var(--solv-ink-900);
	z-index: 3;
}

.solv-macierz__komorka[data-opis]::after {
	content: attr(data-opis);
	position: absolute;
	left: 50%;
	bottom: calc(100% + 10px);
	transform: translate3d(-50%, 4px, 0);
	padding: 7px 11px;
	border-radius: 6px;
	background: var(--solv-ink-900);
	color: var(--solv-white);
	font-family: var(--solv-display);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.14s ease, transform 0.14s ease;
	z-index: 4;
}

.solv-macierz__komorka[data-opis]::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: calc(100% + 6px);
	width: 8px;
	height: 8px;
	margin-left: -4px;
	background: var(--solv-ink-900);
	transform: rotate(45deg);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.14s ease;
	z-index: 4;
}

.solv-macierz__komorka[data-opis]:hover::after {
	opacity: 1;
	transform: translate3d(-50%, 0, 0);
}

.solv-macierz__komorka[data-opis]:hover::before {
	opacity: 1;
}


/* ------------------------------------------------------------------ */
/* v1.14.0: kafel mowi, czy prowadzi do realizacji, czy do case study  */
/* ------------------------------------------------------------------ */

.solv-card__sep {
	margin: 0 6px;
	color: var(--solv-ink-300);
}

.solv-card__typ--most {
	color: var(--solv-ink-400);
}


/* ------------------------------------------------------------------ */
/* v1.15.0: powiazane w podziale realizacje / case study               */
/*                                                                     */
/* Realizacje maja zdjecia i nazwy klientow, case study maja liczby i  */
/* czesto NDA. Wrzucone w jeden rzad kafli wygladaly jak to samo, wiec */
/* dostaja rozne szerokosci i rozna forme.                             */
/* ------------------------------------------------------------------ */

.solv-powiazane {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 56px;
	align-items: start;
}

.solv-powiazane--bez-siatki {
	grid-template-columns: 1fr;
}

.solv-cs-cards__title--maly {
	font-size: clamp(20px, 2vw, 26px);
}

.solv-powiazane .solv-eyebrow {
	margin: 0 0 6px;
}

.solv-cards--2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
	margin-top: 22px;
}

/* Kafel realizacji: zdjecie niesie tresc, wiec dostaje staly kadr. */

.solv-cards--2 .solv-card__media {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	background-size: cover;
	background-position: center top;
	background-color: var(--solv-ink-100);
}

/* Waska kolumna case study. */

.solv-minie {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 22px;
}

.solv-mini {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 22px;
	border: 1px solid var(--solv-ink-200);
	border-radius: var(--solv-radius);
	background: var(--solv-white);
	text-decoration: none;
	transition: border-color 0.16s ease, transform 0.16s ease;
}

.solv-mini + .solv-mini,
.solv-minie + .solv-mini {
	margin-top: 0;
}

.solv-minie + .solv-mini--hub {
	margin-top: 14px;
}

.solv-mini:hover {
	border-color: var(--solv-red-500);
	transform: translateY(-2px);
}

.solv-mini__kpi {
	font-family: var(--solv-display);
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--solv-red-500);
}

.solv-mini__unit {
	margin-left: 5px;
	font-size: 14px;
	font-weight: 600;
	color: var(--solv-ink-500);
}

.solv-mini__title {
	font-family: var(--solv-display);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--solv-ink-900);
}

.solv-mini__desc {
	font-size: 14px;
	line-height: 1.5;
	color: var(--solv-ink-500);
}

.solv-mini__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin-top: 4px;
}

.solv-mini__tag {
	font-family: var(--solv-display);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--solv-ink-400);
}

.solv-mini__cta {
	font-family: var(--solv-display);
	font-size: 13px;
	font-weight: 600;
	color: var(--solv-red-600);
}

.solv-mini--hub {
	background: var(--solv-ink-50);
	border-style: dashed;
}

@media (max-width: 1000px) {
	.solv-powiazane {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

@media (max-width: 620px) {
	.solv-cards--2 {
		grid-template-columns: 1fr;
	}
}




/* ------------------------------------------------------------------ */
/* v1.16.0: hub bento, filtr typu, wieksze CTA, kafle w blogu          */
/* ------------------------------------------------------------------ */

/* Bento: szesc kolumn, bo dzieli sie i na 2, i na 3. Dense pakuje male
   kafle w dziury, wiec po odfiltrowaniu nie zostaja pustki. */

.solv-bento {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 22px;
	grid-auto-flow: dense;
	margin-top: 28px;
}

.solv-bento .solv-card[data-rozmiar="duzy"] {
	grid-column: span 6;
}

.solv-bento .solv-card[data-rozmiar="sredni"] {
	grid-column: span 3;
}

.solv-bento .solv-card[data-rozmiar="maly"] {
	grid-column: span 2;
}

/* Duzy kafel to case study: brak zdjecia, wiec niesie go liczba i podtytul. */

.solv-bento .solv-card[data-rozmiar="duzy"] .solv-card__link {
	display: grid;
	grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
	align-items: center;
	gap: 0;
}

.solv-bento .solv-card[data-rozmiar="duzy"] .solv-card__media {
	height: 100%;
	min-height: 200px;
}

.solv-bento .solv-card[data-rozmiar="duzy"] .solv-card__body {
	padding: 30px 34px;
}

.solv-bento .solv-card[data-rozmiar="duzy"] .solv-card__title {
	font-size: clamp(20px, 2.2vw, 27px);
}

.solv-card__pod {
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--solv-ink-500);
}

.solv-bento .solv-card[data-rozmiar="duzy"] .solv-card__figure {
	font-size: clamp(38px, 5vw, 64px);
}

.solv-bento__pusto {
	margin: 40px 0;
	color: var(--solv-ink-500);
}

/* Filtr typu: chipy, nie linki w liscie. */

.solv-filters__group--typ .solv-filters__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.solv-filters__chip {
	display: inline-block;
	padding: 9px 18px;
	border: 1px solid var(--solv-ink-200);
	border-radius: 999px;
	font-family: var(--solv-display);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--solv-ink-600);
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.solv-filters__chip:hover {
	border-color: var(--solv-ink-400);
	color: var(--solv-ink-900);
}

.solv-filters__chip.is-active {
	background: var(--solv-ink-900);
	border-color: var(--solv-ink-900);
	color: var(--solv-white);
}

/* Kafle wplecione w tresc wpisu blogowego. */

.solv-cs--wplot {
	margin: 44px 0;
	padding: 30px 0;
	border-top: 1px solid var(--solv-ink-200);
	border-bottom: 1px solid var(--solv-ink-200);
}

.solv-cs--wplot .solv-cs-cards__title {
	font-size: clamp(20px, 2vw, 26px);
}

/* CTA: przyciski mialy wielkosc linku w stopce, a to jest cel calej strony. */

.solv-sec--cta .solv-btn {
	padding: 17px 32px;
	font-size: 16px;
	border-radius: var(--solv-radius);
}

.solv-sec--cta .solv-cta__card {
	display: flex;
	flex-direction: column;
}

.solv-sec--cta .solv-btn {
	margin-top: auto;
	align-self: stretch;
	text-align: center;
}

@media (max-width: 1000px) {
	.solv-bento .solv-card[data-rozmiar="sredni"],
	.solv-bento .solv-card[data-rozmiar="maly"] {
		grid-column: span 3;
	}
}

@media (max-width: 680px) {
	.solv-bento {
		grid-template-columns: 1fr;
	}

	.solv-bento .solv-card[data-rozmiar="duzy"],
	.solv-bento .solv-card[data-rozmiar="sredni"],
	.solv-bento .solv-card[data-rozmiar="maly"] {
		grid-column: span 1;
	}

	.solv-bento .solv-card[data-rozmiar="duzy"] .solv-card__link {
		grid-template-columns: 1fr;
	}
}

/* Duzy kafel: liczba i jej jednostka musza siedziec w swojej kolumnie,
   bo inaczej podpis wychodzi na tekst obok. */

.solv-bento .solv-card[data-rozmiar="duzy"] .solv-card__media--figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 28px 20px;
	background: var(--solv-ink-50);
	overflow: hidden;
}

.solv-bento .solv-card[data-rozmiar="duzy"] .solv-card__figure-unit {
	display: block;
	max-width: 100%;
	font-family: var(--solv-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--solv-ink-500);
	text-align: center;
}

.solv-bento .solv-card[data-rozmiar="duzy"] .solv-card__body {
	gap: 9px;
}

/* ------------------------------------------------------------------ */
/* v1.17.0: hub tylko z case study                                     */
/*                                                                     */
/* Nadtytul chowal sie pod belka menu serwisu. Ten sam blad byl w hero */
/* i tam skonczylo sie na 128 px, wiec hub dostaje to samo.            */
/* ------------------------------------------------------------------ */

.solv-hub__head {
	padding-top: 116px;
	padding-bottom: 44px;
}

.solv-eyebrow--duzy {
	font-size: 13px;
	letter-spacing: 0.2em;
	margin: 0 0 14px;
}

.solv-hub__title {
	margin: 0 0 18px;
}

.solv-bento--cs .solv-card[data-rozmiar="sredni"] {
	grid-column: span 3;
}

@media (max-width: 820px) {
	.solv-hub__head {
		padding-top: 72px;
	}
}

/* Kafel samoobslugowy: logotypy modeli zamiast nazwy aplikacji. */

.solv-cta__modele {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 22px;
	margin: 2px 0 10px;
	min-height: 34px;
}

.solv-cta__model {
	display: block;
	width: auto;
	height: 26px;
	max-width: 108px;
	object-fit: contain;
}

@media (max-width: 520px) {
	.solv-cta__model {
		height: 22px;
	}
}


/* Hub konczyl sie tuz nad stopka. Siatka potrzebuje dolu tak samo jak gory. */

.solv-hub {
	padding-bottom: 104px;
}

.solv-bento {
	margin-bottom: 0;
}

@media (max-width: 820px) {
	.solv-hub {
		padding-bottom: 64px;
	}
}

/* ------------------------------------------------------------------ */
/* v1.18.1: oddech pod zlotym pasem CTA                                */
/*                                                                     */
/* Standardowe 88 px wystarcza miedzy sekcjami na bialym tle, ale pas  */
/* CTA jest pelnej szerokosci i w mocnym kolorze, wiec nastepna sekcja */
/* wchodzi na niego wzrokowo. Blok o duzej wadze potrzebuje wiecej     */
/* miejsca po sobie niz zwykly akapit.                                 */
/* ------------------------------------------------------------------ */

.solv-sec--cta {
	padding-bottom: 104px;
}

.solv-sec--cta + .solv-sec,
.solv-sec--related {
	padding-top: 132px;
	border-top: 0;
}

.solv-sec--related {
	padding-bottom: 112px;
}

@media (max-width: 900px) {
	.solv-sec--cta {
		padding-bottom: 64px;
	}

	.solv-sec--cta + .solv-sec,
	.solv-sec--related {
		padding-top: 72px;
		padding-bottom: 64px;
	}
}

/* Baner skanu w kaflu samoobslugowym. Ten sam, co w popupie i sidebarze. */

.solv-cta__baner {
	display: block;
	width: 100%;
	height: auto;
	margin: 2px 0 14px;
	border-radius: var(--solv-radius);
}

/* ------------------------------------------------------------------ */
/* v1.20.0: twarze w kaflu rozmowy                                     */
/*                                                                     */
/* Awatary potrafily wejsc na imiona, bo rzad nie mial wlasnej przerwy */
/* ani wyrownania. Ustawione wprost, zeby nie zalezalo od kolejnosci   */
/* regul z motywu.                                                     */
/* ------------------------------------------------------------------ */

.solv-cta__ludzie {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 2px 0 10px;
}

.solv-cta__awatary {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

.solv-cta__awatar {
	width: 52px;
	height: 52px;
	flex: 0 0 auto;
}

.solv-cta__kto {
	min-width: 0;
}

.solv-cta__person {
	margin: 0;
}

.solv-cta__role {
	margin: 0;
}

/* ------------------------------------------------------------------ */
/* v1.21.0: powiazane bez zapchajdziury                                */
/*                                                                     */
/* Kafel prowadzacy do hubu byl wypelniaczem: udawal tresc, a niosl    */
/* tylko link do strony, na ktorej czytelnik wlasnie byl. Kolumna case */
/* study pokazuje sie teraz tylko wtedy, gdy naprawde jest co pokazac, */
/* a realizacje w tym czasie biora cala szerokosc.                     */
/* ------------------------------------------------------------------ */

.solv-powiazane--szeroka {
	grid-template-columns: 1fr;
}

.solv-powiazane--szeroka .solv-cards--2 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Naglowki obu kolumn maja rozne rozmiary, wiec bez wyrownania kafle
   startowaly na roznej wysokosci. Wspolna wysokosc bloku naglowka
   stawia je w jednej linii. */

.solv-powiazane__glowna > .solv-eyebrow,
.solv-powiazane__boczna > .solv-eyebrow {
	margin: 0 0 6px;
	min-height: 18px;
}

.solv-powiazane__glowna > .solv-cs-cards__title,
.solv-powiazane__boczna > .solv-cs-cards__title {
	margin: 0;
	min-height: 2.6em;
	display: flex;
	align-items: flex-start;
}

.solv-powiazane__glowna .solv-cards--2,
.solv-powiazane__boczna .solv-minie {
	margin-top: 22px;
}

@media (max-width: 1000px) {
	.solv-powiazane__glowna > .solv-cs-cards__title,
	.solv-powiazane__boczna > .solv-cs-cards__title {
		min-height: 0;
	}
}

@media (max-width: 900px) {
	.solv-powiazane--szeroka .solv-cards--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	.solv-powiazane--szeroka .solv-cards--2 {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------ */
/* v1.23.0: twarze rownej wysokosci z banerem obok                     */
/*                                                                     */
/* Awatary w kaflu rozmowy byly wizualnie slabsze od banera skanu w    */
/* kaflu sasiednim, wiec oko szlo od razu w prawo. Zamiast zgadywac    */
/* piksele, liczymy wysokosc z tej samej podstawy co baner: ma on      */
/* proporcje 1035 x 243 i szerokosc 100% kafla, wiec jego wysokosc to  */
/* dokladnie 23,478% szerokosci tresci kafla. Kafel staje sie          */
/* kontenerem zapytan, a awatary biora te sama wartosc w cqi. Przy     */
/* kazdej szerokosci ekranu obie kolumny zaczynaja sie rownym rzedem.  */
/* Piksele przed jednostka cqi to zapas dla starszych przegladarek.    */
/* ------------------------------------------------------------------ */

.solv-cta__card {
	container-type: inline-size;
}

.solv-cta__ludzie {
	gap: 18px;
	margin: 2px 0 14px;
	align-items: center;
}

.solv-cta__awatar {
	width: 104px;
	height: 104px;
	width: 23.478cqi;
	height: 23.478cqi;
	min-width: 56px;
	min-height: 56px;
	border-width: 3px;
	box-shadow: 0 2px 8px rgba(32, 32, 34, 0.18);
}

.solv-cta__awatar + .solv-cta__awatar {
	margin-left: -22px;
}

/* Na imiona zostaje mniej miejsca, wiec zdanie ma prawo sie zlamac. */

.solv-cta__ludzie .solv-cta__person {
	font-size: 18px;
	line-height: 1.25;
}

@media (max-width: 480px) {
	.solv-cta__ludzie {
		gap: 14px;
	}

	.solv-cta__awatar + .solv-cta__awatar {
		margin-left: -16px;
	}
}

/* ------------------------------------------------------------------ */
/* v1.26.0: typografia zgodna z solv.pl i czytelna skala               */
/*                                                                     */
/* Uwaga z recenzji: "czcionki sa za male i czy one na pewno sa         */
/* solvowe". Obie czesci byly trafione. Szablon jechal na Poppinsie,    */
/* a solv.pl uzywa Lato w naglowkach i Open Sans w tresci, wiec strona  */
/* case study czytala sie jak obca. Do tego skala byla ustawiona pod    */
/* gesty, techniczny szablon: 14,5 px w tresci i 11 px w etykietach,    */
/* czyli mniej niz 16 px z reszty serwisu.                             */
/*                                                                     */
/* Rodziny idą przez te same tokeny, wiec motyw nadal moze je nadpisac  */
/* zmiennymi --font-display i --font-body. Dolna granica etykiet to     */
/* teraz 13 px, tresc 17 px, naglowki na wadze 600 jak w reszcie        */
/* serwisu, zeby nie bylo dwoch roznych glosow na jednej domenie.       */
/* ------------------------------------------------------------------ */

.solv-cs,
.solv-cs-cards,
.solv-hub {
	--solv-display: var(--font-display, 'Lato', 'Segoe UI', system-ui, sans-serif);
	--solv-body: var(--font-body, 'Open Sans', 'Segoe UI', system-ui, sans-serif);
}

/* Naglowki: rodzina i waga jak w reszcie serwisu, rozmiar o stopien wyzej. */

.solv-cs .solv-hero__title {
	font-weight: 600;
	font-size: clamp(36px, 4.6vw, 60px);
	line-height: 1.12;
	letter-spacing: -0.015em;
}

.solv-cs .solv-h2 {
	font-weight: 600;
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1.22;
}

.solv-cs .solv-h3 {
	font-size: 22px;
	line-height: 1.35;
}

.solv-cs .solv-hero__lead {
	font-size: 19px;
	line-height: 1.7;
}

.solv-cs .solv-prose {
	font-size: 17px;
	line-height: 1.8;
}

.solv-cs .solv-prose--small {
	font-size: 16px;
	line-height: 1.75;
}

/* Etykiety i podpisy: zaden tekst ponizej 13 px. */

.solv-eyebrow {
	font-size: 13px;
	letter-spacing: 0.16em;
}

.solv-eyebrow--duzy {
	font-size: 14px;
}

.solv-cs .solv-meta {
	font-size: 14.5px;
}

.solv-cs .solv-meta dt,
.solv-cs .solv-kpi__source,
.solv-cs .solv-steps__when,
.solv-cs .solv-akt__num,
.solv-cs .solv-macierz__podpis,
.solv-cs .solv-macierz__brak,
.solv-cs .solv-chart__tick,
.solv-filters__label,
.solv-chip__count {
	font-size: 13px;
}

.solv-cs .solv-kpi__row dt,
.solv-cs .solv-kpi__unit,
.solv-cs .solv-akt__label,
.solv-cs .solv-akt__desc,
.solv-cs .solv-figure__note,
.solv-cs .solv-frazy__note,
.solv-cs .solv-macierz__legenda {
	font-size: 14.5px;
}

.solv-cs .solv-frazy__list li,
.solv-cs .solv-steps__text,
.solv-cs .solv-faq__answer,
.solv-cs .solv-marks,
.solv-cs .solv-metoda__window {
	font-size: 16px;
	line-height: 1.7;
}

/* Tabele czyta sie najczesciej i byly najciasniejsze. */

.solv-cs .solv-table {
	font-size: 16px;
}

.solv-cs .solv-table thead th {
	font-size: 13px;
}

/* Karty w sekcji powiazanych i w hubie. */

.solv-card__tag,
.solv-mini__tag {
	font-size: 12px;
}

.solv-card__client,
.solv-card__cta,
.solv-mini__cta,
.solv-chip,
.solv-chip--soft,
.solv-filters__chip,
.solv-hub__search {
	font-size: 14.5px;
}

.solv-card__pod,
.solv-mini__desc,
.solv-mini__unit,
.solv-bridge-notice {
	font-size: 15.5px;
}

.solv-btn {
	font-size: 15.5px;
}

.solv-cta__text {
	font-size: 16px;
}

.solv-cta__role {
	font-size: 14px;
}

/* ------------------------------------------------------------------ */
/* v1.27.0: jednostka przy liczbie, a nie przypis pod nia              */
/*                                                                     */
/* Znak procenta przy glownej liczbie mial 20 px obok 118 px cyfr i    */
/* czytal sie jak odnosnik do przypisu, a nie jak czesc wyniku. To ta  */
/* sama informacja co liczba: 23,9 bez procenta nic nie znaczy.        */
/* Jednostka skaluje sie teraz razem z liczba i siedzi na tej samej    */
/* linii bazowej.                                                      */
/* ------------------------------------------------------------------ */

.solv-cs .solv-figure {
	align-items: baseline;
	gap: 10px;
}

.solv-cs .solv-figure__unit {
	font-size: clamp(26px, 3.2vw, 42px);
	font-weight: 400;
	line-height: 1;
	padding-bottom: 0;
	color: var(--solv-ink-800);
}

.solv-cs .solv-kpi__unit {
	font-size: 18px;
	font-weight: 400;
	color: var(--solv-ink-700);
}

.solv-card__figure-unit,
.solv-mini__unit {
	font-size: 18px;
	font-weight: 400;
}

.solv-bento .solv-card[data-rozmiar="duzy"] .solv-card__figure-unit {
	font-size: 18px;
}

/* ------------------------------------------------------------------ */
/* v1.27.1: numery aktow wracaja do rozmiaru                           */
/*                                                                     */
/* Podnoszac skale etykiet zgarnalem razem z nimi numer aktu w lewej   */
/* szpalcie, ktory ma 34 px i jest elementem layoutu, a nie etykieta.  */
/* Regula z .solv-cs miala ta sama specyficznosc i stala nizej, wiec   */
/* wygrala i zrobila z "01" pyleczke. Przy okazji numer idzie w gore i */
/* ciemnieje o stopien, bo w szablonie prowadzi wzrok przez sekcje.    */
/* ------------------------------------------------------------------ */

.solv-cs .solv-sec__num {
	font-size: 13px;
}

.solv-cs .solv-sec__aside .solv-sec__num {
	font-size: clamp(42px, 4.6vw, 68px);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--solv-ink-400);
}

/* ------------------------------------------------------------------ */
/* v1.28.0: hub w jednej kolumnie, jeden wzor kafla                    */
/*                                                                     */
/* Bento mialo sens przy mieszance realizacji i case study, bo rozne   */
/* rozmiary rozbijaly monotonie siatki. Po wyrzuceniu realizacji z     */
/* hubu zostal jeden typ tresci, a mimo to pierwszy kafel byl szeroki  */
/* i poziomy, a kolejne waskie i pionowe. Dwa wzory na tej samej       */
/* liscie to nie rytm, tylko niekonsekwencja: oko za kazdym razem musi */
/* od nowa szukac, gdzie jest liczba, a gdzie tytul.                   */
/*                                                                     */
/* Jeden wzor, jedna kolumna, kafle jeden pod drugim.                  */
/* ------------------------------------------------------------------ */

.solv-bento--cs {
	grid-template-columns: 1fr;
	gap: 18px;
}

.solv-bento--cs .solv-card,
.solv-bento--cs .solv-card[data-rozmiar] {
	grid-column: span 1;
}