/* =========================================================================
   Fachowiec od ręki — warstwa wizualna
   Grafit + sygnałowy pomarańcz. Pomarańcz zarezerwowany dla CTA i awarii.
   ========================================================================= */

:root {
	--f-ink:        #0B0E13;
	--f-ink-2:      #12171F;
	--f-ink-3:      #1A212B;
	--f-ink-line:   rgba(255, 255, 255, .10);
	--f-ink-line-2: rgba(255, 255, 255, .18);

	--f-paper:      #FFFFFF;
	--f-paper-2:    #F5F6F8;
	--f-paper-3:    #ECEEF2;
	--f-line:       #DFE3E9;

	--f-fg:         #0B0E13;
	--f-fg-2:       #3D4756;
	--f-fg-3:       #6B7686;
	--f-fg-invert:  #FFFFFF;
	--f-fg-invert-2: rgba(255, 255, 255, .68);

	--f-accent:     #FF6A00;
	--f-accent-600: #E85C00;
	--f-accent-700: #CC5100;
	--f-accent-soft: rgba(255, 106, 0, .10);

	--f-radius:     4px;
	--f-radius-lg:  6px;

	--f-shell:      1220px;
	--f-gutter:     clamp(18px, 4vw, 40px);
	--f-section:    clamp(56px, 8vw, 112px);

	--f-font: "Montserrat", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--f-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- reset lokalny (tylko wewnątrz naszych sekcji) ---------- */

.fach * { box-sizing: border-box; }

.fach {
	font-family: var(--f-font);
	color: var(--f-fg);
	background: var(--f-paper);
	overflow-x: clip;
}

.fach img { max-width: 100%; height: auto; display: block; }

.fach p { margin: 0 0 1em; }
.fach p:last-child { margin-bottom: 0; }

.fach h1, .fach h2, .fach h3, .fach h4 {
	margin: 0;
	font-family: var(--f-font);
	font-weight: 800;
	letter-spacing: -.022em;
	line-height: 1.04;
	color: inherit;
	text-transform: none;
}

.fach ul { margin: 0; padding: 0; list-style: none; }

.fach a { color: inherit; }

/* ---------- układ ---------- */

.f-shell {
	width: 100%;
	max-width: var(--f-shell);
	margin-inline: auto;
	padding-inline: var(--f-gutter);
}

.f-section { padding-block: var(--f-section); }

.f-section--tight { padding-block: clamp(40px, 5vw, 72px); }

.f-dark {
	background: var(--f-ink);
	color: var(--f-fg-invert);
}

.f-muted-bg { background: var(--f-paper-2); }

/* ---------- typografia ---------- */

.f-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--f-accent);
	margin: 0 0 18px;
}

.f-eyebrow::before {
	content: "";
	width: 28px;
	height: 2px;
	background: var(--f-accent);
	flex: none;
}

.f-eyebrow--plain::before { display: none; }

.f-display {
	font-size: clamp(2.4rem, 6.2vw, 4.5rem);
	line-height: .98;
	letter-spacing: -.03em;
}

.f-h2 {
	font-size: clamp(1.9rem, 4vw, 3rem);
	line-height: 1.03;
	letter-spacing: -.026em;
}

.f-h3 {
	font-size: clamp(1.15rem, 1.6vw, 1.35rem);
	line-height: 1.2;
	letter-spacing: -.014em;
	font-weight: 700;
}

.f-lead {
	font-size: clamp(1.02rem, 1.35vw, 1.18rem);
	line-height: 1.6;
	color: var(--f-fg-2);
	max-width: 62ch;
}

.f-dark .f-lead,
.f-hero .f-lead,
.f-alarm .f-lead { color: var(--f-fg-invert-2); }

.f-body { font-size: 1rem; line-height: 1.65; color: var(--f-fg-2); }
.f-dark .f-body { color: var(--f-fg-invert-2); }

.f-section-head { max-width: 66ch; margin-bottom: clamp(32px, 4vw, 56px); }
.f-section-head .f-lead { margin-top: 18px; }

/* ---------- przyciski ---------- */
/* UWAGA: klasa .f-cta-tel jest używana tylko na linkach href="tel:518280630".
   Nie zmieniać wartości href — patrz inc/data.php. */

.f-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 17px 28px;
	min-height: 56px;
	border: 1px solid transparent;
	border-radius: var(--f-radius);
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .01em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s var(--f-ease), border-color .18s var(--f-ease), color .18s var(--f-ease), transform .18s var(--f-ease);
}

.f-btn:hover { transform: translateY(-1px); }
.f-btn:active { transform: translateY(0); }

.f-btn:focus-visible {
	outline: 3px solid var(--f-accent);
	outline-offset: 3px;
}

