/*
 * Podstrony wg projektow Claude Design (E10c).
 *
 * Uklad, szerokosci kontenerow, odstepy, proporcje kolumn, kadrowanie zdjec,
 * kolejnosc i typografia odpowiadaja plikom `design/handoff-podstrony/*.dc.html`.
 * Wartosci `cqw` z projektow zamieniono na `vw` (kontener projektu ma
 * szerokosc okna, wiec wartosci sa rownowazne w granicach 1 px).
 *
 * Klasy `s113-svc*`, `s113-pg*`, `s113-svcard*`, `s113-audience*` i
 * `s113-dane*` wystepuja wylacznie na podstronach, dlatego ten plik nie
 * zmienia wygladu zatwierdzonej strony glownej.
 */

/* --------------------------------------------------------------------------
   1. Elementy wspolne podstron
   -------------------------------------------------------------------------- */

/* Korzen podstrony. */
.s113-pg {
	display: block;
	background-color: var(--s113-bg);
	color: var(--s113-text);
}

/* Kontener sekcji: 1296 px + marginesy 5vw (20-72 px). */
.s113-pg-wrap {
	max-width: var(--s113-container);
	margin-inline: auto;
	padding-inline: clamp(20px, 5vw, 72px);
}

/* Pionowy odstep sekcji (projekt: clamp(56px,7cqw,112px)). */
.s113-pg-band {
	padding-block: clamp(56px, 7vw, 112px);
}

/* Jasna i ciemna wstega sekcji. */
.s113-pg--light {
	background-color: var(--s113-light);
	color: var(--s113-ink);
}

.s113-pg--alt {
	background-color: var(--s113-bg-alt);
}

/* Motto "Homines znaczy Ludzie" - staly element marki. */
.s113-pg-motto {
	margin: 0 0 18px;
	font-family: var(--s113-font-heading);
	font-style: italic;
	font-weight: 600;
	font-size: clamp(24px, 2.3vw, 32px);
	line-height: 1.1;
	color: var(--s113-accent);
}

/* Wiekszy wariant motta w hero bez zdjecia (/o-kancelarii/). */
.s113-pg-motto--lg {
	font-size: clamp(26px, 2.6vw, 36px);
}

/* Naglowki sekcji podstron. */
.s113-pg-h2 {
	margin: 0;
	font-family: var(--s113-font-heading);
	font-weight: 500;
	font-size: clamp(34px, 3.6vw, 52px);
	line-height: 1.08;
	text-wrap: balance;
}

.s113-pg-h2--xl {
	font-size: clamp(36px, 3.8vw, 56px);
	line-height: 1.06;
}

/* Male nadtytuly (eyebrow). */
.s113-pg-kicker {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #6f5728;
}

.s113-pg-kicker--accent {
	color: var(--s113-accent);
}

/* Przyciski podstron (nie zmieniamy .s113-btn z komponentow strony glownej). */
.s113-pg-btn {
	display: inline-block;
	border: 0;
	border-radius: var(--s113-radius);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: background-color var(--s113-transition), color var(--s113-transition), border-color var(--s113-transition);
}

.s113-pg-btn--accent {
	background-color: var(--s113-accent);
	color: var(--s113-ink);
	padding: 17px 28px;
}

.s113-pg-btn--accent:hover,
.s113-pg-btn--accent:focus-visible {
	background-color: var(--s113-accent-hover);
	color: var(--s113-ink);
}

.s113-pg-btn--accent-sm {
	background-color: var(--s113-accent);
	color: var(--s113-ink);
	padding: 14px 22px;
	font-size: 14px;
}

.s113-pg-btn--accent-sm:hover,
.s113-pg-btn--accent-sm:focus-visible {
	background-color: var(--s113-accent-hover);
	color: var(--s113-ink);
}

.s113-pg-btn--ink {
	background-color: var(--s113-bg);
	color: var(--s113-text);
	padding: 16px 22px;
}

.s113-pg-btn--ink:hover,
.s113-pg-btn--ink:focus-visible {
	background-color: #1c1c1e;
	color: var(--s113-text);
}

.s113-pg-btn--ink-sm {
	background-color: var(--s113-bg);
	color: var(--s113-text);
	padding: 14px 22px;
	font-size: 14px;
}

.s113-pg-btn--ink-sm:hover,
.s113-pg-btn--ink-sm:focus-visible {
	background-color: #1c1c1e;
	color: var(--s113-text);
}

/* Obramowany przycisk na jasnym tle (sekcja "Co warto wiedzieć"). */
.s113-pg-btn--outline-ink {
	margin-top: 28px;
	border: 1px solid var(--s113-bg);
	color: var(--s113-bg);
	padding: 13px 22px;
	font-size: 14px;
}

.s113-pg-btn--outline-ink:hover,
.s113-pg-btn--outline-ink:focus-visible {
	background-color: var(--s113-bg);
	color: var(--s113-text);
}

/* Obramowany przycisk na ciemnym tle (hero bez zdjecia). */
.s113-pg-btn--outline-accent {
	border: 1px solid var(--s113-accent);
	color: var(--s113-text);
	padding: 16px 26px;
	font-weight: 600;
}

.s113-pg-btn--outline-accent:hover,
.s113-pg-btn--outline-accent:focus-visible {
	background-color: rgba(201, 163, 95, 0.12);
	color: var(--s113-text);
}

/* Zwykly link "Dowiedz się więcej →". */
.s113-pg-more {
	display: inline-block;
	margin-top: 20px;
	color: #6f5728;
	font-weight: 700;
	border-bottom: 1px solid #9a7a3e;
	padding-bottom: 3px;
}

.s113-pg-more:hover,
.s113-pg-more:focus-visible {
	color: var(--s113-bg);
}

/* Obrazy miedzy sekcjami (tresc strony; w projekcie ich nie ma). */
.s113-pg-figure {
	max-width: var(--s113-container);
	margin: 0 auto;
	padding: clamp(40px, 5vw, 72px) clamp(20px, 5vw, 72px);
}

.s113-pg-figure img {
	width: 100%;
	height: auto;
	display: block;
}

/* --------------------------------------------------------------------------
   2. Szablon uslugi - hero z panelem (projekt: "1. HERO SPLIT")
   -------------------------------------------------------------------------- */

.s113-svc-hero {
	position: relative;
	z-index: 3;
}

.s113-svc-hero__inner {
	max-width: var(--s113-container);
	margin: 0 auto;
	padding: 0 clamp(20px, 5vw, 72px) clamp(0px, (800px - 100vw) * 100, 28px);
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
}

.s113-svc-hero__body {
	flex: 1 1 55%;
	min-width: min(100%, 560px);
	padding: clamp(32px, 4.5vw, 72px) clamp(0px, 4.5vw, 72px) clamp(32px, 6.5vw, 112px) 0;
}

.s113-crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 13px;
	color: var(--s113-text-muted);
}

.s113-crumbs a {
	color: var(--s113-text-muted);
}

.s113-crumbs a:hover,
.s113-crumbs a:focus-visible {
	color: var(--s113-accent);
}

.s113-crumbs span:last-child {
	color: var(--s113-text);
}

.s113-svc-hero__eyebrow {
	margin: clamp(28px, 3.5vw, 48px) 0 14px;
	font-family: var(--s113-font-heading);
	font-style: italic;
	font-weight: 600;
	font-size: clamp(24px, 2.3vw, 32px);
	line-height: 1.1;
	color: var(--s113-accent);
}

