/**
 * Sandshot Moto — główny arkusz stylów.
 * Paleta i typografia wg SANDSHOT-MOTO-PROJEKT.md sekcja 9.
 *   Tło: #FFFFFF | Akcent/CTA: #FB9E00 | Tło 2 (sekcje/bannery): grafit → czerń
 *   Nagłówki: Montserrat | Treść: Inter
 * Ikony: mono (currentColor) lub gradient copper — bez kolorowych klipartów.
 */

/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */
:root {
	/* Kolory */
	--c-bg: #ffffff;
	--c-bg-alt: #f6f5f3;          /* delikatne tło sekcji jasnych */
	--c-dark: #0f0f12;            /* czerń bazowa (tło 2) */
	--c-dark-2: #17171c;          /* grafit ciemny */
	--c-graphite: #1a1a1a;        /* tekst na jasnym */
	--c-accent: #fb9e00;          /* copper — akcent/CTA */
	--c-accent-600: #e08d00;      /* hover akcentu */
	--c-accent-rose: #d4956a;     /* rose gold — koniec gradientu ikon */
	--c-text: #1a1a1a;
	--c-text-muted: #5a5a63;
	--c-text-on-dark: #f3f2ef;
	--c-text-on-dark-muted: #b9b9c2;
	--c-border: #e6e4e0;
	--c-border-dark: #2a2a35;

	/* Gradient copper dla ikon (sekcja 9.2) */
	--grad-copper: linear-gradient(135deg, #c87941 0%, #d4956a 100%);
	--grad-accent: linear-gradient(135deg, #fb9e00 0%, #d4956a 100%);

	/* Typografia */
	--font-head: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	--font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

	/* Skala typograficzna (fluid) */
	--fs-hero: clamp(2.4rem, 5.5vw, 4.25rem);
	--fs-h1: clamp(2rem, 4vw, 3.25rem);
	--fs-h2: clamp(1.6rem, 3vw, 2.4rem);
	--fs-h3: clamp(1.2rem, 2vw, 1.5rem);
	--fs-body: 1.0625rem;
	--fs-small: 0.9rem;

	/* Odstępy / layout */
	--container: 1200px;
	--container-wide: 1330px;
	--gap: clamp(1rem, 2.5vw, 2rem);
	--section-y: clamp(3.5rem, 7vw, 6.5rem);
	--radius: 14px;
	--radius-lg: 22px;
	--radius-pill: 999px;

	/* Cienie */
	--shadow-sm: 0 2px 8px rgba(15, 15, 18, 0.06);
	--shadow-md: 0 10px 30px rgba(15, 15, 18, 0.10);
	--shadow-lg: 0 24px 60px rgba(15, 15, 18, 0.16);

	/* Warstwy */
	--z-header: 1000;
	--z-mega: 1010;
	--z-overlay: 1100;

	--header-h: 72px;
	--topbar-h: 44px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* Globalna blokada poziomego rozjeżdżania się layoutu.
   `overflow-x: clip` nie tworzy kontekstu przewijania (w odróżnieniu od `hidden`),
   więc nie psuje sticky/position:fixed, a skutecznie ucina każdy element szerszy
   niż viewport — np. widget opinii Trustindex, który doładowuje się z opóźnieniem
   i chwilowo wstrzykiwał zawartość wychodzącą poza ekran na stronach usługowych. */
html, body { overflow-x: clip; max-width: 100%; }

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.65;
	color: var(--c-text);
	background: var(--c-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-head);
	line-height: 1.12;
	margin: 0 0 0.5em;
	color: var(--c-graphite);
	font-weight: 700;
	letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-h1); font-weight: 800; }
h2 { font-size: var(--fs-h2); font-weight: 800; }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 1rem; }

a { color: var(--c-accent-600); text-decoration: none; transition: color 0.18s ease; }
a:hover { color: var(--c-accent); }

img, svg, video { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }

:focus-visible {
	outline: 3px solid var(--c-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* =========================================================
   3. LAYOUT HELPERS
   ========================================================= */
.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}
.container--wide { max-width: var(--container-wide); }

.section { padding-block: var(--section-y); }
/* Zeruje górny odstęp, gdy sekcja siedzi tuż pod inną o tym samym (białym) tle —
   inaczej padding dolny poprzedniej + górny tej sumują się w podwójną przerwę. */
.section--flush-top { padding-top: 0; }
.section--dark {
	background: linear-gradient(180deg, var(--c-dark) 0%, var(--c-dark-2) 100%);
	color: var(--c-text-on-dark);
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section--alt { background: var(--c-bg-alt); }

.section__head { max-width: 720px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section__eyebrow {
	display: inline-block;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-accent);
	margin-bottom: 0.75rem;
}
.section__head--center { margin-inline: auto; text-align: center; }
/* Nagłówek dwustronny: tytuł po lewej, opis + przycisk po prawej (wg wzor2) */
.section__head--split {
	max-width: none;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: end;
	gap: 1.5rem 3rem;
}
.section__head--split h2 { margin: 0; }
.section__head-aside { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; gap: 1rem; }
.section__head-aside p { margin: 0; color: var(--c-text-muted); }

.grid { display: grid; gap: var(--gap); }
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute;
	left: -999px;
	top: 0;
	z-index: var(--z-overlay);
	background: var(--c-accent);
	color: #111;
	padding: 0.75rem 1.25rem;
	font-weight: 700;
	border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* =========================================================
   4. PRZYCISKI
   ========================================================= */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.01em;
	padding: 0.85rem 1.6rem;
	border-radius: var(--radius-pill);
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform 0.15s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
	text-align: center;
	line-height: 1;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--c-accent); color: #14110a; }
.btn--primary:hover { background: var(--c-accent-600); color: #14110a; }
.btn--ghost { background: #fff; color: var(--c-graphite); border-color: var(--c-graphite); box-shadow: var(--shadow-sm); }
.btn--ghost:hover { background: var(--c-accent); border-color: var(--c-accent); color: #14110a; }
.btn--on-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,0.35); }
.btn--on-dark:hover { border-color: var(--c-accent); color: var(--c-accent); }
.btn--lg { padding: 1.05rem 2rem; font-size: 1.05rem; }

/* =========================================================
   5. IKONY (mono / gradient copper)
   ========================================================= */
.icon {
	width: 24px; height: 24px;
	display: inline-block;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.75;
	flex: none;
}
.icon--accent { color: var(--c-accent); }
.icon-tile {
	width: 56px; height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	background: rgba(251, 158, 0, 0.12);
	color: var(--c-accent);
}
.icon-tile--grad {
	background: var(--grad-accent);
	color: #14110a;
}
.icon-tile--grad .icon { stroke-width: 2; }

/* =========================================================
   6. NAGŁÓWEK / STICKY HEADER  (sekcja 6.1 + 6.1.1)
   ========================================================= */
.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background: var(--c-bg);
	border-bottom: 1px solid var(--c-border);
}

/* Top bar (kontakt) — jeden kolor tekstu (bez wyszarzeń) */
.topbar {
	background: var(--c-dark);
	color: var(--c-text-on-dark);
	font-size: 0.85rem;
}
.topbar__item, .topbar__item span { color: var(--c-text-on-dark); }
.topbar__stars { color: var(--c-accent); letter-spacing: 1px; }
.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: var(--topbar-h);
	padding-block: 0.35rem;
}
.topbar a { color: var(--c-text-on-dark); }
.topbar a:hover { color: var(--c-accent); }
.topbar__group { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.topbar__item { display: inline-flex; align-items: center; gap: 0.4rem; }
.topbar__item .icon { width: 16px; height: 16px; color: var(--c-accent); }

/* Główny pasek nawigacji */
.nav-bar { }
.nav-bar__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: var(--header-h);
}
.site-branding { display: flex; align-items: center; flex: none; }
.site-branding img, .custom-logo { max-height: 52px; width: auto; }
.site-branding__text {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 1.35rem;
	color: var(--c-graphite);
	letter-spacing: -0.02em;
}
.site-branding__text span { color: var(--c-accent); }

/* CTA po prawej w headerze */
.header-actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 0.9rem;
	flex: none;
}
.header-phone {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-head);
	font-weight: 700;
	color: var(--c-graphite);
	white-space: nowrap;
}
.header-phone .icon { color: var(--c-accent); }

/* =========================================================
   7. MENU + MEGA MENU
   ========================================================= */
.primary-nav { display: flex; }
.primary-nav > ul {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.primary-nav a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 0.98rem;
	color: var(--c-graphite);
	padding: 0.6rem 0.9rem;
	border-radius: 8px;
}
.primary-nav a:hover,
.primary-nav .current-menu-item > a { color: var(--c-accent-600); background: rgba(251,158,0,0.08); }

.primary-nav .menu-item-has-children > a::after,
.primary-nav .mega-menu > a::after {
	content: "";
	width: 8px; height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform 0.2s ease;
}
.primary-nav li.is-open > a::after { transform: rotate(-135deg) translateY(0); }

/* Panel mega menu */
.mega-panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: var(--c-dark);
	color: var(--c-text-on-dark);
	box-shadow: var(--shadow-lg);
	border-top: 3px solid var(--c-accent);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	z-index: var(--z-mega);
}
.mega-menu { position: static; }
.mega-menu.is-open .mega-panel,
.mega-menu:hover .mega-panel,
.mega-menu:focus-within .mega-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.mega-panel__inner {
	display: grid;
	grid-template-columns: 1.2fr 1fr 0.9fr;
	gap: clamp(1.5rem, 3vw, 3rem);
	padding-block: clamp(1.75rem, 3vw, 2.5rem);
}
/* Etykieta kolumny (eyebrow). Wariant --link jest klikalny (nagłówek usługi głównej). */
.mega-col__label {
	display: block;
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-text-on-dark-muted);
	margin-bottom: 0.85rem;
}
.mega-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }

/* Podpozycje (warianty pojazdów) wcięte pod „Konserwacja podwozia" — widać, że to
   podkategorie, a nie równorzędne usługi. Pionowa linia prowadząca dopina hierarchię.
   UWAGA na specyficzność: `.mega-col ul` (0,1,1) przebijało samo `.mega-col__sub`
   (0,1,0) i zerowało margines — dlatego selektory poniżej są scoped do .mega-col. */
.mega-col .mega-col__sub {
	list-style: none;
	margin: 0.2rem 0 0.5rem 1.45rem;
	padding-left: 0.85rem;
	border-left: 1px solid rgba(255,255,255,0.16);
	display: grid;
	gap: 0.05rem;
}
/* Pozycja nadrzędna wyróżniona, żeby wcięcie miało punkt odniesienia. */
.mega-col a.mega-col__parent { font-weight: 700; }
.mega-col .mega-col__sub a {
	font-weight: 400;
	font-size: 0.91rem;
	color: var(--c-text-on-dark-muted);
	padding: 0.45rem 0.7rem;
}
.mega-col .mega-col__sub a:hover,
.mega-col .mega-col__sub a:focus-visible {
	color: var(--c-accent);
	background: rgba(255,255,255,0.07);
}
.mega-col .mega-col__sub a .icon { width: 17px; height: 17px; }
/* Każda pozycja to wyraźny, klikalny wiersz ze strzałką pojawiającą się na hover/focus */
.mega-col a {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--c-text-on-dark);
	padding: 0.6rem 0.7rem;
	border-radius: 10px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 0.98rem;
	transition: background 0.15s ease, color 0.15s ease;
}
.mega-col a::after {
	content: "\2192";
	margin-left: auto;
	font-family: var(--font-head);
	color: var(--c-accent);
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 0.15s ease, transform 0.15s ease;
}
.mega-col a:hover, .mega-col a:focus-visible { background: rgba(255,255,255,0.07); color: var(--c-accent); }
.mega-col a:hover::after, .mega-col a:focus-visible::after { opacity: 1; transform: translateX(0); }
.mega-col a .icon { width: 20px; height: 20px; color: var(--c-accent); flex: none; }