.f-btn--primary {
	background: var(--f-accent);
	color: #fff;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}
.f-btn--primary:hover { background: var(--f-accent-600); color: #fff; }

.f-btn--ghost {
	background: transparent;
	color: var(--f-fg);
	border-color: var(--f-line);
}
.f-btn--ghost:hover { border-color: var(--f-fg); }

.f-dark .f-btn--ghost {
	color: #fff;
	border-color: var(--f-ink-line-2);
}
.f-dark .f-btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }

.f-btn--lg {
	padding: 20px 34px;
	min-height: 68px;
	font-size: 1.06rem;
}

.f-btn__icon { flex: none; width: 20px; height: 20px; }

.f-btn__stack { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.f-btn__stack small {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: .78;
}
.f-btn__stack strong { font-size: 1.22rem; font-weight: 800; letter-spacing: -.01em; }

.f-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: stretch;
}

.f-btn-row .f-btn { flex: 0 1 auto; }

@media (max-width: 560px) {
	.f-btn-row { flex-direction: column; align-items: stretch; }
	.f-btn-row .f-btn { width: 100%; }
}

/* ---------- HERO ---------- */

.f-hero {
	position: relative;
	background: var(--f-ink);
	color: var(--f-fg-invert);
	overflow: hidden;
	isolation: isolate;
}

/* siatka rysunku technicznego — czysty CSS, zero obrazów */
.f-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, .045) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, .045) 1px, transparent 1px);
	background-size: 72px 72px;
	mask-image: radial-gradient(120% 90% at 78% 12%, #000 0%, transparent 68%);
	-webkit-mask-image: radial-gradient(120% 90% at 78% 12%, #000 0%, transparent 68%);
	z-index: -2;
}

.f-hero::after {
	content: "";
	position: absolute;
	top: -22%;
	right: -12%;
	width: 62vw;
	max-width: 820px;
	aspect-ratio: 1;
	background: radial-gradient(circle at 50% 50%, rgba(255, 106, 0, .22), transparent 62%);
	z-index: -1;
	pointer-events: none;
}

.f-hero__inner {
	padding-block: clamp(56px, 8vw, 108px) clamp(48px, 6vw, 84px);
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

@media (max-width: 980px) {
	.f-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}

.f-hero__status {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 9px 16px 9px 13px;
	border: 1px solid var(--f-ink-line-2);
	border-radius: 100px;
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 26px;
	background: rgba(255, 255, 255, .03);
}

.f-hero__pulse {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--f-accent);
	flex: none;
	box-shadow: 0 0 0 0 rgba(255, 106, 0, .7);
	animation: f-pulse 2.4s infinite;
}

@keyframes f-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(255, 106, 0, .6); }
	70%  { box-shadow: 0 0 0 10px rgba(255, 106, 0, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 106, 0, 0); }
}

.f-hero h1 { margin-bottom: 22px; }
.f-hero h1 em { font-style: normal; color: var(--f-accent); }

.f-hero__lead { margin-bottom: 34px; }

.f-hero__services {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 34px;
}

.f-hero__services li {
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .02em;
	padding: 7px 13px;
	border: 1px solid var(--f-ink-line);
	border-radius: var(--f-radius);
	color: var(--f-fg-invert-2);
}

/* karta telefoniczna po prawej stronie hero */
.f-callcard {
	background: linear-gradient(180deg, var(--f-ink-2), var(--f-ink-3));
	border: 1px solid var(--f-ink-line);
	border-radius: var(--f-radius-lg);
	padding: clamp(26px, 3vw, 38px);
	position: relative;
}

.f-callcard::before {
	content: "";
	position: absolute;
	inset: -1px -1px auto -1px;
	height: 3px;
	background: var(--f-accent);
	border-radius: var(--f-radius-lg) var(--f-radius-lg) 0 0;
}

.f-callcard__label {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--f-fg-invert-2);
	margin-bottom: 14px;
}

.f-callcard__number {
	display: block;
	font-size: clamp(2.1rem, 4.6vw, 2.9rem);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1;
	color: #fff;
	text-decoration: none;
	margin-bottom: 8px;
	font-variant-numeric: tabular-nums;
}

.f-callcard__number:hover { color: var(--f-accent); }

.f-callcard__note {
	font-size: .92rem;
	line-height: 1.55;
	color: var(--f-fg-invert-2);
	margin-bottom: 22px;
}

.f-callcard .f-btn { width: 100%; }

.f-callcard__facts {
	margin-top: 24px;
	padding-top: 22px;
	border-top: 1px solid var(--f-ink-line);
	display: grid;
	gap: 12px;
}

.f-callcard__facts li {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	font-size: .9rem;
	line-height: 1.45;
	color: var(--f-fg-invert-2);
}

.f-callcard__facts svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--f-accent); }

/* wariant hero dla strony awarii */
.f-hero--alarm::after {
	background: radial-gradient(circle at 50% 50%, rgba(255, 106, 0, .3), transparent 60%);
}

.f-hero--alarm .f-alarm__bar { position: relative; z-index: 1; }

.f-hero--alarm .f-alarm__number { display: block; margin: 6px 0 24px; }

.f-callcard__facts--steps { margin-top: 0; padding-top: 0; border-top: 0; margin-bottom: 26px; gap: 16px; }
.f-callcard__facts--steps strong { color: #fff; font-weight: 700; display: block; }

/* ---------- pasek zaufania ---------- */

.f-trust {
	border-top: 1px solid var(--f-ink-line);
	background: rgba(0, 0, 0, .25);
}

.f-trust__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	background: var(--f-ink-line);
	border-inline: 1px solid var(--f-ink-line);
}