.s113-svc-hero__title {
	margin: 0;
	font-family: var(--s113-font-heading);
	font-weight: 500;
	font-size: clamp(46px, 5.6vw, 84px);
	line-height: 1;
	letter-spacing: -0.01em;
}

.s113-svc-hero__lead {
	margin: 24px 0 0;
	max-width: 34em;
	font-size: clamp(16px, 1.3vw, 18px);
	color: #e2ded6;
	text-wrap: pretty;
}

.s113-svc-hero__sub {
	margin: 14px 0 0;
	max-width: 36em;
	font-size: 15px;
	color: var(--s113-text-muted);
	text-wrap: pretty;
}

.s113-svc-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 28px;
	margin: 32px 0 0;
}

.s113-svc-hero__phone {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--s113-text);
	font-weight: 700;
	font-size: 16px;
}

.s113-svc-hero__phone:hover,
.s113-svc-hero__phone:focus-visible {
	color: var(--s113-accent);
}

/* Panel "Bezpłatna analiza sytuacji" - nachodzi na pasek zaufania. */
.s113-svc-panel {
	flex: 1 1 45%;
	min-width: min(100%, 400px);
	position: relative;
	z-index: 4;
	margin-bottom: calc(clamp(0px, (100vw - 800px) * 100, 60px) * -1);
	background-color: var(--s113-light);
	color: var(--s113-bg);
	padding: clamp(28px, 3.2vw, 48px);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.s113-svc-panel__title {
	margin: 0;
	font-family: var(--s113-font-heading);
	font-weight: 600;
	font-size: clamp(28px, 2.6vw, 38px);
	line-height: 1.1;
}

.s113-svc-panel__list {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.s113-svc-panel__item {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.45;
}

.s113-svc-panel__check {
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background-color: var(--s113-accent);
	display: grid;
	place-items: center;
	margin-top: -1px;
}

.s113-svc-panel__cta {
	display: block;
	margin-top: 28px;
	text-align: center;
	background-color: var(--s113-bg);
	color: var(--s113-text);
	padding: 16px 22px;
	font-weight: 700;
	font-size: 15px;
	border-radius: var(--s113-radius);
}

.s113-svc-panel__cta:hover,
.s113-svc-panel__cta:focus-visible {
	background-color: #1c1c1e;
	color: var(--s113-text);
}

.s113-svc-panel__phone {
	display: flex;
	justify-content: center;
	align-items: baseline;
	gap: 8px;
	margin-top: 14px;
	color: var(--s113-bg);
	font-size: 14px;
}

.s113-svc-panel__phone:hover,
.s113-svc-panel__phone:focus-visible {
	color: #6f5728;
}

.s113-svc-panel__phone-label {
	color: #5a5752;
}

.s113-svc-panel__phone-number {
	font-weight: 700;
	font-size: 18px;
	white-space: nowrap;
}

/* Pasek zaufania na podstronie: na szerokich ekranach panel hero nachodzi
   na pasek, dlatego pasek robi 60 px miejsca u gory. */
.s113-pg .s113-trust__grid {
	padding-block-start: clamp(0px, (100vw - 800px) * 100, 60px);
	padding-block-end: 0;
}

/* --------------------------------------------------------------------------
   3. Szablon uslugi - sekcja "Treść główna"
   -------------------------------------------------------------------------- */

.s113-svc-band {
	background-color: var(--s113-light);
	color: var(--s113-bg);
}

.s113-svc-band__inner {
	max-width: var(--s113-container);
	margin: 0 auto;
	padding: clamp(56px, 7vw, 112px) clamp(20px, 5vw, 72px);
	display: flex;
	flex-direction: column;
	gap: clamp(56px, 7vw, 112px);
}

.s113-svc-block {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(28px, 5vw, 80px);
	align-items: center;
}

.s113-svc-block__text {
	flex: 1.3 1 480px;
	min-width: 0;
	max-width: 720px;
}

.s113-svc-block__text p {
	margin: 20px 0 0;
	font-size: 17px;
	color: #3d3b38;
	text-wrap: pretty;
}

/* Karta cytatu. */
.s113-svc-quote {
	flex: 1 1 340px;
	min-width: 0;
	background-color: var(--s113-bg);
	color: var(--s113-text);
	padding: clamp(28px, 3vw, 44px);
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.s113-svc-quote__mark {
	font-family: var(--s113-font-heading);
	font-size: 56px;
	line-height: 0.5;
	color: var(--s113-accent);
	height: 22px;
}

.s113-svc-quote__text {
	margin: 0;
	font-family: var(--s113-font-heading);
	font-size: clamp(24px, 2.1vw, 29px);
	line-height: 1.25;
	text-wrap: pretty;
}

.s113-svc-quote .s113-pg-btn {
	align-self: flex-start;
	padding: 14px 22px;
	font-size: 14px;
}

/* Karty faktow: tekst po prawej, karty po lewej (projekt: row-reverse). */
.s113-svc-block--facts {
	flex-direction: row-reverse;
	align-items: flex-start;
}

.s113-svc-block--facts .s113-svc-block__text {
	flex: 1 1 380px;
}

.s113-svc-facts {
	flex: 1.5 1 520px;
	min-width: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
	gap: 12px;
}

.s113-svc-fact {
	background-color: #ffffff;
	border: 1px solid #e2ded6;
	padding: clamp(22px, 2.2vw, 30px);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.s113-svc-fact__no {
	font-family: var(--s113-font-heading);
	font-size: 30px;
	font-weight: 600;
	line-height: 1;
	color: #9a7a3e;
}

.s113-svc-fact__text {
	font-size: 15.5px;
	line-height: 1.55;
	color: #3d3b38;
	text-wrap: pretty;
}

/* Dlaczego wybieraja nasza kancelarie. */
.s113-svc-block--reasons {
	align-items: flex-start;
}

.s113-svc-block--reasons .s113-svc-block__text {
	flex: 1 1 420px;
}

.s113-svc-person {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid #dcd7cd;
}

.s113-svc-person__img {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	object-position: 50% 18%;
	background-color: var(--s113-bg);
	flex: 0 0 64px;
}

.s113-svc-person__body {
	display: flex;
	flex-direction: column;
	line-height: 1.35;
	flex: 1;
	min-width: 0;
}

.s113-svc-person__name {
	font-size: 16px;
	font-weight: 700;
}

.s113-svc-person__role {
	font-size: 13px;
	color: var(--s113-ink-muted);
}

.s113-svc-reasons {
	flex: 1 1 420px;
	min-width: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.s113-svc-reason {
	background-color: var(--s113-bg);
	color: var(--s113-text);
	padding: clamp(22px, 2.2vw, 30px);
	display: flex;
	gap: 18px;
	align-items: flex-start;
}

.s113-svc-reason__check {
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid var(--s113-accent);
	display: grid;
	place-items: center;
	margin-top: 2px;
}

.s113-svc-reason__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.s113-svc-reason__title {
	font-size: 17px;
}

.s113-svc-reason__text {
	font-size: 15px;
	color: var(--s113-text-muted);
	text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   4. Szablon uslugi - etapy postępowania (6 kolumn / os czasu)
   -------------------------------------------------------------------------- */

.s113-svc-steps {
	background-color: var(--s113-bg);
}

.s113-svc-steps__head {
	max-width: 720px;
	margin-bottom: clamp(36px, 4.5vw, 64px);
}

.s113-svc-steps__lead {
	margin: 16px 0 0;
	color: var(--s113-text-muted);
	font-size: 17px;
	text-wrap: pretty;
}

.s113-svc-steps__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.s113-svc-step {
	position: relative;
	display: flex;
	gap: 18px;
}

.s113-svc-step__rail {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 0 0 44px;
	align-self: stretch;
}

.s113-svc-step__no {
	position: relative;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--s113-accent);
	display: grid;
	place-items: center;
	font-family: var(--s113-font-heading);
	font-size: 22px;
	font-weight: 600;
	color: var(--s113-accent);
	background-color: var(--s113-bg);
}

.s113-svc-step__conn {
	flex: 1;
	width: 1px;
	background-color: #4a4a4e;
	margin: 8px 0;
}

.s113-svc-step:last-child .s113-svc-step__conn {
	display: none;
}

.s113-svc-step__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 8px 0 32px;
	min-width: 0;
}

.s113-svc-step__title {
	font-size: 17px;
	line-height: 1.35;
}

.s113-svc-step__text {
	margin: 0;
	font-size: 15px;
	color: var(--s113-text-muted);
	text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   5. Szablon uslugi - statystyki
   -------------------------------------------------------------------------- */

.s113-svc-stats {
	background-color: var(--s113-bg-alt);
	border-top: 1px solid var(--s113-line);
	border-bottom: 1px solid var(--s113-line);
}

.s113-svc-stats__list {
	max-width: var(--s113-container);
	margin: 0 auto;
	padding: clamp(40px, 5vw, 72px) clamp(20px, 5vw, 72px);
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 12px;
}

.s113-svc-stat {
	background-color: var(--s113-surface);
	padding: clamp(24px, 3vw, 40px);
	display: flex;
	align-items: baseline;
	gap: 18px;
	flex-wrap: wrap;
}

.s113-svc-stat__value {
	font-family: var(--s113-font-heading);
	font-weight: 500;
	font-size: clamp(56px, 5.6vw, 80px);
	line-height: 1;
	color: var(--s113-accent);
}

.s113-svc-stat__label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--s113-text);
}

/* --------------------------------------------------------------------------
   6. Szablon uslugi - zespol
   -------------------------------------------------------------------------- */

.s113-svc-team {
	background-color: var(--s113-light);
	color: var(--s113-bg);
}

.s113-svc-team__inner {
	max-width: var(--s113-container);
	margin: 0 auto;
	padding: clamp(56px, 7vw, 112px) clamp(20px, 5vw, 72px);
}

.s113-svc-team__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: end;
	gap: 20px 48px;
	margin-bottom: clamp(28px, 3.5vw, 48px);
}

.s113-svc-team__intro {
	flex: 1 1 520px;
	min-width: 0;
	max-width: 720px;
}

.s113-svc-team__intro p:not(.s113-pg-kicker) {
	margin: 16px 0 0;
	font-size: 17px;
	color: #3d3b38;
	text-wrap: pretty;
}

.s113-svc-team__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.s113-svc-team__motto {
	font-family: var(--s113-font-heading);
	font-style: italic;
	font-weight: 600;
	font-size: 24px;
	color: #9a7a3e;
}

.s113-svc-team__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: clamp(12px, 1.6vw, 24px);
}

.s113-svc-member {
	background-color: var(--s113-bg);
	color: var(--s113-text);
	display: flex;
	flex-direction: column;
}

.s113-svc-member__media {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-color: #1c1c1e;
	margin: 0;
}

.s113-svc-member__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.s113-svc-member__body {
	padding: 20px clamp(18px, 1.8vw, 24px) 24px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.s113-svc-member__name {
	margin: 0;
	font-family: var(--s113-font-heading);
	font-weight: 600;
	font-size: 26px;
	line-height: 1.1;
}

.s113-svc-member__role {
	color: var(--s113-accent);
	font-weight: 600;
	font-size: 13.5px;
	line-height: 1.4;
}

.s113-svc-member__role2 {
	font-size: 13.5px;
	line-height: 1.4;
}

.s113-svc-member__text {
	margin: 8px 0 0;
	color: var(--s113-text-muted);
	font-size: 14.5px;
	text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   7. Szablon uslugi - FAQ
   -------------------------------------------------------------------------- */

.s113-svc-faq {
	background-color: var(--s113-bg);
}

.s113-svc-faq__inner {
	max-width: var(--s113-container);
	margin: 0 auto;
	padding: clamp(56px, 7vw, 112px) clamp(20px, 5vw, 72px);
	display: flex;
	flex-wrap: wrap;
	gap: clamp(28px, 5vw, 80px);
	align-items: flex-start;
}

.s113-svc-faq__intro {
	flex: 1 1 360px;
	min-width: 0;
	max-width: 720px;
}

.s113-svc-faq__intro p {
	margin: 16px 0 0;
	color: var(--s113-text-muted);
	font-size: 17px;
	text-wrap: pretty;
}

.s113-svc-faq__list {
	flex: 1.4 1 480px;
	min-width: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid #3d3d40;
}

.s113-svc-faq__item {
	border-bottom: 1px solid #3d3d40;
}

.s113-svc-faq__details > summary {
	list-style: none;
}

.s113-svc-faq__details > summary::-webkit-details-marker {
	display: none;
}

.s113-svc-faq__summary {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding: 24px 0;
	cursor: pointer;
}

.s113-svc-faq__summary:hover,
.s113-svc-faq__summary:focus-visible {
	color: var(--s113-accent);
}

.s113-svc-faq__q {
	margin: 0;
	font-family: var(--s113-font-heading);
	font-weight: 600;
	font-size: clamp(22px, 1.9vw, 27px);
	line-height: 1.2;
	text-align: left;
}

.s113-svc-faq__icon {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--s113-accent);
	display: grid;
	place-items: center;
	color: var(--s113-accent);
	font-family: var(--s113-font-body);
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
}

.s113-svc-faq__icon::before {
	content: "+";
}

.s113-svc-faq__details[open] .s113-svc-faq__icon::before {
	content: "\2212";
}

.s113-svc-faq__details > p {
	margin: 0;
	padding: 0 56px 26px 0;
	color: #c9c5bd;
	font-size: 16px;
	text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   8. Podstrony - opinie Google (komponent podstron, osobny od strony glownej)
   -------------------------------------------------------------------------- */

.s113-pg-reviews {
	background-color: var(--s113-light);
	color: var(--s113-bg);
}

.s113-pg-reviews__inner {
	max-width: var(--s113-container);
	margin: 0 auto;
	padding: clamp(56px, 7vw, 104px) clamp(20px, 5vw, 72px);
}

.s113-pg-reviews__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: end;
	gap: 16px 40px;
	margin-bottom: clamp(28px, 3.5vw, 48px);
}

.s113-pg-reviews__title {
	font-family: var(--s113-font-heading);
	font-weight: 500;
	font-size: clamp(34px, 3.6vw, 52px);
	line-height: 1.08;
}

.s113-pg-reviews__meta {
	margin: 10px 0 0;
	color: var(--s113-ink-muted);
	font-size: 14px;
}

.s113-pg-reviews__stars {
	color: #9a7a3e;
	letter-spacing: 0.1em;
}

.s113-pg-reviews__link {
	font-weight: 700;
	color: #6f5728;
	border-bottom: 1px solid #9a7a3e;
	padding-bottom: 4px;
}

.s113-pg-reviews__link:hover,
.s113-pg-reviews__link:focus-visible {
	color: var(--s113-bg);
}

.s113-pg-reviews__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: clamp(12px, 2vw, 24px);
}

.s113-pg-review {
	margin: 0;
	background-color: #ffffff;
	border: 1px solid #e2ded6;
	padding: clamp(24px, 2.4vw, 32px);
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.s113-pg-review__stars {
	color: #9a7a3e;
	letter-spacing: 0.12em;
}

.s113-pg-review__text {
	margin: 0;
	font-size: 16px;
	flex: 1;
	text-wrap: pretty;
}

.s113-pg-review__caption {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	color: var(--s113-ink-muted);
}

.s113-pg-review__name {
	color: var(--s113-bg);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   9. Podstrony - sekcja kontaktowa z formularzem
   -------------------------------------------------------------------------- */

.s113-svc-contact {
	background-color: var(--s113-bg-alt);
}

.s113-svc-contact__inner {
	max-width: var(--s113-container);
	margin: 0 auto;
	padding: clamp(56px, 7vw, 112px) clamp(20px, 5vw, 72px);
	display: flex;
	flex-wrap: wrap;
	gap: clamp(32px, 5vw, 80px);
	align-items: flex-start;
}

.s113-svc-contact__intro {
	flex: 1 1 380px;
	min-width: 0;
	max-width: 560px;
}

.s113-svc-contact__intro p {
	margin: 16px 0 0;
	color: var(--s113-text-muted);
	font-size: 17px;
	text-wrap: pretty;
}

.s113-svc-contact__phone {
	margin-top: 28px;
	display: flex;
	align-items: center;
	gap: 16px;
	background-color: var(--s113-accent);
	color: var(--s113-ink);
	padding: 18px 22px;
	border-radius: var(--s113-radius);
}

.s113-svc-contact__phone:hover,
.s113-svc-contact__phone:focus-visible {
	background-color: var(--s113-accent-hover);
	color: var(--s113-ink);
}

.s113-svc-contact__phone-text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.s113-svc-contact__phone-label {
	font-size: 12px;
	font-weight: 600;
}

.s113-svc-contact__phone-number {
	font-size: 24px;
	font-weight: 700;
	white-space: nowrap;
}

.s113-svc-contact__address {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--s113-line);
	display: flex;
	gap: 14px;
	align-items: flex-start;
	font-size: 15px;
	line-height: 1.55;
}

.s113-svc-contact__address svg {
	flex: 0 0 20px;
	margin-top: 3px;
	color: var(--s113-accent);
}

.s113-svc-contact__address-name {
	font-weight: 700;
}

.s113-svc-contact__address-lines {
	color: var(--s113-text-muted);
}

.s113-svc-contact__panel {
	flex: 1.2 1 440px;
	min-width: 0;
	background-color: var(--s113-surface);
	padding: clamp(24px, 3vw, 44px);
}

/* --------------------------------------------------------------------------
   10. Podstrony - "Inne usługi"
   -------------------------------------------------------------------------- */

.s113-svc-other {
	max-width: var(--s113-container);
	margin: 0 auto;
	padding: clamp(56px, 7vw, 104px) clamp(20px, 5vw, 72px);
}

.s113-svc-other__title {
	margin: 0 0 clamp(24px, 3vw, 40px);
	font-family: var(--s113-font-heading);
	font-weight: 500;
	font-size: clamp(32px, 3.2vw, 46px);
	line-height: 1.08;
}

.s113-svc-other__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 2px;
	background-color: var(--s113-line);
	border: 1px solid var(--s113-line);
}

.s113-svc-other__card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	background-color: var(--s113-surface);
	padding: clamp(24px, 2.4vw, 36px);
	color: var(--s113-text);
}