/* Kolumna CTA w mega menu — białe tło (czytelne na ciemnym panelu) */
.mega-cta {
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}
.mega-cta__lead { font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; line-height: 1.2; color: var(--c-text); }
.mega-cta__text { font-family: var(--font-body); font-size: 0.92rem; line-height: 1.5; color: var(--c-text-muted); margin: 0 0 0.2rem; }

/* Przyciski w kolumnie CTA muszą zachować własne kolory.
   Bez tego wygrywa ogólne `.primary-nav a:hover` (0,2,1) i na hoverze wstawia
   pomarańczowy tekst na bladopomarańczowym tle = tekst nieczytelny.
   Selektory `.primary-nav .mega-cta .btn--*:hover` (0,4,0) przebijają tę regułę. */
.primary-nav .mega-cta .btn--primary {
	background: var(--c-accent);
	color: #14110a;
	border-color: transparent;
}
.primary-nav .mega-cta .btn--primary:hover,
.primary-nav .mega-cta .btn--primary:focus-visible {
	background: var(--c-accent-600);
	color: #14110a;
	border-color: transparent;
}
/* Drugi przycisk (Zobacz cennik) na białym tle: ciemne tło, jasny tekst */
.primary-nav .mega-cta .btn--on-dark {
	background: var(--c-dark);
	color: #fff;
	border-color: var(--c-dark);
}
.primary-nav .mega-cta .btn--on-dark:hover,
.primary-nav .mega-cta .btn--on-dark:focus-visible {
	background: #000;
	color: #fff;
	border-color: #000;
}

/* Hamburger */
.nav-close { display: none; }
.nav-toggle {
	display: none;
	margin-left: auto;
	background: none;
	border: 0;
	width: 46px; height: 46px;
	cursor: pointer;
	color: var(--c-graphite);
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
	content: "";
	display: block;
	width: 26px; height: 2px;
	background: currentColor;
	position: relative;
	transition: transform 0.2s ease, opacity 0.2s ease;
	margin-inline: auto;
}
.nav-toggle span::before { position: absolute; top: -8px; }
.nav-toggle span::after { position: absolute; top: 8px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-8px) rotate(-45deg); }

/* =========================================================
   8. STOPKA  (sekcja 4.1 — jeden link do /lokalizacje/)
   ========================================================= */
.site-footer {
	background: var(--c-dark);
	color: var(--c-text-on-dark-muted);
	padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}