@media (max-width: 860px) { .f-trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.f-trust__item {
	background: var(--f-ink);
	padding: 26px clamp(16px, 2.2vw, 28px);
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.f-trust__item svg { flex: none; width: 22px; height: 22px; color: var(--f-accent); }
.f-trust__item strong { display: block; font-size: .96rem; font-weight: 700; color: #fff; margin-bottom: 3px; letter-spacing: -.01em; }
.f-trust__item span { font-size: .84rem; line-height: 1.45; color: var(--f-fg-invert-2); }

/* ---------- kroki ---------- */

.f-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(20px, 2.6vw, 34px);
	counter-reset: f-step;
}

@media (max-width: 900px) { .f-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .f-steps { grid-template-columns: minmax(0, 1fr); } }

.f-step { position: relative; padding-top: 26px; border-top: 2px solid var(--f-line); }
.f-step:first-child { border-top-color: var(--f-accent); }

.f-step__num {
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .18em;
	color: var(--f-accent);
	margin-bottom: 12px;
	font-variant-numeric: tabular-nums;
}

.f-step h3 { margin-bottom: 9px; }
.f-step p { font-size: .95rem; line-height: 1.55; color: var(--f-fg-2); }

/* ---------- karty usług ---------- */

.f-services {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 1.8vw, 22px);
}

@media (max-width: 1000px) { .f-services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .f-services { grid-template-columns: minmax(0, 1fr); } }

.f-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--f-paper);
	border: 1px solid var(--f-line);
	border-radius: var(--f-radius-lg);
	padding: clamp(24px, 2.4vw, 30px);
	transition: border-color .2s var(--f-ease), transform .2s var(--f-ease), box-shadow .2s var(--f-ease);
}

.f-card:hover {
	border-color: var(--f-accent);
	transform: translateY(-3px);
	box-shadow: 0 12px 28px -18px rgba(11, 14, 19, .5);
}

.f-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
}

.f-card__icon {
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border-radius: var(--f-radius);
	background: var(--f-accent-soft);
	color: var(--f-accent-700);
	flex: none;
}

.f-card__icon svg { width: 24px; height: 24px; }

.f-badge {
	font-size: .66rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 6px 10px;
	border-radius: 3px;
	background: var(--f-ink);
	color: #fff;
	white-space: nowrap;
}

.f-card h3 { margin-bottom: 10px; }

.f-card__lead { font-size: .94rem; line-height: 1.55; color: var(--f-fg-2); margin-bottom: 18px; }

.f-card__list { display: grid; gap: 8px; margin-bottom: 22px; }

.f-card__list li {
	position: relative;
	padding-left: 20px;
	font-size: .88rem;
	line-height: 1.5;
	color: var(--f-fg-2);
}

.f-card__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 7px;
	height: 7px;
	border-radius: 1px;
	background: var(--f-accent);
	transform: rotate(45deg);
}

.f-card__foot {
	margin-top: auto;
	padding-top: 18px;
	border-top: 1px solid var(--f-line);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}

.f-card__call {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-weight: 700;
	font-size: .95rem;
	color: var(--f-accent-700);
	text-decoration: none;
	letter-spacing: -.01em;
}

.f-card__call:hover { color: var(--f-accent); text-decoration: underline; text-underline-offset: 3px; }
.f-card__call svg { width: 17px; height: 17px; flex: none; }

.f-card__more {
	font-size: .85rem;
	font-weight: 600;
	color: var(--f-fg-3);
	text-decoration: none;
	border-bottom: 1px solid var(--f-line);
	padding-bottom: 2px;
}

.f-card__more:hover { color: var(--f-fg); border-color: var(--f-fg); }

/* ---------- sekcja awarii ---------- */

.f-alarm {
	position: relative;
	background: var(--f-ink);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

.f-alarm::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(
			135deg,
			rgba(255, 106, 0, .085) 0 26px,
			transparent 26px 52px
		);
	/* paski wygaszone tam, gdzie leży tekst — czytelność przed dekoracją */
	mask-image: linear-gradient(100deg, transparent 0%, transparent 34%, #000 62%, #000 100%);
	-webkit-mask-image: linear-gradient(100deg, transparent 0%, transparent 34%, #000 62%, #000 100%);
	z-index: -1;
}

@media (max-width: 940px) {
	.f-alarm::before {
		mask-image: linear-gradient(180deg, transparent 0%, transparent 40%, #000 78%);
		-webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 40%, #000 78%);
	}
}

.f-alarm__bar {
	height: 6px;
	background: repeating-linear-gradient(135deg, var(--f-accent) 0 18px, var(--f-ink-3) 18px 36px);
}

.f-alarm__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: clamp(30px, 4vw, 64px);
	align-items: center;
	padding-block: clamp(52px, 7vw, 92px);
}

@media (max-width: 940px) { .f-alarm__inner { grid-template-columns: minmax(0, 1fr); } }

.f-alarm h2 { margin-bottom: 18px; }
.f-alarm h2 em { font-style: normal; color: var(--f-accent); }

.f-alarm__number {
	display: inline-block;
	font-size: clamp(2.6rem, 7vw, 4.2rem);
	font-weight: 800;
	letter-spacing: -.035em;
	line-height: 1;
	color: #fff;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	margin-bottom: 20px;
}

.f-alarm__number:hover { color: var(--f-accent); }

.f-alarm__side {
	border: 1px solid var(--f-ink-line-2);
	border-radius: var(--f-radius-lg);
	padding: clamp(22px, 2.6vw, 30px);
	background: rgba(11, 14, 19, .55);
	backdrop-filter: blur(2px);
}

.f-alarm__side ul { display: grid; gap: 14px; }

.f-alarm__side li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: .95rem;
	line-height: 1.5;
	color: var(--f-fg-invert-2);
}

.f-alarm__side svg { flex: none; width: 19px; height: 19px; color: var(--f-accent); margin-top: 1px; }

/* ---------- powody ---------- */

.f-reasons {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--f-line);
	border: 1px solid var(--f-line);
	border-radius: var(--f-radius-lg);
	overflow: hidden;
}