.s113-svc-other__card:hover,
.s113-svc-other__card:focus-visible {
	background-color: var(--s113-surface-hover);
	color: var(--s113-text);
}

.s113-svc-other__card-title {
	margin: 0;
	font-family: var(--s113-font-heading);
	font-weight: 600;
	font-size: clamp(24px, 2vw, 28px);
	line-height: 1.1;
}

.s113-svc-other__card-text {
	margin: 0;
	color: var(--s113-text-muted);
	font-size: 15px;
	flex: 1;
	text-wrap: pretty;
}

.s113-svc-other__card-more {
	font-size: 14px;
	font-weight: 600;
	color: var(--s113-accent);
}

/* --------------------------------------------------------------------------
   11. /uslugi/ - hero ze zdjeciem, uslugi 2x2, dla kogo, jak dzialamy
   -------------------------------------------------------------------------- */

.s113-svc-hero--media {
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: wrap;
	align-items: center;
}

.s113-svc-hero__media {
	flex: 1.25 1 560px;
	min-width: 0;
	position: relative;
	aspect-ratio: 3 / 2;
	align-self: stretch;
	overflow: hidden;
	background-color: var(--s113-bg);
}

.s113-svc-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
	display: block;
}

.s113-svc-hero__media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, #29292b 0%, rgba(41, 41, 43, 0.55) 12%, rgba(41, 41, 43, 0) 30%);
}