.site-footer h3, .site-footer .footer-widget__title, .footer-col__title {
	color: #fff;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0 0 1rem;
}
.footer-grid {
	display: grid;
	/* Kolumny dopasowane do treści: marka (dłuższy opis) i „Nasze dane" (adres)
	   szersze, dwie kolumny menu węższe. auto na ostatniej = brak pustego toru,
	   więc nie powstaje duża luka przed „Nasze dane". */
	grid-template-columns: minmax(240px, 1.6fr) minmax(140px, 1fr) minmax(120px, 0.9fr) minmax(240px, 1.3fr);
	gap: clamp(1.5rem, 3vw, 2.75rem);
	margin-bottom: 2.5rem;
}
.site-footer a { color: var(--c-text-on-dark-muted); }
.site-footer a:hover { color: var(--c-accent); }
.footer-brand__logo { margin-bottom: 1rem; }
.footer-nap { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.footer-nap li { display: flex; align-items: flex-start; gap: 0.6rem; }
.footer-nap .icon { color: var(--c-accent); margin-top: 3px; }
.footer-nap__name { font-family: var(--font-head); font-weight: 700; color: var(--c-text-on-dark-muted); }
.footer-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.footer-hours { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.footer-hours li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; border-bottom: 1px solid var(--c-border-dark); }
.footer-hours li:last-child { border-bottom: 0; }
.footer-hours li span:last-child { color: #fff; font-weight: 600; white-space: nowrap; }
.footer-bottom {
	border-top: 1px solid var(--c-border-dark);
	padding-top: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	align-items: center;
	font-size: 0.85rem;
}
.footer-legal { list-style: none; display: flex; gap: 1.25rem; margin: 0; padding: 0; flex-wrap: wrap; }
.footer-credit { font-size: 0.85rem; color: var(--c-text-on-dark-muted); }
.footer-credit a { color: var(--c-text-on-dark-muted); font-weight: 600; }
.footer-credit a:hover { color: var(--c-accent); }

/* =========================================================
   9. RESPONSYWNOŚĆ
   ========================================================= */
@media (max-width: 980px) {
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.mega-panel__inner { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
	.nav-toggle { display: block; margin-left: 0; }
	.header-actions .btn--reserve-text { display: none; }
	/* Logo po lewej, a telefon + hamburger razem po prawej */
	.nav-bar__inner { gap: 0.75rem; }
	.header-actions { margin-left: auto; gap: 0.5rem; }

	.primary-nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;
		/* Jawna wysokość panelu = pełna wysokość okna. Sam `inset:0` bywa zawodny na
		   mobile, gdy pasek adresu zmienia wysokość viewportu — panel tracił wtedy
		   poprawny kontekst przewijania i menu „przestawało scrollować". `dvh` śledzi
		   dynamiczny viewport; `vh` to fallback dla starszych przeglądarek. */
		height: 100vh;
		height: 100dvh;
		width: min(88vw, 380px);
		background: var(--c-dark);
		color: #fff;
		transform: translateX(100%);
		transition: transform 0.25s ease;
		/* Przewijanie wewnątrz panelu + zatrzymanie „przeciekania" scrolla do body
		   pod spodem (overscroll-behavior) i płynny scroll dotykowy na iOS. */
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		padding: calc(var(--header-h) + 1rem) 1.25rem 2rem;
		z-index: var(--z-overlay);
	}
	.primary-nav.is-active { transform: translateX(0); }
	.primary-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
	/* Divider między pozycjami menu mobilnego */
	.primary-nav > ul > li { border-bottom: 1px solid rgba(255,255,255,0.10); }
	.primary-nav > ul > li:last-child { border-bottom: 0; }
	.primary-nav a { color: #fff; padding: 1rem 0.5rem; font-family: var(--font-head); font-weight: 600; }
	.primary-nav a:hover { background: rgba(255,255,255,0.06); color: var(--c-accent); }

	/* Przycisk zamykania panelu mobilnego (prawy górny róg) */
	.nav-close {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0.75rem;
		right: 1rem;
		width: 42px;
		height: 42px;
		border: 1px solid rgba(255,255,255,0.18);
		border-radius: 50%;
		background: rgba(255,255,255,0.04);
		color: #fff;
		font-size: 1.6rem;
		line-height: 1;
		cursor: pointer;
		transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
	}
	.nav-close span { margin-top: -3px; }
	.nav-close:hover { background: var(--c-accent); border-color: var(--c-accent); color: #16130c; }

	/* Mega menu -> akordeon na mobile */
	.mega-panel {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border-top: 0;
		background: transparent;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease;
	}
	.mega-menu.is-open .mega-panel { max-height: 1200px; }
	.mega-panel__inner { padding-block: 0.5rem; gap: 1rem; }
	.mega-cta { background: #fff; }

	.nav-backdrop {
		position: fixed;
		inset: 0;
		background: rgba(0,0,0,0.5);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.2s ease;
		z-index: var(--z-header);
	}
	.nav-backdrop.is-active { opacity: 1; visibility: visible; }
}

@media (max-width: 560px) {
	.footer-grid { grid-template-columns: 1fr; }
	.topbar__group--secondary { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* =========================================================
   10. STRONA GŁÓWNA
   ========================================================= */

/* ---- HERO (lewa = kolor, prawa = zdjęcie, wzór 2) ---- */
/* Hero + pasek pod nim tworzą jeden blok: karty i panel CTA nachodzą na dolną krawędź hero.
   Rezerwa na dole (padding-bottom) daje miejsce, w które wchodzą nachodzące karty. */
.hero {
	position: relative;
	min-height: 680px;
	display: flex;
	align-items: center;
	/* Dół hero ma duży zapas (> --strip-overlap), żeby karty wchodziły w ciemną
	   strefę, a nie zasłaniały treści hero. */
	padding-block: clamp(2.5rem, 5vw, 3.5rem) clamp(7rem, 12vw, 10rem);
	background: var(--c-dark);
	color: var(--c-text-on-dark);
	overflow: hidden;
}
/* Zdjęcie tła — pełna szerokość hero, bez maski i filtrów */
.hero__bg {
	position: absolute;
	inset: 0;
	background-image: var(--hero-img);
	background-size: cover;
	background-position: center right;
	z-index: 0;
}
/* Nakładka: solidny kolor od lewej płynnie przechodzący w przezroczysty (widać zdjęcie) — jak we wzorze 2 */
.hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		90deg,
		var(--c-dark) 0%,
		var(--c-dark) 28%,
		rgba(15,15,18,0.90) 42%,
		rgba(15,15,18,0.60) 58%,
		rgba(15,15,18,0.30) 74%,
		rgba(15,15,18,0.15) 100%
	);
}
.hero .container { position: relative; z-index: 2; width: 100%; }
.hero__content { max-width: 680px; }
/* Eyebrow: minimalistyczna krótka kreska + tekst (styl edytorski, bez „pigułki"/tła AI) */
.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-text-on-dark);
	margin-bottom: 1.15rem;
}
.hero__eyebrow-line {
	width: 30px; height: 2px;
	background: var(--c-accent);
	flex: none;
}
.hero h1 {
	font-size: clamp(1.85rem, 2.8vw, 2.6rem);
	line-height: 1.12;
	max-width: 100%;
	color: #fff;
	margin-bottom: 1rem;
	text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}
.hero h1 .accent { color: var(--c-accent); }
.hero__lead { font-size: 1.08rem; line-height: 1.6; color: var(--c-text-on-dark); max-width: 52ch; margin-bottom: 1.5rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; margin-bottom: 1.4rem; }
.hero__link {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.98rem;
	color: #fff;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}
.hero__link-arrow {
	display: inline-block;
	transition: transform 0.2s ease;
}
.hero__link:hover { color: var(--c-accent); }
.hero__link:hover .hero__link-arrow { transform: translateX(5px); }
.hero__meta { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; }

/* Widget opinii Google (autentyczny: 4-kolorowe „G" + złote gwiazdki) */
.google-reviews {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	color: var(--c-text-on-dark);
}
.google-reviews__g { width: 26px; height: 26px; flex: none; }
.google-reviews__body { display: flex; flex-direction: column; gap: 0.15rem; line-height: 1.1; }
.google-reviews__top { display: inline-flex; align-items: center; gap: 0.45rem; }
.google-reviews__score { font-family: var(--font-head); font-weight: 800; font-size: 1rem; color: #fff; }
.google-reviews__stars { color: #fbbc05; letter-spacing: 1px; font-size: 0.95rem; }
.google-reviews__meta { font-family: var(--font-body); font-size: 0.85rem; color: var(--c-text-on-dark-muted); }
.google-reviews:hover .google-reviews__meta { color: var(--c-text-on-dark); }

/* ---- PASEK POD HERO: 3 małe równe karty + wysoki CTA (wzór 2) ----
   Karty NACHODZĄ na ciemne hero (jak we wzorze 2): górna część kart leży na
   ciemnym zdjęciu hero, dolna na jasnym tle sekcji. Realizacja:
   - --strip-overlap: o ile karty wchodzą w hero (ujemny margin paska),
   - tło jasne (--c-bg-alt) daje pseudo-element ::before ustawiony DOPIERO poniżej
     strefy nachodzenia, więc ciemne hero jest widoczne za górną częścią kart,
   - brak „dziwnego" przejścia, bo tło = to samo co sekcja Usługi poniżej. */
.hero-strip-section {
	--strip-overlap: 185px;         /* jak głęboko karty wchodzą w hero */
	background: transparent;
	padding-top: 0;
	padding-bottom: var(--section-y);
	margin-top: calc(var(--strip-overlap) * -1);
	position: relative;
	z-index: 3;
}
/* Jasne tło sekcji zaczyna się dopiero poniżej strefy nachodzenia kart */
.hero-strip-section::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: var(--strip-overlap);
	bottom: 0;
	background: var(--c-bg-alt);
	z-index: -1;
}
.hero-strip-section > .container { position: relative; z-index: 1; }
.hero-strip {
	display: grid;
	grid-template-columns: repeat(3, 1fr) 1.3fr; /* CTA szerszy — mieści "Umów bezpłatne oględziny" bez łamania */
	gap: 1.25rem;
	align-items: end; /* 3 karty wyrównane do dołu — CTA wystaje w górę */
}
/* 3 małe, RÓWNE karty — nachodzą na hero */
.hero-strip__card {
	background: var(--c-bg);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	padding: 1.5rem 1.35rem;
	box-shadow: var(--shadow-md);
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	min-height: 168px;
	justify-content: flex-start;
}
.hero-strip__card .icon-tile { width: 46px; height: 46px; flex: none; }
.hero-strip__card h3 { font-size: 1.02rem; margin: 0; }
.hero-strip__card p { font-size: 0.9rem; line-height: 1.5; color: var(--c-text-muted); margin: 0; }

/* Czwarty box — wysoki panel CTA (jak "Schedule Your Service" we wzorze) — nachodzi wyżej */
.hero-strip__cta {
	background: linear-gradient(160deg, var(--c-dark) 0%, var(--c-dark-2) 100%);
	color: #fff;
	border: 1px solid var(--c-border-dark);
	border-radius: var(--radius-lg);
	padding: 2rem 1.9rem;
	box-shadow: var(--shadow-lg);
	display: flex;
	flex-direction: column;
	justify-content: center;    /* równy odstęp góra/dół */
	gap: 0.85rem;
	min-height: 380px;          /* wyraźnie wyższy niż karty */
	margin-top: -7rem;          /* wystaje w górę ponad karty, głębiej w hero (jak panel we wzorze 2) */
	text-align: center;
}
.hero-strip__cta h3 { color: #fff; font-size: 1.3rem; margin: 0; line-height: 1.2; }
.hero-strip__cta p { color: var(--c-text-on-dark-muted); font-size: 0.92rem; line-height: 1.55; margin: 0; }
.hero-strip__cta .btn { width: 100%; }
.hero-strip__or {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--c-text-on-dark-muted);
	font-size: 0.82rem;
}
.hero-strip__or::before, .hero-strip__or::after {
	content: ""; height: 1px; flex: 1; background: var(--c-border-dark);
}
.callback-form { display: grid; gap: 0.85rem; }
.callback-form input {
	width: 100%;
	padding: 0.75rem 0.95rem;
	border-radius: 10px;
	border: 1px solid var(--c-border-dark);
	background: rgba(255,255,255,0.06);
	color: #fff;
	font-family: var(--font-body);
	font-size: 0.95rem;
	text-align: center;
}
.callback-form input::placeholder { color: var(--c-text-on-dark-muted); }
.callback-form .btn { width: 100%; }

/* Logo w stopce — rozjaśnienie na ciemnym tle */
.footer-brand__logo img { height: auto; max-width: 190px; }
.site-branding__logo { display: inline-flex; }

/* ---- O NAS (kolaż + liczby + checklist, wzór 2) ---- */
/* Tło = to samo co pasek boxów powyżej (--c-bg-alt), żeby nie było widocznego przejścia. */
/* Bez górnego paddingu — pasek hero-strip powyżej ma już własny padding-bottom,
   więc unikamy podwójnego odstępu między hero a sekcją "O nas". */
.about { background: var(--c-bg-alt); padding-top: 0; }
.about__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}
/* Kolaż zdjęć — 2 kolumny, zdjęcie #1 wysokie po lewej, #2 i #3 po prawej.
   Wysokość całego kolażu ograniczona (#1 max 688px); #2 i #3 razem = wysokość #1
   (dwa równe wiersze + odstęp), więc kolumny mają identyczną wysokość. */
.about__media {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 1rem;
	height: clamp(420px, 42vw, 688px);
}
.about__photo { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); min-height: 0; }
.about__photo img { width: 100%; height: 100%; object-fit: cover; }
.about__photo--1 { grid-column: 1; grid-row: 1; }       /* kwadrat góra-lewo */
.about__photo--2 { grid-column: 2; grid-row: 1; }       /* kwadrat góra-prawo */
.about__photo--3 { grid-column: 1 / 3; grid-row: 2; }   /* szerokie zdjęcie na dole */

.about__head-mobile { display: none; }
.about__body > .section__eyebrow { display: inline-block; }
.about__body h2 { margin-bottom: 1rem; max-width: 20ch; }
.about__body > p { color: var(--c-text-muted); margin-bottom: 1rem; }

/* Wariant „tekst + panel": lewa kolumna węższa (opis), prawa szersza (panel).
   Wyrównanie do góry, bo obie kolumny mają różną wysokość. */
/* stretch: zdjęcie po prawej dopasowuje wysokość do kolumny z tekstem. */
.about__grid--text { grid-template-columns: 1.05fr 0.95fr; align-items: stretch; }
.about__cta { margin-top: 0.5rem; align-self: start; }

/* Prawa kolumna wariantu tekstowego = zdjęcie hali. Nadpisuje globalne
   .about__photo img { height:100% } (to reguła dla kolażu o stałej wysokości) —
   tu zdjęcie ma naturalną proporcję i wypełnia szerokość kolumny. */
.about__grid--text .about__photo {
	margin: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	height: 100%;
}
.about__grid--text .about__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	min-height: clamp(320px, 34vw, 460px);
}

/* Panel z liczbami (używany na stronie głównej): zwarta pionowa kolumna. */
.about__panel {
	margin-top: 1.5rem;
	display: grid;
	grid-template-columns: minmax(280px, 1fr) 1fr;
	gap: clamp(1.25rem, 3vw, 2rem);
	align-items: stretch;
}
.about__numbers {
	background: linear-gradient(160deg, var(--c-dark) 0%, var(--c-dark-2) 100%);
	color: #fff;
	border-radius: var(--radius-lg);
	padding: clamp(1.75rem, 3vw, 2.5rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.25rem;
	text-align: center;
}
/* Linia rozdzielająca dwie liczby (pod sobą — pozioma kreska). */
.about__stat + .about__stat { padding-top: 1.25rem; border-top: 1px solid var(--c-border-dark); }
.about__stat-num {
	display: block;
	font-family: var(--font-head);
	font-weight: 800;
	font-size: clamp(2rem, 3vw, 2.6rem);
	line-height: 1;
	color: var(--c-accent);
}
/* Słowo (np. „Gwarancja") — mniejsze niż liczba, żeby zmieściło się w panelu */
.about__stat-num--word { font-size: clamp(1.5rem, 2.2vw, 1.9rem); letter-spacing: -0.01em; }
.about__stat-label { display: block; font-size: 0.85rem; color: var(--c-text-on-dark-muted); margin-top: 0.4rem; }
/* Prawa kolumna panelu na stronie głównej: lista punktów + przycisk pod nią. */
.about__list-col { display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; }
.about__checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.about__checklist li { display: flex; align-items: center; gap: 0.7rem; font-size: 1rem; color: var(--c-text); font-family: var(--font-head); font-weight: 600; }
.about__checklist .icon { width: 22px; height: 22px; color: var(--c-accent); stroke-width: 2.5; flex: none; }
.about__panel-btn { align-self: start; width: auto; white-space: nowrap; }

/* Statystyki inline w kolumnie tekstowej /o-nas/ (pod akapitami, przed CTA).
   Nie mylić z ciemnym .about__panel strony głównej — to lekki pasek na białym tle. */
/* Statystyki /o-nas/ — dwa kafle na jasnym tle, oddzielone kreską od tekstu.
   Wcześniej były to dwie gołe kolumny liczba+podpis, które przy różnej długości
   etykiet rozjeżdżały się i wyglądały jak zepsuty layout. */
.about__facts {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	margin: 1.5rem 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--c-border);
}
.about__fact {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1.1rem 1.25rem;
	background: var(--c-bg-alt);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
}
.about__fact-num { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.5rem, 2.2vw, 1.9rem); line-height: 1; color: var(--c-accent-600); }
.about__fact-label { font-size: 0.85rem; color: var(--c-text-muted); line-height: 1.35; }
@media (max-width: 420px) {
	.about__facts { grid-template-columns: 1fr; }
}

/* ---- KARTY (usługi / realizacje / blog) ---- */
.card {
	background: var(--c-bg);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(251,158,0,0.4); }
/* Wariant karty na BIAŁYM tle sekcji — jasnoszare wypełnienie + delikatny cień,
   żeby białe karty nie zlewały się z białym tłem. */
.card--soft { background: var(--c-bg-alt); box-shadow: var(--shadow-sm); }
/* Tytuł karty ma stały rozmiar niezależnie od poziomu nagłówka — poziom wybiera
   szablon zgodnie z hierarchią strony (na hubie /uslugi/ karty to H2, w siatkach
   podrzędnych H3). font-weight wprost, bo h2 dziedziczy 800, a h3 700. */
.card h2, .card h3 { font-size: 1.2rem; font-weight: 700; margin: 0; }
.card p { color: var(--c-text-muted); margin: 0; font-size: 0.96rem; }
.card__link { margin-top: auto; font-family: var(--font-head); font-weight: 700; color: var(--c-accent-600); display: inline-flex; align-items: center; gap: 0.4rem; }
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.cards-4 { grid-template-columns: repeat(4, 1fr); }
.cards-2 { grid-template-columns: repeat(2, 1fr); }

/* ---- HUB /uslugi/ — usługi w grupach (ten sam podział co w mega menu) ---- */
.service-group + .service-group { margin-top: clamp(2.5rem, 5vw, 4rem); }
.service-group__head { max-width: 760px; margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); }
.service-group__title {
	font-size: clamp(1.5rem, 2.8vw, 2rem);
	margin: 0 0 0.5rem;
	/* Cienka kreska w akcencie zamiast dodatkowego eyebrow — grupa czyta się
	   jako sekcja, nie jako kolejna usługa na tym samym poziomie. */
	padding-left: 0.85rem;
	border-left: 4px solid var(--c-accent);
	line-height: 1.15;
}
.service-group__intro { color: var(--c-text-muted); margin: 0; padding-left: 1.1rem; }

/* Wiersze usług — świadomie NIE siatka kart. W siatce elementy rzędu równają
   wysokość do najwyższego, więc wiersz z wariantami rozciągał sąsiada i zostawiał
   pustą połowę. Wiersz zajmuje dokładnie tyle, ile ma treści. */
.service-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.service-row {
	background: var(--c-bg);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-lg);
	padding: 1.35rem 1.5rem;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.service-row:hover { border-color: rgba(251,158,0,0.45); box-shadow: var(--shadow-sm); }