@media (max-width: 940px) { .f-reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .f-reasons { grid-template-columns: minmax(0, 1fr); } }

.f-reason {
	background: var(--f-paper);
	padding: clamp(26px, 2.6vw, 34px);
	transition: background-color .2s var(--f-ease);
}

.f-reason:hover { background: var(--f-paper-2); }

.f-reason__icon { color: var(--f-accent); margin-bottom: 18px; }
.f-reason__icon svg { width: 26px; height: 26px; }

.f-reason h3 { margin-bottom: 10px; }
.f-reason p { font-size: .93rem; line-height: 1.6; color: var(--f-fg-2); }

/* ---------- obszar działania ---------- */

.f-area__inner {
	display: grid;
	grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
	gap: clamp(30px, 4vw, 64px);
	align-items: start;
}

@media (max-width: 900px) { .f-area__inner { grid-template-columns: minmax(0, 1fr); } }

.f-cities {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
	gap: 1px;
	background: var(--f-ink-line);
	border: 1px solid var(--f-ink-line);
	border-radius: var(--f-radius-lg);
	overflow: hidden;
}

.f-cities li {
	background: var(--f-ink);
	padding: 15px 18px;
	font-size: .92rem;
	font-weight: 600;
	letter-spacing: -.005em;
	color: var(--f-fg-invert-2);
	display: flex;
	align-items: center;
	gap: 9px;
	transition: color .18s var(--f-ease), background-color .18s var(--f-ease);
}

.f-cities li::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--f-accent);
	flex: none;
	opacity: .6;
}

.f-cities li:hover { color: #fff; background: var(--f-ink-2); }
.f-cities li:hover::before { opacity: 1; }

.fach .f-area__extra {
	margin: 22px 0 0;
	font-size: .92rem;
	line-height: 1.6;
	color: var(--f-fg-invert-2);
}

.f-area__extra strong { color: #fff; font-weight: 700; }

/* kafelek zamykający listę miast */
.f-cities li.f-cities__more {
	color: var(--f-accent);
	font-weight: 700;
}

.f-cities li.f-cities__more::before { opacity: 1; }

/* ---------- kontakt ---------- */

.f-contact__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(18px, 2.4vw, 28px);
}

@media (max-width: 820px) { .f-contact__grid { grid-template-columns: minmax(0, 1fr); } }

.f-contact__card {
	border: 1px solid var(--f-line);
	border-radius: var(--f-radius-lg);
	padding: clamp(28px, 3vw, 40px);
	background: var(--f-paper);
	display: flex;
	flex-direction: column;
}

.f-contact__card--accent {
	background: var(--f-ink);
	border-color: var(--f-ink);
	color: #fff;
}

.f-contact__label {
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--f-fg-3);
	margin-bottom: 16px;
}

.f-contact__card--accent .f-contact__label { color: var(--f-accent); }

.f-contact__big {
	font-size: clamp(2rem, 4.4vw, 2.85rem);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1;
	text-decoration: none;
	color: inherit;
	font-variant-numeric: tabular-nums;
	display: inline-block;
	margin-bottom: 14px;
	overflow-wrap: anywhere;
}

.f-contact__big:hover { color: var(--f-accent); }

.f-contact__meta { font-size: .92rem; line-height: 1.6; color: var(--f-fg-2); margin-bottom: 24px; }
.f-contact__card--accent .f-contact__meta { color: var(--f-fg-invert-2); }

.f-contact__card .f-btn { margin-top: auto; }

.f-contact__rows { display: grid; gap: 16px; margin-bottom: 24px; }

.f-contact__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--f-line);
	font-size: .95rem;
}

.f-contact__row span { color: var(--f-fg-3); font-weight: 600; font-size: .84rem; letter-spacing: .04em; text-transform: uppercase; }
.f-contact__row a { font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.f-contact__row a:hover { color: var(--f-accent); }

/* ---------- układ dwukolumnowy ---------- */

.f-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(30px, 4vw, 64px);
	align-items: start;
}

@media (max-width: 900px) { .f-split { grid-template-columns: minmax(0, 1fr); } }

.f-prose { font-size: 1.02rem; line-height: 1.72; color: var(--f-fg-2); max-width: 60ch; }
.f-prose p + p { margin-top: 1.1em; }

.f-panel {
	background: var(--f-ink);
	color: #fff;
	border-radius: var(--f-radius-lg);
	padding: clamp(26px, 3vw, 38px);
	position: relative;
}

.f-panel::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--f-accent);
	border-radius: var(--f-radius-lg) var(--f-radius-lg) 0 0;
}

.f-panel__label {
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--f-accent);
	margin-bottom: 20px;
}

.f-panel__list { display: grid; gap: 14px; margin-bottom: 26px; }

.f-panel__list li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: .95rem;
	line-height: 1.55;
	color: var(--f-fg-invert-2);
}

.f-panel__list svg { flex: none; width: 18px; height: 18px; color: var(--f-accent); margin-top: 2px; }

/* ---------- lista usług (strona Usługi) ---------- */

.f-servicelist { display: grid; gap: clamp(16px, 1.8vw, 22px); }