.s113-svc-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(0deg, #29292b 0%, rgba(41, 41, 43, 0.7) 14%, rgba(41, 41, 43, 0) 36%);
}

.s113-svc-hero--media .s113-svc-hero__body {
	flex: 1 1 420px;
	min-width: 0;
	padding: clamp(28px, 5vw, 72px) clamp(20px, 5vw, 72px);
}

.s113-svc-hero--media .s113-svc-hero__title {
	font-size: clamp(42px, 5vw, 74px);
	line-height: 1.02;
}

.s113-svc-hero--media .s113-svc-hero__lead {
	max-width: 30em;
	color: #c9c5bd;
	font-size: clamp(16px, 1.25vw, 18px);
}

.s113-svc-hero--media .s113-svc-hero__actions {
	gap: 12px;
}

.s113-svc-hero--media .s113-svc-hero__actions .s113-pg-btn {
	flex: 1 1 auto;
}

/* /o-kancelarii/: projekt ma szersza kolumne zdjecia i wezsza kolumne tekstu. */
.s113-svc-hero--okancelarii .s113-svc-hero__media {
	flex: 1.5 1 600px;
}

.s113-svc-hero--okancelarii .s113-svc-hero__body {
	flex: 1 1 360px;
}

.s113-svc-hero--okancelarii .s113-svc-hero__title {
	font-size: clamp(52px, 6vw, 90px);
	line-height: 0.98;
}

.s113-svc-hero--okancelarii .s113-svc-hero__actions {
	margin-top: 36px;
}

/* Nazwiska osob na zdjeciu grupowym (hero /o-kancelarii/). */
.s113-svc-hero__names {
	position: absolute;
	left: 0;
	right: 0;
	bottom: clamp(14px, 2vw, 28px);
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	padding: 0 4%;
	text-align: center;
	font-size: clamp(11px, 1vw, 13px);
	line-height: 1.35;
}

.s113-svc-hero__name {
	display: block;
	font-weight: 600;
}

.s113-svc-hero__role {
	display: block;
	color: var(--s113-accent);
}

/* Uslugi 2x2 (/uslugi/). */
.s113-svc-services {
	max-width: var(--s113-container);
	margin: 0 auto;
	padding: clamp(56px, 7vw, 104px) clamp(20px, 5vw, 72px);
}

.s113-svcards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
	gap: clamp(12px, 1.6vw, 20px);
}

.s113-svcards > li {
	display: flex;
}

