/* ================================================================
   SILEGOLD — design 2026 wg projektów graficznych (katalog new/)
   Paleta: czerń z zielonym podtonem + zieleń #8aac55, jasne sekcje.
   Typografia: Archivo (nagłówki, wersaliki) + Barlow (tekst).
   Ładowany po style.css — świadomie nadpisuje stary wygląd.
   ================================================================ */

:root {
	--ink: #0e120c;
	--ink-2: #131810;
	--ink-3: #1b2115;
	--accent: #8aac55;
	--accent-strong: #6f8f43;
	--accent-deep: #5d7a37;
	--paper: #f4f5f1;
	--card: #ffffff;
	--line: #e5e8df;
	--line-dark: rgba(255,255,255,.08);
	--body-c: #4a5044;
	--muted: #7c8271;
	--on-dark: rgba(255,255,255,.72);
	--radius: 8px;
	/* Czcionka ogólna tekstów i menu: Didact Gothic — wymóg klienta, zgodnie ze starą stroną.
	   Didact Gothic ma tylko wagę 400, więc wszystkie pogrubienia są syntetyzowane przez przeglądarkę. */
	--font-display: 'Didact Gothic', 'Syne', sans-serif;
	--font-body: 'Didact Gothic', sans-serif;
}

/* ---------- Baza typograficzna ---------- */
body {
	font-family: var(--font-body);
	font-size: 18.5px;
	line-height: 1.65;
	color: var(--body-c);
	background: #fff;
}
h1, h2, h3, h4, h5, h6,
.section-title, .navbar, .button-primary, .button-secondary {
	font-family: var(--font-display);
}
h1, h2, h3 { letter-spacing: -.01em; }
p { color: var(--body-c); }