.f-servicerow {
	border: 1px solid var(--f-line);
	border-radius: var(--f-radius-lg);
	padding: clamp(24px, 2.6vw, 34px);
	background: var(--f-paper);
	transition: border-color .2s var(--f-ease);
}

.f-servicerow:hover { border-color: var(--f-accent); }

.f-servicerow__head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 18px;
	align-items: start;
	margin-bottom: 22px;
}

@media (max-width: 620px) {
	.f-servicerow__head { grid-template-columns: auto minmax(0, 1fr); }
	.f-servicerow__head .f-badge { grid-column: 1 / -1; justify-self: start; }
}

.f-servicerow__lead { margin-top: 8px; font-size: .96rem; line-height: 1.55; color: var(--f-fg-2); }

.f-servicerow__list {
	columns: 2;
	column-gap: 34px;
	margin-bottom: 24px;
	display: block;
}

.f-servicerow__list li { break-inside: avoid; margin-bottom: 9px; }

@media (max-width: 720px) { .f-servicerow__list { columns: 1; } }

.f-servicerow__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding-top: 20px;
	border-top: 1px solid var(--f-line);
}

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

.f-faq {
	border-top: 1px solid var(--f-line);
	max-width: 900px;
}

.f-faq__item { border-bottom: 1px solid var(--f-line); }

.f-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 24px 0;
	cursor: pointer;
	list-style: none;
	transition: color .18s var(--f-ease);
}

.f-faq__q::-webkit-details-marker { display: none; }
.f-faq__q:hover h3 { color: var(--f-accent-700); }
.f-faq__q h3 { transition: color .18s var(--f-ease); }

.f-faq__q:focus-visible { outline: 3px solid var(--f-accent); outline-offset: 3px; }

.f-faq__mark {
	position: relative;
	flex: none;
	width: 22px;
	height: 22px;
}

.f-faq__mark::before,
.f-faq__mark::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	background: var(--f-accent);
	transition: opacity .18s var(--f-ease), rotate .25s var(--f-ease);
}

.f-faq__mark::before { width: 16px; height: 2px; }
.f-faq__mark::after  { width: 2px; height: 16px; }

.f-faq__item[open] .f-faq__mark::after { opacity: 0; rotate: 90deg; }

.f-faq__a {
	padding: 0 56px 26px 0;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--f-fg-2);
	max-width: 74ch;
}

@media (max-width: 620px) { .f-faq__a { padding-right: 0; } }

.f-faq__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: clamp(32px, 4vw, 48px);
	padding: clamp(24px, 3vw, 34px);
	background: var(--f-paper-2);
	border: 1px solid var(--f-line);
	border-radius: var(--f-radius-lg);
	max-width: 900px;
}

/* kotwice pod paskiem nagłówka */
#awaria, #obszar, #uslugi, #kontakt, #zakres, #pytania, #lista-uslug { scroll-margin-top: 16px; }

/* ---------- formularz Contact Form 7 ---------- */
/* Sam formularz, jego pola i konfiguracja pozostają nietknięte —
   zmieniamy wyłącznie wygląd. */

.f-form { margin-top: 4px; }

.f-form .cform-box {
	display: grid;
	/* minmax(0, 1fr), nie 1fr — inaczej kolumna rośnie do min-content pól
	   i cały formularz rozpycha kartę poza krawędź ekranu. */
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
}

/* Pola Contact Form 7 mają domyślne size="40", czyli około 300 px sztywnej
   szerokości, a widget Turnstile własną szerokość bazową. Na wąskich
   ekranach obie wartości rozpychały kartę poza krawędź telefonu. */
.f-form input,
.f-form textarea,
.f-form select,
.f-form .wpcf7-form-control,
.f-form .wpcf7-form-control-wrap,
.f-form .cf-turnstile,
.f-form .cf-turnstile > * {
	max-width: 100% !important;
	box-sizing: border-box;
}

.f-form input[type="text"],
.f-form input[type="tel"],
.f-form input[type="email"],
.f-form textarea { width: 100% !important; }

.f-form .cf-turnstile { overflow: hidden; }
.f-form p { margin: 0; }

/* Contact Form 7 owija każde pole w <span>, czyli element liniowy.
   Dopóki span pozostaje liniowy, width:100% na polu nie ma się do czego
   odnieść i pole zostaje przy domyślnych 300 px z atrybutu size="40". */
.f-form .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

.f-form input[type="text"],
.f-form input[type="tel"],
.f-form input[type="email"],
.f-form textarea {
	width: 100%;
	font: inherit;
	font-size: 1rem;
	padding: 15px 16px;
	color: #fff;
	background: rgba(255, 255, 255, .05);
	border: 1px solid var(--f-ink-line-2);
	border-radius: var(--f-radius);
	transition: border-color .18s var(--f-ease), background-color .18s var(--f-ease);
}

.f-form textarea { min-height: 118px; resize: vertical; }

.f-form input::placeholder,
.f-form textarea::placeholder { color: rgba(255, 255, 255, .5); }

.f-form input:focus,
.f-form textarea:focus {
	outline: none;
	border-color: var(--f-accent);
	background: rgba(255, 255, 255, .08);
}

.f-form input[type="submit"] {
	width: 100%;
	font: inherit;
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: .01em;
	padding: 18px 26px;
	color: #fff;
	background: var(--f-accent);
	border: 0;
	border-radius: var(--f-radius);
	cursor: pointer;
	transition: background-color .18s var(--f-ease);
}

.f-form input[type="submit"]:hover { background: var(--f-accent-600); }