.s113-svcard {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 16px;
	background-color: var(--s113-surface);
	border: 1px solid var(--s113-line);
	padding: clamp(28px, 3.4vw, 52px);
	color: var(--s113-text);
	min-height: clamp(220px, 22vw, 300px);
}

.s113-svcard:hover,
.s113-svcard:focus-visible {
	background-color: var(--s113-surface-hover);
	border-color: var(--s113-accent);
	color: var(--s113-text);
}

.s113-svcard h3 {
	margin: 0;
	font-family: var(--s113-font-heading);
	font-weight: 500;
	font-size: clamp(32px, 3.2vw, 46px);
	line-height: 1.05;
}

.s113-svcard__no {
	font-family: var(--s113-font-heading);
	font-size: 28px;
	font-weight: 600;
	color: var(--s113-accent);
	line-height: 1;
}

.s113-svcard p {
	margin: 0;
	max-width: 30em;
	color: #c9c5bd;
	font-size: 16px;
	flex: 1;
	text-wrap: pretty;
}

.s113-svcard .s113-link-more {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 700;
	color: var(--s113-accent);
}

/* Dla kogo (/uslugi/). */
.s113-svc-audiences {
	background-color: var(--s113-bg-alt);
}

.s113-svc-audiences__grid {
	max-width: var(--s113-container);
	margin: 0 auto;
	padding: clamp(56px, 7vw, 104px) clamp(20px, 5vw, 72px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: clamp(16px, 2vw, 28px);
}

.s113-audience {
	background-color: var(--s113-surface);
	padding: clamp(28px, 3.2vw, 48px);
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.s113-audience__kicker {
	font-size: 12px;
	color: var(--s113-accent);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.s113-audience__title {
	margin: 0;
	font-family: var(--s113-font-heading);
	font-weight: 500;
	font-size: clamp(30px, 2.8vw, 40px);
	line-height: 1.08;
}

.s113-audience__text {
	margin: 0;
	color: var(--s113-text-muted);
	text-wrap: pretty;
}

.s113-audience__cta {
	margin-top: 8px;
	align-self: flex-start;
	padding: 13px 22px;
	font-size: 14px;
}

/* Jak dzialamy (/uslugi/, /o-kancelarii/). */
.s113-svc-how {
	background-color: var(--s113-light);
	color: var(--s113-bg);
}

.s113-svc-how--dark {
	background-color: var(--s113-bg);
	color: var(--s113-text);
}

.s113-svc-how__inner {
	max-width: var(--s113-container);
	margin: 0 auto;
	padding: clamp(56px, 7vw, 104px) clamp(20px, 5vw, 72px);
}

.s113-svc-how__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: end;
	gap: 16px 40px;
	margin-bottom: clamp(28px, 3.5vw, 48px);
}

.s113-svc-how__head p {
	margin: 0;
	max-width: 32em;
	color: var(--s113-ink-muted);
	text-wrap: pretty;
}

.s113-svc-how--dark .s113-svc-how__head p {
	color: var(--s113-text-muted);
	max-width: 34em;
}

.s113-svc-how__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(20px, 2.4vw, 32px);
}

.s113-svc-how__step {
	border-top: 2px solid var(--s113-accent);
	padding-top: 20px;
}

.s113-svc-how__no {
	font-family: var(--s113-font-heading);
	font-size: 44px;
	font-weight: 600;
	line-height: 1;
	color: #9a7a3e;
}

.s113-svc-how--dark .s113-svc-how__no {
	color: var(--s113-accent);
}

.s113-svc-how__title {
	display: block;
	margin: 14px 0 6px;
	font-family: var(--s113-font-body);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.6;
}

.s113-svc-how__text {
	margin: 0;
	color: var(--s113-ink-muted);
	font-size: 15px;
}

.s113-svc-how--dark .s113-svc-how__text {
	color: var(--s113-text-muted);
}

/* --------------------------------------------------------------------------
   12. /kontakt/ - karty kontaktowe, sekcja formularza, mapa, dane firmy
   -------------------------------------------------------------------------- */

.s113-svc-hero--kontakt .s113-svc-hero__inner {
	display: block;
	padding: clamp(40px, 6vw, 96px) clamp(20px, 5vw, 72px) clamp(40px, 5vw, 72px);
	max-width: none;
}

/* W projekcie sekcja hero /kontakt/ jest sama kontenerem 1296 px. */
.s113-svc-hero--kontakt {
	max-width: var(--s113-container);
	margin-inline: auto;
}

.s113-svc-hero--kontakt .s113-svc-hero__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: end;
	gap: 20px 64px;
}

.s113-svc-hero--kontakt .s113-svc-hero__body {
	flex: 1 1 420px;
	min-width: 0;
	padding: 0;
}

.s113-svc-hero--kontakt .s113-svc-hero__title {
	font-size: clamp(52px, 6.4vw, 96px);
	line-height: 0.95;
}

.s113-svc-hero--kontakt .s113-svc-hero__lead {
	flex: 1 1 380px;
	min-width: 0;
	max-width: 30em;
	margin: 0;
	color: #c9c5bd;
	font-size: clamp(16px, 1.3vw, 18px);
}