/* Wiersz nadrzędny: TO SAMO białe tło co reszta usług — wyróżnia go obwódka
   w akcencie i pasek wariantów pod spodem, nie inny kolor wypełnienia. */
.service-row--parent { border-color: rgba(251,158,0,0.4); }

/* Nagłówek wiersza: ikona | tytuł + opis | przycisk. Przycisk w tej samej linii
   co tytuł, więc jest widoczny bez przewijania listy wariantów. */
.service-row__main {
	display: flex;
	align-items: center;
	gap: 1.1rem;
}
.service-row__icon { flex: none; }
.service-row__text { flex: 1 1 auto; min-width: 0; }
.service-row__title { font-size: 1.2rem; font-weight: 700; margin: 0 0 0.2rem; line-height: 1.25; }
.service-row__title a { color: var(--c-text); }
.service-row__title a:hover, .service-row__title a:focus-visible { color: var(--c-accent-600); }
.service-row__desc { color: var(--c-text-muted); font-size: 0.95rem; margin: 0; }
.service-row__btn { flex: none; padding: 0.7rem 1.35rem; font-size: 0.9rem; }

/* Warianty pojazdowe jako „pigułki" — czytelne „wybierz jeden z…".
   Pasek wychodzi na krawędzie wiersza (ujemne marginesy równe paddingowi wiersza)
   i ma delikatne tło — to ono grupuje warianty z usługą nadrzędną. */
.service-row__variants {
	margin: 1.15rem -1.5rem -1.35rem;
	padding: 1rem 1.5rem 1.15rem;
	/* Wyrównanie do tytułu: padding wiersza + szerokość icon-tile + gap. */
	padding-left: calc(1.5rem + 56px + 1.1rem);
	background: var(--c-bg-alt);
	border-top: 1px solid var(--c-border);
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.service-row__variants-label {
	display: block;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-text-muted);
	margin-bottom: 0.6rem;
}
.service-variants { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.service-variant {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.55rem 0.95rem;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-pill);
	background: var(--c-bg);
	color: var(--c-text);
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 0.9rem;
	line-height: 1.2;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.service-variant:hover, .service-variant:focus-visible {
	border-color: var(--c-accent);
	background: rgba(251,158,0,0.1);
	color: var(--c-accent-600);
}
.service-variant__icon { width: 17px; height: 17px; color: var(--c-accent); flex: none; }

@media (max-width: 760px) {
	.service-group__title { font-size: 1.35rem; }
	/* Na mobile przycisk pod treścią, na pełną szerokość — duży cel dotykowy. */
	.service-row__main { flex-wrap: wrap; align-items: flex-start; gap: 0.85rem; }
	.service-row__text { flex: 1 1 100%; order: 2; }
	.service-row__btn { flex: 1 1 100%; order: 3; }
	/* Bez ikony po lewej nie ma do czego wyrównywać — padding jak w wierszu. */
	.service-row__variants { padding-left: 1.5rem; }
}

.service-card__media { border-radius: 10px; overflow: hidden; aspect-ratio: 16/10; background: var(--c-bg-alt); margin: -1.5rem -1.5rem 0.25rem; }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---- SEKCJA USŁUGI (tło zdjęcie + ciemna nakładka, wg wzor2) ---- */
.services-section {
	position: relative;
	background: linear-gradient(160deg, var(--c-dark) 0%, var(--c-dark-2) 100%);
}
.services-layout {
	display: grid;
	grid-template-columns: minmax(280px, 0.85fr) 1.6fr;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}
.services-intro { position: static; }
.services-intro h2 { margin: 0 0 1rem; }
.services-intro p { color: var(--c-text-on-dark-muted); margin: 0 0 1.75rem; }
.services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: var(--radius);
	overflow: hidden;
	background: rgba(255,255,255,0.03);
}
.service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	padding: 1.6rem 1.5rem;
	border-right: 1px solid rgba(255,255,255,0.12);
	border-bottom: 1px solid rgba(255,255,255,0.12);
	color: var(--c-text-on-dark);
	text-decoration: none;
	transition: background 0.18s ease;
}
/* Ostatnia kolumna bez prawej krawędzi, ostatni rząd bez dolnej */
.service-card:nth-child(3n) { border-right: 0; }
.service-card:nth-last-child(-n+3) { border-bottom: 0; }
.service-card:hover { background: rgba(251,158,0,0.10); }
.service-card h3 { font-size: 1.12rem; margin: 0; color: #fff; }
.service-card p {
	margin: 0;
	font-size: 0.94rem;
	color: var(--c-text-on-dark-muted);
	line-height: 1.45;
}
/* Strzałka w kółku w prawym górnym rogu, żeby nie wydłużać karty */
.service-card__arrow {
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1.5px solid rgba(251,158,0,0.5);
	color: var(--c-accent);
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1;
	transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.service-card:hover .service-card__arrow {
	background: var(--c-accent);
	border-color: var(--c-accent);
	color: #fff;
	transform: translateX(4px);
}

/* ---- PROCES (8 kroków) ---- */
.process-list { counter-reset: step; display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
.process-step {
	position: relative;
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: 1.25rem 1.25rem 1.25rem 0;
}
.process-step__num {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 2rem;
	line-height: 1;
	color: var(--c-accent);
	flex: none;
	min-width: 2.2ch;
}
.process-step h3 { font-size: 1.05rem; margin: 0 0 0.2rem; color: var(--c-text); }
.process-step p { margin: 0; color: var(--c-text-muted); font-size: 0.95rem; }
/* Separator delikatny między krokami na jasnym tle */
.process-step { border-bottom: 1px solid var(--c-border); }

/* Układ z grafiką na środku (wg wzoru "Why Choose Us") */
.process-layout {
	display: grid;
	grid-template-columns: 1fr minmax(300px, 400px) 1fr;
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: stretch;
}
/* Boczne kolumny: boxy równej wysokości (flex:1), niezależnie od liczby linii */
.process-layout .process-col { display: flex; flex-direction: column; gap: 1rem; }
/* Każdy krok jako osobny box z tłem (wg wzor2) — wszystkie tej samej wysokości */
.process-layout .process-step {
	flex: 1 1 0;
	align-items: center;
	gap: 1rem;
	padding: 1.15rem 1.35rem;
	background: var(--c-bg);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
}
/* ---- PROCES jako kafle (strona /o-nas/) — kroki jako karty, nie wiersze ---- */
.steps-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}
.step-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.5rem 1.35rem 1.4rem;
	/* Jasnoszare tło (nie białe) — sekcja jest biała, więc kafle muszą się odcinać. */
	background: var(--c-bg-alt);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.step-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(251,158,0,0.4); background: var(--c-bg); }
/* Numer w gradientowej „plakietce" — spójny z ikonami usług (icon-tile--grad). */
.step-card__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: var(--grad-accent);
	color: #14110a;
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 1.1rem;
	line-height: 1;
	flex: none;
}
.step-card__text { margin: 0; color: var(--c-text); font-size: 0.95rem; line-height: 1.55; }
@media (max-width: 900px) {
	.steps-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
	.steps-grid { grid-template-columns: 1fr; }
}

/* Podłużny ciemny box; auto wystaje poza jego krawędzie (efekt jak we wzorze) */
/* Podłużny box ze zdjęciem procesu w tle + ciemna nakładka (jak w hero) */
.process-media {
	position: relative;
	align-self: stretch;
	min-height: 527px;
	border-radius: var(--radius);
	background: var(--process-bg) center/cover no-repeat;
	box-shadow: var(--shadow-md);
	overflow: hidden;
}

/* ---- REALIZACJE / EFEKTY PRACY (galeria: 3 zdjęcia w rzędzie, 2 rzędy) ---- */
.works-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}
.work-tile {
	position: relative;
	margin: 0;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--c-bg-alt);
	aspect-ratio: 4 / 3;
	box-shadow: var(--shadow-sm);
}
.work-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}
.work-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15,16,20,0) 55%, rgba(15,16,20,0.28) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
}
.work-tile:hover img { transform: scale(1.05); }
.work-tile:hover::after { opacity: 1; }


/* ---- CENNIK (ciemna sekcja ze zdjęciem w tle) ---- */
.pricing-section {
	position: relative;
	background: var(--pricing-bg) center/cover no-repeat fixed;
	isolation: isolate;
}
.pricing-section::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(12,13,16,0.93) 0%, rgba(12,13,16,0.9) 100%);
}
/* Tabela jako jasna karta unosząca się na ciemnym tle */
.pricing-table-wrap {
	overflow-x: auto;
	max-width: 900px;
	margin-inline: auto;
	border-radius: var(--radius);
	border: 1px solid var(--c-border);
	box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}
.pricing-table { width: 100%; border-collapse: collapse; min-width: 560px; background: #fff; }
.pricing-table th, .pricing-table td { padding: 1.05rem 1.25rem; text-align: center; border-bottom: 1px solid var(--c-border); }
.pricing-table thead th {
	background: linear-gradient(180deg, var(--c-dark) 0%, var(--c-dark-2) 100%);
	color: #fff;
	font-family: var(--font-head);
	font-size: 0.95rem;
}
.pricing-table tbody th { text-align: left; font-family: var(--font-head); background: var(--c-bg-alt); color: var(--c-text); }
.pricing-table tbody tr:last-child th, .pricing-table tbody tr:last-child td { border-bottom: 0; }
.pricing-table td { font-weight: 700; color: var(--c-text); }
/* Akcent na cenach (pomarańczowy) dla lepszego "dzieje się" */
.pricing-table tbody td { position: relative; }
.pricing-table tbody tr:hover td, .pricing-table tbody tr:hover th { background: rgba(251,158,0,0.08); }
/* Drobny druk pod tabelą (klauzula piaskowania + art. 66 KC) — jasny tekst na ciemnym tle.
   Selektor scoped do .pricing-section, żeby żadna późniejsza reguła nie wygasiła koloru. */
.pricing-section .pricing-note {
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--c-text-on-dark-muted);
	margin: 1.25rem auto 0;
	text-align: center;
	max-width: 820px;
}

/* ---- OPINIE ---- */
.review-card {
	background: var(--c-bg);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.review-card__stars { color: var(--c-accent); letter-spacing: 2px; }
.review-card__text { color: var(--c-text); margin: 0; font-size: 0.98rem; }
.review-card__author { font-family: var(--font-head); font-weight: 700; font-size: 0.95rem; margin-top: auto; }

/* ---- WIDGET OPINII (Trustindex) ---- */
.reviews-widget { max-width: 1100px; margin-inline: auto; }

/* ---- LICZBY + CTA: jeden spójny ciemny banner (przed stopką) ---- */
/* Bez górnego paddingu — sekcja powyżej ma już swój padding-bottom (unikamy podwójnego odstępu). */
.stats-cta { padding-top: 0; }
.stats-cta__banner {
	background: linear-gradient(160deg, var(--c-dark) 0%, var(--c-dark-2) 100%);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: var(--radius-lg);
	padding: clamp(1.75rem, 3.5vw, 2.75rem);
	box-shadow: var(--shadow-lg);
}
/* Głowa banneru: tekst po lewej, telefon + przycisk po prawej */
.stats-cta__head {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 1.5rem 2.5rem;
	padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
	border-bottom: 1px solid rgba(255,255,255,0.12);
}
.stats-cta__text .section__eyebrow { margin-bottom: 0.5rem; color: var(--c-accent); }
.stats-cta__text h2 { margin: 0; max-width: none; color: #fff; }
.stats-cta__actions { display: flex; align-items: center; gap: 1rem; }
.stats-cta__phone {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1.05rem;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	padding: 0.75rem 1.15rem;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,0.22);
	transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.stats-cta__phone:hover { color: var(--c-accent); border-color: var(--c-accent); background: rgba(251,158,0,0.08); }

/* ---- LICZBY / STATYSTYKI ---- */
.stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); text-align: center; }
.stat__num { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.2rem, 4vw, 3.2rem); color: var(--c-accent); line-height: 1; }
.stat__label { color: var(--c-text-on-dark-muted); font-size: 0.95rem; margin-top: 0.35rem; }