.f-form .wpcf7-not-valid-tip { color: #FFB4A2; font-size: .85rem; margin-top: 5px; }

.f-form .wpcf7-response-output {
	margin: 14px 0 0 !important;
	padding: 13px 15px !important;
	border-radius: var(--f-radius);
	border-width: 1px !important;
	font-size: .9rem;
	color: #fff;
}

.f-form .wpcf7-spinner { filter: invert(1); }

/* formularz na jasnej karcie kontaktu */
.f-contact__card:not(.f-contact__card--accent) .f-form input[type="text"],
.f-contact__card:not(.f-contact__card--accent) .f-form input[type="tel"],
.f-contact__card:not(.f-contact__card--accent) .f-form input[type="email"],
.f-contact__card:not(.f-contact__card--accent) .f-form textarea {
	color: var(--f-fg);
	background: var(--f-paper-2);
	border-color: var(--f-line);
}

.f-contact__card:not(.f-contact__card--accent) .f-form input::placeholder,
.f-contact__card:not(.f-contact__card--accent) .f-form textarea::placeholder { color: var(--f-fg-3); }

.f-contact__rows--invert .f-contact__row { border-bottom-color: var(--f-ink-line); }
.f-contact__rows--invert .f-contact__row span { color: var(--f-fg-invert-2); }
.f-contact__rows--invert .f-contact__row a { color: #fff; }

/* ---------- pasek mobilny CTA ---------- */

.f-mobilebar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9990;
	display: none;
	/* lewy margines robi miejsce dla przycisku ustawień cookies,
	   który jest zakotwiczony w lewym dolnym rogu ekranu */
	padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) 60px;
	background: rgba(11, 14, 19, .96);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--f-ink-line-2);
}

.f-mobilebar__grid { display: grid; grid-template-columns: 1fr auto; gap: 10px; }

.f-mobilebar .f-btn { min-height: 54px; padding: 12px 18px; }

.f-mobilebar__secondary {
	display: grid;
	place-items: center;
	width: 54px;
	min-height: 54px;
	border: 1px solid var(--f-ink-line-2);
	border-radius: var(--f-radius);
	color: #fff;
	text-decoration: none;
}

.f-mobilebar__secondary:hover { border-color: #fff; color: #fff; }
.f-mobilebar__secondary svg { width: 21px; height: 21px; }

@media (max-width: 900px) {
	.f-mobilebar { display: block; }
	body.fach-has-mobilebar { padding-bottom: 82px; }
}

/* Pływający zielony przycisk wtyczki wp-call-button dubluje pasek CTA
   i zasłania go na mobile. Ukrywamy go wyłącznie na naszych szablonach —
   wtyczka pozostaje aktywna, jej link nie jest usuwany z witryny. */
body.fach-has-mobilebar > a.wp-call-button { display: none !important; }

/* ---------- animacje wejścia ---------- */

.f-reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .55s var(--f-ease), transform .55s var(--f-ease);
	will-change: opacity, transform;
}

.f-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.f-reveal { opacity: 1; transform: none; transition: none; }
	.f-hero__pulse { animation: none; }
	.f-btn:hover, .f-card:hover { transform: none; }
}

/* =========================================================================
   Nagłówek i stopka Astry — tylko zmiany wizualne.
   Struktura HTML i wszystkie linki (w tym tel:) pozostają nietknięte.
   ========================================================================= */

/* pasek awaryjny nad nagłówkiem (widgety Astry) */
.fach-skin .ast-above-header-wrap,
.fach-skin .ast-below-header-wrap {
	background: var(--f-accent) !important;
}

.fach-skin .ast-below-header-bar,
.fach-skin .ast-above-header-bar {
	background: transparent !important;
	border: 0 !important;
	min-height: 0 !important;
	padding-block: 0 !important;
}

/* Pasek jest jedną linią: hasło po lewej, jeden przycisk po prawej.
   Widget block-12 to duplikat block-13 (ten sam link) — ukrywamy wizualnie
   drugą kopię, nie usuwając jej z witryny. */
.fach-skin .ast-below-header-wrap .site-header-below-section-left,
.fach-skin .ast-above-header-wrap .site-header-above-section-left {
	width: 100%;
}

.fach-skin .ast-below-header-wrap .header-widget-area-inner,
.fach-skin .ast-above-header-wrap .header-widget-area-inner {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	padding-block: 9px;
	flex-wrap: nowrap;
}

.fach-skin .ast-below-header-wrap .header-widget-area-inner > .widget,
.fach-skin .ast-above-header-wrap .header-widget-area-inner > .widget {
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0;
}

.fach-skin .ast-below-header-wrap .header-widget-area-inner > .widget:first-child,
.fach-skin .ast-above-header-wrap .header-widget-area-inner > .widget:first-child {
	flex: 1 1 auto;
	min-width: 0;
}

.fach-skin .ast-below-header-wrap #block-12,
.fach-skin .ast-above-header-wrap #block-12 { display: none !important; }

/* Filtr zamienia w tym widgecie <h2> na <p>, więc selektor musi łapać oba
   warianty — inaczej hasło zostaje w domyślnym, ciemnym kolorze Astry
   i na pomarańczowym tle jest praktycznie nieczytelne. */