.sg-eyebrow {
	display: block;
	font-family: var(--font-display);
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--accent-strong);
	margin-bottom: 14px;
}
.sg-eyebrow:before { content: "— "; }
.sg-h2 {
	font-size: clamp(28.5px, 3.49vw, 42px);
	font-weight: 800;
	text-transform: none;
	color: #171c13;
	line-height: 1.15;
	margin-bottom: 18px;
}
.sg-dark .sg-h2 { color: #fff; }
.sg-dark .sg-eyebrow { color: var(--accent); }
.sg-dark p { color: var(--on-dark); }
.sg-lead { font-size: 19.5px; color: var(--muted); max-width: 640px; }

/* Odstępy między sekcjami zmniejszone na życzenie klienta (18.08.2026):
   95 → 62 px i 65 → 44 px. Wcześniejsze wartości pochodziły z mockupów, które są
   znacznie dłuższe niż realna strona z pełną treścią. */
.sg-section { padding: 62px 0; }
.sg-section-sm { padding: 44px 0; }
.sg-paper { background: var(--paper); }
.sg-dark { background: var(--ink-2); }
.sg-darker { background: var(--ink); }

/* stary system tytułów sekcji — dopasowanie */
.section-title { font-weight: 800; }
.section-title span { color: var(--accent-strong); }
.bg-gray { background: var(--paper); }

/* ---------- Przyciski ---------- */
.button-primary, .button-secondary,
.sg-btn {
	display: inline-block;
	padding: 15px 28px;
	border-radius: 5px;
	border: 1px solid transparent;
	background: var(--accent-strong);
	color: #fff !important;
	font-family: var(--font-display);
	font-size: 16.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1;
	transition: background .25s, border-color .25s, color .25s;
	cursor: pointer;
}
.button-primary:after, .sg-btn:after { content: "  →"; white-space: pre; }
.button-primary:hover, .button-secondary:hover, .sg-btn:hover {
	background: var(--accent-deep);
	border-color: transparent;
	color: #fff !important;
}
.sg-btn-ghost {
	background: transparent;
	border-color: rgba(255,255,255,.35);
}
.sg-btn-ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.sg-btn-dark { background: var(--ink); }
.sg-btn-dark:hover { background: var(--ink-3); }

/* ---------- Navbar ---------- */
.navbar {
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	height: 76px;
	background: var(--ink);
	border-bottom: 1px solid var(--line-dark);
	z-index: 999;
	padding: 0;
}
/* Stary motyw chowa .nav-scroll nad ekranem (top: -100px) i wysuwa go z powrotem
   przez transform: translateY(100px). Nadpisujemy top na 0, więc ten sam transform
   spychał navbar 100 px PONIŻEJ krawędzi okna — wyglądało to jak „menu się nie przykleja".
   Kasujemy transform, inaczej top: 0 nic nie da. */
.nav-scroll {
	background: var(--ink);
	height: 76px;
	top: 0;
	-webkit-transform: none;
	transform: none;
	box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
.navbar .container { display: flex; align-items: center; height: 76px; }
.navbar .logo { margin-right: 30px; }
/* Logotyp klienta jako obrazek — stary motyw ukrywał <img> w logo, bo wcześniej
   napis był składany z tekstu (.sg-wordmark). */
.navbar .logo img { display: block; }
.sg-logo { display: inline-block; line-height: 0; }
.sg-logo img { height: 46px; width: auto; max-width: 100%; }
.sg-wordmark { display: inline-block; line-height: 1.05; white-space: nowrap; }
.sg-wordmark .wm-main {
	font-family: var(--font-display);
	font-size: 27.5px;
	font-weight: 800;
	letter-spacing: .04em;
	color: #fff;
	text-transform: uppercase;
	display: block;
}
.sg-wordmark .wm-main b { color: var(--accent); font-weight: 800; }
.sg-wordmark .wm-sub {
	display: block;
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .3em;
	color: rgba(255,255,255,.55);
	text-transform: uppercase;
	margin-top: 3px;
}
.navbar .navbar-nav { align-items: center; }
.navbar .navbar-nav .nav-link, .navbar .navbar-nav a { white-space: nowrap; }
@media screen and (min-width: 1200px) {
	.navbar .navbar-nav > .nav-item { display: flex; align-items: center; height: 76px; position: relative; }
	/* aktywna zakładka — zielone podkreślenie jak w projekcie */
	.navbar .navbar-nav > .current-menu-item > a,
	.navbar .navbar-nav > .current_page_item > a,
	.navbar .navbar-nav > .current-menu-ancestor > a,
	.navbar .navbar-nav > .current_page_ancestor > a,
	.navbar .navbar-nav > .current-menu-parent > a {
		color: var(--accent) !important;
		box-shadow: inset 0 -2px 0 0 var(--accent);
		padding-bottom: 8px;
	}
	.navbar .navbar-nav > .nav-item > a {
		position: relative;
		padding-bottom: 8px;
		box-shadow: inset 0 0 0 0 transparent;
		transition: color .25s, box-shadow .25s;
	}
	.navbar .navbar-nav > .nav-item > a:hover { box-shadow: inset 0 -2px 0 0 var(--accent); }
}

/* rozwijane podmenu (Oferta) */
.navbar .sub-menu-toggle { display: none !important; }
.navbar .navbar-nav .menu-item-has-children > a:after {
	content: "▾";
	font-size: 12.5px;
	margin-left: 6px;
	color: var(--accent);
}
.navbar .navbar-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: -6px;
	min-width: 240px;
	background: var(--ink-2);
	border: 1px solid var(--line-dark);
	border-top: 2px solid var(--accent-strong);
	border-radius: 0 0 6px 6px;
	padding: 10px 0;
	margin: 0;
	list-style: none;
	z-index: 1001;
	box-shadow: 0 18px 40px rgba(0,0,0,.45);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.navbar .navbar-nav > .menu-item-has-children:hover > .sub-menu,
.navbar .navbar-nav > .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.navbar .navbar-nav .sub-menu .nav-item { display: block; height: auto; }
.navbar .navbar-nav .sub-menu a {
	display: block;
	padding: 9px 20px;
	margin: 0;
	font-size: 15.5px;
	letter-spacing: .06em;
	text-align: left;
	color: rgba(255,255,255,.8);
}
.navbar .navbar-nav .sub-menu a:hover { color: var(--accent); background: rgba(255,255,255,.04); }
@media screen and (max-width: 1199.98px) {
	.navbar .navbar-nav > .nav-item { display: block; height: auto; }
	.navbar .navbar-nav .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		border: 0;
		box-shadow: none;
		background: transparent;
		padding: 0 0 4px 16px;
		min-width: 0;
	}
}

#realizacje { scroll-margin-top: 90px; }
.navbar .navbar-nav .nav-link, .navbar .navbar-nav a {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255,255,255,.85);
	margin: 0 11px;
	padding: 6px 0;
}
.navbar .navbar-nav .nav-link:hover, .navbar .navbar-nav a:hover { color: var(--accent); }
.navbar .navbar-nav .active,
.nav-scroll .navbar-nav .active { color: var(--accent) !important; }
.nav-scroll .navbar-nav .nav-link, .nav-scroll .navbar-nav a { color: rgba(255,255,255,.85); }
.nav-scroll .navbar-nav .nav-link:hover, .nav-scroll .navbar-nav a:hover { color: var(--accent); }
.navbar .navbar-toggler { border: 0; }
.navbar .icon-bar, .navbar-toggler-icon i { color: #fff; }

/* telefon + CTA w navbarze */
.nav-phone { display: flex; align-items: center; gap: 10px; margin: 0 18px 0 22px; white-space: nowrap; }
.nav-phone .nav-phone-icon {
	width: 38px; height: 38px; min-width: 38px;
	border: 1px solid rgba(255,255,255,.25);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	color: var(--accent);
	font-size: 18.5px;
}
.nav-phone a.nav-phone-number {
	display: block;
	color: #fff !important;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 18.5px;
	letter-spacing: .02em;
	line-height: 1.15;
	margin: 0;
	text-transform: none;
}
.nav-phone .nav-phone-hours { display: block; color: rgba(255,255,255,.5); font-size: 14px; line-height: 1.2; font-family: var(--font-body); letter-spacing: .02em; }
.nav-cta { margin-left: 4px; }
.nav-cta .sg-btn { padding: 13px 20px; font-size: 14.5px; }
.nav-scroll .nav-phone a.nav-phone-number { color: #fff !important; }
.nav-scroll .nav-phone .nav-phone-hours { color: rgba(255,255,255,.5); }
.nav-scroll .nav-phone .nav-phone-icon { border-color: rgba(255,255,255,.25); color: var(--accent); }

@media screen and (min-width: 1200px) and (max-width: 1459px) {
	.navbar .navbar-nav .nav-link, .navbar .navbar-nav a { font-size: 12.5px; margin: 0 8px; }
	.nav-phone { margin: 0 12px 0 14px; gap: 9px; }
	/* Godziny zostają widoczne — klient prosił, żeby były czytelne, a po wypadnięciu
	   zakładki „Realizacje" pasek ma na nie miejsce nawet przy 1200 px. */
	.nav-phone .nav-phone-hours { display: block; font-size: 12px; }
	.nav-cta .sg-btn { padding: 13px 15px; font-size: 14px; }
	.navbar .logo { margin-right: 16px; }
}
@media screen and (max-width: 1199.98px) {
	.navbar { height: 66px; }
	.navbar .container { height: 66px; }
	.navbar .collapse.navbar-collapse, .navbar .collapsing.navbar-collapse {
		position: absolute;
		top: 66px; left: 0; right: 0;
		background: var(--ink);
		padding: 15px 20px 25px;
		border-bottom: 1px solid var(--line-dark);
		max-height: calc(100vh - 66px);
		overflow-y: auto;
	}
	.navbar .navbar-nav { align-items: flex-start; display: block; }
	.navbar .navbar-nav .nav-link, .navbar .navbar-nav a { text-align: left; margin: 6px 0; display: block; }
	.nav-phone { margin: 14px 0 12px; }
	.nav-cta { margin: 0; }
	.sg-wordmark .wm-main { font-size: 23px; }
}

/* ---------- Hero: strona główna ---------- */
.sg-hero {
	position: relative;
	background: var(--ink);
	overflow: hidden;
	margin-top: 76px;
}
.sg-hero .video-background {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}
.sg-hero .video-background iframe {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 100vw;
	height: 56.25vw;
	min-height: 100%;
	min-width: 177.77vh;
	pointer-events: none;
}

/* ---------- Hero z filmem ----------
   Film klienta jest PIONOWY (9:16), a hero ma proporcje panoramiczne. Rozciągnięcie go
   na całą szerokość daje czarne pasy po bokach, a kadrowanie „cover" pokazuje ok. 1/4
   wysokości kadru w ogromnym powiększeniu — ciemna, rozmyta breja. Oba warianty sprawdzone
   i odrzucone. Dlatego film gra jako panel po prawej stronie, w swoich natywnych proporcjach,
   a tłem zostaje zdjęcie placu — kompozycja jak w mockupie: tekst z lewej, obraz z prawej.
   Po dostarczeniu materiału 16:9 wystarczy usunąć tę sekcję, żeby wrócić do filmu pełnoekranowego. */
.sg-hero-video .video-background iframe {
	top: 50%;
	left: auto;
	right: 5%;
	transform: translateY(-50%);
	height: 80%;
	width: auto;
	aspect-ratio: 9 / 16;
	min-width: 0;
	min-height: 0;
	border-radius: 10px;
	box-shadow: 0 30px 70px rgba(0,0,0,.55);
}
/* Przyciemnienie mocniejsze z lewej, żeby nagłówek został czytelny na zdjęciu,
   a jaśniejsze z prawej, gdzie siedzi film. */
.sg-hero-video .hero-shade {
	background: linear-gradient(90deg,
		rgba(14,18,12,.92) 0%,
		rgba(14,18,12,.75) 45%,
		rgba(14,18,12,.35) 100%);
}
@media screen and (max-width: 1199px) {
	.sg-hero-video .video-background { display: none; }
}
.sg-hero .hero-photo {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center right;
}
.sg-hero .hero-shade {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(10,13,8,.97) 0%, rgba(10,13,8,.86) 34%, rgba(10,13,8,.28) 62%, rgba(10,13,8,.05) 100%);
}
.sg-hero .hero-inner { position: relative; z-index: 2; padding-top: 130px; padding-bottom: 120px; }
.sg-hero .sg-eyebrow { color: var(--accent); }
.sg-hero h1 {
	font-family: var(--font-display);
	font-size: clamp(37.5px, 5.01vw, 64px);
	font-weight: 800;
	line-height: 1.06;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 24px;
	letter-spacing: .01em;
}
.sg-hero h1 .hl { color: var(--accent); }
.sg-hero .hero-lead {
	font-size: 19.5px;
	color: rgba(255,255,255,.78);
	max-width: 480px;
	margin-bottom: 32px;
}
.sg-hero .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* pasek USP pod hero */
.sg-usp { background: #0a0d08; border-top: 1px solid var(--line-dark); position: relative; z-index: 2; }
.sg-usp .usp-row { display: grid; grid-template-columns: repeat(4, 1fr); }
.sg-usp .usp-item {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 26px 25px;
	border-left: 1px solid var(--line-dark);
}
.sg-usp .usp-item:first-child { border-left: 0; }
.sg-usp .usp-ico { flex-shrink: 0; }
.sg-usp .usp-ico svg { width: 34px; height: 34px; stroke: var(--accent); fill: none; stroke-width: 1.5; }
.sg-usp .usp-item h6 {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 3px;
}
.sg-usp .usp-item p { font-size: 16.5px; color: rgba(255,255,255,.55); margin: 0; line-height: 1.4; }
@media screen and (max-width: 991px) {
	.sg-usp .usp-row { grid-template-columns: repeat(2, 1fr); }
	.sg-usp .usp-item:nth-child(3) { border-left: 0; }
	.sg-usp .usp-item { border-top: 1px solid var(--line-dark); }
	.sg-usp .usp-item:nth-child(-n+2) { border-top: 0; }
}
@media screen and (max-width: 575px) {
	.sg-usp .usp-row { grid-template-columns: 1fr; }
	.sg-usp .usp-item { border-left: 0 !important; border-top: 1px solid var(--line-dark); }
	.sg-usp .usp-item:first-child { border-top: 0; }
	.sg-hero .hero-inner { padding-top: 90px; padding-bottom: 80px; }
}

/* ---------- Hero: podstrony ---------- */
.sg-hero-sub { margin-top: 76px; }
.sg-hero-sub .hero-inner { padding-top: 95px; padding-bottom: 85px; }
.sg-hero-sub h1 { font-size: clamp(33px, 4.14vw, 50.5px); }
.sg-breadcrumb {
	font-family: var(--font-display);
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 16px;
}
.sg-breadcrumb a { color: rgba(255,255,255,.55); }
.sg-breadcrumb a:hover { color: var(--accent); }
@media screen and (max-width: 767px) {
	.sg-hero-sub { margin-top: 66px; }
	.sg-hero { margin-top: 66px; }
}

/* ---------- O nas + statystyki ---------- */
.sg-about-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 60px; align-items: center; }
.sg-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}
.sg-stats .stat {
	padding: 38px 28px;
	text-align: center;
	border-left: 1px solid var(--line);
	border-top: 1px solid var(--line);
}
.sg-stats .stat:nth-child(-n+2) { border-top: 0; }
.sg-stats .stat:nth-child(odd) { border-left: 0; }
.sg-stats .stat svg { width: 40px; height: 40px; stroke: var(--accent-strong); fill: none; stroke-width: 1.4; margin-bottom: 16px; }
.sg-stats .stat .stat-num {
	font-family: var(--font-display);
	font-size: 37.5px;
	font-weight: 800;
	color: #171c13;
	line-height: 1;
	margin-bottom: 8px;
}
.sg-stats .stat .stat-label {
	font-family: var(--font-display);
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #171c13;
}
.sg-stats .stat .stat-sub { font-size: 16px; color: var(--muted); margin-top: 5px; }
.sg-about-list { list-style: none; padding: 0; margin: 22px 0 30px; }
.sg-about-list li { display: flex; gap: 14px; margin-bottom: 16px; }
.sg-about-list li svg { width: 22px; height: 22px; min-width: 22px; stroke: var(--accent-strong); fill: none; stroke-width: 1.8; margin-top: 2px; }
.sg-about-list li strong { display: block; font-family: var(--font-display); font-size: 18.5px; color: #171c13; }
.sg-about-list li span { font-size: 17.5px; color: var(--muted); }
@media screen and (max-width: 991px) {
	.sg-about-grid { grid-template-columns: 1fr; gap: 45px; }
}

/* ---------- Co skupujemy — kafle zdjęciowe ---------- */
.sg-materials { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.sg-materials .mat-tile {
	position: relative;
	display: block;
	/* „zdjęcia bardziej w kwadracie" — było 3/4 (wysokie kafle) */
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--ink-3);
}
.sg-materials .mat-tile img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}
.sg-materials .mat-tile:hover img { transform: scale(1.06); }
.sg-materials .mat-tile:after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(10,13,8,0) 40%, rgba(10,13,8,.88) 100%);
}
.sg-materials .mat-label {
	position: absolute;
	left: 22px; right: 22px; bottom: 20px;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px;
}
.sg-materials .mat-label h5 {
	font-family: var(--font-display);
	font-size: 18.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #fff;
	margin: 0;
	line-height: 1.25;
}
.sg-materials .mat-arrow {
	width: 34px; height: 34px; min-width: 34px;
	background: var(--ink);
	border-radius: 4px;
	display: flex; align-items: center; justify-content: center;
	color: var(--accent);
	font-size: 18.5px;
	transition: background .25s;
}
.sg-materials .mat-tile:hover .mat-arrow { background: var(--accent-strong); color: #fff; }
@media screen and (max-width: 1199px) { .sg-materials { grid-template-columns: repeat(3, 1fr); } }
@media screen and (max-width: 575px) { .sg-materials { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Dlaczego my (ciemna) ---------- */
.sg-why .why-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px; margin: 55px 0 60px; }
.sg-why .why-stat { text-align: center; padding: 0 10px; }
.sg-why .why-stat .w-ico {
	width: 64px; height: 64px;
	margin: 0 auto 18px;
	border: 1px solid rgba(138,172,85,.4);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
}
.sg-why .why-stat .w-ico svg { width: 28px; height: 28px; stroke: var(--accent); fill: none; stroke-width: 1.5; }
.sg-why .why-stat .w-num { font-family: var(--font-display); font-size: 33px; font-weight: 800; color: #fff; line-height: 1; margin-bottom: 8px; }
.sg-why .why-stat .w-cap { font-family: var(--font-display); font-size: 14.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); line-height: 1.5; }
.sg-why .why-checks-label { text-align: center; margin-bottom: 28px; }
.sg-why .why-checks { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.sg-why .why-check { display: flex; gap: 10px; align-items: flex-start; }
.sg-why .why-check svg { width: 18px; height: 18px; min-width: 18px; stroke: var(--accent); fill: none; stroke-width: 2; margin-top: 2px; }
.sg-why .why-check span { font-size: 16.5px; color: rgba(255,255,255,.7); line-height: 1.45; }
@media screen and (max-width: 1199px) { .sg-why .why-checks { grid-template-columns: repeat(3, 1fr); } }
@media screen and (max-width: 991px) { .sg-why .why-stats { grid-template-columns: repeat(3, 1fr); gap: 35px 20px; } }
@media screen and (max-width: 575px) {
	.sg-why .why-stats { grid-template-columns: repeat(2, 1fr); }
	.sg-why .why-checks { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Jak pracujemy — kroki ---------- */
.sg-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 50px; }
.sg-steps .step { text-align: center; position: relative; padding: 0 12px; }
.sg-steps .step .st-no {
	position: absolute;
	top: -8px; left: 50%;
	margin-left: -52px;
	width: 26px; height: 26px;
	background: var(--accent-strong);
	color: #fff;
	border-radius: 50%;
	font-family: var(--font-display);
	font-size: 15.5px;
	font-weight: 700;
	display: flex; align-items: center; justify-content: center;
	z-index: 2;
}
.sg-steps .step .st-ico {
	width: 76px; height: 76px;
	margin: 0 auto 20px;
	border: 1px solid rgba(111,143,67,.4);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: #fff;
	position: relative;
}
.sg-steps .step .st-ico svg { width: 32px; height: 32px; stroke: var(--accent-strong); fill: none; stroke-width: 1.5; }
.sg-steps .step h6 { font-size: 16.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #171c13; margin-bottom: 10px; }
.sg-steps .step p { font-size: 17.5px; color: var(--muted); margin: 0; }
.sg-steps .step:not(:last-child):after {
	content: "→";
	position: absolute;
	right: -22px; top: 26px;
	color: var(--accent);
	font-size: 22px;
}
@media screen and (max-width: 991px) {
	.sg-steps { grid-template-columns: repeat(2, 1fr); gap: 40px 20px; }
	.sg-steps .step:after { display: none !important; }
}
@media screen and (max-width: 575px) { .sg-steps { grid-template-columns: 1fr; } }

/* ---------- Cennik: tabela ---------- */
.pricing-table-wrap {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: none;
}
.pricing-table { width: 100%; border-collapse: collapse; }
.pricing-table thead th {
	background: var(--ink);
	color: #fff;
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: .14em;
	padding: 15px 22px;
	text-align: left;
}
.pricing-table thead th:last-child, .pricing-table td.price { text-align: right; }
.pricing-table tbody td {
	padding: 14px 22px;
	border-bottom: 1px solid var(--line);
	color: var(--body-c);
	font-size: 18.5px;
}
.pricing-table tbody tr:last-child td { border-bottom: 0; }
.pricing-table tbody tr:hover { background: #f8faf5; }
.pricing-table td.mat-name { font-weight: 600; color: #171c13; }
.pricing-table td.price { color: var(--accent-deep); font-family: var(--font-display); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pricing-note { font-size: 16.5px; color: var(--muted); margin-top: 15px; }
.pricing-side { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; }
.pricing-side h5 { font-size: 19.5px; font-weight: 700; color: #171c13; margin-bottom: 14px; }
.pricing-side ul { list-style: none; padding: 0; margin: 0 0 10px; }
.pricing-side ul li { padding-left: 28px; position: relative; margin-bottom: 10px; color: var(--body-c); font-size: 18px; }
.pricing-side ul li:before { content: "\f058"; font-family: FontAwesome; position: absolute; left: 0; color: var(--accent-strong); }

/* panel XRF na stronie głównej */
.sg-xrf {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
}
.sg-xrf .xrf-img { min-height: 210px; background-size: cover; background-position: center; }
.sg-xrf .xrf-body { padding: 30px; }
.sg-xrf h4 { font-size: 22px; font-weight: 800; color: #171c13; margin-bottom: 12px; }
.sg-xrf p { font-size: 18px; color: var(--muted); }
.sg-xrf ul { list-style: none; padding: 0; margin: 15px 0 0; }
.sg-xrf ul li { padding-left: 26px; position: relative; margin-bottom: 8px; font-size: 17.5px; color: var(--body-c); }
.sg-xrf ul li:before { content: "\f00c"; font-family: FontAwesome; position: absolute; left: 0; color: var(--accent-strong); }

/* ---------- Realizacje — mozaika jak w projekcie ---------- */
.sg-gallery {
	display: grid;
	grid-template-columns: 1.5fr 1.1fr 1fr;
	grid-auto-rows: 195px;
	gap: 14px;
}
.sg-gallery .g-item { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--ink-3); }
.sg-gallery .g-item:nth-child(1) { grid-row: span 2; }
.sg-gallery .g-item:nth-child(2) { grid-row: span 2; }
@media screen and (max-width: 767px) {
	.sg-gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; }
	.sg-gallery .g-item:nth-child(1), .sg-gallery .g-item:nth-child(2) { grid-row: span 1; }
}
.sg-gallery .g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.sg-gallery .g-item:hover img { transform: scale(1.05); }
.sg-gallery .g-item .g-label {
	position: absolute;
	left: 0; bottom: 0;
	background: rgba(10,13,8,.85);
	color: #fff;
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 8px 14px;
	border-radius: 0 var(--radius) 0 0;
}
@media screen and (max-width: 991px) { .sg-gallery { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Opinie ---------- */
.sg-quotes { display: flex; flex-direction: column; gap: 18px; }
.sg-quote {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 24px 26px;
}
.sg-quote .q-stars { color: var(--accent-strong); font-size: 16.5px; letter-spacing: 3px; margin-bottom: 10px; }
.sg-quote p { font-size: 18.5px; color: var(--body-c); margin-bottom: 10px; }
.sg-quote .q-who { font-family: var(--font-display); font-size: 15.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ---------- Szybka wycena ---------- */
.sg-quote-form {
	background: var(--accent-strong);
	border-radius: var(--radius);
	padding: 38px 36px;
	height: 100%;
}
.sg-quote-form .sg-eyebrow { color: rgba(255,255,255,.75); }
.sg-quote-form h3 { color: #fff; font-size: 28.5px; font-weight: 800; margin-bottom: 20px; }
.sg-quote-form .wpcf7 input[type=text],
.sg-quote-form .wpcf7 input[type=tel],
.sg-quote-form .wpcf7 input[type=email],
.sg-quote-form .wpcf7 select,
.sg-quote-form .wpcf7 textarea {
	width: 100%;
	border: 1px solid rgba(255,255,255,.25);
	border-radius: 5px;
	padding: 12px 15px;
	margin-bottom: 12px;
	background: #fff;
	color: #333;
	font-family: var(--font-body);
	font-size: 18px;
}
.sg-quote-form .wpcf7 textarea { min-height: 90px; }
.sg-quote-form .wpcf7 label { color: #fff; font-size: 17px; font-weight: 600; }
.sg-quote-form .wpcf7 input[type=file] {
	margin: 6px 0 14px;
	color: #fff;
	font-size: 16.5px;
	width: 100%;
	border: 1px dashed rgba(255,255,255,.5);
	border-radius: 6px;
	padding: 22px 16px;
	cursor: pointer;
}
.sg-quote-form .wpcf7 input[type=file]:hover { border-color: #fff; background: rgba(255,255,255,.06); }
.sg-quote-form .wpcf7 .form-group { margin-bottom: 0; }
.sg-quote-form .wpcf7 button.button-secondary,
.sg-quote-form .wpcf7 input[type=submit] {
	background: var(--ink);
	color: #fff;
	border: 0;
	border-radius: 5px;
	padding: 14px 30px;
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .25s;
}
.sg-quote-form .wpcf7 button.button-secondary:hover,
.sg-quote-form .wpcf7 input[type=submit]:hover { background: #000; }
.sg-quote-form .wpcf7-not-valid-tip { color: #fff3cd; font-size: 16px; }
.sg-quote-form .wpcf7 form .wpcf7-response-output { color: #fff; border-color: rgba(255,255,255,.4); margin: 15px 0 0; }

/* ---------- Pasek CTA ---------- */
.cta-band { background: var(--ink); }
.cta-band .cta-inner { padding: 55px 0; }
.cta-band h3 { color: #fff; font-size: 28.5px; font-weight: 800; margin-bottom: 8px; }
.cta-band p { color: rgba(255,255,255,.6); margin-bottom: 0; }
.cta-band .cta-phone { color: #fff; font-size: 26.5px; font-weight: 800; font-family: var(--font-display); white-space: nowrap; }
.cta-band .cta-phone i { color: var(--accent); margin-right: 10px; }

/* ---------- Stopka ---------- */
.footer { background: var(--ink); border-top: 1px solid var(--line-dark); }
.sg-footer-main { padding: 58px 0 34px; }
.sg-footer-main .f-brand p { font-size: 17.5px; color: rgba(255,255,255,.55); margin: 18px 0 22px; max-width: 280px; }
.sg-footer-main .f-col h6 {
	font-family: var(--font-display);
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 14px;
}
.sg-footer-main .f-col ul { list-style: none; padding: 0; margin: 0; }
.sg-footer-main .f-col ul li { margin-bottom: 5px; line-height: 1.45; }
.sg-footer-main .f-col ul li a,
.sg-footer-main .f-col .navbar-nav .nav-link {
	color: rgba(255,255,255,.6);
	font-size: 18px;
	font-family: var(--font-body);
	text-transform: none;
	letter-spacing: 0;
	margin: 0;
	padding: 0;
	text-align: left;
	display: inline;
}
.sg-footer-main .f-col ul li a:hover { color: var(--accent); }
.sg-footer-main .f-col .navbar-nav { display: block; }
.sg-footer-main .f-col .navbar-nav .nav-item { margin-bottom: 5px; line-height: 1.45; }
.sg-footer-main .f-contact li { display: flex; gap: 12px; margin-bottom: 10px; }
.sg-footer-main .f-contact li i { color: var(--accent); font-size: 18.5px; margin-top: 3px; }
.sg-footer-main .f-contact li a, .sg-footer-main .f-contact li span { color: rgba(255,255,255,.7); font-size: 18px; line-height: 1.5; }
.sg-footer-main .f-contact li a.f-phone { font-family: var(--font-display); font-weight: 700; font-size: 18.5px; color: #fff; }
.sg-footer-main .f-contact li a:hover { color: var(--accent); }
.f-social { display: flex; gap: 10px; }
.f-social a {
	width: 36px; height: 36px;
	border: 1px solid rgba(255,255,255,.2);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	color: rgba(255,255,255,.7);
	font-size: 17.5px;
	transition: all .25s;
}
.f-social a:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
.sg-footer-bottom {
	border-top: 1px solid var(--line-dark);
	padding: 22px 0;
	text-align: center;
}
.sg-footer-bottom p { font-size: 16.5px; color: rgba(255,255,255,.4); margin: 0; }
.footer .seoDescription { color: rgba(255,255,255,.45); font-size: 17px; }
.footer .seoDescription h2, .footer .seoDescription h3 { color: rgba(255,255,255,.7); }

/* ---------- FAQ ---------- */
.faq-list { max-width: 860px; margin: 0 auto; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 14px; background: var(--card); overflow: hidden; }
.faq-item .faq-q {
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	padding: 20px 55px 20px 25px;
	font-size: 18.5px;
	font-weight: 700;
	font-family: var(--font-display);
	color: #171c13;
	position: relative;
	cursor: pointer;
}
.faq-item .faq-q:after {
	content: "+";
	position: absolute;
	right: 25px; top: 50%;
	transform: translateY(-50%);
	font-size: 24px;
	font-weight: 400;
	color: var(--accent-strong);
}
.faq-item.open .faq-q:after { content: "–"; }
.faq-item .faq-a { display: none; padding: 0 25px 22px; color: var(--muted); }
.faq-item.open .faq-a { display: block; }

/* ---------- Oferta: kafelki ---------- */
.sg-offer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.sg-offer-card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow .3s, transform .3s;
}
.sg-offer-card:hover { box-shadow: 0 18px 40px rgba(14,18,12,.1); transform: translateY(-3px); }
.sg-offer-card .oc-img { height: 170px; overflow: hidden; }
.sg-offer-card .oc-img img { width: 100%; height: 100%; object-fit: cover; }
.sg-offer-card .oc-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.sg-offer-card h5 { font-size: 18.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #171c13; margin-bottom: 10px; line-height: 1.35; }
.sg-offer-card h5 a { color: inherit; }
.sg-offer-card h5 a:hover { color: var(--accent-deep); }
.sg-offer-card p { font-size: 17px; color: var(--muted); margin-bottom: 14px; }
.sg-offer-card .oc-more { margin-top: auto; font-family: var(--font-display); font-size: 15.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); }
.sg-offer-card .oc-more:after { content: " →"; }
@media screen and (max-width: 1199px) { .sg-offer-grid { grid-template-columns: repeat(3, 1fr); } }
@media screen and (max-width: 991px) { .sg-offer-grid { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 575px) { .sg-offer-grid { grid-template-columns: 1fr; } }

/* ---------- Podstrony oferty: rodzaje towaru ---------- */
.material-types .type-tile {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	margin-bottom: 24px;
	height: calc(100% - 24px);
	transition: box-shadow .3s;
}
.material-types .type-tile:hover { box-shadow: 0 15px 35px rgba(14,18,12,.08); }
.material-types .type-tile .type-img { height: 150px; overflow: hidden; }
.material-types .type-tile .type-img img { width: 100%; height: 100%; object-fit: cover; }
.material-types .type-tile .type-cont { padding: 20px; }
.material-types .type-tile .type-cont h5 { font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #171c13; margin-bottom: 8px; }
.material-types .type-tile .type-cont p { font-size: 17px; color: var(--muted); margin: 0; }

/* ---------- Transport ---------- */
.transport-tiles .t-tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: none; margin-bottom: 24px; height: calc(100% - 24px); }
.transport-tiles .t-tile .t-img { height: 210px; overflow: hidden; }
.transport-tiles .t-tile .t-img img { width: 100%; height: 100%; object-fit: cover; }
.transport-tiles .t-tile .t-cont { padding: 25px; }
.transport-tiles .t-tile .t-cont h5 { font-size: 18.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #171c13; margin-bottom: 10px; }
.transport-tiles .t-tile .t-cont p { color: var(--muted); font-size: 17.5px; }
.container-sizes { background: var(--paper); }
.container-sizes .size-item { text-align: center; padding: 25px 10px; }
.container-sizes .size-item svg { stroke: var(--accent-strong); }
.container-sizes .size-item .size-name { font-family: var(--font-display); font-weight: 800; font-size: 24px; color: #171c13; margin: 12px 0 8px; }
.container-sizes .size-item p { font-size: 16.5px; color: var(--muted); margin-bottom: 2px; }
.steps-dark { background: var(--ink-2); }
.steps-dark h2 { color: #fff; font-weight: 800; }
.steps-dark .step-item { text-align: center; padding: 0 15px; }
.steps-dark .step-item .step-no {
	width: 42px; height: 42px; border-radius: 50%;
	background: var(--accent-strong); color: #fff; font-weight: 700;
	font-family: var(--font-display);
	display: inline-flex; align-items: center; justify-content: center;
	margin-bottom: 16px;
}
.steps-dark .step-item h6 { color: #fff; font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 10px; }
.steps-dark .step-item p { color: rgba(255,255,255,.6); font-size: 17.5px; }

/* ---------- Blog ---------- */
.blog-list .blog-card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	margin-bottom: 26px;
	display: flex;
	transition: box-shadow .3s;
}
.blog-list .blog-card:hover { box-shadow: 0 15px 35px rgba(14,18,12,.08); }
.blog-list .blog-card .bc-img { flex: 0 0 300px; max-width: 300px; }
.blog-list .blog-card .bc-img img { width: 100%; height: 100%; object-fit: cover; min-height: 230px; }
.blog-list .blog-card .bc-cont { padding: 28px 32px; flex: 1; }
.blog-list .blog-card .bc-meta { font-size: 16.5px; color: var(--muted); margin-bottom: 12px; }
.blog-list .blog-card .bc-meta i { color: var(--accent-strong); margin-right: 5px; }
.blog-list .blog-card h4 { font-size: 23px; font-weight: 800; line-height: 1.3; margin-bottom: 12px; }
.blog-list .blog-card h4 a { color: #171c13; }
.blog-list .blog-card h4 a:hover { color: var(--accent-deep); }
.blog-list .blog-card p { color: var(--muted); font-size: 18.5px; margin-bottom: 16px; }
.blog-list .blog-card .bc-more { color: var(--accent-deep); font-family: var(--font-display); font-weight: 700; font-size: 15.5px; text-transform: uppercase; letter-spacing: .12em; }
@media screen and (max-width: 767px) {
	.blog-list .blog-card { flex-direction: column; }
	.blog-list .blog-card .bc-img { max-width: 100%; flex-basis: auto; }
}
.blog-sidebar .widget-box {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 26px;
	margin-bottom: 24px;
}
.blog-sidebar .widget-box h5 { font-size: 18.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #171c13; margin-bottom: 18px; }
.blog-sidebar .widget-box ul { list-style: none; padding: 0; margin: 0; }
.blog-sidebar .widget-box ul li { border-bottom: 1px solid var(--paper); padding: 8px 0; }
.blog-sidebar .widget-box ul li:last-child { border-bottom: 0; }
.blog-sidebar .widget-box ul li a { color: var(--body-c); font-size: 18px; }
.blog-sidebar .widget-box ul li a:hover { color: var(--accent-deep); }
.blog-sidebar .searchform { display: flex; }
.blog-sidebar .searchform input[type=text],
.blog-sidebar .searchform input[type=search] {
	flex: 1; border: 1px solid var(--line); border-radius: 5px 0 0 5px; padding: 10px 14px; min-width: 0;
	font-family: var(--font-body);
}
.blog-sidebar .searchform input[type=submit], .blog-sidebar .searchform button {
	background: var(--accent-strong); color: #fff; border: 0; border-radius: 0 5px 5px 0; padding: 10px 16px; cursor: pointer;
}
.blog-sidebar .widget-cta { background: var(--accent-strong); border: 0; }
.blog-sidebar .widget-cta h5 { color: #fff; }
.blog-sidebar .widget-cta p { color: rgba(255,255,255,.85); font-size: 17.5px; }
.blog-sidebar .widget-cta .button-primary { background: var(--ink); }
.blog-sidebar .widget-cta .button-primary:hover { background: #000; }
.blog-sidebar .widget-dark { background: var(--ink-2); border: 0; }
.blog-sidebar .widget-dark h5 { color: #fff; }
.blog-sidebar .widget-dark p { color: rgba(255,255,255,.6); font-size: 17.5px; }
.blog-sidebar .post-mini { display: flex; gap: 12px; margin-bottom: 15px; align-items: center; }
.blog-sidebar .post-mini img { width: 70px; height: 55px; object-fit: cover; border-radius: 5px; flex-shrink: 0; }
.blog-sidebar .post-mini a { font-size: 17.5px; font-weight: 600; color: #2a2f26; line-height: 1.35; display: block; }
.blog-sidebar .post-mini a:hover { color: var(--accent-deep); }
.blog-sidebar .post-mini .pm-date { font-size: 15.5px; color: var(--muted); }
.single-article { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 42px; }
.single-article .sa-meta { color: var(--muted); font-size: 17.5px; margin-bottom: 20px; }
.single-article .sa-meta i { color: var(--accent-strong); margin-right: 5px; }
.single-article img { border-radius: var(--radius); height: auto; max-width: 100%; }
.single-article h2, .single-article h3 { color: #171c13; font-weight: 800; margin: 28px 0 14px; }
.breadcrumbs { font-size: 16.5px; color: var(--muted); margin-bottom: 20px; }
.breadcrumbs a { color: var(--accent-deep); }
@media screen and (max-width: 767px) { .single-article { padding: 25px 20px; } }

/* ---------- GTranslate — przełącznik języka w pasku menu ---------- */
.navbar .navbar-nav .menu-item-gtranslate { width: auto !important; margin: 0 4px; }
.navbar .navbar-nav .menu-item-gtranslate > div {
	position: static !important;
	top: auto !important;
	width: auto !important;
}
.navbar div.gt_switcher { width: auto !important; background: transparent; }
.navbar div.gt_switcher .gt_selected { background: transparent !important; }
.navbar div.gt_switcher .gt_selected a { font-size: 0; }
.navbar div.gt_switcher img { width: 22px; vertical-align: middle; }
.navbar div.gt_switcher .gt_selected a {
	background: transparent !important;
	border: 1px solid rgba(255,255,255,.2);
	border-radius: 5px;
	color: #fff;
	width: auto !important;
	padding: 4px 10px;
}
/* Lista języków musi opadać POD przełącznikiem. Bez tego rozwija się w normalnym
   flow wewnątrz wyśrodkowanego paska menu: rośnie w obie strony i górne pozycje
   (z „Polski" włącznie) lądują nad krawędzią okna — zgłoszone przez klienta. */
/* ⚠️ `overflow: visible` jest KONIECZNE. Skrypt wtyczki (`gtranslate/js/dwf.js`) rozwija listę
   animacją wysokości i na czas otwierania ustawia na `.gt_switcher` `overflow: hidden`.
   Reguła niżej wyprowadza listę poza ten box (`position: absolute`, `top: calc(100% + 14px)`),
   więc bez odblokowania przycinania lista jest **całkowicie niewidoczna** — klik we flagę nie
   robi nic, a kliknięcia trafiają w hero pod spodem (zgłoszone jako „nie działa zmiana języka").
   Diagnoza: `document.elementFromPoint()` na pozycji pozycji „English" zwracał `.hero-inner`. */
.navbar div.gt_switcher,
.navbar .menu-item-gtranslate > div,
.navbar [class*="gt_container--"] { overflow: visible !important; }
.navbar div.gt_switcher { position: relative; }
.navbar div.gt_switcher .gt_option {
	position: absolute !important;
	top: calc(100% + 14px);
	right: 0;
	left: auto;
	width: 190px !important;
	max-height: 65vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--ink-2);
	border: 1px solid var(--line-dark);
	border-top: 2px solid var(--accent);
	border-radius: 0 0 var(--radius) var(--radius);
	box-shadow: 0 18px 40px rgba(0,0,0,.45);
	z-index: 1001;
}
.navbar div.gt_switcher .gt_option a {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	font-size: 16px;
	letter-spacing: .04em;
	padding: 8px 12px;
	white-space: nowrap;
}
.navbar div.gt_switcher .gt_option a:hover {
	background: rgba(255,255,255,.07);
	color: var(--accent);
}
.navbar div.gt_switcher .gt_option img { width: 18px; flex: 0 0 18px; }

/* ---------- Treść z edytora (ACF/WYSIWYG) ----------
   Stary motyw ma globalny reset `* { margin:0; padding:0 }`, przez co listy z edytora
   traciły wcięcie i punktory renderowały się poza kontenerem — czyli znikały. Efekt:
   wypunktowanie wyglądało jak przypadkowo pogrubione, wcięte urwane zdania.
   Wszystko, co wychodzi z pola `opis`, opakowujemy w .sg-rte i przywracamy tu typografię. */
.sg-rte p { margin: 0 0 16px; }
.sg-rte p:last-child { margin-bottom: 0; }
.sg-rte ul,
.sg-rte ol {
	margin: 0 0 18px;
	padding-left: 22px;
}
.sg-rte ul { list-style: disc outside; }
.sg-rte ol { list-style: decimal outside; }
.sg-rte li {
	margin-bottom: 7px;
	color: var(--body-c);
	line-height: 1.65;
	list-style: inherit;
}
.sg-rte li::marker { color: var(--accent-deep); }
.sg-rte li strong { font-weight: 600; }
.sg-rte h2, .sg-rte h3, .sg-rte h4 {
	font-family: var(--font-display);
	margin: 26px 0 12px;
	color: var(--ink);
}
.sg-rte h2 { font-size: 28.5px; }
.sg-rte h3 { font-size: 23px; }
.sg-rte h4 { font-size: 20.5px; }
.sg-rte > *:first-child { margin-top: 0; }
.sg-rte img { max-width: 100%; height: auto; border-radius: var(--radius); }
.sg-rte a { color: var(--accent-deep); text-decoration: underline; }

/* ---------- Drobiazgi / porządki po starym CSS ---------- */
.link-btn { color: var(--accent-deep); }
.progress-wrap { display: none; }
.preloader-bg, #preloader { display: none !important; }

/* ================================================================
   DOPEŁNIENIE DO MOCKUPÓW — sekcje, których wcześniej brakowało
   (audyt zgodności z katalogiem new/). Kolejność jak w projektach:
   hero → sekcje treściowe → pasy ciemne → FAQ → obszar → CTA.
   ================================================================ */

/* ---------- Pasek przewag wewnątrz hero ----------
   Mockupy podstron (oferta szczegółowa, transport, cennik, kontakt, wycena)
   pokazują 3–4 przewagi na dole ciemnego hero, oddzielone pionowymi liniami. */
.sg-hero-usp {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 0;
	margin-top: 46px;
	border-top: 1px solid rgba(255,255,255,.12);
	padding-top: 26px;
}
.sg-hero-usp .hu-item {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 4px 26px 4px 0;
	border-right: 1px solid rgba(255,255,255,.12);
}
.sg-hero-usp .hu-item:last-child { border-right: 0; }
.sg-hero-usp .hu-ico { color: var(--accent); flex: 0 0 auto; }
.sg-hero-usp .hu-ico svg { width: 30px; height: 30px; }
.sg-hero-usp h6 {
	font-family: var(--font-display);
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff;
	margin: 2px 0 5px;
}
.sg-hero-usp p { font-size: 16.5px; line-height: 1.5; color: rgba(255,255,255,.62); margin: 0; }
@media screen and (max-width: 767px) {
	.sg-hero-usp { gap: 20px; margin-top: 32px; }
	.sg-hero-usp .hu-item { border-right: 0; padding-right: 0; }
}

/* ---------- Liczniki w jednym rzędzie (blok „O nas" na głównej) ----------
   W mockupie cztery liczniki stoją w jednej linii, nie w siatce 2×2. */
.sg-about-grid.sg-about-wide { grid-template-columns: 1fr 1.55fr; }
.sg-stats.sg-stats-row { grid-template-columns: repeat(4, 1fr); }
.sg-stats.sg-stats-row .stat { padding: 34px 14px; border-top: 0; border-left: 1px solid var(--line); }
.sg-stats.sg-stats-row .stat:first-child { border-left: 0; }
.sg-stats.sg-stats-row .stat .stat-num { font-size: 33px; }
@media screen and (max-width: 991px) {
	.sg-about-grid.sg-about-wide { grid-template-columns: 1fr; }
	.sg-stats.sg-stats-row { grid-template-columns: repeat(2, 1fr); }
	.sg-stats.sg-stats-row .stat { border-top: 1px solid var(--line); }
	.sg-stats.sg-stats-row .stat:nth-child(-n+2) { border-top: 0; }
	.sg-stats.sg-stats-row .stat:nth-child(odd) { border-left: 0; }
}

/* ---------- „Dlaczego firmy wybierają" — wariant jasny ----------
   W mockupie strony głównej ta sekcja jest na jasnym tle (wcześniej była ciemna). */
.sg-why-light { background: var(--paper); }
.sg-why-light .sg-h2 { color: #171c13; }
.sg-why-light .why-stats { grid-template-columns: repeat(4, 1fr); margin: 50px 0 55px; }
.sg-why-light .why-stat { border-left: 1px solid var(--line); }
.sg-why-light .why-stat:first-child { border-left: 0; }
.sg-why-light .why-stat .w-ico { border-color: rgba(111,143,67,.35); background: #fff; }
.sg-why-light .why-stat .w-ico svg { stroke: var(--accent-strong); }
.sg-why-light .why-stat .w-num { color: #171c13; }
.sg-why-light .why-stat .w-cap { color: var(--muted); }
.sg-why-light .why-checks-label { border-top: 1px solid var(--line); padding-top: 34px; }
.sg-why-light .why-check svg { stroke: var(--accent-strong); }
.sg-why-light .why-check span { color: var(--body-c); }
@media screen and (max-width: 991px) {
	.sg-why-light .why-stats { grid-template-columns: repeat(2, 1fr); gap: 30px 0; }
	.sg-why-light .why-stat:nth-child(odd) { border-left: 0; }
}
@media screen and (max-width: 575px) {
	.sg-why-light .why-stats { grid-template-columns: 1fr; }
	.sg-why-light .why-stat { border-left: 0; }
}

/* ---------- Realizacje: mozaika 5-kaflowa jak w mockupie ----------
   Lewa kolumna: jeden wysoki kafel. Środkowa i prawa: po dwa kafle jeden nad drugim. */
.sg-gallery.sg-gallery-5 { grid-template-columns: 1.35fr 1.25fr 1fr; grid-auto-rows: 172px; }
.sg-gallery.sg-gallery-5 .g-item:nth-child(1) { grid-row: span 2; }
.sg-gallery.sg-gallery-5 .g-item:nth-child(2) { grid-row: span 1; }
@media screen and (max-width: 767px) {
	.sg-gallery.sg-gallery-5 { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
	.sg-gallery.sg-gallery-5 .g-item:nth-child(1) { grid-row: span 1; grid-column: span 2; }
}

/* ---------- Ciemny pas z ikonami (Uczciwe zasady / Dlaczego warto / Nasze wartości) ---------- */
.sg-feature-band { background: var(--ink-2); }
.sg-feature-band .sg-h2 { color: #fff; }
.sg-feature-band .sg-eyebrow { color: var(--accent); }
.sg-feature-grid {
	display: grid;
	grid-template-columns: repeat(var(--cols, 5), 1fr);
	gap: 0;
	margin-top: 42px;
}
.sg-feature-grid .fb-item { padding: 6px 26px; border-left: 1px solid rgba(255,255,255,.1); }
.sg-feature-grid .fb-item:first-child { border-left: 0; padding-left: 0; }
.sg-feature-grid .fb-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.sg-feature-grid .fb-head svg { width: 26px; height: 26px; color: var(--accent); flex: 0 0 auto; }
.sg-feature-grid h6 {
	font-family: var(--font-display);
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff;
	margin: 0;
	line-height: 1.35;
}
.sg-feature-grid p { font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.6); margin: 0; }
/* wariant jasny — pasek 4 przewag pod pojemnościami kontenerów i na Kontakcie */
.sg-feature-grid.is-light { margin-top: 0; }
.sg-feature-grid.is-light .fb-item { border-left-color: var(--line); }
.sg-feature-grid.is-light .fb-head svg { color: var(--accent-strong); }
.sg-feature-grid.is-light h6 { color: #171c13; }
.sg-feature-grid.is-light p { color: var(--muted); }
.sg-feature-strip { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 30px; }
@media screen and (max-width: 1199px) {
	.sg-feature-grid { grid-template-columns: repeat(3, 1fr); gap: 30px 0; }
	.sg-feature-grid .fb-item:nth-child(3n+1) { border-left: 0; padding-left: 0; }
}
@media screen and (max-width: 767px) {
	.sg-feature-grid { grid-template-columns: repeat(2, 1fr); }
	.sg-feature-grid .fb-item { border-left: 0; padding-left: 0; padding-right: 16px; }
}
@media screen and (max-width: 479px) { .sg-feature-grid { grid-template-columns: 1fr; } }

/* ---------- Sekcja dwukolumnowa: zdjęcie + treść ---------- */
.sg-split { display: grid; grid-template-columns: 1fr 1.15fr; gap: 55px; align-items: center; }
.sg-split.is-reverse { grid-template-columns: 1.15fr 1fr; }
.sg-split .split-img { border-radius: var(--radius); overflow: hidden; }
.sg-split .split-img img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; display: block; }
.sg-split .split-body p { margin-bottom: 15px; }
@media screen and (max-width: 991px) {
	.sg-split, .sg-split.is-reverse { grid-template-columns: 1fr; gap: 35px; }
	.sg-split .split-img img { min-height: 240px; }
}

/* ---------- Trzy małe karty pod treścią (legalizowane wagi / płatność / dokumentacja) ---------- */
.sg-minicards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.sg-minicard { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.sg-minicard .mc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.sg-minicard .mc-head svg { width: 22px; height: 22px; color: var(--accent-strong); flex: 0 0 auto; }
.sg-minicard h6 { font-family: var(--font-display); font-size: 16.5px; font-weight: 700; color: #171c13; margin: 0; }
.sg-minicard p { font-size: 16.5px; color: var(--muted); margin: 0; line-height: 1.55; }
@media screen and (max-width: 767px) { .sg-minicards { grid-template-columns: 1fr; } }

/* ---------- Rodzaje towaru: sześć kafli w rzędzie (mockup podstrony ofertowej) ---------- */
.sg-types { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.sg-type-tile {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow .3s, transform .3s;
}
.sg-type-tile:hover { box-shadow: 0 15px 35px rgba(14,18,12,.09); transform: translateY(-3px); }
.sg-type-tile .tt-img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-3); }
.sg-type-tile .tt-img img { width: 100%; height: 100%; object-fit: cover; }
.sg-type-tile .tt-body { padding: 16px 16px 20px; }
.sg-type-tile .tt-head { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 9px; }
.sg-type-tile .tt-head svg { width: 20px; height: 20px; color: var(--accent-strong); flex: 0 0 auto; margin-top: 1px; }
.sg-type-tile h6 {
	font-family: var(--font-display);
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #171c13;
	margin: 0;
	line-height: 1.35;
}
.sg-type-tile p { font-size: 16px; line-height: 1.55; color: var(--muted); margin: 0; }
@media screen and (max-width: 1199px) { .sg-types { grid-template-columns: repeat(3, 1fr); } }
@media screen and (max-width: 575px) { .sg-types { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Kafle oferty z ikoną i strzałką (mockup Oferty) ---------- */
.sg-offer-card .oc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sg-offer-card .oc-head svg { width: 24px; height: 24px; color: var(--accent-strong); flex: 0 0 auto; }
.sg-offer-card .oc-head h5 { margin: 0; }
.sg-offer-card .oc-arrow {
	margin-top: auto;
	align-self: flex-end;
	color: var(--accent-strong);
	display: inline-flex;
	transition: transform .25s;
}
.sg-offer-card .oc-arrow svg { width: 26px; height: 26px; }
.sg-offer-card:hover .oc-arrow { transform: translateX(5px); }

/* ---------- Kroki z ikonami (transport / wycena) ---------- */
.sg-steps.sg-steps-5 { grid-template-columns: repeat(5, 1fr); }
.steps-dark .sg-steps .step h6 { color: #fff; }
.steps-dark .sg-steps .step p { color: rgba(255,255,255,.6); }
.steps-dark .sg-steps .step .st-ico { background: transparent; border-color: rgba(138,172,85,.4); }
.steps-dark .sg-steps .step .st-ico svg { stroke: var(--accent); }
.steps-dark .sg-steps .step .st-no { background: var(--accent-strong); }
@media screen and (max-width: 1199px) { .sg-steps.sg-steps-5 { grid-template-columns: repeat(3, 1fr); row-gap: 45px; } }
@media screen and (max-width: 767px) { .sg-steps.sg-steps-5 { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Pojemności kontenerów ze zdjęciami renderów ---------- */
.container-sizes .size-item .size-img { height: 92px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 6px; }
.container-sizes .size-item .size-img img { max-width: 100%; max-height: 92px; object-fit: contain; mix-blend-mode: multiply; }

/* ---------- FAQ w siatce (mockup podstrony ofertowej i cennika) ---------- */
.sg-faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: none; }
.sg-faq-grid.is-4col { grid-template-columns: repeat(4, 1fr); }
.sg-faq-grid .faq-item { margin-bottom: 0; }
.sg-faq-grid .faq-item .faq-q { font-size: 18px; padding: 18px 46px 18px 20px; line-height: 1.4; }
.sg-faq-grid .faq-item .faq-q:after { right: 18px; }
.sg-faq-grid .faq-item .faq-a { padding: 0 20px 20px; font-size: 17.5px; }
@media screen and (max-width: 1199px) { .sg-faq-grid.is-4col { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 767px) { .sg-faq-grid, .sg-faq-grid.is-4col { grid-template-columns: 1fr; } }

/* ---------- Obszar działania: lista miast + mapa ---------- */
.sg-area-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 45px; align-items: center; }
.sg-city-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; list-style: none; padding: 0; margin: 22px 0 0; }
.sg-city-list li { display: flex; align-items: center; gap: 9px; font-size: 18px; color: var(--body-c); }
.sg-city-list li svg { width: 17px; height: 17px; color: var(--accent-strong); flex: 0 0 auto; }
.sg-city-list li.is-more { color: var(--muted); font-size: 17px; }
.sg-area-map { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--paper); }
.sg-area-map iframe { display: block; width: 100%; height: 340px; border: 0; }
@media screen and (max-width: 991px) { .sg-area-grid { grid-template-columns: 1fr; gap: 30px; } }

/* ---------- Pas CTA ze zdjęciem w tle + mini-przewagami ---------- */
.cta-band.cta-photo { position: relative; overflow: hidden; border-radius: var(--radius); }
.cta-band.cta-photo:before {
	content: "";
	position: absolute; inset: 0;
	background-image: var(--cta-bg);
	background-size: cover;
	background-position: center;
	opacity: .32;
}
.cta-band.cta-photo .cta-inner { position: relative; z-index: 1; padding: 44px 40px; }
.cta-mini { display: flex; gap: 26px; flex-wrap: wrap; }
.cta-mini .cm-item { text-align: center; max-width: 130px; }
.cta-mini .cm-item svg { width: 26px; height: 26px; color: var(--accent); margin-bottom: 8px; }
.cta-mini .cm-item span { display: block; font-size: 16px; line-height: 1.45; color: rgba(255,255,255,.72); }
.sg-section-narrow { padding: 55px 0; }

/* ---------- Karty kontaktowe (mockup Kontaktu) ---------- */
.sg-contact-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.sg-contact-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; }
.sg-contact-card .cc-ico { color: var(--accent-strong); margin-bottom: 14px; display: inline-flex; }
.sg-contact-card .cc-ico svg { width: 30px; height: 30px; }
.sg-contact-card h6 { font-family: var(--font-display); font-size: 14.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 9px; }
.sg-contact-card .cc-main { font-family: var(--font-display); font-size: 22px; font-weight: 800; color: #171c13; line-height: 1.35; display: block; }
.sg-contact-card .cc-main:hover { color: var(--accent-deep); }
.sg-contact-card p { font-size: 17px; color: var(--muted); margin: 7px 0 0; line-height: 1.55; }
.sg-contact-card .cc-link { display: inline-block; margin-top: 10px; font-family: var(--font-display); font-size: 15.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); }
.sg-contact-card .cc-link:after { content: " →"; }
@media screen and (max-width: 991px) { .sg-contact-cards { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 479px) { .sg-contact-cards { grid-template-columns: 1fr; } }

/* ---------- Biała karta formularza (Kontakt / Wycena) ---------- */
.sg-form-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 34px 38px; height: 100%; }
.sg-form-card h3 { font-family: var(--font-display); font-size: 26.5px; font-weight: 800; color: #171c13; margin-bottom: 8px; }
.sg-form-card > p { font-size: 18px; color: var(--muted); margin-bottom: 24px; }
.sg-form-card .wpcf7 label { display: block; font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.sg-form-card .wpcf7 input[type=text],
.sg-form-card .wpcf7 input[type=tel],
.sg-form-card .wpcf7 input[type=email],
.sg-form-card .wpcf7 select,
.sg-form-card .wpcf7 textarea {
	width: 100%;
	border: 1px solid var(--line);
	border-radius: 5px;
	background: #fff;
	padding: 12px 14px;
	font-family: var(--font-body);
	font-size: 18px;
	color: #333;
	margin-bottom: 16px;
}
.sg-form-card .wpcf7 textarea { min-height: 130px; }
.sg-form-card .wpcf7 input:focus, .sg-form-card .wpcf7 select:focus, .sg-form-card .wpcf7 textarea:focus { outline: 0; border-color: var(--accent-strong); }
.sg-form-card .wpcf7 .wpcf7-acceptance .wpcf7-list-item { margin: 0 0 18px; }
.sg-form-card .wpcf7 .wpcf7-acceptance label { display: flex; gap: 10px; align-items: flex-start; text-transform: none; letter-spacing: 0; font-size: 16.5px; font-weight: 400; color: var(--muted); font-family: var(--font-body); }
.sg-form-card .wpcf7 .wpcf7-acceptance input[type=checkbox] { margin-top: 3px; }
.sg-form-card .wpcf7 button.button-secondary,
.sg-form-card .wpcf7 input[type=submit] {
	background: var(--accent-strong);
	color: #fff;
	border: 0;
	border-radius: 5px;
	padding: 14px 32px;
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .25s;
}
.sg-form-card .wpcf7 button.button-secondary:hover,
.sg-form-card .wpcf7 input[type=submit]:hover { background: var(--accent-deep); }

/* ---------- Strefa uploadu zdjęć ----------
   Natywny input[type=file] zostaje (obsługa i walidacja CF7), ale jest przezroczysty
   i rozciągnięty na całą kafelkę — widoczna jest tylko warstwa z ikoną i opisem,
   jak w mockupie „Dodaj zdjęcia / Przeciągnij lub kliknij". */
.sg-drop { position: relative; border: 1px dashed rgba(255,255,255,.55); border-radius: var(--radius); padding: 30px 22px; text-align: center; transition: background .25s, border-color .25s; }
.sg-drop:hover { border-color: #fff; background: rgba(255,255,255,.07); }
.sg-drop .drop-ico { color: rgba(255,255,255,.85); display: inline-flex; margin-bottom: 12px; }
.sg-drop .drop-ico svg { width: 34px; height: 34px; }
.sg-drop .drop-title { display: block; font-family: var(--font-display); font-size: 17.5px; font-weight: 700; color: #fff; margin-bottom: 5px; }
.sg-drop .drop-sub { display: block; font-size: 16px; color: rgba(255,255,255,.7); line-height: 1.5; }
.sg-drop .wpcf7-form-control-wrap,
.sg-drop .wpcf7-form-control-wrap input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; margin: 0; padding: 0; border: 0; }
.sg-drop .wpcf7-not-valid-tip { position: absolute; left: 0; right: 0; bottom: -22px; opacity: 1; }
/* wariant na jasnym tle */
.sg-drop.is-light { border-color: var(--line); background: var(--paper); }
.sg-drop.is-light:hover { border-color: var(--accent-strong); background: #fff; }
.sg-drop.is-light .drop-ico { color: var(--accent-strong); }
.sg-drop.is-light .drop-title { color: #171c13; }
.sg-drop.is-light .drop-sub { color: var(--muted); }

/* ---------- Formularz szybkiej wyceny: układ dwukolumnowy jak w mockupie ---------- */
.sg-quote-form .qf-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 26px; align-items: start; }
.sg-quote-form .wpcf7 .row { --bs-gutter-x: 14px; }
.sg-quote-form .wpcf7 select { appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236f8f43' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 34px; }
@media screen and (max-width: 991px) { .sg-quote-form .qf-grid { grid-template-columns: 1fr; } }

/* ---------- Kreator 3-krokowy (mockup Szybkiej wyceny) ---------- */
.sg-wizard { display: flex; align-items: center; gap: 0; margin: 6px 0 30px; }
.sg-wizard .wz-step { display: flex; flex-direction: column; align-items: center; gap: 9px; flex: 0 0 auto; }
.sg-wizard .wz-dot {
	width: 30px; height: 30px;
	border-radius: 50%;
	border: 1px solid var(--line);
	background: #fff;
	color: var(--muted);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--font-display); font-size: 16.5px; font-weight: 700;
}
.sg-wizard .wz-step.is-active .wz-dot { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
.sg-wizard .wz-label { font-size: 16px; color: var(--muted); white-space: nowrap; }
.sg-wizard .wz-step.is-active .wz-label { color: #171c13; font-weight: 700; }
.sg-wizard .wz-line { flex: 1 1 auto; height: 1px; background: var(--line); margin: 0 10px; position: relative; top: -13px; }
@media screen and (max-width: 575px) { .sg-wizard .wz-label { display: none; } }

/* ---------- Instrukcja zdjęć (mockup Szybkiej wyceny) ---------- */
.sg-howto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 20px; }
.sg-howto figure { margin: 0; }
.sg-howto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); display: block; }
.sg-howto figcaption { font-size: 16.5px; color: var(--muted); margin-top: 9px; }
@media screen and (max-width: 575px) { .sg-howto { grid-template-columns: 1fr; } }

/* ---------- Karty pomocnicze: zielona / ciemna / z konsultantem ---------- */
.sg-note-card { border-radius: var(--radius); padding: 22px 24px; display: flex; gap: 14px; align-items: flex-start; }
.sg-note-card.is-green { background: rgba(138,172,85,.14); border: 1px solid rgba(138,172,85,.4); }
.sg-note-card .nc-ico { color: var(--accent-deep); flex: 0 0 auto; }
.sg-note-card .nc-ico svg { width: 26px; height: 26px; }
.sg-note-card h6 { font-family: var(--font-display); font-size: 14.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 7px; }
.sg-note-card p { font-size: 17px; color: var(--body-c); margin: 0; line-height: 1.55; }

.sg-dark-card { background: var(--ink); border-radius: var(--radius); padding: 30px 32px; }
.sg-dark-card h5 { font-family: var(--font-display); font-size: 18.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: 18px; }
.sg-dark-card ul { list-style: none; padding: 0; margin: 0; }
.sg-dark-card ul li { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 12px; font-size: 17.5px; color: rgba(255,255,255,.72); }
.sg-dark-card ul li svg { width: 18px; height: 18px; color: var(--accent); flex: 0 0 auto; margin-top: 2px; }
.sg-dark-card ul li:last-child { margin-bottom: 0; }

.sg-help-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 32px; display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: end; overflow: hidden; }
.sg-help-card h5 { font-family: var(--font-display); font-size: 18.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #171c13; margin-bottom: 10px; }
.sg-help-card p { font-size: 17.5px; color: var(--muted); margin-bottom: 16px; }
.sg-help-card .hc-phone { display: flex; gap: 11px; align-items: center; margin-bottom: 18px; }
.sg-help-card .hc-phone svg { width: 24px; height: 24px; color: var(--accent-strong); }
.sg-help-card .hc-phone strong { display: block; font-family: var(--font-display); font-size: 23px; font-weight: 800; color: #171c13; line-height: 1.2; }
.sg-help-card .hc-phone span { font-size: 16px; color: var(--muted); }
.sg-help-card .hc-photo { align-self: end; }
.sg-help-card .hc-photo img { display: block; max-height: 210px; width: auto; }
@media screen and (max-width: 767px) { .sg-help-card { grid-template-columns: 1fr; } .sg-help-card .hc-photo { display: none; } }

/* ---------- Cennik: rozbudowana tabela i prawa kolumna ---------- */
.pricing-table .pr-thumb { width: 54px; height: 38px; object-fit: cover; border-radius: 4px; display: block; }
.pricing-table td.pr-cell { display: flex; align-items: center; gap: 14px; }
.pricing-table th.pr-unit, .pricing-table td.pr-unit { text-align: center; color: var(--muted); font-weight: 400; white-space: nowrap; }
.pricing-meta { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; font-size: 17px; color: var(--muted); margin-bottom: 18px; }
.pricing-meta .pm-live { display: inline-flex; align-items: center; gap: 8px; }
.pricing-meta .pm-live svg { width: 16px; height: 16px; color: var(--accent-strong); }
.pricing-side .ps-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pricing-side .ps-head svg { width: 30px; height: 30px; color: var(--accent-strong); flex: 0 0 auto; }
.pricing-side .ps-head h5 { margin: 0; }
.pricing-side .ps-transport { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin-top: 26px; }
.pricing-side .ps-transport .pt-head { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; }
.pricing-side .ps-transport .pt-head svg { width: 26px; height: 26px; color: var(--accent-strong); flex: 0 0 auto; }
.pricing-side .ps-transport h6 { font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #171c13; margin: 0; }
.pricing-side .ps-transport p { font-size: 17px; color: var(--muted); margin-bottom: 10px; }
.pricing-side .ps-transport a { font-family: var(--font-display); font-size: 15.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-deep); }
.pricing-side .ps-transport a:after { content: " →"; }

/* ---------- Karty „Jak ustalamy cenę?" ---------- */
.sg-cards-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 32px; }
.sg-info-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 22px; text-align: center; }
.sg-info-card .ic-ico { color: var(--accent-strong); display: inline-flex; margin-bottom: 14px; }
.sg-info-card .ic-ico svg { width: 34px; height: 34px; }
.sg-info-card h6 { font-family: var(--font-display); font-size: 17.5px; font-weight: 700; color: #171c13; margin-bottom: 9px; }
.sg-info-card p { font-size: 16.5px; color: var(--muted); margin: 0; line-height: 1.6; }
@media screen and (max-width: 1199px) { .sg-cards-5 { grid-template-columns: repeat(3, 1fr); } }
@media screen and (max-width: 575px) { .sg-cards-5 { grid-template-columns: 1fr; } }

/* ---------- O nas: liczniki na zdjęciu, sprzęt, zespół, pas ekologiczny ---------- */
.sg-about-photo { position: relative; border-radius: var(--radius); overflow: hidden; }
.sg-about-photo > img { width: 100%; display: block; aspect-ratio: 5 / 2; object-fit: cover; }
.sg-about-photo .ap-stats { display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(14,18,12,.94); }
.sg-about-photo .ap-stat { padding: 26px 14px; text-align: center; border-left: 1px solid rgba(255,255,255,.09); }
.sg-about-photo .ap-stat:first-child { border-left: 0; }
.sg-about-photo .ap-stat svg { width: 30px; height: 30px; color: var(--accent); margin-bottom: 11px; }
.sg-about-photo .ap-num { font-family: var(--font-display); font-size: 31px; font-weight: 800; color: #fff; line-height: 1; margin-bottom: 7px; }
.sg-about-photo .ap-cap { font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); line-height: 1.45; }
@media screen and (max-width: 575px) { .sg-about-photo .ap-stats { grid-template-columns: repeat(2, 1fr); } }

.sg-equip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 22px; }
.sg-equip-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; display: block; }
.sg-team-photo img { width: 100%; border-radius: var(--radius); display: block; }
.sg-eco-band { background: var(--ink); }
.sg-eco-band .eco-inner { padding: 46px 0; display: grid; grid-template-columns: auto 1fr auto; gap: 30px; align-items: center; }
.sg-eco-band .eco-ico { color: var(--accent); }
.sg-eco-band .eco-ico svg { width: 60px; height: 60px; }
.sg-eco-band h3 { font-family: var(--font-display); font-size: 26.5px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.sg-eco-band p { color: rgba(255,255,255,.6); margin: 0; font-size: 18px; }
.sg-eco-band .eco-card { background: var(--ink-3); border: 1px solid var(--line-dark); border-radius: var(--radius); padding: 22px 26px; min-width: 320px; }
.sg-eco-band .eco-card .ec-lead { font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; display: block; }
.sg-eco-band .eco-card .ec-phone { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.sg-eco-band .eco-card .ec-phone svg { width: 22px; height: 22px; color: var(--accent); }
.sg-eco-band .eco-card .ec-phone strong { font-family: var(--font-display); font-size: 23px; font-weight: 800; color: #fff; display: block; line-height: 1.2; }
.sg-eco-band .eco-card .ec-phone span { font-size: 16px; color: rgba(255,255,255,.5); }
@media screen and (max-width: 991px) {
	.sg-eco-band .eco-inner { grid-template-columns: 1fr; gap: 24px; }
	.sg-eco-band .eco-card { min-width: 0; }
	.sg-equip-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Blok SEO wyprowadzony ze stopki na jasne tło ---------- */
.sg-seo-band { background: var(--paper); border-top: 1px solid var(--line); padding: 55px 0; }
.sg-seo-band .seoDescription { color: var(--body-c); font-size: 18px; }
.sg-seo-band .seoDescription h2 { font-family: var(--font-display); font-size: 26.5px; font-weight: 800; color: #171c13; margin: 26px 0 12px; }
.sg-seo-band .seoDescription h3 { font-size: 22px; color: #171c13; margin: 22px 0 10px; }
.sg-seo-band .seoDescription > *:first-child { margin-top: 0; }

/* ---------- Stopka: kolumna „Obszar działania" i dolne linki ---------- */
.sg-footer-main .f-area .f-map { width: 100%; max-width: 130px; height: auto; opacity: .9; margin-bottom: 14px; }
.sg-footer-main .f-area .f-area-txt { font-size: 16.5px; color: rgba(255,255,255,.5); line-height: 1.6; margin: 0; }
.sg-footer-bottom { text-align: left; }
.sg-footer-bottom-inner { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; }
.sg-footer-legal { display: flex; gap: 22px; }
.sg-footer-legal a { font-size: 16.5px; color: rgba(255,255,255,.4); }
.sg-footer-legal a:hover { color: var(--accent); }
@media screen and (max-width: 575px) { .sg-footer-bottom-inner { justify-content: center; text-align: center; } }

/* ---------- Domknięcia po przebudowie szablonów ---------- */
/* Ciemny pas przewag dziedziczy nagłówki po .sg-dark, ale bywa używany bez tej klasy. */
.sg-feature-band .sg-h2, .sg-eco-band .sg-h2 { color: #fff; }
.sg-feature-band p, .sg-eco-band p { color: var(--on-dark); }

/* Strefa uploadu wewnątrz białej karty formularza (Wycena, Kontakt) — wariant jasny
   bez konieczności zmieniania klas w treści formularza CF7. */
.sg-form-card .sg-drop { border-color: var(--line); background: var(--paper); }
.sg-form-card .sg-drop:hover { border-color: var(--accent-strong); background: #fff; }
.sg-form-card .sg-drop .drop-ico { color: var(--accent-strong); }
.sg-form-card .sg-drop .drop-title { color: #171c13; }
.sg-form-card .sg-drop .drop-sub { color: var(--muted); }
.sg-form-card .qf-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: start; }
.sg-form-card .qf-submit { margin-top: 22px; }
@media screen and (max-width: 767px) { .sg-form-card .qf-grid { grid-template-columns: 1fr; } }

/* Etykiety pól w zielonym formularzu szybkiej wyceny mają być czytelne na zieleni. */
.sg-quote-form .qf-submit { margin-top: 20px; }
.sg-quote-form .sg-drop { height: 100%; display: flex; flex-direction: column; justify-content: center; }

/* Nagłówek H2 w sekcjach z krótkim wstępem — mniejszy odstęp pod ołówkiem. */
.sg-section .sg-eyebrow + .sg-h2 { margin-top: 4px; }
.sg-h2 + .sg-lead { margin-top: 10px; }

/* Kafle transportu: ikona przy tytule nie może rozjeżdżać wiersza. */
.transport-tiles .t-cont .mc-head svg { width: 22px; height: 22px; color: var(--accent-strong); flex: 0 0 auto; }
.transport-tiles .t-cont .mc-head { display: flex; align-items: center; gap: 10px; }

/* Telefon w pasie CTA bywa linkiem — nie może zmieniać koloru na domyślny motywu. */
.cta-band a.cta-phone, .cta-band a.cta-phone:hover { color: #fff; display: inline-block; }
/* Ikona w strefie uploadu — FontAwesome zamiast SVG, bo treść formularza CF7
   przechodzi przez filtry zapisu WordPressa i inline SVG bywa z niej wycinany. */
.sg-drop .drop-ico i { font-size: 35px; line-height: 1; }
.sg-drop .drop-ico { display: block; }

/* ---------- Poprawki po pierwszym renderze ---------- */
/* Sekcja dwukolumnowa: treść z ACF bywa bardzo długa, więc wyśrodkowanie w pionie
   zostawiało kilkaset pikseli pustki nad zdjęciem. Wyrównanie do góry + zdjęcie
   „przyklejone" przy scrollu, żeby towarzyszyło tekstowi zamiast wisieć na dole. */
.sg-split { align-items: start; }
.sg-split .split-img { position: sticky; top: 100px; }
.sg-split .split-img img { min-height: 0; max-height: 460px; }
@media screen and (max-width: 991px) {
	.sg-split .split-img { position: static; }
	.sg-split .split-img img { max-height: 300px; }
}

/* Pasek przewag w hero leży na dolnej — często najjaśniejszej — części zdjęcia.
   Dodatkowy cień od dołu utrzymuje kontrast tekstu niezależnie od kadru. */
.sg-hero-sub .hero-shade:after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 55%;
	background: linear-gradient(180deg, rgba(10,13,8,0) 0%, rgba(10,13,8,.82) 100%);
	pointer-events: none;
}
/* Na Kontakcie mapa stoi obok wysokiej karty formularza — niższa zostawiała pustkę. */
.sg-contact-page .sg-area-map iframe { height: 430px; }

/* Tabela cennika ma cztery kolumny — na wąskich ekranach musi się przewijać w poziomie
   wewnątrz własnego kontenera, inaczej `overflow-x:hidden` na body po prostu ją ucina. */
.pricing-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pricing-table { min-width: 520px; }
@media screen and (max-width: 575px) {
	.pricing-table .pr-thumb { width: 40px; height: 30px; }
	.pricing-table td.pr-cell { gap: 10px; }
}

/* ---------- Marginesy boczne na telefonach ----------
   Stary motyw zeruje padding `.container` i przywraca go dopiero od 576 px w górę.
   Efekt: poniżej tej szerokości nagłówki, akapity i karty dotykały obu krawędzi ekranu
   (zmierzone przez CDP: container.left = 0, padding-left = 0 przy 390 px, a przy 768 px
   już 24 px). Dotyczy całej strony, nie tylko nowych sekcji. */
@media screen and (max-width: 575px) {
	.container { padding-left: 20px; padding-right: 20px; }
	.container-fluid { padding-left: 20px; padding-right: 20px; }
	.sg-hero-sub .hero-inner { padding-top: 70px; padding-bottom: 60px; }
}

/* Powyżej 576 px marginesu pilnuje szerokość maksymalna kontenera, ale stary motyw
   wymusza `.container { max-width: 1370px !important }` od 1200 px w górę. W przedziale
   1200–1396 px kontener wypełniał więc ekran co do piksela: nagłówki hero startowały
   z pozycji 0 (zmierzone przez CDP). To samo, w mniejszej skali, przy 992 px (9 px).
   `min()` przycina szerokość do wolnego miejsca, zostawiając stały margines,
   a na szerokich ekranach nie zmienia niczego — 1370 px nadal wygrywa. */
@media screen and (min-width: 576px)  { .container { max-width: min(540px,  calc(100% - 40px)); } }
@media screen and (min-width: 768px)  { .container { max-width: min(720px,  calc(100% - 48px)); } }
@media screen and (min-width: 992px)  { .container { max-width: min(960px,  calc(100% - 48px)); } }
@media screen and (min-width: 1200px) { .container { max-width: min(1370px, calc(100% - 48px)) !important; } }

/* ---------- Poprawki po uwagach klienta (15.08.2026, wieczór) ---------- */

/* 1. Kontakt: karta „Jak dojechać?" dziedziczyła `height:100%` po `.sg-form-card`
      i rozciągała się do wysokości kolumny z formularzem obok, zostawiając pod
      treścią kilkaset pikseli pustego białego tła. Ma się dopasować do zawartości. */
.sg-card-auto { height: auto !important; }

/* 4. Mapka „Obszar działania" w stopce była za duża względem reszty kolumny. */
.sg-footer-main .f-area .f-map { max-width: 88px; margin-bottom: 12px; }

/* 5. FAQ rozwinięte domyślnie — pytania renderują się z klasą `open`,
      więc `+` musi od razu pokazywać stan rozwinięty. Klik nadal zwija i rozwija. */
.faq-item.open .faq-q { padding-bottom: 12px; }

/* 3+6. Formularz szybkiej wyceny: strefa uploadu pod opisem, na pełną szerokość.
        Wcześniej stała w prawej kolumnie (`qf-grid`), przez co pola były wąskie. */
.sg-quote-form .qf-drop, .sg-form-card .qf-drop { margin-top: 4px; }
.sg-quote-form .sg-drop, .sg-form-card .sg-drop { height: auto; display: block; }
.sg-quote-form .sg-drop { padding: 24px 22px; }

/* ================================================================
   POPRAWKI PO UWAGACH KLIENTA — 18.08.2026
   Lista uwag: logo, mniejsze odstępy, większe czcionki, kontenery 24–36 m³,
   usunięcie „Realizacji", powiększone ikony i teksty w blokach 1–5 strony
   głównej, tekst pozycjonujący pod stopką, ciaśniejsza stopka.
   ================================================================ */

/* ---------- Logotyp klienta ---------- */
.navbar .sg-logo img { height: 46px; }
.footer .f-logo { display: inline-block; margin-bottom: 4px; }
.footer .f-logo img { height: 52px; width: auto; }
@media screen and (min-width: 1200px) and (max-width: 1459px) {
	.navbar .sg-logo img { height: 40px; }
}
@media screen and (max-width: 1199.98px) {
	.navbar .sg-logo img { height: 38px; }
}

/* ---------- Blok 1: pasek przewag pod bannerem („własny transport" itd.) ----------
   Klient: „powiększenie ikon oraz tekstu". */
.sg-usp .usp-item { gap: 18px; padding: 30px 26px; }
.sg-usp .usp-ico svg { width: 48px; height: 48px; stroke-width: 1.35; }
.sg-usp .usp-item h6 { font-size: 18px; letter-spacing: .07em; margin-bottom: 5px; }
.sg-usp .usp-item p { font-size: 17.5px; line-height: 1.45; }
@media screen and (max-width: 575px) {
	.sg-usp .usp-ico svg { width: 40px; height: 40px; }
}

/* ---------- Blok 2: „O nas" z licznikami ----------
   Klient: większe ikony i tekst, bez obwódek — w projekcie liczniki stoją swobodnie,
   rozdzielone tylko cienką pionową linią, bez białej karty i ramek komórek. */
.sg-stats.sg-stats-row { background: transparent; border: 0; border-radius: 0; overflow: visible; }
.sg-stats.sg-stats-row .stat { padding: 6px 20px; border-top: 0; }
.sg-stats.sg-stats-row .stat svg { width: 58px; height: 58px; stroke-width: 1.3; margin-bottom: 14px; }
.sg-stats.sg-stats-row .stat .stat-num { font-size: 40px; margin-bottom: 6px; }
.sg-stats.sg-stats-row .stat .stat-label { font-size: 17px; letter-spacing: .07em; line-height: 1.35; }
.sg-stats.sg-stats-row .stat .stat-sub { font-size: 17px; margin-top: 6px; }
@media screen and (max-width: 991px) {
	.sg-stats.sg-stats-row .stat { padding: 22px 14px; border-top: 1px solid var(--line); }
	.sg-stats.sg-stats-row .stat:nth-child(-n+2) { border-top: 0; }
}

/* ---------- Blok 4: „Dlaczego firmy wybierają SILEGOLD?" ----------
   Klient: cały tekst czarny, ikony większe i ustawione jak w projekcie (z lewej,
   obok liczby — nie nad nią, bez okrągłej obwódki), dolny pasek korzyści większy. */
.sg-why-light .why-stats { gap: 0; margin: 36px 0 40px; }
.sg-why-light .why-stat {
	display: flex;
	align-items: center;
	gap: 18px;
	text-align: left;
	padding: 4px 24px;
}
.sg-why-light .why-stat .w-ico {
	width: auto; height: auto;
	margin: 0;
	border: 0;
	background: none;
	border-radius: 0;
	flex: 0 0 auto;
	color: var(--accent-strong);
}
.sg-why-light .why-stat .w-ico svg { width: 54px; height: 54px; stroke: currentColor; stroke-width: 1.3; }
.sg-why-light .why-stat .w-num { font-size: 34px; color: #0e120c; margin-bottom: 2px; }
.sg-why-light .why-stat .w-cap { font-size: 17px; color: #0e120c; letter-spacing: .06em; }
.sg-why-light .why-checks-label { padding-top: 28px; margin-bottom: 22px; }
.sg-why-light .why-checks { gap: 22px 26px; }
.sg-why-light .why-check svg { width: 24px; height: 24px; min-width: 24px; stroke-width: 2.2; margin-top: 1px; }
.sg-why-light .why-check span { font-size: 18.5px; color: #0e120c; line-height: 1.4; }
@media screen and (max-width: 991px) {
	.sg-why-light .why-stat { padding: 4px 14px; }
	.sg-why-light .why-stat .w-ico svg { width: 46px; height: 46px; }
}
@media screen and (max-width: 575px) {
	.sg-why-light .why-stat { padding: 4px 0; }
}

/* ---------- Blok 5: „Jak wygląda współpraca?" ----------
   Klient: bez tekstu pod nagłówkiem (usunięty w page_home.php), większe ikony i tekst,
   bez okrągłej obwódki — jak w projekcie: jasna kwadratowa karta, w niej numer w zielonym
   kółku i duża ikona obok. Ten sam układ mają kroki na podstronie ofertowej,
   transporcie i wycenie (wszystkie używają .sg-steps). */
.sg-steps { gap: 22px 34px; margin-top: 36px; }
.sg-steps .step {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 26px 22px 24px;
}
.sg-steps .step .st-top {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-bottom: 16px;
}
.sg-steps .step .st-no {
	position: static;
	margin: 0;
	width: 34px; height: 34px;
	font-size: 17.5px;
	flex: 0 0 auto;
}
.sg-steps .step .st-ico {
	width: auto; height: auto;
	margin: 0;
	border: 0;
	background: none;
	border-radius: 0;
	flex: 0 0 auto;
	color: var(--accent-strong);
}
.sg-steps .step .st-ico svg { width: 48px; height: 48px; stroke: currentColor; stroke-width: 1.3; }
.sg-steps .step h6 { font-size: 18.5px; margin-bottom: 8px; }
.sg-steps .step p { font-size: 17.5px; line-height: 1.45; }
/* Strzałka między kartami — w odstępie, nie na karcie. */
.sg-steps .step:not(:last-child):after { right: -17px; top: 42px; font-size: 22px; }
@media screen and (max-width: 991px) {
	.sg-steps .step .st-ico svg { width: 42px; height: 42px; }
}
/* Wariant pięciu kroków (Wycena odpadów) — w kartach potrzebuje mniejszej ikony. */
.sg-steps.sg-steps-5 .step .st-ico svg { width: 42px; height: 42px; }
.sg-steps.sg-steps-5 .step { padding: 22px 16px 20px; }

/* ---------- Tekst pozycjonujący pod stopką (czarne tło) ----------
   Klient: „tekst pod pozycjonowanie pod stopką na czarnym tle". Wcześniej ten blok
   stał w jasnym pasie NAD stopką (klasa .sg-seo-band, zostaje nieużywana). */
.sg-footer-seo {
	border-top: 1px solid var(--line-dark);
	padding: 30px 0 26px;
}
.sg-footer-seo .sg-rte,
.sg-footer-seo p,
.sg-footer-seo li,
.sg-footer-seo span { color: rgba(255,255,255,.5); font-size: 16.5px; line-height: 1.65; }
.sg-footer-seo h1, .sg-footer-seo h2, .sg-footer-seo h3, .sg-footer-seo h4, .sg-footer-seo h5 {
	color: rgba(255,255,255,.8);
	font-size: 18px;
	margin-bottom: 10px;
	text-transform: none;
}
.sg-footer-seo a { color: var(--accent); }
.sg-footer-seo strong, .sg-footer-seo b { color: rgba(255,255,255,.72); }

/* ---------- Skrót cennika na stronie głównej ---------- */
.pricing-table td.price .pr-u { color: var(--muted); font-weight: 400; font-size: 15.5px; }

/* ---------- Regresja po powiększeniu czcionek: pas ikon rozpychał stronę ----------
   `repeat(var(--cols), 1fr)` to w praktyce `minmax(auto, 1fr)`, więc kolumna nie może
   zwężyć się poniżej najdłuższego wyrazu. Po powiększeniu nagłówków „ODPOWIEDZIALNOŚĆ"
   w sześciokolumnowym pasie na stronie O nas przestawało się mieścić i cała strona
   dostawała 49 px przewijania poziomego przy 1200 px (wykryte sondą CDP).
   minmax(0, 1fr) zdejmuje ten próg, a mniejszy padding i odstęp liter dają wyrazowi
   miejsce, żeby nie wychodził poza kolumnę. */
.sg-feature-grid { grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); }
.sg-feature-grid .fb-item { padding: 6px 18px; overflow-wrap: break-word; }
.sg-feature-grid h6 { font-size: 15px; letter-spacing: .08em; }

/* ================================================================
   POPRAWKI PO UWAGACH KLIENTA — 10.09.2026 (trzecia lista)
   Teksty i ikony w górę, navbar na zdjęciu, poprawki układów
   na Transporcie, Cenniku, Kontakcie, Wycenie i podstronie ofertowej.
   ================================================================ */

/* ---------- Navbar leży NA zdjęciu — „usunąć odstęp między bannerem a górną belką" ----------
   Do tej pory pasek menu był nieprzezroczysty, a hero zaczynało się dopiero pod nim
   (`margin-top: 76px`), więc nad każdym bannerem stał czarny pas wysokości menu.
   W mockupach menu leży na zdjęciu. Po scrollu (`.nav-scroll`) pasek dostaje tło z powrotem. */
.navbar { background: transparent; border-bottom-color: transparent; }
.nav-scroll { background: var(--ink); border-bottom-color: var(--line-dark); }
.sg-hero, .sg-hero-sub { margin-top: 0; }
.sg-hero .hero-inner { padding-top: 185px; padding-bottom: 105px; }
.sg-hero-sub .hero-inner { padding-top: 150px; padding-bottom: 80px; }
/* Zdjęcia bywają jasne przy górnej krawędzi — menu musi zostać czytelne. */
.sg-hero:before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 170px;
	z-index: 1;
	background: linear-gradient(180deg, rgba(10,13,8,.88) 0%, rgba(10,13,8,.45) 55%, rgba(10,13,8,0) 100%);
	pointer-events: none;
}
@media screen and (max-width: 1199.98px) {
	.sg-hero .hero-inner { padding-top: 150px; }
	.sg-hero-sub .hero-inner { padding-top: 125px; }
}
@media screen and (max-width: 767px) {
	.sg-hero, .sg-hero-sub { margin-top: 0; }
}
@media screen and (max-width: 575px) {
	.sg-hero .hero-inner { padding-top: 130px; padding-bottom: 70px; }
	.sg-hero-sub .hero-inner { padding-top: 110px; padding-bottom: 55px; }
}

/* ---------- Logotyp ----------
   Klient: „logo na pasku kategorii zbyt rozciągnięte". Proporcje pliku są zachowane
   (width: auto) — wrażenie bierze się z poziomego układu logotypu i cienkiego kroju.
   Podniesienie wysokości robi napis wyraźniejszym; szerokość mieści się w pasku,
   bo z menu wypadła zakładka „Realizacje". */
.navbar .sg-logo img { height: 54px; }
@media screen and (min-width: 1200px) and (max-width: 1459px) { .navbar .sg-logo img { height: 46px; } }
@media screen and (max-width: 1199.98px) { .navbar .sg-logo img { height: 42px; } }

/* Godziny przy telefonie w pasku — klient prosił o czytelniejsze. */
.nav-phone .nav-phone-hours { font-size: 13px; color: rgba(255,255,255,.72); letter-spacing: .01em; }

/* ---------- Ikony w górę (klient: „wszystkie teksty i ikony powiększyć jak w projekcie") ---------- */
.sg-usp .usp-ico svg { width: 56px; height: 56px; }
.sg-stats.sg-stats-row .stat svg { width: 64px; height: 64px; }
.sg-why-light .why-stat .w-ico svg { width: 64px; height: 64px; }
.sg-steps .step .st-ico svg { width: 54px; height: 54px; }
.sg-hero-usp .hu-ico svg { width: 38px; height: 38px; }
.sg-feature-grid .fb-head svg { width: 32px; height: 32px; }
.sg-contact-card .cc-ico svg { width: 36px; height: 36px; }
.sg-type-tile .tt-head svg { width: 24px; height: 24px; }
.sg-minicard svg, .sg-info-card svg { width: 34px; height: 34px; }
.cta-mini .cm-item svg { width: 32px; height: 32px; }
@media screen and (max-width: 575px) {
	.sg-usp .usp-ico svg, .sg-stats.sg-stats-row .stat svg,
	.sg-why-light .why-stat .w-ico svg { width: 46px; height: 46px; }
}

/* ---------- Blok „O nas": liczniki ----------
   Klient: „25+ i 500+ troszkę mniejsze". W projekcie liczba jest tylko nieco większa
   od podpisu, a podpis jest czarny — u nas kontrast był zbyt duży. */
.sg-stats.sg-stats-row .stat .stat-num { font-size: 34px; }
.sg-stats.sg-stats-row .stat .stat-label { font-size: 16.5px; color: #0e120c; }
.sg-stats.sg-stats-row .stat .stat-sub { font-size: 16px; color: #3d4438; }
.sg-why-light .why-stat .w-num { font-size: 31px; }

/* ---------- Pasek przewag w hero (Oferta i pozostałe podstrony) ----------
   Klient: „trochę większy tekst na kafelkach na pierwszym bannerze". */
.sg-hero-usp h6 { font-size: 14.5px; }
.sg-hero-usp p { font-size: 15.5px; }

/* ---------- „Nasze wartości" i pozostałe pasy ikon — minimalne powiększenie treści ---------- */
.sg-feature-grid h6 { font-size: 15px; }
.sg-feature-grid p { font-size: 16.5px; line-height: 1.55; }

/* ---------- Formularz szybkiej wyceny na stronie głównej ----------
   Klient: „myślę, że może być trochę mniejszy". */
.sg-quote-form { padding: 30px 30px 32px; }
.sg-quote-form h3 { font-size: 24px; margin-bottom: 14px; }
.sg-quote-form .wpcf7 input[type=text],
.sg-quote-form .wpcf7 input[type=tel],
.sg-quote-form .wpcf7 input[type=email],
.sg-quote-form .wpcf7 select { padding: 11px 14px; }
.sg-quote-form .wpcf7 textarea { min-height: 74px; }
.sg-quote-form .sg-drop { padding: 18px 20px; }
.sg-quote-form .sg-drop .drop-ico i { font-size: 26px; }

/* ---------- Transport: rendery kontenerów były ucięte ----------
   Kontener miał 92 px wysokości, a szablon podawał w `style` `max-height` do 96 px —
   przy 30 i 36 m³ obrazek nie mieścił się i był przycinany. Teraz wysokość ustala
   wyłącznie CSS, a różnicę wielkości oddaje skala w klasach `is-*`. */
.container-sizes .size-item .size-img { height: 132px; }
.container-sizes .size-item .size-img img { max-height: 100%; height: auto; }
.container-sizes .size-item.is-24 .size-img img { max-height: 76%; }
.container-sizes .size-item.is-30 .size-img img { max-height: 88%; }
.container-sizes .size-item.is-36 .size-img img { max-height: 100%; }
.container-sizes .size-item .size-name { font-size: 21px; }
.container-sizes .size-item p { font-size: 15.5px; }

/* ---------- Transport / dowolna ciemna sekcja: kroki procesu ----------
   Karty kroków są jasne, więc odziedziczony po `.sg-dark` biały tekst był na nich
   niewidoczny (zgłoszenie klienta: „blok «jak to działa» poprawa na czarny tekst"). */
.sg-dark .sg-steps .step h6,
.sg-feature-band .sg-steps .step h6,
.sg-steps .step h6 { color: #0e120c; }
.sg-dark .sg-steps .step p,
.sg-feature-band .sg-steps .step p,
.sg-steps .step p { color: #3d4438; }

/* ---------- Pas CTA: trzy przewagi w jednej linii ----------
   Klient (Cennik): „grafika «masz złom do sprzedania» — ikonki w jednej linii".
   `flex-wrap: wrap` przy `max-width: 130px` łamał je na dwa wiersze. */
.cta-mini { flex-wrap: nowrap; gap: 22px; justify-content: center; }
.cta-mini .cm-item { max-width: 175px; }
.cta-mini .cm-item span { font-size: 15px; }
@media screen and (max-width: 991px) {
	.cta-mini { flex-wrap: wrap; justify-content: flex-start; }
}

/* ---------- Karty kontaktowe (Kontakt, Cennik, podstrona) ----------
   Klient: „poprawa wielkości i ułożenia bloków i kafelek jak w projekcie".
   Karty w rzędzie mają równać wysokość, a treść startować od góry — wcześniej
   jedna karta rozciągała się na wysokość sąsiedniej kolumny i zostawiała pustkę. */
.sg-contact-cards { align-items: stretch; }
.sg-contact-card { display: flex; flex-direction: column; height: 100%; }
.sg-contact-card h6 { font-size: 15px; }
.sg-contact-card p, .sg-contact-card a, .sg-contact-card span { font-size: 16.5px; }
.sg-help-card, .sg-note-card, .sg-dark-card { align-self: start; }

/* ---------- Sekcja zdjęcie + treść na podstronie ofertowej ----------
   Klient: „żeby nie trzeba było tyle zjeżdżać (może mniejsze zdjęcie główne?)".
   Zdjęcie główne niższe, a obrazki wklejone w treść z edytora dostają wspólny
   rozmiar zamiast pełnej szerokości kolumny. */
.sg-split .split-img img { min-height: 0; max-height: 330px; }
.sg-split .split-body .sg-rte img,
.sg-rte img { max-height: 210px; width: auto; border-radius: var(--radius); }
.sg-rte p:has(> img) { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
@media screen and (max-width: 991px) {
	.sg-split .split-img img { max-height: 260px; }
}

/* ---------- Klasy dołożone przy poprawkach 10.09.2026 ---------- */

/* Przycisk z zieloną obwódką — na jasnej karcie. `sg-btn-ghost` ma białą ramkę
   i biały tekst (jest do ciemnych teł), więc na białej karcie znikał. */
.sg-btn-outline {
	background: transparent;
	border-color: var(--accent-strong);
	color: var(--accent-deep) !important;
}
.sg-btn-outline:hover { background: var(--accent-strong); color: #fff !important; }

/* Dane kontaktowe z ikonami — Transport i Cennik (układ jak w projekcie). */
.sg-contact-inline { list-style: none; padding: 0; margin: 22px 0 26px; }
.sg-contact-inline li { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.sg-contact-inline li:last-child { margin-bottom: 0; }
.sg-contact-inline .ci-ico {
	color: var(--accent-strong);
	display: inline-flex;
	flex: 0 0 auto;
}
.sg-contact-inline .ci-ico svg { width: 30px; height: 30px; }
.sg-contact-inline.is-boxed .ci-ico {
	width: 46px; height: 46px;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: #fff;
	align-items: center;
	justify-content: center;
}
.sg-contact-inline.is-boxed .ci-ico svg { width: 22px; height: 22px; }
.sg-contact-inline .ci-txt { font-size: 16.5px; color: var(--body-c); }
.sg-contact-inline .ci-strong {
	display: block;
	font-family: var(--font-display);
	font-size: 21px;
	font-weight: 800;
	color: #171c13;
	line-height: 1.2;
}
.sg-contact-inline .ci-sub { display: block; font-size: 15px; color: var(--muted); }

/* Zielona karta wyceny w wariancie wąskim (trzecia kolumna na Transporcie). */
.sg-quote-compact { padding: 28px 26px; }
.sg-quote-compact h3 { font-size: 21px; margin-bottom: 10px; }
.sg-quote-compact p { color: rgba(255,255,255,.82); font-size: 15.5px; margin-bottom: 20px; }

/* Kafle Transportu bez podpisu — zostaje samo zdjęcie. */
.t-tile-plain { border: 0; background: none; box-shadow: none; }
.t-tile-plain .t-img { border-radius: var(--radius); overflow: hidden; }
.t-tile-plain .t-img img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

/* Kolumna z treścią obok nagłówka sekcji — pierwszy wiersz tekstu ma stać na wysokości
   nagłówka, a nie ołówka nad nim (zgłoszenie „wyrównanie tekstu" na Transporcie). */
@media screen and (min-width: 768px) {
	.sg-col-aligned { padding-top: 38px; }
}

/* Dopisek pod listą miast (podstrona ofertowa). */
.sg-area-note { margin-top: 16px; font-size: 16px; color: var(--body-c); }

/* Kroki na ciemnej sekcji Transportu: karty są jasne, więc reguły `.steps-dark`
   (biały tekst, jasnozielona ikona) robiły je nieczytelnymi. Selektor musi być
   równie szczegółowy jak tamten, inaczej nie wygrywa. */
.steps-dark .sg-steps .step h6 { color: #0e120c; }
.steps-dark .sg-steps .step p { color: #3d4438; }
.steps-dark .sg-steps .step .st-ico svg { stroke: var(--accent-strong); }

/* Podstrona ofertowa: zdjęcie jako pas nad treścią -------------------------------
   Trzecie podejście do tej samej sekcji i to ono zostaje. Historia:
   1. Dwie kolumny (`sg-split`) — treść z ACF ma tu ~4,5 tys. znaków, więc prawa kolumna
      ciągnęła się w nieskończoność, a lewa po zakończeniu zdjęcia była pusta.
   2. Zdjęcie opływane tekstem (`is-flow`, 10.09.2026) — pustka zniknęła, ale przejście
      spod zdjęcia na pełną szerokość wypadało w środku listy: część pozycji była wcięta,
      część nie. Klient zgłosił to jako rozjechane opisy (21.09.2026).
   3. Pas nad treścią — zachowuje się tak samo niezależnie od długości tekstu,
      a ta na 11 podstronach jest bardzo różna. */
.sg-split.is-stacked { display: block; }
.sg-split.is-stacked .split-img { position: static; margin-bottom: 28px; }
.sg-split.is-stacked .split-img img { width: 100%; height: 280px; min-height: 0; max-height: none; object-fit: cover; }
@media screen and (max-width: 767px) {
	.sg-split.is-stacked .split-img img { height: 220px; }
}

/* Ten sam próg min-content, co przy 1200 px, wracał w zapytaniach medialnych:
   `repeat(3, 1fr)` i `repeat(2, 1fr)` nadpisywały bazowe `minmax(0, 1fr)`, więc
   „ODPOWIEDZIALNOŚĆ" znowu rozpychała stronę — tym razem przy 992 px (sonda CDP). */
@media screen and (max-width: 1199px) {
	.sg-feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media screen and (max-width: 767px) {
	.sg-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 479px) {
	.sg-feature-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Formularz szybkiej wyceny — samo `min-height` nie skracało pola opisu, bo wysokość
   bierze się z atrybutu `rows` w znacznikach CF7. Strefa uploadu też była wyższa,
   niż potrzeba, gdy stoi pod polem opisu na pełnej szerokości. */
.sg-quote-form .wpcf7 textarea { min-height: 74px; height: 108px; }
.sg-quote-form .sg-drop { padding: 14px 18px; }
.sg-quote-form .sg-drop .drop-title { margin-bottom: 2px; }
.sg-quote-form .sg-drop .drop-sub { margin: 0; }

/* ================================================================
   POPRAWKI PO ZGŁOSZENIU KLIENTA — 21.09.2026
   Dwie rzeczy: mniejsza kafelka „Szybka wycena" na stronie głównej
   i rozjechane zdjęcia w treści podstron ofertowych.
   ================================================================ */

/* ---------- Kafelka „Szybka wycena" ----------
   Klient prosił o pomniejszenie drugi raz. Kolumna zwężona z 7/12 do 6/12
   (`page_home.php`), a tutaj schodzą paddingi, wysokość pola opisu i strefy
   uploadu — to ona zajmowała najwięcej miejsca. */
.sg-quote-form { padding: 24px 24px 26px; }
.sg-quote-form h3 { font-size: 21px; margin-bottom: 12px; }
.sg-quote-form .wpcf7 .row { --bs-gutter-x: 12px; --bs-gutter-y: 10px; }
.sg-quote-form .wpcf7 input[type=text],
.sg-quote-form .wpcf7 input[type=tel],
.sg-quote-form .wpcf7 input[type=email],
.sg-quote-form .wpcf7 select { padding: 10px 13px; font-size: 16px; }
.sg-quote-form .wpcf7 textarea { min-height: 0; height: 88px; font-size: 16px; }
.sg-quote-form .sg-drop { padding: 13px 16px; }
.sg-quote-form .sg-drop .drop-ico { margin-bottom: 5px; }
.sg-quote-form .sg-drop .drop-ico i { font-size: 22px; }
.sg-quote-form .sg-drop .drop-title { font-size: 16px; }
.sg-quote-form .sg-drop .drop-sub { font-size: 14.5px; }
.sg-quote-form .qf-submit { margin-top: 14px; }
.sg-quote-form .wpcf7 button.button-secondary,
.sg-quote-form .wpcf7 input[type=submit] { padding: 13px 24px; }

/* ---------- Zagnieżdżona siatka Bootstrapa w treści z edytora ----------
   ⚠️ Treść pól ACF na podstronach ofertowych zawiera WŁASNY `.container > .row > .col-md-6`
   (tak wkleił to poprzedni wykonawca). Dopóki `.sg-split` był siatką dwukolumnową, ta
   zagnieżdżona siatka miała do dyspozycji ~55% szerokości i mieściła się bez rzucania się
   w oczy. Po przejściu na układ opływany (`is-flow`, 10.09.2026) treść dostała pełne
   1370 px, zagnieżdżony `.container` wziął swój własny `max-width`, a zdjęcia z klasą
   `mx-auto` rozjechały się po środkach półkolumn — stąd zgłoszenie „porozjeżdżały się
   opisy i zdjęcia w ofercie".

   Lek: zagnieżdżony kontener przestaje mieć własną szerokość i padding, zdjęcia wypełniają
   swoją kolumnę w stałej proporcji, a wiersz wyrównuje tekst i zdjęcie do środka w pionie. */
.sg-rte .container { width: 100%; max-width: 100% !important; padding-left: 0; padding-right: 0; }
.sg-rte .row { margin-left: -10px; margin-right: -10px; align-items: center; }
.sg-rte .row > [class*="col-"] { padding-left: 10px; padding-right: 10px; }
.sg-rte .gallery-box, .sg-rte .gallery-img { width: 100%; }
.sg-rte .gallery-item .gallery-img img {
	width: 100%;
	height: auto;
	max-height: none;
	margin: 0;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius);
}
/* Puste `<h3></h3>` i `<p>&nbsp;</p>` z edytora robiły dodatkowe dziury między wierszami. */
.sg-rte h3:empty, .sg-rte h4:empty, .sg-rte div:empty { display: none; }

/* Linia tekstu na pełne 1370 px jest za długa do czytania. Lewa krawędź zostaje
   na miejscu (bez `margin: auto`), żeby sekcja trzymała się osi reszty strony. */
.sg-split.is-stacked { max-width: 1150px; }

/* Zdjęcia w galeriach z edytora: stała wysokość zamiast proporcji — przy szerokości
   półkolumny (~560 px) kadr 4:3 dawał 420 px wysokości i sekcja znowu puchła. */
.sg-rte .gallery-item .gallery-img img { aspect-ratio: auto; height: 250px; }
@media screen and (max-width: 767px) {
	.sg-rte .gallery-item .gallery-img img { height: 200px; }
	.sg-rte .row > [class*="col-"] { margin-bottom: 20px; }
}

/* Strefa uploadu była o ~85 px za wysoka, a przyczyna nie siedziała w paddingu.
   Contact Form 7 przepuszcza treść formularza przez `wpautop`, które wstawia `<br />`
   po każdym elemencie w nowej linii. Wewnątrz `.sg-drop` spany są blokowe, więc każdy
   taki `<br>` dokładał pustą linię (~28 px) — trzy sztuki. Znaczników w `cf7/` nie da
   się złożyć w jednej linii bez utraty czytelności, więc łamania są chowane tutaj. */
.sg-drop br { display: none; }

/* Wiersze galerii w treści z edytora mają wklejone `style="padding-top: 50px"`.
   Przy trzech wierszach to 150 px pustki na podstronie, która i tak jest najdłuższa
   w serwisie — przycinamy, nie ruszając treści w bazie. */
.sg-rte .row[style*="padding-top"] { padding-top: 26px !important; }

/* ---------- Strzałka między krokami procesu ----------
   Był to znak „→" ustawiony `right: -17px`, czyli cienka kreska doklejona do prawej
   krawędzi karty, nie na środku przerwy między kartami. Teraz rysunek jest maską SVG:
   grubość kreski ustala `stroke-width` w samym rysunku, rozmiar `width/height`,
   a kolor zwykłe `background-color` — dzięki masce ciemny wariant wymaga zmiany
   jednej właściwości, nie drugiego pliku.

   Wyśrodkowanie w poziomie: lewa krawędź na 100% szerokości karty, `margin-left`
   równy połowie odstępu siatki (gap 22 px), `translateX(-50%)` cofa o połowę własnej
   szerokości. Środek strzałki ląduje dokładnie w połowie przerwy — niezależnie od
   liczby kolumn, więc wariant pięciu kroków na Wycenie działa bez osobnej reguły. */
.sg-steps .step:not(:last-child):after {
	content: "";
	position: absolute;
	left: 100%;
	right: auto;
	top: 53px;
	margin-left: 17px;   /* połowa odstępu poziomego siatki (34 px) */
	transform: translate(-50%, -50%);
	width: 30px;
	height: 30px;
	font-size: 0;
	/* ⚠️ ścieżka jest wyśrodkowana w viewBox (trzon 4→20, środek 12). Asymetryczny rysunek
	   przy `background-size: contain` przesuwa się w kadrze i strzałka przestaje stać
	   w połowie przerwy, mimo poprawnego pozycjonowania elementu. */
	background-color: var(--accent-strong);
	-webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12h16'/><path d='m14 6 6 6-6 6'/></svg>") no-repeat center / contain;
	mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12h16'/><path d='m14 6 6 6-6 6'/></svg>") no-repeat center / contain;
}
/* Na ciemnym pasie Transportu jaśniejsza zieleń czyta się lepiej. */
.steps-dark .sg-steps .step:not(:last-child):after { background-color: var(--accent); }

/* ---------- Siatka kroków: próg min-content i odstęp na wąskich ekranach ----------
   Poszerzenie odstępu z 22 na 34 px zwęziło karty, a `repeat(N, 1fr)` to w praktyce
   `minmax(auto, 1fr)` — kolumna nie zejdzie poniżej najdłuższego wyrazu („ROZLICZENIE"
   wersalikami z odstępem liter). Ta sama rodzina błędów rozepchnęła już stronę dwa razy
   (18.08 przy 1200 px, 10.09 przy 992 px), więc próg zdejmujemy od razu we wszystkich
   breakpointach, a nie dopiero po zgłoszeniu.

   ⚠️ Odstęp poziomy 34 px ma sens tylko tam, gdzie między kartami stoi strzałka, czyli
   na układzie wielokolumnowym. Poniżej 992 px strzałki są ukryte, a karty są wąskie —
   tam wraca ciaśniejsze 20 px. Reguła bazowa `.sg-steps` stoi w arkuszu PÓŹNIEJ niż
   zapytanie medialne z linii 627, więc bez tego nadpisania tamto nie miałoby szans. */
.sg-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sg-steps.sg-steps-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media screen and (max-width: 1199px) {
	.sg-steps.sg-steps-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media screen and (max-width: 991px) {
	.sg-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 20px; }
}
@media screen and (max-width: 767px) {
	.sg-steps.sg-steps-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 575px) {
	.sg-steps, .sg-steps.sg-steps-5 { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* ---------- Lista korzyści „Co zyskujesz" na wąskich telefonach ----------
   Przy dwóch kolumnach i szerokości ~375 px prawa kolumna wychodziła poza ekran
   i była UCINANA (stary motyw ma `body { overflow-x: hidden }`), więc z tekstu
   zostawało „Kontenery o…", „Analiza met…".

   ⚠️ Zestaw regresji tego nie łapał z dwóch powodów naraz: `overflow-x: hidden`
   zostawia `scrollWidth` równy szerokości okna, a sonda bada 390 px w emulacji
   urządzenia, gdzie viewport ma pełne 390 px CSS. Zrzut przy `--window-size=390`
   daje kilkanaście pikseli mniej i tam widać ucięcie. Przy podejrzeniu ucinania
   patrz na zrzut, nie na `scrollWidth`. */
.sg-why .why-checks, .sg-why-light .why-checks { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media screen and (max-width: 1199px) {
	.sg-why .why-checks, .sg-why-light .why-checks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media screen and (max-width: 575px) {
	.sg-why .why-checks, .sg-why-light .why-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 479px) {
	.sg-why .why-checks, .sg-why-light .why-checks { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
.sg-why .why-stats, .sg-why-light .why-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media screen and (max-width: 991px) {
	.sg-why .why-stats, .sg-why-light .why-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 575px) {
	.sg-why .why-stats, .sg-why-light .why-stats { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Kafelki kroków: lekkie zmniejszenie treści (21.09.2026) ----------
   Po dwóch turach powiększania i poszerzeniu odstępu na strzałkę karty zrobiły się
   ciasne — klient poprosił o odrobinę mniejszy tekst i ikony w samych kafelkach.
   Ruszamy tylko wnętrze `.step`; reszta skali na stronie zostaje bez zmian. */
.sg-steps .step .st-ico svg { width: 46px; height: 46px; }
.sg-steps .step .st-no { width: 30px; height: 30px; font-size: 16px; }
.sg-steps .step .st-top { gap: 12px; margin-bottom: 14px; }
.sg-steps .step h6 { font-size: 16.5px; margin-bottom: 7px; }
.sg-steps .step p { font-size: 16px; }
.sg-steps.sg-steps-5 .step .st-ico svg { width: 40px; height: 40px; }
@media screen and (max-width: 991px) {
	.sg-steps .step .st-ico svg { width: 40px; height: 40px; }
}

/* ================================================================
   PODSTRONA OFERTOWA — UKŁAD Z REFERENCJI KLIENTA (22.09.2026)
   Klient przysłał render sekcji „Profesjonalna obsługa": tekst z lewej,
   kolumna zdjęć z prawej (duży kadr + siatka mniejszych), kafelki
   „Legalizowane wagi / Szybka płatność / Dokumentacja" pod obiema kolumnami.

   To czwarty układ tej sekcji, ale pierwszy, który rozwiązuje jej właściwy
   problem. Poprzednie trzy (dwie kolumny → opływanie → pas nad treścią)
   różniły się tylko sposobem podania JEDNEGO zdjęcia, a pozostałe kadry
   klienta leżały luzem pod spodem. Przez to prawa kolumna była za krótka
   w stosunku do tekstu (stąd pustka, która pogrzebała wariant z 15.08),
   albo tekst musiał iść przez pełną szerokość (stąd rozrywane listy
   przy opływaniu, zgłoszone 21.09).

   Komplet zdjęć w jednej kolumnie równoważy wysokości: dla strony 943
   (2,5 tys. znaków, 5 zdjęć) kolumny kończą się niemal w tym samym miejscu.
   Tam, gdzie zdjęcie jest tylko jedno — strony 12, 981 i 993 — szablon
   nadal wybiera `is-stacked`, bo nie ma czym wypełnić kolumny.
   ================================================================ */
.sg-split.is-gallery {
	display: grid;
	/* Wymiary zdjęte z referencji przeskalowanej do 1440 px (patrz CLAUDE.md):
	   tekst 622 px, odstęp 64 px, kolumna zdjęć 510 px — razem 1196 px.
	   Wcześniej było 681 / 46 / 523, czyli kolumna tekstu o 59 px za szeroka. */
	grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
	gap: 64px;
	align-items: start;
	max-width: 1196px;
}
/* Kolejność w DOM to zdjęcie → treść → kafelki (tak wymaga `is-stacked`),
   więc rozmieszczenie w siatce ustawiamy jawnie, zamiast polegać na kolejności. */
.sg-split.is-gallery .split-body { grid-column: 1; grid-row: 1; }
.sg-split.is-gallery .split-foot { grid-column: 1 / -1; grid-row: 2; }
.sg-split.is-gallery .split-img {
	grid-column: 2;
	grid-row: 1;
	/* ⚠️ Przyklejanie przy scrollu siedzi na WEWNĘTRZNYM `.split-img-in`, nie tutaj.
	   `position: sticky` postawione wprost na elemencie siatki Chrome ogranicza
	   prostokątem CAŁEJ siatki zamiast własnego wiersza — kolumna zdjęć zjeżdżała
	   188 px za nisko i nachodziła na kafelki „Legalizowane wagi" (zgłoszone
	   22.09.2026). Zewnętrzny div rozciągnięty na wysokość wiersza wyznacza granicę. */
	/* `position: static` musi paść jawnie: regułę `sticky` nakłada na `.split-img`
	   blok „Poprawki po pierwszym renderze" z sierpnia (linia ~1619) i bez tego
	   stary błąd wraca mimo przeniesienia przyklejania do środka. */
	position: static;
	align-self: stretch;
	/* Zaokrąglenie wraca na same obrazki — w kolumnie jest ich kilka,
	   a `overflow: hidden` z reguły bazowej ucinałoby siatkę pod dużym kadrem. */
	border-radius: 0;
	overflow: visible;
}
/* `height: 100%`, `min-height: 320px` i `max-height: 330px` z reguł bazowych
   dotyczą pojedynczego zdjęcia w kolumnie — tutaj trzeba je zdjąć jawnie. */
.sg-split.is-gallery .split-img-in { position: sticky; top: 100px; }
.sg-split.is-gallery .split-img-in > img {
	width: 100%;
	height: auto;
	min-height: 0;
	max-height: none;
	aspect-ratio: 6 / 5;      /* referencja: 510 × 427 px */
	object-fit: cover;
	border-radius: var(--radius);
	display: block;
}
.sg-split.is-gallery .split-gal {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 16px;
}
.sg-split.is-gallery .split-gal img {
	width: 100%;
	height: auto;
	min-height: 0;
	max-height: none;
	aspect-ratio: 1.08;       /* referencja: 247 × 228 px, czyli lekko poziomy kadr */
	object-fit: cover;
	border-radius: 6px;
	display: block;
}
/* Strony z jednym dodatkowym zdjęciem (1550, 1596, 1614, 1622): zamiast
   samotnego kwadratu na pół kolumny — pas na całą jej szerokość. */
.sg-split.is-gallery .split-gal img:only-child {
	grid-column: 1 / -1;
	aspect-ratio: 16 / 10;
}
@media screen and (max-width: 991px) {
	.sg-split.is-gallery { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.sg-split.is-gallery .split-img  { grid-column: 1; grid-row: 1; }
	.sg-split.is-gallery .split-img-in { position: static; }
	.sg-split.is-gallery .split-body { grid-column: 1; grid-row: 2; }
	.sg-split.is-gallery .split-foot { grid-column: 1; grid-row: 3; }
	.sg-split.is-gallery .split-img-in > img { aspect-ratio: 16 / 9; }
}
@media screen and (max-width: 575px) {
	.sg-split.is-gallery .split-gal img { aspect-ratio: 4 / 3; }
}

/* Punktory w treści sekcji: zielone kółko z „ptaszkiem" zamiast kropki —
   tak są narysowane na referencji. Zawężone do sekcji „Profesjonalna obsługa",
   żeby nie ruszać list w stopce, na Transporcie i na stronie O nas. */
.sg-split .split-body .sg-rte ul {
	list-style: none;
	padding-left: 0;
}
.sg-split .split-body .sg-rte ul > li {
	position: relative;
	padding-left: 32px;
	/* Referencja ma pozycje co 35 px przy tym samym rozmiarze pisma; przy 10 px
	   odstępu wychodziło 41 px i lista była wyraźnie luźniejsza niż na obrazku. */
	margin-bottom: 5px;
	list-style: none;
}
.sg-split .split-body .sg-rte ul > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .2em;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--accent-strong) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}

/* Nagłówek sekcji „Profesjonalna obsługa". Szablon miał tu `style="font-size:28px"`,
   a na referencji przeskalowanej do 1440 px ten napis ma ok. 35,5 px (zmierzone:
   pasmo liter 37 px wobec 29 px na wdrożonej stronie). Globalne `.sg-h2` daje przy
   1440 px aż 42 px, więc ani jedno, ani drugie nie trafiało w obrazek. */
.sg-split .split-body .sg-h2 { font-size: 35.5px; }
@media screen and (max-width: 767px) {
	.sg-split .split-body .sg-h2 { font-size: 30px; }
}

/* ============================================================================
   POPRAWKI PO UWAGACH KLIENTA — 16.10.2026
   ============================================================================ */

/* 1. „Logo na głównej stronie jest zniekształcone". Stary motyw daje `.logo { width: 190px }`
   (i 180 px w `.nav-scroll .logo` / na mobile), a nasz obrazek miał SZTYWNĄ WYSOKOŚĆ 54 px
   z `max-width: 100%`. Logotyp 625×120 przy 54 px wysokości potrzebuje 281 px, więc był
   ściskany w poziomie do 190 px (zmierzone na zrzucie: 190×54). Teraz rozmiar ustala
   szerokość (235 px na desktopie), wysokość wynika z proporcji pliku, a kontener logo nie ma sztywnej szerokości. */
.navbar .logo, .nav-scroll .logo, .navbar .sg-logo { width: auto; }
/* Klient (16.10.2026, po pierwszej wersji 281/240 px): „zmniejsz logo do szerokości 235px". */
.navbar .sg-logo img { width: 235px; height: auto; max-width: none; }
@media screen and (max-width: 1199.98px) { .navbar .sg-logo img { width: 219px; } }
@media screen and (max-width: 575px) { .navbar .sg-logo img { width: 200px; } }

/* 7. Wycena: „grafika «potrzebujesz pomocy» po prawej stronie dopasowana wielkościowo".
   Zdjęcie konsultantki wisiało jako wycinek 210 px z białym tłem na kremowej karcie.
   Teraz prawa kolumna karty ma stałą szerokość, a zdjęcie wypełnia ją od góry do dołu
   karty (`cover`, kadr od góry — twarz zostaje). Karta na białym tle, żeby tło zdjęcia
   zlewało się z kartą. */
.sg-help-card { background: var(--card); padding: 0; gap: 0; grid-template-columns: minmax(0, 1fr) 200px; align-items: stretch; }
.sg-help-card > div:first-child { padding: 30px 24px 30px 32px; }
.sg-help-card .hc-photo { align-self: stretch; }
.sg-help-card .hc-photo img { width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: top center; }
@media screen and (max-width: 767px) { .sg-help-card { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================================
   POPRAWKI CENNIKA — 22.10.2026
   Wyśrodkowanie nagłówków tabeli na podstronie Cennik oraz biały kolor napisu
   „Jednostka" (wcześniej `.pricing-table th.pr-unit` dziedziczyło `color: var(--muted)`
   oraz `font-weight: 400` z reguły dla komórek `td.pr-unit`).
   ============================================================================ */
.pricing-table thead th.pr-unit {
	color: #fff;
	font-weight: 700;
}
.pricing-table thead th,
.pricing-table thead th:last-child,
.pricing-table td.mat-name,
.pricing-table td.price {
	text-align: center;
}
/* Klient (23.10.2026): „wyśrodkuj napisy w materiale i cenie". W pełnej tabeli cennika
   miniatura zostaje w równej kolumnie po lewej, a nazwa materiału centruje się w pozostałej szerokości komórki. */
.pricing-table-cennik td.pr-cell span {
	flex: 1;
	text-align: center;
}