/* Statystyki wewnątrz ciemnego banneru: pomarańczowe liczby, jasne podpisy */
.stats-cta .stat__num { color: var(--c-accent); }
.stats-cta .stat__label { color: var(--c-text-on-dark-muted); }

/* ---- Responsywność strony głównej ---- */
@media (max-width: 1100px) {
	/* Poniżej tej szerokości pasek reflow do 2 kolumn — rezygnujemy z nachodzenia,
	   żeby układ pozostał czytelny (karty pod hero, bez zachodzenia panelu CTA). */
	.hero { padding-bottom: clamp(3rem, 8vw, 4.5rem); }
	.hero-strip-section { --strip-overlap: 0px; margin-top: 0; padding-top: var(--section-y); background: var(--c-bg-alt); }
	.hero-strip-section::before { display: none; }
	.hero-strip { grid-template-columns: repeat(2, 1fr); align-items: stretch; }
	.hero-strip__cta { margin-top: 0; min-height: auto; }
}
@media (max-width: 980px) {
	.hero { min-height: 0; padding-block: clamp(3rem, 8vw, 4.5rem); }
	.hero__bg { width: 100%; background-position: center; }
	/* Na mobile/tablecie ten sam efekt co na desktopie, ale pionowo (góra->dół):
	   ciemno u góry pod tekstem, zdjęcie odsłonięte niżej. */
	.hero__overlay {
		background: linear-gradient(
			180deg,
			var(--c-dark) 0%,
			rgba(15,15,18,0.92) 45%,
			rgba(15,15,18,0.86) 70%,
			rgba(15,15,18,0.80) 100%
		);
	}
	.hero__content { max-width: 100%; }
	.hero h1 { max-width: 100%; }
	.hero-strip-section { --strip-overlap: 0px; margin-top: 0; padding-top: var(--section-y); background: var(--c-bg-alt); }
	.hero-strip-section::before { display: none; }
	.cards-4 { grid-template-columns: repeat(2, 1fr); }
	.cards-3 { grid-template-columns: repeat(2, 1fr); }
	.stats-bar { grid-template-columns: repeat(2, 1fr); }
	.about__grid { grid-template-columns: 1fr; }
	.about__grid--text { grid-template-columns: 1fr; }
	.about__panel { grid-template-columns: 1fr; }
	.about__list-col { justify-content: flex-start; }
	.about__media { height: clamp(340px, 70vw, 460px); }
	.services-layout { grid-template-columns: 1fr; gap: 2rem; }
	.services-intro { position: static; top: auto; }
	.services-grid { grid-template-columns: repeat(2, 1fr); }
	.process-layout { grid-template-columns: 1fr 1fr; align-items: start; }
	.process-media { grid-column: 1 / -1; grid-row: 1; max-width: 520px; margin: 0 auto 1.5rem; min-height: 240px; }
	.service-card { border-right: 1px solid rgba(255,255,255,0.12); border-bottom: 1px solid rgba(255,255,255,0.12); }
	.service-card:nth-child(3n) { border-right: 1px solid rgba(255,255,255,0.12); }
	.service-card:nth-child(2n) { border-right: 0; }
	.service-card:nth-last-child(-n+3) { border-bottom: 1px solid rgba(255,255,255,0.12); }
	.service-card:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 640px) {
	.cards-4, .cards-3, .cards-2, .process-list, .hero-strip, .services-grid, .process-layout { grid-template-columns: 1fr; }
	/* Grafika procesu między krokiem 4 a 5 (naturalna kolejność DOM na mobile) */
	.process-media {
		display: block;
		grid-column: auto;
		grid-row: auto;
		align-self: auto;
		width: 100%;
		margin: 0.5rem 0 1.5rem;
		min-height: 240px;
		aspect-ratio: 16 / 10;
	}
	.section__head--split { grid-template-columns: 1fr; align-items: start; text-align: left; }
	.section__head-aside { align-items: flex-start; }
	.works-gallery { grid-template-columns: repeat(2, 1fr); }
	.pricing-section { background-attachment: scroll; }
	.stats-cta__head { grid-template-columns: 1fr; align-items: start; }
	/* Telefon i przycisk ZAWSZE obok siebie w jednej linii, w obrębie banneru.
	   Kluczowe: kontener nie może przepełnić rodzica (max-width:100%), a oba
	   dzieci muszą mieć prawo się skurczyć (min-width:0), inaczej flexbox z
	   nowrap wypycha przycisk poza krawędź — tak jak było widać na mobile. */
	.stats-cta__actions {
		display: flex;
		flex-wrap: nowrap;
		gap: 0.5rem;
		align-items: stretch;
		width: 100%;
		max-width: 100%;
	}
	.stats-cta__phone {
		flex: 0 1 auto;
		min-width: 0;
		justify-content: center;
		padding: 0.7rem 0.7rem;
		font-size: clamp(0.75rem, 2.7vw, 0.9rem);
		white-space: nowrap;
		/* Gdyby zabrakło miejsca — numer skróci się z wielokropkiem zamiast
		   rozpychać layout (na typowych telefonach mieści się w całości). */
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.stats-cta__actions .btn {
		flex: 1 1 auto;
		min-width: 0;
		justify-content: center;
		padding-inline: 0.6rem;
		font-size: clamp(0.75rem, 2.7vw, 0.9rem);
		line-height: 1.15;
		white-space: nowrap;
	}
	.service-card, .service-card:nth-child(3n), .service-card:nth-child(2n), .service-card:nth-last-child(-n+2), .service-card:nth-last-child(-n+3) { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
	.service-card:last-child { border-bottom: 0; }
	.hero-strip__cta { margin-top: 0; min-height: auto; }
	/* Cennik: tabela nie wychodzi poza ekran (przewijana wewnątrz kontenera) */
	.pricing-table { min-width: 0; }
	.pricing-table th, .pricing-table td { padding: 0.7rem 0.6rem; font-size: 0.85rem; }
	.about__checklist li { white-space: normal; }
	/* Kolejność na mobile dla wariantu z kolażem zdjęć: tytuł -> zdjęcia -> treść.
	   Reguły scoped do .about__grid (bez --text), bo wariant tekstowy nie ma
	   kolażu ani osobnego nagłówka mobilnego — ukrycie H2 skasowałoby nagłówek. */
	.about__grid:not(.about__grid--text) .about__head-mobile { display: block; order: 1; }
	.about__grid:not(.about__grid--text) .about__media { order: 2; }
	.about__grid:not(.about__grid--text) .about__body { order: 3; }
	.about__grid:not(.about__grid--text) .about__body > .section__eyebrow,
	.about__grid:not(.about__grid--text) .about__body > h2 { display: none; }
}

/* Bardzo wąskie ekrany: mniejszy numer, ale zawsze widoczny komplet (ikona + numer) */
@media (max-width: 430px) {
	.nav-bar__inner { gap: 0.5rem; }
	.site-branding img, .custom-logo { max-height: 42px; }
	.header-phone { font-size: 0.9rem; gap: 0.35rem; }
	.header-phone .icon { width: 18px; height: 18px; }

	/* Baner CTA na bardzo wąskich telefonach — jeszcze ciaśniejsze przyciski,
	   żeby telefon + „Zarezerwuj online" nadal zmieściły się obok siebie. */
	.stats-cta__actions { gap: 0.4rem; }
	.stats-cta__phone { padding: 0.65rem 0.55rem; font-size: clamp(0.72rem, 3.4vw, 0.85rem); }
	.stats-cta__actions .btn { padding-inline: 0.5rem; font-size: clamp(0.72rem, 3.4vw, 0.85rem); }
}

/* Galeria realizacji: 4 kolumny na desktop, 2 na tablecie/mobile */
@media (max-width: 980px) {
	.works-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   STRONA USŁUGOWA (/uslugi/...)
   ========================================================= */
.service-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: linear-gradient(160deg, var(--c-dark) 0%, var(--c-dark-2) 100%);
	color: #fff;
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
/* Zdjęcie tła (widok hali) — ledwo widoczne, mocno przygaszone. Dodatkowe
   ściemnienie samego obrazu (brightness) wzmacnia efekt „tła w cieniu". */
.service-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: var(--service-hero-img);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	filter: brightness(0.68);
}
/* Przyciemniający overlay: po lewej mocno ciemno (tytuł na ciemnym tle),
   a z prawej strony zdjęcie prześwituje wyraźniej. Dół lekko domknięty. */
.service-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(10,10,15,0.94) 0%, rgba(10,10,15,0.90) 42%, rgba(10,10,15,0.78) 62%, rgba(10,10,15,0.58) 82%, rgba(10,10,15,0.48) 100%),
		linear-gradient(180deg, rgba(10,10,15,0.35) 0%, rgba(10,10,15,0.15) 45%, rgba(10,10,15,0.60) 100%);
}
.breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	font-size: 0.85rem;
	color: var(--c-text-on-dark-muted);
	margin-bottom: 1.5rem;
}
.breadcrumbs a { color: var(--c-text-on-dark-muted); }
.breadcrumbs a:hover { color: var(--c-accent); }
.breadcrumbs span[aria-current], .breadcrumbs .breadcrumb_last { color: #fff; }

/* Nagłówek strony rezerwacji — bez hero, tylko breadcrumbs + tytuł na jasnym tle. */
.booking-head {
	padding-block: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.25rem);
	background: var(--c-bg);
}
.booking-head__title {
	font-size: clamp(1.6rem, 3.2vw, 2.4rem);
	margin: 0.35rem 0 0;
}
/* Strona rezerwacji: gdy nagłówek ma już dolny odstęp, sekcja formularza
   nie potrzebuje własnego górnego wcięcia. */
.booking-page .section--flush-top { padding-top: 0; }
/* Breadcrumbs na jasnym tle — czytelne, ciemne kolory. */
.breadcrumbs--light { color: var(--c-text-muted); margin-bottom: 0.75rem; }
.breadcrumbs--light a { color: var(--c-text-muted); }
.breadcrumbs--light a:hover { color: var(--c-accent-600); }
.breadcrumbs--light span[aria-current],
.breadcrumbs--light .breadcrumb_last { color: var(--c-graphite); }
.service-hero__content { max-width: 760px; }
.service-hero__content h1 {
	color: #fff;
	font-size: clamp(1.9rem, 4vw, 3rem);
	line-height: 1.12;
	margin: 0.5rem 0 1rem;
}
.service-hero__content h1 span { color: var(--c-accent); }
.service-hero__lead { color: var(--c-text-on-dark-muted); font-size: 1.05rem; max-width: 620px; margin: 0 0 1.75rem; }
.service-hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* Układ: treść + boczny panel */
.service-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: clamp(2rem, 4vw, 3.5rem);
	padding-block: clamp(3.5rem, 6vw, 5.5rem);
	align-items: start;
}
/* Elementy grida muszą mieć prawo skurczyć się poniżej szerokości swojej
   zawartości (domyślne min-width:auto na to nie pozwala) — inaczej szeroki
   widget opinii wewnątrz treści rozpycha całą kolumnę i layout wyjeżdża poza ekran. */