.s113-kontakt-cards {
	margin-top: clamp(32px, 4vw, 56px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 12px;
}

.s113-kontakt-card {
	display: flex;
	flex-direction: column;
	gap: 18px;
	background-color: var(--s113-surface);
	border: 1px solid var(--s113-line);
	color: var(--s113-text);
	padding: clamp(24px, 2.6vw, 36px);
	border-radius: var(--s113-radius);
	min-height: 170px;
}

.s113-kontakt-card:hover,
.s113-kontakt-card:focus-visible {
	border-color: var(--s113-accent);
	color: var(--s113-text);
}

.s113-kontakt-card--phone {
	background-color: var(--s113-accent);
	border-color: var(--s113-accent);
	color: var(--s113-ink);
}

.s113-kontakt-card--phone:hover,
.s113-kontakt-card--phone:focus-visible {
	background-color: var(--s113-accent-hover);
	color: var(--s113-ink);
}

.s113-kontakt-card__top {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.s113-kontakt-card__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.s113-kontakt-card:not(.s113-kontakt-card--phone) .s113-kontakt-card__label {
	color: var(--s113-accent);
}

.s113-kontakt-card__value {
	margin-top: auto;
	font-family: var(--s113-font-heading);
	font-weight: 600;
	font-size: clamp(34px, 3.2vw, 46px);
	line-height: 1;
	white-space: nowrap;
}

.s113-kontakt-card__value--mail {
	font-size: clamp(24px, 2.1vw, 30px);
	line-height: 1.15;
	white-space: normal;
	overflow-wrap: anywhere;
}

.s113-kontakt-card__value--adres {
	display: block;
	font-family: var(--s113-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	white-space: normal;
	overflow-wrap: anywhere;
}

.s113-kontakt-card__street {
	display: block;
	font-family: var(--s113-font-heading);
	font-weight: 600;
	font-size: clamp(24px, 2.1vw, 30px);
	line-height: 1.15;
	margin-bottom: 6px;
}

.s113-kontakt-card__city {
	display: block;
	color: inherit;
}

/* Sekcja formularza /kontakt/. */
.s113-svc-form {
	background-color: var(--s113-bg-alt);
	border-top: 1px solid var(--s113-line);
}

.s113-svc-form__inner {
	max-width: var(--s113-container);
	margin: 0 auto;
	padding: clamp(48px, 6vw, 96px) clamp(20px, 5vw, 72px);
	display: flex;
	flex-wrap: wrap;
	gap: clamp(24px, 3.5vw, 56px);
	align-items: flex-start;
}

.s113-svc-form__panel {
	flex: 1.15 1 480px;
	min-width: 0;
	background-color: var(--s113-surface);
	padding: clamp(24px, 3.4vw, 52px);
}

.s113-svc-form__panel .s113-pg-kicker {
	margin-bottom: 24px;
}

.s113-kontakt-figure {
	flex: 1 1 400px;
	min-width: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.s113-kontakt-figure__media {
	position: relative;
	aspect-ratio: 1853 / 1236;
	overflow: hidden;
	background-color: #1c1c1e;
}

.s113-kontakt-figure__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.s113-kontakt-figure__caption {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	font-size: 13px;
	line-height: 1.4;
}

.s113-kontakt-figure__name {
	display: block;
	font-weight: 700;
}

.s113-kontakt-figure__caption > div {
	min-width: 0;
	overflow-wrap: anywhere;
}

.s113-kontakt-figure__role {
	display: block;
	color: var(--s113-text-muted);
}

.s113-kontakt-figure__role--lead {
	color: var(--s113-accent);
}

.s113-kontakt-figure__motto {
	margin: 0;
	padding-top: 18px;
	border-top: 1px solid var(--s113-line);
	font-family: var(--s113-font-heading);
	font-style: italic;
	font-weight: 600;
	font-size: clamp(24px, 2.2vw, 30px);
	color: var(--s113-accent);
}

/* Mapa /kontakt/. */
.s113-svc-map {
	max-width: var(--s113-container);
	margin: 0 auto;
	padding: clamp(48px, 6vw, 96px) clamp(20px, 5vw, 72px) 0;
}

.s113-svc-map__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px 32px;
	margin-bottom: 20px;
}

.s113-svc-map__title {
	margin: 0;
	font-family: var(--s113-font-heading);
	font-weight: 500;
	font-size: clamp(28px, 2.6vw, 38px);
	line-height: 1.1;
}

.s113-svc-map__link {
	font-weight: 700;
	font-size: 14px;
	border-bottom: 1px solid var(--s113-accent);
	padding-bottom: 3px;
}

.s113-contact__map {
	position: relative;
	height: clamp(380px, 36vw, 560px);
	background-color: #1c1c1e;
	border: 1px solid var(--s113-line);
	overflow: hidden;
}

/*
 * Tlo placeholdera zablokowanej mapy: siatka jak w projekcie (zamiast obrazu
 * Complianz, ktory byl elementem LCP). Bez zmian w mechanizmie wtyczki.
 */
.s113-contact__map:has(.cmplz-blocked-content-container),
.s113-contact__map.is-blocked {
	background-image:
		repeating-linear-gradient(0deg, transparent 0 47px, #262628 47px 48px),
		repeating-linear-gradient(90deg, transparent 0 47px, #262628 47px 48px);
}

.s113-contact__map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/*
 * Placeholder zablokowanej mapy (/kontakt/).
 *
 * Tekst i mechanizm akceptacji pochodza z Complianz (przycisk w part
 * page-map-placeholder ma jego klasy i atrybuty). Chowany jest natywny
 * przycisk wtyczki, a pokazywana karta z projektu. Po udzieleniu zgody
 * Complianz zdejmuje klase cmplz-blocked-content-container i karta znika.
 */
.s113-contact__map .cmplz-blocked-content-container {
	background-image: none !important;
	background-color: transparent !important;
}

.s113-contact__map .cmplz-blocked-content-notice {
	display: none !important;
}

.s113-map-block {
	position: absolute;
	inset: 0;
	display: none;
	place-items: center;
	padding: 20px;
}

.s113-contact__map:has(.cmplz-blocked-content-container) .s113-map-block,
.s113-contact__map.is-blocked .s113-map-block {
	display: grid;
}

.s113-map-block__card {
	max-width: 440px;
	background-color: var(--s113-bg);
	border: 1px solid #3d3d40;
	padding: clamp(24px, 3vw, 36px);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.s113-map-block__icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid var(--s113-accent);
	display: grid;
	place-items: center;
	color: var(--s113-accent);
}

.s113-map-block__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: #c9c5bd;
	text-wrap: pretty;
}

.s113-map-block__btn {
	background-color: var(--s113-accent);
	border: 0;
	color: var(--s113-ink);
	padding: 14px 22px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	border-radius: var(--s113-radius);
	cursor: pointer;
}

.s113-map-block__btn:hover,
.s113-map-block__btn:focus-visible {
	background-color: var(--s113-accent-hover);
	color: var(--s113-ink);
}

.s113-map-block__settings {
	background: none;
	border: 0;
	padding: 0;
	font-family: inherit;
	font-size: 13px;
	color: var(--s113-text-muted);
	text-decoration: underline;
	cursor: pointer;
}

.s113-map-block__settings:hover,
.s113-map-block__settings:focus-visible {
	color: var(--s113-text);
}

/* Dane firmy /kontakt/. */
.s113-svc-dane {
	max-width: var(--s113-container);
	margin: 0 auto;
	padding: clamp(40px, 5vw, 72px) clamp(20px, 5vw, 72px) clamp(56px, 7vw, 104px);
}

.s113-dane {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	border-top: 1px solid var(--s113-line);
}

.s113-dane__item {
	padding: 22px 24px 22px 0;
	border-bottom: 1px solid var(--s113-line);
}

.s113-dane__item dt {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--s113-accent);
}

.s113-dane__item dd {
	margin: 8px 0 0;
	font-size: 16px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   13. /o-kancelarii/ - bio, misja, specjalizacja, zespol
   -------------------------------------------------------------------------- */

.s113-svc-bio {
	background-color: var(--s113-light);
	color: var(--s113-bg);
}

.s113-svc-bio__inner {
	max-width: var(--s113-container);
	margin: 0 auto;
	padding: clamp(56px, 7vw, 112px) clamp(20px, 5vw, 72px);
	display: flex;
	flex-wrap: wrap;
	gap: clamp(32px, 5vw, 88px);
	align-items: center;
}

.s113-svc-bio__figure {
	flex: 1 1 400px;
	min-width: 0;
	margin: 0;
}

.s113-svc-bio__media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background-color: var(--s113-bg);
}

.s113-svc-bio__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 52% 20%;
	display: block;
}

.s113-svc-bio__badge {
	position: absolute;
	left: 0;
	bottom: 0;
	background-color: var(--s113-accent);
	color: var(--s113-ink);
	padding: 14px 20px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1.35;
}

.s113-svc-bio__caption {
	margin-top: 14px;
	display: flex;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	font-size: 14px;
}

.s113-svc-bio__caption-name {
	font-weight: 700;
}

.s113-svc-bio__caption-role {
	color: var(--s113-ink-muted);
}

.s113-svc-bio__body {
	flex: 1.15 1 460px;
	min-width: 0;
	max-width: 720px;
}

.s113-svc-bio__body p {
	margin: 24px 0 0;
	font-size: 17px;
	color: #3d3b38;
	text-wrap: pretty;
}

.s113-svc-bio__body p + p {
	margin-top: 16px;
}

.s113-svc-mission {
	background-color: var(--s113-bg);
}

.s113-svc-mission__inner {
	max-width: var(--s113-container);
	margin: 0 auto;
	padding: clamp(56px, 7vw, 112px) clamp(20px, 5vw, 72px);
	display: flex;
	flex-wrap: wrap;
	gap: clamp(32px, 5vw, 80px);
	align-items: stretch;
}

.s113-svc-mission__text {
	flex: 1 1 440px;
	min-width: 0;
	max-width: 640px;
}

.s113-svc-mission__text p {
	margin: 24px 0 0;
	font-size: 17px;
	color: #c9c5bd;
	text-wrap: pretty;
}

.s113-svc-mission__text p + p {
	margin-top: 16px;
}

.s113-svc-mission__tiles {
	flex: 1 1 420px;
	min-width: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 12px;
}

.s113-svc-tile {
	background-color: var(--s113-surface);
	border: 1px solid var(--s113-line);
	padding: clamp(28px, 3vw, 44px);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 10px;
	min-height: 240px;
}

.s113-svc-tile__value {
	font-family: var(--s113-font-heading);
	font-weight: 500;
	font-size: clamp(72px, 7.5vw, 112px);
	line-height: 0.9;
	color: var(--s113-accent);
}

.s113-svc-tile--wide .s113-svc-tile__value {
	font-style: italic;
	font-size: clamp(44px, 4.4vw, 64px);
	line-height: 0.95;
}

.s113-svc-tile__label {
	font-size: 17px;
	font-weight: 600;
}

/* Kafel linkujacy do wizytowki Google (E10e, /o-kancelarii/). */
.s113-svc-tile__link {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 10px;
	flex: 1;
	color: inherit;
	text-decoration: none;
}

.s113-svc-tile__link:hover .s113-svc-tile__value,
.s113-svc-tile__link:focus-visible .s113-svc-tile__value {
	text-decoration: underline;
}

.s113-svc-spec {
	background-color: var(--s113-light);
	color: var(--s113-bg);
}

.s113-svc-spec__inner {
	max-width: var(--s113-container);
	margin: 0 auto;
	padding: clamp(56px, 7vw, 112px) clamp(20px, 5vw, 72px);
}

.s113-svc-spec__head {
	max-width: 760px;
	margin-bottom: clamp(28px, 3.5vw, 48px);
}

.s113-svc-spec__head p {
	margin: 18px 0 0;
	font-size: 17px;
	color: #3d3b38;
	text-wrap: pretty;
}

.s113-svc-spec__cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: clamp(12px, 1.6vw, 20px);
}

.s113-svc-spec__cards > li {
	display: flex;
}

.s113-svc-spec__card {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 16px;
	background-color: var(--s113-bg);
	color: var(--s113-text);
	padding: clamp(28px, 3.4vw, 52px);
}

.s113-svc-spec__card:hover,
.s113-svc-spec__card:focus-visible {
	background-color: var(--s113-surface);
	color: var(--s113-text);
}

.s113-svc-spec__card h3 {
	margin: 0;
	font-family: var(--s113-font-heading);
	font-weight: 500;
	font-size: clamp(32px, 3.2vw, 46px);
	line-height: 1.05;
}

.s113-svc-spec__card p {
	margin: 0;
	color: #c9c5bd;
	flex: 1;
	text-wrap: pretty;
}

.s113-svc-spec__more {
	font-size: 15px;
	font-weight: 700;
	color: var(--s113-accent);
}

/* Zespol /o-kancelarii/ - ciemna sekcja z kartami 4:5. */
.s113-svc-squad {
	background-color: var(--s113-bg-alt);
}

.s113-svc-squad__inner {
	max-width: var(--s113-container);
	margin: 0 auto;
	padding: clamp(56px, 7vw, 112px) clamp(20px, 5vw, 72px);
}

.s113-svc-squad__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: end;
	gap: 20px 48px;
	margin-bottom: clamp(32px, 4vw, 56px);
}