.fach-skin .ast-below-header-wrap .widget_block h2,
.fach-skin .ast-above-header-wrap .widget_block h2,
.fach-skin .ast-below-header-wrap .widget_block p.wp-block-heading,
.fach-skin .ast-above-header-wrap .widget_block p.wp-block-heading,
.fach-skin .ast-below-header-wrap .widget_block .wp-block-heading,
.fach-skin .ast-above-header-wrap .widget_block .wp-block-heading {
	font-family: var(--f-font);
	font-size: .74rem !important;
	font-weight: 800 !important;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #fff !important;
	margin: 0 !important;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Na wąskich ekranach hasło zabierało całą szerokość i wypychało przycisk
   poza ekran. Pokazujemy sam przycisk — te same informacje powtarza hero
   bezpośrednio pod paskiem. */
@media (max-width: 780px) {
	.fach-skin .ast-below-header-wrap #block-10,
	.fach-skin .ast-above-header-wrap #block-10 { display: none !important; }

	.fach-skin .ast-below-header-wrap .header-widget-area-inner,
	.fach-skin .ast-above-header-wrap .header-widget-area-inner {
		justify-content: center;
		padding-block: 8px;
	}
}

.fach-skin .ast-below-header-wrap,
.fach-skin .ast-above-header-wrap { overflow-x: clip; }

.fach-skin .ast-below-header-wrap .wp-call-button-block-button,
.fach-skin .ast-above-header-wrap .wp-call-button-block-button { margin: 0 !important; }

.fach-skin .ast-below-header-wrap .wp-call-button-in-btn,
.fach-skin .ast-above-header-wrap .wp-call-button-in-btn {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	background: var(--f-ink) !important;
	color: #fff !important;
	font-family: var(--f-font);
	font-size: .76rem !important;
	font-weight: 800 !important;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 9px 16px !important;
	border-radius: var(--f-radius) !important;
	text-decoration: none !important;
	border: 0 !important;
	white-space: nowrap;
}

.fach-skin .ast-below-header-wrap .wp-call-button-in-btn:hover,
.fach-skin .ast-above-header-wrap .wp-call-button-in-btn:hover { background: #000 !important; }

.fach-skin .ast-below-header-wrap .wp-call-button-in-btn svg,
.fach-skin .ast-above-header-wrap .wp-call-button-in-btn svg {
	width: 14px !important;
	height: 14px !important;
	fill: currentColor;
}

/* główny pasek nagłówka */
.fach-skin .ast-primary-header-bar,
.fach-skin .main-header-bar {
	background: var(--f-ink) !important;
	border-bottom: 1px solid var(--f-ink-line) !important;
}

/* Logo jest przezroczystym PNG-iem, więc siada wprost na ciemnym tle —
   bez białej plakietki. Granatowy dach dostaje delikatny prześwit,
   żeby nie zlewał się z grafitem nagłówka. */
.fach-skin .site-header .custom-logo-link {
	display: inline-block;
	line-height: 0;
}

.fach-skin .site-header .custom-logo-link img {
	max-height: 42px;
	width: auto;
	filter: drop-shadow(0 0 1px rgba(255, 255, 255, .35));
}

.fach-skin .ast-primary-header-bar .site-primary-header-wrap { padding-block: 12px; }

.fach-skin .main-header-menu > .menu-item > .menu-link,
.fach-skin .main-header-menu .menu-link {
	color: rgba(255, 255, 255, .82) !important;
	font-family: var(--f-font);
	font-weight: 600 !important;
	font-size: .93rem !important;
	letter-spacing: -.005em;
}

.fach-skin .main-header-menu > .menu-item > .menu-link:hover,
.fach-skin .main-header-menu > .current-menu-item > .menu-link {
	color: #fff !important;
}

.fach-skin .main-header-menu > .current-menu-item > .menu-link { position: relative; }

.fach-skin .main-header-menu > .current-menu-item > .menu-link::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 8px;
	height: 2px;
	background: var(--f-accent);
}

/* przycisk telefonu w nagłówku — istniejący element Astry, tylko styl */
.fach-skin .ast-header-button-1 .ast-custom-button-link .ast-custom-button,
.fach-skin .ast-header-button-1 .ast-custom-button-link {
	background: var(--f-accent) !important;
	color: #fff !important;
	font-family: var(--f-font);
	font-weight: 800 !important;
	font-size: .95rem !important;
	letter-spacing: -.01em;
	border-radius: var(--f-radius) !important;
	border: 0 !important;
	padding: 0 !important;
}

.fach-skin .ast-header-button-1 .ast-custom-button-link {
	display: inline-flex !important;
	padding: 13px 22px !important;
	text-decoration: none !important;
	transition: background-color .18s var(--f-ease);
}

.fach-skin .ast-header-button-1 .ast-custom-button-link:hover { background: var(--f-accent-600) !important; }
.fach-skin .ast-header-button-1 .ast-custom-button-link .ast-custom-button { background: transparent !important; }

/* mobilny nagłówek */
.fach-skin .ast-mobile-header-wrap .main-header-bar,
.fach-skin #ast-mobile-header .ast-primary-header-bar { background: var(--f-ink) !important; }

.fach-skin .ast-mobile-menu-trigger-minimal,
.fach-skin .ast-mobile-menu-trigger-fill { color: #fff !important; background: transparent !important; }

.fach-skin .ast-mobile-header-wrap .menu-toggle svg { fill: #fff; }

.fach-skin .ast-mobile-popup-drawer .ast-mobile-popup-inner,
.fach-skin .main-header-menu.ast-nav-menu.stack-on-mobile { background: var(--f-ink) !important; }

.fach-skin .ast-mobile-popup-drawer .menu-link { color: rgba(255, 255, 255, .88) !important; }

/* stopka */
.fach-skin .site-footer,
.fach-skin .site-below-footer-wrap,
.fach-skin .site-primary-footer-wrap {
	background: var(--f-ink) !important;
	color: var(--f-fg-invert-2) !important;
	border-top: 1px solid var(--f-ink-line);
}

.fach-skin .site-footer a { color: #fff; }
.fach-skin .site-footer a:hover { color: var(--f-accent); }

/* Astra ustawia w stopce ciemnoszary kolor linków menu — na ciemnym tle
   był praktycznie niewidoczny. */
.fach-skin .site-footer .menu-link,
.fach-skin .site-footer .ast-builder-menu-2 .menu-link,
.fach-skin .site-below-footer-wrap .menu-link,
.fach-skin .site-primary-footer-wrap .menu-link {
	color: rgba(255, 255, 255, .82) !important;
	font-weight: 600;
}

.fach-skin .site-footer .menu-link:hover,
.fach-skin .site-below-footer-wrap .menu-link:hover,
.fach-skin .site-primary-footer-wrap .menu-link:hover { color: var(--f-accent) !important; }

.fach-skin .site-footer .ast-footer-copyright,
.fach-skin .site-footer .ast-footer-copyright p { color: rgba(255, 255, 255, .55) !important; font-size: .86rem; }

.fach-skin .fach-credit {
	display: inline-block;
	margin-top: 6px;
	font-size: .8rem;
	letter-spacing: .01em;
	color: rgba(255, 255, 255, .45);
}

.fach-skin .fach-credit a {
	color: rgba(255, 255, 255, .72);
	text-decoration: none;
	border-bottom: 1px solid var(--f-ink-line-2);
	padding-bottom: 1px;
}

.fach-skin .fach-credit a:hover { color: var(--f-accent); border-color: var(--f-accent); }

/* Nawigacja niesie pięć pozycji usługowych plus CTA telefoniczne.
   Nic nie może się złamać do drugiej linii — nagłówek ma zostać jednym paskiem,
   więc odstępy i typografia schodzą progresywnie wraz z szerokością. */
.fach-skin .main-header-menu > .menu-item > .menu-link { white-space: nowrap; }

.fach-skin .ast-header-button-1 .ast-custom-button-link,
.fach-skin .ast-header-button-1 .ast-custom-button { white-space: nowrap; }

.fach-skin .ast-primary-header-bar .ast-builder-grid-row { align-items: center; }

@media (min-width: 922px) {
	.fach-skin .site-header-primary-section-right { flex-wrap: nowrap; }
	.fach-skin .main-header-menu { flex-wrap: nowrap; }
}

@media (min-width: 922px) and (max-width: 1150px) {
	.fach-skin .main-header-menu > .menu-item > .menu-link {
		font-size: .78rem !important;
		padding-inline: 7px !important;
		letter-spacing: -.012em;
	}
	.fach-skin .ast-header-button-1 .ast-custom-button-link {
		padding: 11px 13px !important;
		font-size: .78rem !important;
	}
	.fach-skin .site-header .custom-logo-link img { max-height: 30px; }
	.fach-skin .ast-primary-header-bar .site-primary-header-wrap { padding-block: 9px; }
}

@media (min-width: 1151px) and (max-width: 1340px) {
	.fach-skin .main-header-menu > .menu-item > .menu-link {
		font-size: .85rem !important;
		padding-inline: 10px !important;
	}
	.fach-skin .ast-header-button-1 .ast-custom-button-link { padding: 12px 17px !important; font-size: .86rem !important; }
	.fach-skin .site-header .custom-logo-link img { max-height: 36px; }
}

@media (min-width: 1341px) {
	.fach-skin .main-header-menu > .menu-item > .menu-link { padding-inline: 14px !important; }
}

.fach-skin .site-footer .footer-widget-area .widget-title,
.fach-skin .site-footer .wp-block-heading {
	color: #fff !important;
	font-size: .78rem !important;
	font-weight: 800 !important;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.fach-skin .site-footer .ast-builder-social-element {
	color: rgba(255, 255, 255, .78) !important;
	border: 1px solid var(--f-ink-line);
	border-radius: var(--f-radius);
}

.fach-skin .site-footer .ast-builder-social-element:hover {
	color: #fff !important;
	border-color: var(--f-accent);
}

.fach-skin .site-footer .site-logo-img img,
.fach-skin .site-footer img[src*="logo-fachowiec"] {
	filter: drop-shadow(0 0 1px rgba(255, 255, 255, .35));
}

.fach-skin .site-footer h2,
.fach-skin .site-footer h3,
.fach-skin .site-footer .widget-title {
	font-family: var(--f-font);
	color: #fff !important;
	font-weight: 800;
	letter-spacing: -.015em;
}

/* Astra content wrapper — nasze szablony rysują pełną szerokość */
.fach-fullwidth .site-content .ast-container {
	max-width: none;
	padding: 0;
	display: block;
}

.fach-fullwidth #primary { margin: 0; padding: 0; width: 100%; }
.fach-fullwidth .entry-content { margin: 0; }
.fach-fullwidth .ast-no-sidebar .entry-content .alignwide { margin: 0; }
.fach-fullwidth .site-content > .ast-container > #primary > .ast-article-single { padding: 0; border: 0; }