.service-content, .service-aside { min-width: 0; }
/* Więcej oddechu między blokami treści — spójnie z rytmem sekcji na stronie głównej. */
.service-block { margin-bottom: clamp(3rem, 6vw, 5rem); }
.service-block:last-child { margin-bottom: 0; }
.service-block h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 0 0 1rem; }
.service-block p { color: var(--c-text-muted); margin: 0 0 1rem; line-height: 1.65; }
.service-block p:last-child { margin-bottom: 0; }

/* Zdjęcie w treści (rozbicie ściany tekstu) */
.service-figure { margin: 1.5rem 0 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); }
.service-figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* Lista punktów (sekcja GEO) */
.service-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.service-list li { position: relative; padding-left: 1.75rem; color: var(--c-text); line-height: 1.6; }
.service-list li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--c-accent); font-weight: 800; }

/* Widget opinii na stronie usługowej */
.service-reviews { max-width: 100%; overflow-x: clip; }
/* Widget opinii (Trustindex) doładowuje się kilka sekund po stronie i potrafi
   wstrzyknąć element szerszy niż ekran → poziomy scroll pojawiał się z opóźnieniem.
   Trzymamy jego zawartość w ryzach szerokości rodzica. */
.service-reviews > *,
.service-reviews iframe,
.service-reviews [class*="ti-widget"],
.service-reviews [class*="trustindex"] { max-width: 100% !important; }

/* =========================================================
   CENNIK
   ========================================================= */
/* Karty cenowe segmentów — spójna siatka 4 kolumn */
.price-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
	align-items: stretch;
}
.price-plan {
	display: flex;
	flex-direction: column;
	background: var(--c-bg);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-lg);
	padding: 1.6rem 1.5rem;
	box-shadow: var(--shadow-sm);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.price-plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(251,158,0,0.4); }
.price-plan__head { padding-bottom: 1.1rem; border-bottom: 1px solid var(--c-border); margin-bottom: 1.1rem; }
.price-plan__name { font-family: var(--font-head); font-weight: 800; font-size: 1.35rem; color: var(--c-text); margin: 0 0 0.35rem; }
.price-plan__examples { font-size: 0.86rem; color: var(--c-text-muted); line-height: 1.45; margin: 0; }
.price-plan__rows { display: grid; gap: 0.6rem; margin-bottom: 1.4rem; }
.price-plan__row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.price-plan__label { font-size: 0.9rem; color: var(--c-text-muted); }
.price-plan__amount { font-family: var(--font-head); font-weight: 800; font-size: 1.25rem; color: var(--c-text); white-space: nowrap; }
.price-plan__row--accent .price-plan__amount { color: var(--c-accent-600); }
.price-plan__btn { margin-top: auto; width: 100%; }

/* Wyróżniony callout pod kartami cennika (jasna sekcja /cennik/).
   UWAGA: osobna klasa od .pricing-note — .pricing-note to drobny druk na CIEMNEJ
   sekcji strony głównej i ma jasny tekst. Wspólna nazwa powodowała nadpisanie
   (ciemny tekst na ciemnym tle = klauzula niewidoczna). */
.pricing-callout {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	/* Szerokość dopasowana do treści (jedna linia), ograniczona do szerokości
	   kontenera — dzięki temu zdanie nie łamie się bez potrzeby na 2 wiersze. */
	width: fit-content;
	max-width: 100%;
	margin: 1.75rem auto 0;
	padding: 0.9rem 1.2rem;
	background: rgba(251,158,0,0.08);
	border: 1px solid rgba(251,158,0,0.28);
	border-radius: var(--radius);
	font-size: 0.95rem;
	color: var(--c-text);
	text-align: left;
}
.pricing-callout span { white-space: nowrap; }
@media (max-width: 640px) {
	/* Na wąskich ekranach pozwól zawinąć — nagłówek i tak jest krótki. */
	.pricing-callout span { white-space: normal; }
}
.pricing-callout .icon { width: 20px; height: 20px; color: var(--c-accent); flex: none; }

/* Segment „Inne” — osobny, wyróżniony wiersz pod kartami segmentów.
   Wyciągnięty z siatki 4 kart, bo to wycena indywidualna (nie ma podziału
   nowe/używane) i piąta karta psuła równy rząd. */
.price-other {
	display: flex;
	align-items: center;
	gap: 1.5rem 2rem;
	flex-wrap: wrap;
	margin-top: 1.75rem;
	padding: 1.6rem 1.75rem;
	background: var(--c-bg);
	border: 1px solid rgba(251,158,0,0.35);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}
.price-other__text { flex: 1 1 320px; min-width: 0; }
.price-other__name { display: block; font-family: var(--font-head); font-weight: 800; font-size: 1.35rem; color: var(--c-text); margin-bottom: 0.35rem; }
.price-other__desc { margin: 0; font-size: 0.95rem; color: var(--c-text-muted); line-height: 1.55; }
.price-other__price { text-align: right; flex: none; }
.price-other__amount { display: block; font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; color: var(--c-accent-600); line-height: 1.1; white-space: nowrap; }
.price-other__note { display: block; font-size: 0.82rem; color: var(--c-text-muted); margin-top: 0.15rem; }
.price-other__btn { flex: none; }
@media (max-width: 640px) {
	/* Na telefonie: kolumna, cena i przycisk wyrównane do lewej, przycisk pełnej szerokości. */
	.price-other { flex-direction: column; align-items: stretch; text-align: left; }
	.price-other__price { text-align: left; }
	.price-other__btn { width: 100%; }
}

/* Usługi dodatkowe — lista wierszy, jeden spójny styl */
.addon-list {
	max-width: 820px;
	margin-inline: auto;
	display: grid;
	gap: 0.75rem;
}
.addon-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	padding: 1.15rem 1.4rem;
	background: var(--c-bg);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
}
.addon-item__name { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--c-text); margin: 0 0 0.2rem; }
.addon-item__desc { font-size: 0.9rem; color: var(--c-text-muted); line-height: 1.45; margin: 0; }
.addon-item__price { font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; color: var(--c-accent-600); white-space: nowrap; flex: none; }

/* Wycena indywidualna + FAQ — jedna wspólna sekcja tekstowa na białym tle (pełna szerokość) */
.pricing-info__block { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.pricing-info__block:last-of-type { margin-bottom: 0; }
.pricing-info__block h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 0 0 1rem; }
.pricing-info__block p { color: var(--c-text-muted); line-height: 1.65; margin: 0 0 1rem; }
.pricing-info__block p:last-child { margin-bottom: 0; }
.pricing-info__block a { font-weight: 700; }
/* Lista usług indywidualnych jako czytelny ciąg tekstu oddzielony kropkami */
.pricing-info__tags { color: var(--c-text); font-family: var(--font-head); font-weight: 600; font-size: 1.02rem; line-height: 1.7; }
.pricing-info .faq-list { margin-top: 0.5rem; }

.pricing-legal { margin: 2rem 0 0; font-size: 0.82rem; color: var(--c-text-muted); line-height: 1.55; }



@media (max-width: 980px) {
	.price-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
	.price-cards { grid-template-columns: 1fr; }
	.addon-item { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
}

/* =========================================================
   REALIZACJE — galeria
   ========================================================= */
.portfolio-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}
.portfolio-item {
	position: relative;
	margin: 0;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	background: var(--c-bg-alt);
}
.portfolio-item img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}
.portfolio-item:hover img { transform: scale(1.05); }
.portfolio-item__caption {
	position: absolute;
	inset: auto 0 0 0;
	padding: 1.5rem 1rem 0.85rem;
	font-family: var(--font-body);
	font-size: 0.88rem;
	color: #fff;
	background: linear-gradient(180deg, rgba(10,10,15,0) 0%, rgba(10,10,15,0.85) 100%);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.portfolio-item:hover .portfolio-item__caption { opacity: 1; transform: translateY(0); }
@media (max-width: 900px) {
	.portfolio-grid { grid-template-columns: repeat(2, 1fr); }
	/* Na dotyku podpis zawsze widoczny (brak hovera) */
	.portfolio-item__caption { opacity: 1; transform: none; }
}
@media (max-width: 520px) {
	.portfolio-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   KONTAKT
   ========================================================= */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.contact-layout {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) 1.1fr;
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: stretch;
}
/* Nazwa firmy (GMF) nad danymi NAP — spójna z wizytówką i schema. */
.contact-info__name {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: clamp(1.35rem, 2.2vw, 1.75rem);
	line-height: 1.15;
	color: var(--c-text);
	margin: 0 0 1.5rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--c-border);
}
.contact-list { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: 1.25rem; }
.contact-list__item { display: flex; gap: 0.9rem; align-items: flex-start; }
.contact-list__icon {
	flex: none;
	width: 44px; height: 44px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 12px;
	background: rgba(251,158,0,0.12);
	color: var(--c-accent);
}
.contact-list__icon .icon { width: 22px; height: 22px; }
.contact-list__body { display: flex; flex-direction: column; gap: 0.15rem; }
.contact-list__label { font-family: var(--font-head); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--c-text-muted); }
.contact-list__value { font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; color: var(--c-text); }
a.contact-list__value:hover { color: var(--c-accent-600); }
.contact-list__note { font-size: 0.88rem; color: var(--c-text-muted); }
.contact-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.contact-map {
	border-radius: var(--radius);
	overflow: hidden;
	min-height: 360px;
	box-shadow: var(--shadow-md);
	background: var(--c-bg-alt);
}
.contact-map iframe { display: block; width: 100%; height: 100%; min-height: 360px; }

/* Formularz kontaktowy */
.contact-form-wrap { max-width: 720px; margin-inline: auto; }
.contact-form { display: grid; gap: 1rem; }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.contact-form__field { display: flex; flex-direction: column; gap: 0.35rem; }
.contact-form__field > span { font-family: var(--font-head); font-weight: 600; font-size: 0.9rem; color: var(--c-text); }
.contact-form__field input, .contact-form__field textarea {
	font-family: var(--font-body);
	font-size: 1rem;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--c-border);
	border-radius: 10px;
	background: var(--c-bg);
	color: var(--c-text);
}
.contact-form__field input:focus, .contact-form__field textarea:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(251,158,0,0.18); }
.contact-form__note { font-size: 0.88rem; color: var(--c-text-muted); margin: 0; }
@media (max-width: 900px) {
	.contact-layout { grid-template-columns: 1fr; }
	.contact-map { min-height: 300px; }
}
@media (max-width: 560px) {
	.contact-form__row { grid-template-columns: 1fr; }
}

/* Segmenty pojazdów */
.service-vehicles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.service-vehicle {
	background: var(--c-bg-alt);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	padding: 1.25rem 1.35rem;
}
.service-vehicle h3 { font-size: 1.1rem; margin: 0 0 0.4rem; }
.service-vehicle p { margin: 0; font-size: 0.95rem; }