.s113-svc-squad__intro {
	flex: 1 1 520px;
	min-width: 0;
	max-width: 760px;
}

.s113-svc-squad__intro h2 {
	margin: 0;
	font-family: var(--s113-font-heading);
	font-weight: 500;
	font-size: clamp(36px, 4vw, 58px);
	line-height: 1.05;
	text-wrap: balance;
}

.s113-svc-squad__intro p:not(.s113-pg-motto) {
	margin: 18px 0 0;
	max-width: 40em;
	color: var(--s113-text-muted);
	font-size: 17px;
	text-wrap: pretty;
}

.s113-svc-squad__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: clamp(16px, 2vw, 28px);
}

.s113-svc-squad__card {
	background-color: var(--s113-surface);
	display: flex;
	flex-direction: column;
}

.s113-svc-squad__media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background-color: #1c1c1e;
	margin: 0;
}

.s113-svc-squad__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.s113-svc-squad__media::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 30%;
	background: linear-gradient(0deg, #2f2f32 0%, rgba(47, 47, 50, 0) 100%);
}

.s113-svc-squad__body {
	padding: 4px clamp(20px, 2vw, 28px) clamp(24px, 2.4vw, 32px);
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.s113-svc-squad__name {
	margin: 0;
	font-family: var(--s113-font-heading);
	font-weight: 600;
	font-size: clamp(28px, 2.4vw, 34px);
	line-height: 1.1;
}

.s113-svc-squad__role {
	color: var(--s113-accent);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.4;
}

.s113-svc-squad__role2 {
	font-size: 14px;
	line-height: 1.4;
}

.s113-svc-squad__text {
	margin: 10px 0 0;
	color: var(--s113-text-muted);
	font-size: 15px;
	text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   14. WPForms w sekcjach kontaktowych podstron
   -------------------------------------------------------------------------- */

/*
 * Wyglad formularza jak w projekcie (E10d).
 *
 * WPForms renderuje na froncie wlasne style ("render-modern") z selektorami
 * opartymi o ID formularza (#wpforms-3443 ...), ktore maja wyzsza specyficznosc
 * niz klasy motywu. Dlatego warstwe wizualna nadpisujemy !important - nie
 * zmieniamy przy tym konfiguracji formularza ani pol (AGENTS.md, sekcja 2.4).
 */
.s113-svc-contact__panel .wpforms-container,
.s113-svc-form__panel .wpforms-container {
	margin: 0 !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}

.s113-svc-contact__panel .wpforms-title,
.s113-svc-contact__panel .wpforms-description,
.s113-svc-form__panel .wpforms-title,
.s113-svc-form__panel .wpforms-description {
	display: none;
}

/*
 * Jedna siatka na wszystkie pola (jak w projekcie): imie i nazwisko pelna
 * szerokosc, e-mail + telefon w jednym wierszu, temat i wiadomosc pelna
 * szerokosc. WPForms opakowuje pola w wlasne layout/row/column, dlatego
 * rozbijamy te opakowania (display: contents), a kolejnosc pol zostaje
 * taka, jak w formularzu (imie, e-mail, telefon, temat, wiadomosc).
 */
.s113-svc-contact__panel .wpforms-field-container,
.s113-svc-form__panel .wpforms-field-container {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
	gap: 14px !important;
}

.s113-svc-contact__panel .wpforms-field-layout,
.s113-svc-contact__panel .wpforms-field-layout-rows,
.s113-svc-contact__panel .wpforms-layout-row,
.s113-svc-contact__panel .wpforms-layout-column,
.s113-svc-form__panel .wpforms-field-layout,
.s113-svc-form__panel .wpforms-field-layout-rows,
.s113-svc-form__panel .wpforms-layout-row,
.s113-svc-form__panel .wpforms-layout-column {
	display: contents !important;
}

.s113-svc-contact__panel .wpforms-field,
.s113-svc-form__panel .wpforms-field {
	padding: 0 !important;
	min-width: 0;
}

/* Pola pelnej szerokosci i pola w polowie wiersza. */
.s113-svc-contact__panel .wpforms-field-text,
.s113-svc-contact__panel .wpforms-field-select,
.s113-svc-contact__panel .wpforms-field-textarea,
.s113-svc-form__panel .wpforms-field-text,
.s113-svc-form__panel .wpforms-field-select,
.s113-svc-form__panel .wpforms-field-textarea {
	grid-column: 1 / -1;
}

.s113-svc-contact__panel .wpforms-field-email,
.s113-svc-contact__panel .wpforms-field-phone,
.s113-svc-form__panel .wpforms-field-email,
.s113-svc-form__panel .wpforms-field-phone {
	grid-column: span 1;
}

/*
 * Etykiety: WPForms ma je ukryte (klasa wpforms-label-hide) - odkrywamy je
 * CSS-em, bez zmiany konfiguracji formularza.
 */
.s113-svc-contact__panel .wpforms-field-label,
.s113-svc-form__panel .wpforms-field-label {
	display: block !important;
	position: static !important;
	width: auto !important;
	height: auto !important;
	margin: 0 0 6px !important;
	padding: 0 !important;
	clip: auto !important;
	clip-path: none !important;
	overflow: visible !important;
	white-space: normal !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	color: #c9c5bd !important;
}

.s113-svc-contact__panel .wpforms-required-label,
.s113-svc-form__panel .wpforms-required-label {
	color: var(--s113-accent) !important;
}

/* Pola: ciemne tlo, cienka obwodka, jasny tekst - jak w projekcie. */
.s113-svc-contact__panel input.wpforms-field-medium,
.s113-svc-contact__panel select.wpforms-field-medium,
.s113-svc-contact__panel textarea.wpforms-field-medium,
.s113-svc-form__panel input.wpforms-field-medium,
.s113-svc-form__panel select.wpforms-field-medium,
.s113-svc-form__panel textarea.wpforms-field-medium {
	max-width: 100% !important;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	background-color: var(--s113-bg) !important;
	background-image: none !important;
	border: 1px solid #444447 !important;
	color: var(--s113-text) !important;
	padding: 14px !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	border-radius: var(--s113-radius) !important;
	outline: none !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
}

/* Projekt nie pokazuje placeholderow - etykiety sa nad polami. */
.s113-svc-contact__panel .wpforms-field ::placeholder,
.s113-svc-form__panel .wpforms-field ::placeholder {
	color: transparent !important;
	opacity: 0 !important;
}

.s113-svc-contact__panel textarea.wpforms-field-medium,
.s113-svc-form__panel textarea.wpforms-field-medium {
	resize: vertical;
}

/*
 * WPForms nie ustawia polu "Wiadomość" liczby wierszy, a projekt ma tam
 * wysokosc ok. 5-6 wierszy. Bez tego formularz byl o ok. 100 px nizszy niz
 * w projekcie i przesuwal zdjecie zespolu na /kontakt/.
 */
.s113-svc-contact__panel textarea.wpforms-field-medium,
.s113-svc-form__panel textarea.wpforms-field-medium {
	min-height: 165px !important;
}

/* Wlasna strzalka listy rozwijanej (bez natywnego wygladu przegladarki). */
.s113-svc-contact__panel select.wpforms-field-medium,
.s113-svc-form__panel select.wpforms-field-medium {
	appearance: none !important;
	background-image: linear-gradient(45deg, transparent 50%, #b9b5ad 50%), linear-gradient(135deg, #b9b5ad 50%, transparent 50%) !important;
	background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50% !important;
	background-size: 6px 6px, 6px 6px !important;
	background-repeat: no-repeat !important;
	padding-right: 44px !important;
}

.s113-svc-contact__panel select.wpforms-field-medium option,
.s113-svc-form__panel select.wpforms-field-medium option {
	background-color: var(--s113-bg);
	color: var(--s113-text);
}

.s113-svc-contact__panel input.wpforms-field-medium:focus,
.s113-svc-contact__panel select.wpforms-field-medium:focus,
.s113-svc-contact__panel textarea.wpforms-field-medium:focus,
.s113-svc-form__panel input.wpforms-field-medium:focus,
.s113-svc-form__panel select.wpforms-field-medium:focus,
.s113-svc-form__panel textarea.wpforms-field-medium:focus {
	border-color: var(--s113-accent) !important;
}

.s113-svc-contact__panel .wpforms-submit-container,
.s113-svc-form__panel .wpforms-submit-container {
	padding: 14px 0 0 !important;
}

/* Zloty, pelny przycisk "Wyslij zgloszenie". */
.s113-svc-contact__panel .wpforms-submit,
.s113-svc-form__panel .wpforms-submit {
	width: 100% !important;
	background-color: var(--s113-accent) !important;
	background-image: none !important;
	border: 0 !important;
	color: var(--s113-ink) !important;
	padding: 17px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	letter-spacing: 0 !important;
	border-radius: var(--s113-radius) !important;
	box-shadow: none !important;
	text-transform: none !important;
	cursor: pointer;
}

.s113-svc-contact__panel .wpforms-submit:hover,
.s113-svc-contact__panel .wpforms-submit:focus-visible,
.s113-svc-form__panel .wpforms-submit:hover,
.s113-svc-form__panel .wpforms-submit:focus-visible {
	background-color: var(--s113-accent-hover) !important;
	color: var(--s113-ink) !important;
}

.s113-svc-form__panel .wpforms-submit {
	padding: 18px !important;
	font-size: 16px !important;
}

.s113-svc-contact__panel .wpforms-confirmation-container-full,
.s113-svc-form__panel .wpforms-confirmation-container-full {
	background-color: transparent !important;
	border: 0 !important;
	color: var(--s113-text) !important;
	padding: 0 !important;
}

/*
 * Potwierdzenie wysylki WPForms nie moze schowac sie pod przyklejonym paskiem
 * mobilnym ani pod naglowkiem po automatycznym przewinieciu.
 */
.wpforms-confirmation-container-full {
	scroll-margin-top: 96px;
	scroll-margin-bottom: 96px;
}

/* --------------------------------------------------------------------------
   15. Szerokie ekrany (>= 960 px)
   -------------------------------------------------------------------------- */

@media (min-width: 960px) {
	/* Etapy postępowania: 6 kolumn z poziomymi lacznikami. */
	.s113-svc-steps__list {
		display: grid;
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 24px;
	}

	.s113-svc-step {
		display: flex;
		flex-direction: column;
		gap: 14px;
	}

	.s113-svc-step__rail {
		display: block;
		flex: 0 0 auto;
		align-self: auto;
	}

	.s113-svc-step__no {
		width: 48px;
		height: 48px;
		font-size: 24px;
	}

	.s113-svc-step__conn {
		position: absolute;
		top: 24px;
		left: 60px;
		right: -24px;
		flex: 0 0 auto;
		width: auto;
		height: 1px;
		margin: 0;
	}

	.s113-svc-step__body {
		padding: 0;
		gap: 0;
	}

	.s113-svc-step__title {
		margin-top: 6px;
		font-size: 16px;
		text-wrap: balance;
	}

	.s113-svc-step__text {
		margin: 8px 0 0;
		font-size: 14px;
		line-height: 1.6;
	}

	/* Uslugi 2x2 na stale dwie kolumny. */
	.s113-svc-services .s113-svcards,
	.s113-svc-spec__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}