/* Kroki procesu */
.service-steps { counter-reset: s; list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.service-steps li {
	position: relative;
	padding: 1rem 1rem 1rem 3.5rem;
	background: var(--c-bg-alt);
	border-radius: var(--radius);
	color: var(--c-text);
	line-height: 1.55;
}
.service-steps li::before {
	counter-increment: s;
	content: counter(s, decimal-leading-zero);
	position: absolute;
	left: 1rem;
	top: 1rem;
	font-family: var(--font-head);
	font-weight: 800;
	color: var(--c-accent);
}

/* Cennik — blok lewo/prawo z kartami cen */
.service-pricing {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: center;
	background: linear-gradient(160deg, var(--c-dark) 0%, var(--c-dark-2) 100%);
	border-radius: var(--radius-lg);
	padding: clamp(1.75rem, 3.5vw, 2.75rem);
}
.service-pricing__text h2 { color: #fff; }
.service-pricing__text p { color: var(--c-text-on-dark-muted); }
.service-pricing__cards { display: grid; gap: 1rem; }
.price-card {
	display: grid;
	gap: 0.15rem;
	padding: 1.25rem 1.5rem;
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: var(--radius);
}
.price-card--accent { background: rgba(251,158,0,0.12); border-color: rgba(251,158,0,0.4); }
.price-card__label { font-family: var(--font-head); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-on-dark-muted); }
.price-card__value { font-family: var(--font-head); font-weight: 800; font-size: 1.9rem; line-height: 1; color: var(--c-accent); }
.price-card__note { font-size: 0.85rem; color: var(--c-text-on-dark-muted); }

/* FAQ (details/summary) */
.faq-list { display: grid; gap: 0.75rem; }
.faq-item {
	background: var(--c-bg-alt);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	overflow: hidden;
}
.faq-item summary {
	list-style: none;
	cursor: pointer;
	padding: 1.1rem 1.35rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { font-size: 1.02rem; margin: 0; font-weight: 700; }
.faq-item summary::after {
	content: "+";
	font-family: var(--font-head);
	font-size: 1.4rem;
	color: var(--c-accent);
	flex: none;
	transition: transform 0.2s ease;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item > p { margin: 0; padding: 0 1.35rem 1.2rem; color: var(--c-text-muted); line-height: 1.6; }

/* Boczny panel CTA (sticky) — odstęp od góry, by nie chował się pod sticky header.
   Cały .site-header jest sticky (topbar + nav-bar), więc offset musi uwzględniać
   OBIE belki (--topbar-h + --header-h) plus wyraźny odstęp wizualny. */
.service-aside { position: sticky; top: calc(var(--topbar-h) + var(--header-h) + 1.75rem); }
.service-cta-card {
	background: linear-gradient(160deg, var(--c-dark) 0%, var(--c-dark-2) 100%);
	color: #fff;
	border-radius: var(--radius-lg);
	padding: 1.75rem;
	box-shadow: var(--shadow-lg);
}
/* Tytuł panelu CTA — pełna specyficzność (p + klasa), by wygrać z regułą `.service-cta-card > p`. */
.service-cta-card p.service-cta-card__title { color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 1.12rem; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 0.85rem; text-wrap: balance; }
/* Akapit opisu — celowo wyklucza tytuł, żeby nie nadpisywać jego rozmiaru. */
.service-cta-card > p:not(.service-cta-card__title) { color: var(--c-text-on-dark-muted); font-size: 0.95rem; margin: 0 0 1.25rem; }
/* Telefon jako biały "nagłówek" (nie przycisk). Klik tel: aktywny tylko na mobile. */
.service-cta-card__phone {
	display: block;
	text-decoration: none;
	margin-bottom: 1.25rem;
	cursor: default;
}
.service-cta-card__phone-label {
	display: block;
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-text-on-dark-muted);
	margin-bottom: 0.15rem;
}
.service-cta-card__phone-num {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 1.5rem;
	color: #fff;
	line-height: 1;
}
.service-cta-card__phone-num .icon { width: 22px; height: 22px; color: var(--c-accent); flex: none; }
.service-cta-card .btn { width: 100%; }
.service-cta-card__points { list-style: none; margin: 1.5rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid rgba(255,255,255,0.12); display: grid; gap: 0.75rem; }
.service-cta-card__points li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.86rem; color: var(--c-text-on-dark); white-space: nowrap; }
.service-cta-card__points .icon { width: 18px; height: 18px; color: var(--c-accent); flex: none; }

/* Kompaktowa nawigacja „Pozostałe usługi" (linkowanie wewnętrzne / silos) przed stopką.
   Małe wiersze-linki z ikoną — wyglądają jak usługi, nie jak tagi. Bieżąca strona pominięta. */
.services-nav {
	background: var(--c-bg-alt);
	border-top: 1px solid var(--c-border);
	padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
}
/* Etykieta bloku nawigacyjnego — celowo <p>, nie nagłówek (patrz nav-fallback.php).
   Wygląd 1:1 jak wcześniejszy H2, dlatego line-height/letter-spacing wprost. */
.services-nav__title {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 1.15rem;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--c-text);
	margin: 0 0 1.1rem;
}
/* Dwie grupy obok siebie — ten sam podział i wcięcia co w mega menu.
   Grupa z pozycją nadrzędną jest szersza, bo ma wcięte podpozycje. */
.services-nav__groups {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: clamp(1.5rem, 3vw, 2.75rem);
}
.services-nav__group-label {
	display: block;
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 0.74rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-text-muted);
	margin-bottom: 0.6rem;
}
.services-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.4rem;
}
/* Podpozycje wcięte, z pionową linią prowadzącą — jak w mega menu, tylko
   na jasnym tle, więc linia z --c-border, nie z półprzezroczystej bieli. */
.services-nav__sub {
	list-style: none;
	margin: 0.4rem 0 0.15rem 1.5rem;
	padding: 0 0 0 0.85rem;
	border-left: 1px solid var(--c-border);
	display: grid;
	gap: 0.35rem;
}
.services-nav__item {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.7rem 0.85rem;
	background: var(--c-bg);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	text-decoration: none;
	color: var(--c-text);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
a.services-nav__item:hover, a.services-nav__item:focus-visible {
	border-color: rgba(251,158,0,0.5);
	box-shadow: var(--shadow-sm);
	transform: translateY(-2px);
}
/* Podpozycja: to samo BIAŁE tło co pozostałe wiersze — inaczej na jasnym tle
   sekcji wychodziło szare-na-szarym i wyglądało na niedokończone. Hierarchię
   niesie wcięcie + pionowa linia + mniejsza ikona bez kafla, nie kolor tła. */
.services-nav__item--sub {
	padding: 0.5rem 0.75rem;
	gap: 0.5rem;
}
.services-nav__item--sub .services-nav__label { font-family: var(--font-body); font-weight: 500; font-size: 0.9rem; }
.services-nav__subicon { width: 18px; height: 18px; color: var(--c-accent); flex: none; }
.services-nav__icon { width: 34px; height: 34px; flex: none; }
/* Bieżąca strona: widoczna pełnoprawnie, ale nieklikalna. Wyróżnienie akcentem
   + plakietka „Jesteś tutaj" zamiast strzałki — jasne, że to pozycja bieżąca,
   a nie zepsuty link. */
.services-nav__item--current {
	border-color: var(--c-accent);
	background: rgba(251,158,0,0.08);
	color: var(--c-text);
	cursor: default;
}
.services-nav__item--current .services-nav__label { color: var(--c-accent-600); font-weight: 700; }
.services-nav__here {
	margin-left: auto;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-accent-600);
	background: rgba(251,158,0,0.16);
	padding: 0.2rem 0.55rem;
	border-radius: var(--radius-pill);
	white-space: nowrap;
}
.services-nav__label {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.2;
	color: var(--c-text);
}
.services-nav__arrow {
	margin-left: auto;
	color: var(--c-accent);
	font-family: var(--font-head);
	font-weight: 700;
	transition: transform 0.15s ease;
}
a.services-nav__item:hover .services-nav__arrow { transform: translateX(4px); }
@media (max-width: 900px) {
	.services-nav__groups { grid-template-columns: 1fr; gap: 1.75rem; }
}

@media (max-width: 900px) {
	.service-layout { grid-template-columns: 1fr; }
	.service-aside { position: static; }
	.service-pricing { grid-template-columns: 1fr; }
	/* Na mobile telefon klikalny (tel:) */
	.service-cta-card__phone { cursor: pointer; }
	/* Hero: przyciemnienie pionowe (góra->dół) jak na stronie głównej —
	   ciemno u góry pod tekstem, zdjęcie odsłonięte niżej. */
	.service-hero::before {
		background: linear-gradient(
			180deg,
			rgba(10,10,15,0.94) 0%,
			rgba(10,10,15,0.90) 45%,
			rgba(10,10,15,0.82) 70%,
			rgba(10,10,15,0.72) 100%
		);
	}
}
@media (max-width: 900px) {
	.other-services__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.other-services__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.service-vehicles { grid-template-columns: 1fr; }
	/* Hero: przyciski obok siebie (nie jeden pod drugim) — kompaktowe, dzielą szerokość */
	.service-hero__cta { flex-wrap: nowrap; gap: 0.65rem; }
	.service-hero__cta .btn { flex: 1 1 0; min-width: 0; padding-inline: 0.75rem; font-size: 0.92rem; white-space: nowrap; }
}


/* =========================================================
   BLOG — pojedynczy wpis (single.php)
   ========================================================= */
/* Hero wpisu: zdjęcie wyróżniające (lub domyślne tło banneru) z ciemną nakładką. */
.service-hero--post .service-hero__content { max-width: 60rem; }
.post-meta { color: var(--c-text-on-dark-muted); font-size: 0.9rem; margin: 0.75rem 0 0; display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.post-meta span { opacity: 0.6; }
.post-meta .post-meta__author { opacity: 0.6; }
.post-meta .post-meta__author a { color: #fff; opacity: 1; text-decoration: none; }
.post-meta .post-meta__author a:hover { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }

/* Kolumna treści o czytelnej długości wiersza (~68 znaków). */
.post-article { max-width: 46rem; margin-inline: auto; }
.post-content { color: var(--c-text); font-size: 1.075rem; line-height: 1.75; }
.post-content > * + * { margin-top: 1.15rem; }
.post-content h2 {
	font-size: clamp(1.5rem, 2.8vw, 2rem);
	margin: 2.5rem 0 0.5rem;
	padding-top: 0.5rem;
	line-height: 1.2;
}
.post-content h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); margin: 1.75rem 0 0.4rem; }
.post-content p { margin: 0 0 1.15rem; }
.post-content ul, .post-content ol { margin: 0 0 1.25rem; padding-left: 1.35rem; display: grid; gap: 0.4rem; }
.post-content li { line-height: 1.65; }
.post-content a { color: var(--c-accent-600); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.post-content a:hover { color: var(--c-accent); }
.post-content strong { font-weight: 700; }
.post-content img { border-radius: var(--radius); margin: 1.5rem 0; }
.post-content blockquote {
	margin: 1.75rem 0;
	padding: 1rem 1.4rem;
	border-left: 4px solid var(--c-accent);
	background: var(--c-bg-alt);
	border-radius: 0 var(--radius) var(--radius) 0;
	color: var(--c-text);
	font-size: 1.05rem;
}
.post-content blockquote p:last-child { margin-bottom: 0; }
/* Tabela (np. ranking) — czytelna, w palecie motywu. */
.post-content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.98rem; }
.post-content th, .post-content td { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--c-border); text-align: left; }
.post-content thead th { background: var(--c-dark); color: #fff; font-family: var(--font-head); }
.post-content tbody tr:nth-child(even) { background: var(--c-bg-alt); }
/* Przypis/atrybucja źródła. */
.post-source { font-size: 0.88rem; color: var(--c-text-muted); border-top: 1px solid var(--c-border); margin-top: 2rem; padding-top: 1rem; }

/* Zdjęcie wyróżniające wpisu — nad treścią (nie w tle hero). */
.post-featured { margin: 0 0 1.75rem; }
.post-featured__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--radius-lg);
}

/* Box autora na dole wpisu. */
.post-author {
	margin: 2.5rem 0 0;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	background: var(--c-bg-alt);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-lg);
	display: flex;
	gap: 1.1rem;
	align-items: flex-start;
}
.post-author__avatar { flex: 0 0 auto; display: block; }
.post-author__avatar img { display: block; width: 140px; height: auto; object-fit: contain; }
.post-author__eyebrow { font-family: var(--font-head); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-accent-600); margin: 0 0 0.15rem; }
.post-author__name { font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; margin: 0 0 0.4rem; color: var(--c-text); }
.post-author__name a { color: var(--c-text); text-decoration: none; }
.post-author__name a:hover { color: var(--c-accent-600); text-decoration: underline; text-underline-offset: 3px; }
.post-author__desc { margin: 0; color: var(--c-text-muted); font-size: 0.95rem; line-height: 1.6; }
@media (max-width: 640px) {
	.post-author { flex-direction: column; }
}


/* =========================================================
   IKONY USŁUG (PNG, monochrom — dostarczone przez klienta)
   Zastępują liniowe SVG w mega menu, bloku „Nasze usługi" i hubie /uslugi/.
   Glif jest ciemny; na gradientowym kaflu (icon-tile--grad) daje kontrast,
   na jasnym tle wygląda jak mono-ikona.
   ========================================================= */
/* Mega menu */
.mega-col__ico { width: 22px; height: 22px; object-fit: contain; flex: none; }
.mega-col__ico--sub { width: 18px; height: 18px; }
/* Hub /uslugi/ — kafel nadrzędny (na gradiencie) */
.icon-tile--grad .service-row__ico { width: 30px; height: 30px; object-fit: contain; display: block; }
.service-variant__ico { width: 18px; height: 18px; object-fit: contain; flex: none; }
/* Blok „Nasze usługi" pod podstronami */
.icon-tile--grad .services-nav__ico { width: 22px; height: 22px; object-fit: contain; display: block; }
.services-nav__subico { width: 18px; height: 18px; object-fit: contain; flex: none; }
/* Strona główna — karty usług (sekcja ciemna, kafel gradientowy) */
.icon-tile--grad .service-card__ico { width: 28px; height: 28px; object-fit: contain; display: block; }


/* =========================================================
   BLOG — lista wpisów (home.php)
   ========================================================= */
/* Odstęp od hero: sekcje listy i wpisu mają flush-top w PHP; przywracamy górny
   padding, żeby treść nie kleiła się do ciemnego hero (dotyczy /blog/ i wpisu). */
.blog-page .section--flush-top,
.post-page .section--flush-top { padding-top: clamp(2.5rem, 5vw, 4rem); }

.blog-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
}
.blog-main { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
/* Pozostałe wpisy (po feature) — siatka 2 kolumny. */
.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.25rem, 3vw, 2rem); }
@media (max-width: 560px) {
	.blog-grid { grid-template-columns: 1fr; }
}

/* Karta wpisu — zdjęcie u góry, treść pod spodem. */
.blog-card {
	display: grid;
	grid-template-columns: 1fr;
	background: var(--c-bg);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(251,158,0,0.4); }
.blog-card__media { display: block; aspect-ratio: 16 / 9; background: var(--c-bg-alt); overflow: hidden; }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.blog-card:hover .blog-card__media img { transform: scale(1.04); }
.blog-card__body { padding: clamp(1.25rem, 2.5vw, 1.75rem); display: flex; flex-direction: column; gap: 0.6rem; }
.blog-card__cat {
	align-self: flex-start;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-accent-600);
	background: rgba(251,158,0,0.1);
	padding: 0.25rem 0.6rem;
	border-radius: var(--radius-pill);
}
.blog-card__title { font-size: 1.3rem; line-height: 1.25; margin: 0; }
.blog-card__title a { color: var(--c-text); }
.blog-card__title a:hover { color: var(--c-accent-600); }
.blog-card__excerpt { color: var(--c-text-muted); font-size: 0.96rem; line-height: 1.6; margin: 0; }
.blog-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.35rem; flex-wrap: wrap; }
.blog-card__date { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--c-text-muted); }
.blog-card__date .icon { width: 16px; height: 16px; color: var(--c-accent); }
.blog-card__link { font-family: var(--font-head); font-weight: 700; font-size: 0.9rem; color: var(--c-accent-600); }
.blog-card__link:hover { color: var(--c-accent); }

/* Wpis wyróżniony (pierwszy) — poziomy układ zdjęcie|treść na desktopie. */
@media (min-width: 721px) {
	.blog-card--feature { grid-template-columns: 1.15fr 1fr; align-items: stretch; }
	.blog-card--feature .blog-card__media { aspect-ratio: auto; height: 100%; }
	.blog-card--feature .blog-card__body { justify-content: center; }
	.blog-card--feature .blog-card__title { font-size: clamp(1.5rem, 2.4vw, 2rem); }
	.blog-card--feature .blog-card__excerpt { font-size: 1.02rem; }
}

/* Sidebar bloga */
.blog-sidebar { display: grid; gap: 1.25rem; position: sticky; top: calc(var(--topbar-h) + var(--header-h) + 1.75rem); }
.blog-widget {
	background: var(--c-bg);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-lg);
	padding: 1.5rem;
}
.blog-widget__title {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-text-muted);
	margin: 0 0 1rem;
}
.blog-cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
/* wp_list_categories renderuje: <li><a>Nazwa</a> (4)</li>. Flex na <li> ustawia
   nazwę i licznik w jednej linii, licznik dosunięty do prawej. */
.blog-cats li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	font-size: 0.95rem;
	color: var(--c-text-muted);
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--c-border);
}
.blog-cats li:last-child { border-bottom: 0; }
.blog-cats a { color: var(--c-text); font-weight: 600; }
.blog-cats a:hover { color: var(--c-accent-600); }
.blog-widget--cta { background: linear-gradient(160deg, var(--c-dark) 0%, var(--c-dark-2) 100%); border-color: var(--c-border-dark); color: #fff; text-align: left; }
.blog-cta__lead { font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; margin: 0 0 0.4rem; color: #fff; }
.blog-cta__desc { font-size: 0.9rem; line-height: 1.55; color: var(--c-text-on-dark-muted); margin: 0 0 1.1rem; }
.blog-widget--cta .btn { width: 100%; }
.blog-cta__phone { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.9rem; font-family: var(--font-head); font-weight: 700; color: #fff; }
.blog-cta__phone .icon { width: 18px; height: 18px; color: var(--c-accent); }
.blog-cta__phone:hover { color: var(--c-accent); }

@media (max-width: 900px) {
	.blog-layout { grid-template-columns: 1fr; }
	.blog-sidebar { position: static; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
	.blog-sidebar { grid-template-columns: 1fr; }
}

/* =========================================================
   BLOG — paginacja listy wpisów (/blog/, /page/2/ itd.)
   ========================================================= */
.blog-main .pagination { margin-top: clamp(2rem, 5vw, 3rem); }
.blog-main .pagination .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.blog-main .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}
.blog-main .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 0.9rem;
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	background: #fff;
	color: var(--c-text);
	font-family: var(--font-head);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.blog-main a.page-numbers:hover { border-color: var(--c-accent); color: var(--c-accent-600); }
.blog-main .page-numbers.current {
	background: var(--c-accent);
	border-color: var(--c-accent);
	color: #fff;
}
.blog-main .page-numbers.dots { border-color: transparent; background: transparent; }
.blog-main .page-numbers.prev,
.blog-main .page-numbers.next { padding: 0 1.2rem; }

/* =========================================================
   BLOG — pojedynczy wpis: układ 2-kolumnowy (treść + ToC/CTA)
   ========================================================= */
.post-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: start;
}
/* W układzie 2-kolumnowym artykuł nie jest już wyśrodkowaną wąską kolumną. */
.post-layout .post-article { max-width: none; margin: 0; }

/* Sidebar wpisu — sticky spis treści + „umów wizytę". */
.post-aside { position: relative; }
.post-aside__sticky { position: sticky; top: calc(var(--topbar-h) + var(--header-h) + 1.75rem); display: grid; gap: 1.25rem; }
.post-toc {
	background: var(--c-bg-alt);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-lg);
	padding: 1.35rem 1.5rem;
}
.post-toc__title {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-text-muted);
	margin: 0 0 0.85rem;
}
.post-toc__list { margin: 0; padding: 0 0 0 1.1rem; display: grid; gap: 0.5rem; }
.post-toc__list li { color: var(--c-text-muted); font-size: 0.92rem; }
.post-toc__list a { color: var(--c-text); font-weight: 500; line-height: 1.4; }
.post-toc__list a:hover { color: var(--c-accent-600); }

/* „Umów wizytę" — jak sidebar strony usługowej (ciemny box). */
.post-book {
	background: linear-gradient(160deg, var(--c-dark) 0%, var(--c-dark-2) 100%);
	border: 1px solid var(--c-border-dark);
	border-radius: var(--radius-lg);
	padding: 1.5rem;
	color: #fff;
	display: grid;
	gap: 0.7rem;
}
.post-book__lead { font-family: var(--font-head); font-weight: 800; font-size: 1.2rem; margin: 0; color: #fff; }
.post-book__desc { font-size: 0.9rem; line-height: 1.55; color: var(--c-text-on-dark-muted); margin: 0 0 0.3rem; }
.post-book .btn { width: 100%; }
.post-book .btn--on-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
.post-book .btn--on-dark:hover { background: var(--c-accent); border-color: var(--c-accent); color: #14110a; }
.post-book__phone { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.35rem; font-family: var(--font-head); font-weight: 700; color: #fff; }
.post-book__phone .icon { width: 18px; height: 18px; color: var(--c-accent); }
.post-book__phone:hover { color: var(--c-accent); }
/* Kotwica pod sticky headerem — nagłówki nie chowają się pod belką. */
.post-content h2 { scroll-margin-top: calc(var(--topbar-h) + var(--header-h) + 1.5rem); }

@media (max-width: 900px) {
	.post-layout { grid-template-columns: 1fr; }
	/* Sidebar na mobile: nad treścią, bez sticky (ToC jako szybka nawigacja). */
	.post-aside { order: -1; }
	.post-aside__sticky { position: static; grid-template-columns: 1fr; }
}

/* =========================================================
   MOBILNY STICKY PASEK CTA (Zadzwoń + Zarezerwuj online)
   Widoczny tylko na telefonie/mniejszym tablecie (≤ 860px),
   tam gdzie włącza się układ mobilny. Na desktopie ukryty.
   ========================================================= */
.mobile-cta-bar { display: none; }

@media (max-width: 860px) {
	/* Pływający przycisk „Zarezerwuj online" w prawym dolnym rogu.
	   Telefon jest już w sticky menu, więc tu tylko jedno CTA konwersyjne. */
	.mobile-cta-bar {
		display: flex;
		justify-content: flex-end;
		position: fixed;
		right: 0.9rem;
		bottom: calc(0.9rem + env(safe-area-inset-bottom));
		left: auto;
		z-index: 1090; /* pod mega menu/overlay (1100), nad treścią */
	}
	.mobile-cta-bar__book {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 48px;
		padding: 0 1.4rem;
		border-radius: var(--radius-pill);
		font-family: var(--font-head);
		font-weight: 700;
		font-size: 1rem;
		line-height: 1;
		text-decoration: none;
		color: #14110a;
		background: var(--c-accent);
		border: 1px solid var(--c-accent);
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
	}
	.mobile-cta-bar__book:hover,
	.mobile-cta-bar__book:focus { color: #14110a; background: var(--c-accent-600); border-color: var(--c-accent-600); }
}