/* =========================================================================
   Petlic Landing (INVICTA) — style landingu
   Desktop-only (1:1 z Figmy, node 139:1450). Mobile: osobny etap.
   Fonty self-hosted (RODO + wydajność). Tokeny z designu.
   ========================================================================= */

/* --- Fonty self-hosted (latin + latin-ext dla PL) ------------------------ */
@font-face {
	font-family: "Marcellus";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/marcellus-400.woff2") format("woff2");
}
@font-face {
	font-family: "Work Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/work-sans-400.woff2") format("woff2");
}
@font-face {
	font-family: "Work Sans";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/work-sans-500.woff2") format("woff2");
}

/* --- Design tokens ------------------------------------------------------- */
:root {
	/* Kolory */
	--pl-granat-900: #111d28; /* tło ciemne */
	--pl-granat-800: #152232; /* tło / tekst ciemny */
	--pl-zloto: #ffc789;      /* akcent Invicta */
	--pl-gradient-zloto: linear-gradient(270deg, #ffc48e 0%, #ffc888 12%, #ffd079 24%, #ffd079 44%, #ffce7c 65%, #ffc789 86%, #ffc48e 100%);
	--pl-bialy: #ffffff;
	--pl-tekst-jasny: #f7f7f7;
	--pl-tekst-jasnoszary: #d0d0d0;
	--pl-szary-ui: #9aa3ad;   /* szary na ciemnym */
	--pl-szary: #5b6672;      /* szary na jasnym */

	/* Obrysy */
	--pl-obrys-zloty: #ffc789;
	--pl-obrys-neutral20: #d0d0d0;
	--pl-obrys-ciemny20: #555c65;
	--pl-obrys-jasny15: #f7f7f7;

	/* Typografia */
	--pl-font-heading: "Marcellus", Georgia, "Times New Roman", serif;
	--pl-font-body: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/* Layout */
	--pl-page-w: 1728px;    /* pełna szerokość designu */
	--pl-content-w: 1608px; /* content (margines boczny 60px) */
	--pl-gutter: 60px;
}

/* --- Reset lokalny (scope: .pl) ------------------------------------------ */
/* Landing jest samodzielny — zeruj margines body na wypadek motywu,
   który go nie resetuje (ładowane tylko na stronie landingu). */
body.petlic-landing-page {
	margin: 0;
}
.pl *,
.pl *::before,
.pl *::after {
	box-sizing: border-box;
}
.pl {
	font-family: var(--pl-font-body);
	font-size: 16px;
	line-height: 1.65;
	color: var(--pl-granat-800);
	background: var(--pl-bialy);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
.pl h1,
.pl h2,
.pl h3,
.pl h4,
.pl p,
.pl blockquote,
.pl figure,
.pl ul,
.pl ol {
	margin: 0;
	padding: 0;
}
.pl ul,
.pl ol {
	list-style: none;
}
.pl a {
	text-decoration: none;
}
/* Linki bez klasy dziedziczą kolor kontenera; linki z klasą (przyciski,
   telefon/mail) używają własnego koloru bez konkurencji specyficzności. */
.pl a:not([class]) {
	color: inherit;
}
.pl img,
.pl svg {
	display: block;
	max-width: 100%;
}
.pl button {
	font: inherit;
	cursor: pointer;
	border: 0;
	background: none;
}

/* --- Wspólne prymitywy --------------------------------------------------- */
/* Tła sekcji są pełnej szerokości; ograniczony (przez max-width, nie padding)
   i wyśrodkowany jest tylko content wewnątrz każdej sekcji. */
.pl__container {
	max-width: var(--pl-content-w); /* 1608px */
	margin-inline: auto;
}

/* Eyebrow (etykieta nad nagłówkiem) */
.pl-eyebrow {
	display: inline-flex;
	align-items: center;
	font-family: var(--pl-font-body);
	font-weight: 500;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 2px;
	text-transform: uppercase;
}

/* Nagłówki */
.pl h1,
.pl h2,
.pl h3 {
	font-family: var(--pl-font-heading);
	font-weight: 400;
}

/* Przyciski */
.pl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	padding-inline: 30px;
	border-radius: 5px;
	font-family: var(--pl-font-body);
	font-weight: 500;
	font-size: 16px;
	letter-spacing: 0.96px;
	white-space: nowrap;
	transition: filter 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.pl-btn--gold {
	background: var(--pl-gradient-zloto);
	color: var(--pl-granat-900);
	text-transform: uppercase;
}
.pl-btn--gold:hover {
	filter: brightness(1.04);
}
.pl-btn--ghost {
	border: 1px solid #ffff;
	color: #ffff;
	background: transparent;
	text-transform: uppercase;
}
.pl-btn--ghost:hover {
	background: rgba(255, 199, 137, 0.1);
}

/* Sekcje wypełniane w fazie 2/3 dopisują własne reguły poniżej. */

/* Eyebrow — warianty */
.pl-eyebrow {
	padding: 7px 14px;
	border: 1px solid currentColor;
	border-radius: 2px;
}
.pl-eyebrow--gold {
	color: var(--pl-zloto);
}
.pl-eyebrow--dark {
	color: #111D28;
	border-color: rgba(17, 29, 40, 0.40);
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	letter-spacing: 2px;
	text-transform: uppercase;
}

/* Wariant przycisku — ciemny (na jasnym/złotym tle) */
.pl-btn--dark {
	background: var(--pl-granat-900);
	color: var(--pl-bialy);
}
.pl-btn--dark:hover {
	background: var(--pl-granat-800);
}

/* Ciemny blok górny (topbar + hero + statystyki) na wspólnym tle —
   odstępy między tymi sekcjami nie odsłaniają jasnego tła .pl */
.pl-top {
	background: var(--pl-granat-800);
}

/* =========================== TOPBAR ====================================== */
.pl-topbar {
	background: var(--pl-granat-800);
}
.pl-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 106px;
}
.pl-topbar__logo {
	display: block;
	width: 264px;
}
.pl-topbar__logo svg {
	width: 100%;
	height: auto;
}
.pl-topbar__contact {
	display: flex;
	align-items: center;
	gap: 16px;
	color: var(--pl-tekst-jasnoszary);
	font-size: 16px;
}
.pl-topbar__contact a:hover {
	color: var(--pl-zloto);
}
.pl-topbar__sep {
	width: 1px;
	height: 26px;
	background: var(--pl-obrys-ciemny20);
}

/* ============================ HERO ======================================= */
.pl-hero {
	background: var(--pl-granat-800);
	padding-inline: 16px;
}
.pl-hero__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 99px;
	padding-block: 70px;
}
.pl-hero__left {
	
	max-width: 940px;
	width: 52%;
}
.pl-eyebrow--gold,
.pl-hero__left .pl-eyebrow {
	align-self: flex-start;
}
.pl-hero__title {
	margin-top: 22px !important;
	color: var(--pl-bialy);
	font-size: 48px;
	line-height: 1.12;
	max-width: 823px;
	text-transform: Uppercase;
}
.pl-hero__title span {

	color: var(--pl-zloto);

}
/* "Katowicach" nie jest złote (kontruje generyczny span powyżej) — podkreślenie dopiero na mobile */
.pl-hero__title .pl-hero__city {
	color: inherit;
}
.pl-hero__lead {
	margin-top: 24px !important;
	max-width: 470px;
	color: #9AA3AD;
	font-size: 16px;
	line-height: 1.65;
}
.pl-hero__cta {
	display: flex;
	gap: 14px;
	margin-top: 40px;
}
.pl-hero__image {
	
	width: 48%;
	border-radius: 20px;
	overflow: hidden;
}
.pl-hero__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* =========================== STATYSTYKI ================================== */
.pl-stats {
	background: var(--pl-granat-800);
	padding-bottom: 30px;
}
.pl-stats__inner {
	display: flex;
	align-items: stretch;
}
.pl-stat {
	flex: 1;
	padding: 22px 28px;
}
.pl-stat__num {
	display: block;
	font-family: var(--pl-font-heading);
	font-size: 36px;
	line-height: 1;
	color: var(--pl-zloto);
}
.pl-stat__label {
	display: block;
	margin-top: 12px;
	font-size: 18px;
	color: var(--pl-szary-ui);
}
.pl-stats__divider {
	width: 1px;
	background: rgba(208, 208, 208, 0.10);
}

/* ============================ USŁUGI ===================================== */
.pl-services {
	background: var(--pl-bialy);
	padding-block: 70px;
}
.pl-services__head {
	max-width: 760px;
}
.pl-nowrap {
	white-space: nowrap;
}
.pl-services__title {
	margin-top: 41px !important;
	font-size: 38px;
	line-height: 1.14;
	color: var(--pl-granat-800);
	text-transform: Uppercase;
}
.pl-services__intro {
	margin-top: 22px !important;
	font-size: 16px;
	line-height: 1.65;
	color: #5B6672;
}
.pl-services__sublabel {
	display: inline-block;
	margin-top: 58px;
	margin-bottom: 30px;
	border: none
}
.pl-services__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}
.pl-card {
	display: block;
	border: 1px solid rgba(208, 208, 208, 0.2);
	background: var(--pl-bialy);
	box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.06);
	padding: 21px 30px 30px;
	color: inherit;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.pl-card:hover {
	border-color: var(--pl-zloto);
	box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.12);
}
.pl-card__num {
	display: block;
	font-weight: 500;
	font-size: 15px;
	letter-spacing: 1.5px;
	color: var(--pl-szary-ui);
}
.pl-card__title {
	margin-top: 13px !important;
	font-size: 32px;
	line-height: 1.2;
	color: var(--pl-granat-800);
	text-transform: none;
}
.pl-card__desc {
	margin-top: 13px !important;
	font-size: 16px;
	line-height: 1.58;
	color: var(--pl-szary);
}
.pl-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.pl-chip {
	padding: 10px 12px;
	box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.06);
	border: 1px solid var(--obrys-neutralny-20, rgba(208, 208, 208, 0.20));
	font-family: var(--pl-font-heading);
	font-size: 20px;
	line-height: 1.2;
	color: var(--pl-granat-800);
	transition: border-color 0.2s ease;
}
.pl-chip:hover {
	border-color: var(--pl-zloto);
}
/* Link wypełnia cały chip (klikalny cały obszar, nie tylko tekst) */
.pl-chip > a {
	display: block;
	margin: -10px -12px;
	padding: 10px 12px;
	color: inherit;
}
.pl-cta-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	margin-top: 60px;
	padding: 44px 60px;
	border: 1px solid var(--obrys-neutralny-20, rgba(208, 208, 208, 0.20));
	background: var(--gradient-zoto-invicta, linear-gradient(270deg, #FFC48E 0%, #FFC888 12%, #FFD079 24%, #FFD079 44%, #FFCE7C 65%, #FFC789 86%, #FFC48E 100%));
	box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.06);
	
}
.pl-cta-banner__title {
	font-size: 28px;
	line-height: 1.2;
	color: var(--pl-granat-900);
	text-transform: none;
}
.pl-cta-banner__text p {
	margin-top: 12px;
	max-width: 524px;
	color: var(--pl-granat-800);
	font-size: 16px;
	line-height: 1.5;
}
.pl-btn--banner-ghost{
	border-radius: 5px;
	border: 1px solid var(--kolor-granat-800-to-tekst, #152232);
	color: var(--kolor-granat-800-to-tekst, #152232);
	font-family: "Work Sans";
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%; /* 24px */
	letter-spacing: 0.96px;
	text-transform: uppercase;
}

/* ===================== WSPÓLNY NAGŁÓWEK SEKCJI =========================== */
.pl-sec-head {
	max-width: 943px;
	margin-bottom: 50px;
}
.pl-sec-head__title {
	margin-top: 41px !important;
	font-size: 38px;
	line-height: 1.14;
	color: var(--pl-granat-800);
	text-transform: uppercase;
}
.pl-sec-head__title--light {
	color: var(--pl-bialy);
	text-transform: Uppercase;
	margin-top: 41px !important;
	line-height: 1.14;
	font-size: 38px;
	
}
.pl-sec-head__intro {
	margin-top: 22px !important;
	font-size: 16px;
	line-height: 1.65;
	color: var(--pl-szary);
}
.pl-sec-head__intro--light {
	color: var(--pl-tekst-jasnoszary);
}

/* ============================ OPINIE ===================================== */
.pl-reviews {
	background: var(--pl-granat-800);
	padding-block: 70px;
}
.pl-reviews__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}
.pl-review {
	display: flex;
	flex-direction: column;
	padding-inline: 30px !important;
	padding-block: 21px !important;
	border: 1px solid var(--obrys-ciemny-20, rgba(85, 92, 101, 0.20));
	background: var(--kolor-granat-900-to-ciemne, #111D28);
	box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.06);
	border-radius: 4px;
	background: var(--pl-granat-800);
}
.pl-review__stars {
	font-size: 22px;
	letter-spacing: 2px;
	color: var(--pl-zloto);
}
.pl-review__text {
	flex: 1;
	margin-top: 22px;
	font-size: 16px;
	line-height: 1.58;
	color: var(--pl-tekst-jasny);
}
.pl-review__author {
	margin-top: 20px;
	font-size: 16px;
	color: var(--pl-szary-ui);
	margin-left: auto;
}
.pl-reviews__cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	margin-top: 60px;
	text-align: center;
}
.pl-reviews__cta p {
	font-family: var(--pl-font-heading);
	font-size: 20px;
	color: var(--pl-tekst-jasny);
}

/* ============================ ZESPÓŁ ===================================== */
.pl-team {
	background: #152232;
	padding-block: 70px;
}
.pl-team__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}
.pl-member {
	padding: 40px 30px;
	border: 1px solid var(--obrys-ciemny-20, rgba(85, 92, 101, 0.20));
	background: var(--kolor-granat-900-to-ciemne, #111D28);
	box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.06);
}
.pl-member__photo {
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
}
.pl-member__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pl-member__name {
	margin-top: 24px !important;
	font-size: 24px;
	line-height: 1.14;
	color: var(--pl-tekst-jasny);
}
.pl-member__divider {
	display: block;
	margin-top: 12px;
	height: 1px;
	background: var(--pl-gradient-zloto);
}
.pl-member__role {
	margin-top: 13px !important;
	font-size: 16px;
	color: var(--pl-szary-ui);
}
.pl-team__cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	margin-top: 60px;
	text-align: center;
}
.pl-team__cta p {
	font-family: var(--pl-font-heading);
	font-size: 20px;
	color: #ffff;
}

/* ========================== LOKALIZACJA ================================== */
.pl-location {
	background: var(--pl-granat-800) !important;
	padding-block: 80px;
}
.pl-location__inner {
	display: flex;
	justify-content: space-between;
	gap: 60px;
}
.pl-location__map {
	flex: 0 0 785px;
	height: 380px;
	border-radius: 5px;
	overflow: hidden;
}
.pl-location__map img,
.pl-location__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}
/* Mapa: facade click-to-load (podgląd + overlay „Pokaż mapę") */
.pl-map-facade {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
}
.pl-map-facade__cta {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--pl-font-body);
	font-weight: 500;
	font-size: 16px;
	color: var(--pl-granat-900);
	background: rgba(255, 255, 255, 0.55);
	transition: background 0.2s ease;
}
.pl-map-facade:hover .pl-map-facade__cta {
	background: rgba(255, 255, 255, 0.72);
}
.pl-map-facade__note {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	text-align: center;
	font-family: var(--pl-font-body);
	font-size: 12px;
	color: var(--pl-granat-800);
}
.pl-location__info {
	flex: 0 0 566px;
}
/* Eyebrow "SIEDZIBA" — złoty tekst, obrys złoty 40% (na ciemnym tle sekcji) */
.pl-location .pl-eyebrow--gold {
	border-color: rgba(255, 199, 137, 0.4) !important;
}
.pl-location__title {
	margin-top: 8px !important;
	font-size: 32px;
	line-height: 1.2;
	color: var(--pl-bialy) !important;
	text-transform: none;
}

/* Adres — lista definicji (label / wartość) */
.pl-addr {
	margin-top: 24px !important;
}
.pl-addr__row {
	display: flex;
	gap: 12px;
	padding-block: 5px;
	margin: 0 !important;
	font-size: 16px;
}
.pl-addr__row dt {
	flex: 0 0 80px;
	margin: 0 !important;
	color: var(--pl-szary-ui) !important;
}
.pl-addr__row dd {
	margin: 0 !important;
	color: var(--pl-tekst-jasny) !important;
}
.pl-addr__row a {
	color: var(--pl-tekst-jasny) !important;
}
.pl-addr__row a:hover {
	color: var(--pl-zloto) !important;
}
.pl-location__other {
	margin-top: 28px !important;
}
/* Eyebrow "Zobacz inne lokalizacje" — biała etykieta bez pigułki */
.pl-location__other .pl-eyebrow {
	margin-bottom: 13px !important;
	padding-inline: 0;
	border-color: transparent;
	color: var(--pl-bialy) !important;
}
.pl-chips--sm {
	gap: 12px;
}
.pl-chip--sm {
	padding: 10px 12px;
	border-radius: 5px;
	border: 1px solid rgba(208, 208, 208, 0.2);
	background: var(--pl-gradient-zloto);
	box-shadow: 0 6px 10px rgba(0, 0, 0, 0.06);
	font-family: var(--pl-font-heading);
	font-size: 16px;
	line-height: 1.2;
	color: var(--pl-granat-800) !important;
}
/* Link wypełnia cały chip (klikalny cały obszar, nie tylko tekst) */
.pl-chip--sm > a {
	display: block;
	margin: -10px -12px;
	padding: 10px 12px;
	color: inherit;
}

/* ===================== KONTAKT + FORMULARZ =============================== */
.pl-contact {
	position: relative;
	background: var(--pl-granat-800);
	padding-block: 61px;
}
.pl-contact__accent {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 5px;
	background: var(--pl-zloto);
}
.pl-contact__inner {
	display: flex;
	justify-content: space-between;
	gap: 106px;
}
.pl-contact__left {
	flex: 0 0 823px;
}
.pl-contact__title {
	margin-top: 30px !important;
	font-size: 34px;
	line-height: 1.16;
	color: var(--pl-bialy);
	text-transform: Uppercase;
}
.pl-contact__lead {
	margin-top: 22px !important;
	max-width: 470px;
	color: var(--pl-tekst-jasnoszary);
	font-size: 16px;
	line-height: 1.65;
}
.pl-contact__info {
	margin-top: 30px;
}
.pl-contact__phone {
	display: block;
	font-family: var(--pl-font-heading);
	font-size: 24px;
	color: var(--pl-zloto);
}
.pl-contact__mail {
	color: var(--Kolor-Tekst-jasny, #F7F7F7);
	font-family: "Work Sans";
	font-size: 15px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}
.pl-contact__trust {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 30px !important;
	font-size: 16px;
	color: var(--pl-tekst-jasnoszary);
}
.pl-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--pl-zloto);
}

/* Karta formularza */
.pl-form-card {
	flex: 0 0 679px;
	padding: 28px;
	border: 1px solid var(--obrys-ciemny-20, rgba(85, 92, 101, 0.20));
background: var(--kolor-granat-900-to-ciemne, #111D28);
	
	background-color: #111D28; 
}
.pl-form {
	margin-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.pl-field input,
.pl-field textarea {
	width: 100%;
	padding: 14px 16px;
	background: #152232;
	border: 1px solid var(--pl-obrys-ciemny20);
	border-radius: 4px;
	color: var(--pl-tekst-jasny);
	font-family: var(--pl-font-body);
	font-size: 16px;
	line-height: 1.3;
	resize: vertical;
}
.pl-field input::placeholder,
.pl-field textarea::placeholder {
	color: var(--pl-szary-ui);
}
.pl-field input:focus,
.pl-field textarea:focus {
	outline: none;
	border-color: var(--pl-zloto);
}
.pl-check {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--pl-tekst-jasnoszary);
	font-size: 14px;
	cursor: pointer;
}
.pl-check input {
	width: 20px;
	height: 20px;
	accent-color: var(--pl-zloto);
}
.pl-dropzone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 24px;
	border: 1px dashed var(--pl-obrys-ciemny20);
	border-radius: 6px;
	text-align: center;
	background-color: #152232;
}
.pl-dropzone__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 199, 137, 0.12);
	color: var(--pl-zloto);
}
.pl-dropzone__title {
	font-size: 16px;
	color: var(--pl-tekst-jasnoszary);
}
.pl-dropzone__hint {
	font-size: 13px;
	color: var(--pl-szary-ui);
}
.pl-form__submit {
	gap: 10px;
	width: 100%;
	margin-top: 4px;
}
.pl-form__note {
	font-size: 13px;
	color: var(--pl-szary-ui);
	text-align: center;
}

/* ============================ STOPKA ===================================== */
.pl-footer {
	background: #111D28;
	padding-block: 56px;
	border-top: 1px solid var(--pl-obrys-ciemny20);
}
.pl-footer__top {
	display: flex;
	justify-content: space-between;
	gap: 40px;
}
.pl-footer__brand {
	flex: 0 0 234px;
}
.pl-footer__logo {
	display: block;
	width: 234px;
}
.pl-footer__logo svg {
	width: 100%;
	height: auto;
}
.pl-footer__brand p {
	margin-top: 42px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--pl-szary-ui);
}
.pl-footer__heading {
	display: block;
	margin-bottom: 25px;
	font-size: 15px;
	color: var(--pl-tekst-jasny);
}
.pl-addr--foot .pl-addr__row {
	font-size: 14px;
	padding-block: 3px;
}
.pl-addr--foot .pl-addr__row dt {
	color: var(--pl-szary-ui);
}
.pl-addr--foot .pl-addr__row dd {
	flex: 1;
	text-align: right;
	color: #ffff !important;
}
.pl-addr--foot .pl-addr__row dd a {
	color: #ffff !important;
}
.pl-footer__links {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
}
.pl-footer__links a,
.pl-footer__links span {
	display: block;
	width: 100%;
	background-color: white;
	padding: 4px 6px;
	border: 1px solid var(--pl-obrys-ciemny20);
	border-radius: 4px;
	font-size: 14px;
	color: var(--pl-granat-800);
	transition: background-color 0.2s ease;
	font-family: Marcellus;
}
.pl-footer__links a:hover {
	background-color: #eeeeee;
}
.pl-footer__divider {
	display: block;
	height: 1px;
	margin-block: 33px 0;
	background: var(--pl-obrys-ciemny20);
}
.pl-footer__copy {
	margin-top: 33px !important;
	font-size: 13px;
	color: var(--pl-szary-ui);
	display: flex;
	flex-direction: row;
	gap: 10px;
}

/* =========================================================================
   RESPONSYWNOŚĆ — osobny blok (desktopowe reguły powyżej NIETKNIĘTE).
   Bazowy design: desktop 1728 (content 1608). Mobile: design 402 (margines 30).
   Progi: ≤1607 oddech + elastyczny hero · ≤1024 tablet · ≤640 telefon.
   ========================================================================= */

/* --- ≤1607px: content dostaje oddech od krawędzi, hero/kontakt elastyczne -- */
@media (max-width: 1607px) {
	.pl__container {
		padding-inline: 40px;
	}
	.pl-hero__inner {
		gap: 48px;
	}
	.pl-hero__left {
		flex: 1 1 auto;
		min-width: 0;
	}
	.pl-hero__image {
		flex: 1 1 45%;
		min-width: 0;
	}
	.pl-contact__inner {
		gap: 60px;
	}
	.pl-contact__left {
		flex: 1 1 auto;
		min-width: 0;
	}
	.pl-form-card {
		flex: 1 1 480px;
	}
	.pl-location__map {
		/* flex: 1 1 55%; */
	}
	.pl-location__info {
		flex: 1 1 40%;
	}
}

/* --- ≤1024px: tablet — sekcje dwukolumnowe składają się do pionu ----------- */
@media (max-width: 1024px) {
	.pl-hero__inner {
		flex-direction: column;
		align-items: flex-start;
	}
	.pl-hero__left,
	.pl-hero__image {
		flex: none;
		width: 100%;
		max-width: none;
	}
	.pl-hero__image {
		height: auto;
		aspect-ratio: 686 / 592;
	}
	.pl-services__grid,
	.pl-reviews__grid,
	.pl-team__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.pl-location__inner,
	.pl-contact__inner {
		flex-direction: column;
	}
	.pl-location__map,
	.pl-location__info,
	.pl-contact__left,
	.pl-form-card {
		flex: none;
		width: 100%;

	}
	.pl-location__map {
		
		aspect-ratio: 785 / 380;
	}
	.pl-footer__top {
		flex-wrap: wrap;
		gap: 40px 60px;
	}
	.pl-footer__brand {
		flex-basis: 100%;
	}
	.pl-footer__col {
		flex: 1 1 40%;
	}
	/* Pasek kontaktowy w topbarze bywa za szeroki — chowamy poniżej tabletu */
	.pl-topbar__contact {
		display: none;
	}
}

/* --- ≤640px: telefon (design 402, margines boczny 30) --------------------- */
@media (max-width: 640px) {
	.pl__container {
		padding-inline: 30px;
	}

	/* Topbar: samo logo, wyśrodkowane */
	.pl-topbar__inner {
		justify-content: center;
		height: 90px;
	}
	.pl-topbar__cta {
		display: none;
	}
	.pl-topbar__logo {
		width: 218px;
	}

	/* Hero: mniejszy nagłówek, przyciski pełnej szerokości w pionie */
	.pl-hero {
		border: 0 !important; /* ukryj border-bottom wstrzykiwany na mobile */
	}
	.pl-hero__inner {
		gap: 32px;
		padding-block: 40px;
	}
	.pl-hero__title {
		font-size: 30px;
	}
	.pl-hero__title .pl-hero__city {
		text-decoration: underline;
		text-underline-offset: 4px;
	}
	.pl-hero__cta {
		flex-direction: column;
		width: 100%;
	}
	.pl-hero__cta .pl-btn {
		width: 100%;
	}

	/* Statystyki: 2×2 kafelki z tłem (na desktopie bez tła, z dividerami) */
	.pl-stats {
		padding-block: 40px;
	}
	.pl-stats__inner {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
	.pl-stats__divider {
		display: none;
	}
	.pl-stat {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 6px;
		min-width: 0;
		padding: 30px 12px;
		text-align: center;
		background: var(--pl-granat-800);
		border: 1px solid rgba(208, 208, 208, 0.10);
		border-radius: 8px;
		overflow-wrap: break-word;
	}
	.pl-stat__label {
		margin-top: 0;
	}

	/* Mniejsze odstępy i nagłówki sekcji */
	.pl-services,
	.pl-reviews,
	.pl-team,
	.pl-location,
	.pl-contact {
		padding-block: 48px;
	}
	.pl-services__title,
	.pl-sec-head__title,
	.pl-contact__title,
	.pl-location__title {
		font-size: 28px;
	}
	.pl-card__title {
		font-size: 24px;
	}

	/* Siatki → jedna kolumna */
	.pl-services__grid,
	.pl-reviews__grid,
	.pl-team__grid {
		grid-template-columns: 1fr;
	}

	/* Zespół: portret mniejszy, wyśrodkowany */
	.pl-member {
		max-width: 342px;
		margin-inline: auto;
	
	}

	/* Banner CTA → pion, przycisk pełny */
	.pl-cta-banner {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
		padding: 30px;
	}
	
	/* Długi tekst przycisku łamie się zamiast wystawać poza szerokość */
	.pl-cta-banner .pl-btn--banner-ghost {
		white-space: normal;
		height: auto;
		min-height: 46px;
		padding-block: 12px;
		text-align: center;
	}

	/* Footer: jedna kolumna, copyright wyśrodkowany */
	.pl-footer__top {
		flex-direction: column;
		gap: 32px;
	}
	.pl-footer__brand,
	.pl-footer__col {
		flex: none;
		width: 100%;
	}
	.pl-footer__brand p {
		margin-top: 20px;
	}
	.pl-footer__copy {
		text-align: center;
		flex-direction: column;
	}
}

/* =========================================================================
   FORMULARZ — upload, RODO, honeypot, stany (dopisane; nowe selektory)
   ========================================================================= */
/* Honeypot — niewidoczny dla ludzi, dostępny dla botów */
.pl-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.pl-dropzone {
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}
.pl-dropzone.is-dragover {
	border-color: var(--pl-zloto);
	background: rgba(255, 199, 137, 0.06);
}
.pl-dropzone__files {
	width: 100%;
	margin-top: 6px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.pl-dropzone__file {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 12px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.04);
	font-size: 13px;
	color: var(--pl-tekst-jasnoszary);
}
.pl-dropzone__remove {
	color: var(--pl-szary-ui);
	font-size: 18px;
	line-height: 1;
	padding: 0 4px;
}
.pl-dropzone__remove:hover {
	color: var(--pl-zloto);
}
.pl-check--rodo {
	margin-top: 4px;
	align-items: flex-start;
}
.pl-check--rodo a {
	color: var(--pl-zloto);
	text-decoration: underline;
}
.pl-field.is-invalid input,
.pl-field.is-invalid textarea {
	border-color: #e5484d;
}
.pl-check.is-invalid {
	color: #e5695d;
}
.pl-check.is-invalid input {
	outline: 1px solid #e5484d;
	outline-offset: 2px;
}
.pl-form__response {
	margin-top: 4px;
	padding: 12px 16px;
	border-radius: 4px;
	font-size: 14px;
	line-height: 1.4;
}
.pl-form__response.is-success {
	background: rgba(63, 179, 127, 0.12);
	color: #7fd7ad;
}
.pl-form__response.is-error {
	background: rgba(229, 72, 77, 0.12);
	color: #f29a9d;
}
.pl-form.is-loading {
	pointer-events: none;
}
.pl-form__submit:disabled {
	opacity: 0.65;
	cursor: default;
}

/* Przycisk wysyłki — prawy dolny róg karty (mobile: pełna szerokość) */
.pl-form__submit {
	width: auto;
	align-self: flex-end;
}
@media (max-width: 640px) {
	.pl-form__submit {
		width: 100%;
		align-self: stretch;
	}
}

/* Atrybut hidden musi wygrać z display:flex reguły .pl-dropzone */
.pl-dropzone[hidden] {
	display: none;
}

/* Reset .pl button (background:none) bił .pl-btn--gold dla <button> —
   przywracamy gradient z wyższą specyficznością (dotyczy m.in. submitu). */
.pl button.pl-btn--gold {
	background: var(--pl-gradient-zloto);
}

/* =========================== MODAL TELEFONU ============================== */
.pl-modal[hidden] {
	display: none;
}
.pl-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.pl-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
}
.pl-modal__box {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 360px;
	padding: 40px 32px 32px;
	text-align: center;
	background: var(--pl-granat-800);
	border: 1px solid var(--pl-obrys-ciemny20);
	border-radius: 10px;
}
.pl-modal__close {
	position: absolute;
	top: 12px;
	right: 16px;
	font-size: 24px;
	line-height: 1;
	color: var(--pl-szary-ui);
}
.pl-modal__close:hover {
	color: var(--pl-zloto);
}
.pl-modal__label {
	display: block;
	font-size: 14px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--pl-szary-ui);
}
.pl-modal__number {
	display: block;
	margin-top: 12px;
	font-family: var(--pl-font-heading);
	font-size: 36px;
	color: var(--pl-bialy);
}
.pl-modal__copy {
	margin-top: 24px;
}

/* Badge reCAPTCHA v3 — podniesiony, żeby nie nachodził na widget czatu */
.grecaptcha-badge {
	bottom: 96px !important;
}

/* =========================================================================
   WARIANTY LANDINGÓW MIAST (Orzesze/Rydułtowy/Tychy/Ruda Śląska) — 1:1 z Figmy
   „Invicta | Landingi". Reguły dopisane; desktop bazowy powyżej NIETKNIĘTY.
   ========================================================================= */

/* Placeholder „do uzupełnienia" (Ruda Śląska) */
.pl-todo { color: var(--pl-zloto); }

/* --- Karty: wariant CIEMNY (Orzesze, Tychy) --- */
.pl-services--dark .pl-card {
	background: var(--pl-granat-800);
	border-color: rgba(85, 92, 101, 0.35);
	box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.18);
}
.pl-services--dark .pl-card__num { color: var(--pl-szary-ui); }
.pl-services--dark .pl-card__title { color: var(--pl-tekst-jasny); }
.pl-services--dark .pl-card__desc { color: var(--pl-tekst-jasnoszary); }
.pl-services--dark .pl-card:hover { border-color: var(--pl-zloto); }

/* --- Karty: wariant ZŁOTY (Ruda Śląska) --- */
.pl-services--gold .pl-card {
	background: var(--pl-gradient-zloto);
	border-color: transparent;
}
.pl-services--gold .pl-card__num { color: rgba(17, 29, 40, 0.55); }
.pl-services--gold .pl-card__title,
.pl-services--gold .pl-card__desc { color: var(--pl-granat-900); }
.pl-services--gold .pl-card:hover { filter: brightness(1.03); }

/* --- Karty: wariant JASNY (Rydułtowy) = domyślny biały (bez zmian) --- */

/* Chipy jako nie-linki (span zamiast a) — ta sama klikalna powierzchnia */
.pl-chip > span { display: block; margin: -10px -12px; padding: 10px 12px; color: inherit; }

/* --- Hero: wariant RATING (Rydułtowy) --- */
.pl-hero__rating {
	margin-top: 26px !important;
	display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
	color: var(--pl-tekst-jasnoszary); font-size: 16px;
}
.pl-hero__stars { color: var(--pl-zloto); letter-spacing: 2px; font-size: 18px; }
.pl-hero__phone-note { margin-top: 20px !important; color: var(--pl-szary-ui); font-size: 15px; }

/* Pływający box statystyki na zdjęciu hero (Rydułtowy) */
.pl-hero__image { position: relative; }
.pl-hero__statbox {
	position: absolute; right: 20px; bottom: 20px;
	background: var(--pl-granat-900);
	border: 1px solid var(--pl-zloto);
	border-radius: 6px; padding: 16px 24px; text-align: center;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.pl-hero__statbox-num { display: block; font-family: var(--pl-font-heading); font-size: 30px; line-height: 1; color: var(--pl-zloto); }
.pl-hero__statbox-label { display: block; margin-top: 6px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--pl-tekst-jasnoszary); }

/* Znak wodny „§" w hero (Tychy/Ruda/Rydułtowy) */
.pl-hero { position: relative; overflow: hidden; }
.pl-hero__inner { position: relative; z-index: 1; }
.pl-hero__watermark {
	position: absolute; right: 42%; top: 50%; transform: translateY(-50%);
	z-index: 0; pointer-events: none;
	font-family: var(--pl-font-heading); font-size: 360px; line-height: 1;
	color: rgba(255, 255, 255, 0.045);
}

/* --- Zespół: wariant JASNY (Ruda Śląska) --- */
.pl-team--light { background: #f7f7f7 !important; }
.pl-team--light .pl-member {
	background: var(--pl-bialy);
	border-color: rgba(208, 208, 208, 0.5);
}
.pl-team--light .pl-member__name { color: var(--pl-granat-800); }
.pl-team--light .pl-member__role { color: var(--pl-szary); }
.pl-team--light .pl-team__cta p { color: var(--pl-granat-800); }

/* --- Opinie: 4 kolumny (Tychy, Rydułtowy) --- */
.pl-reviews__grid--four { grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 1024px) {
	.pl-reviews__grid--four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.pl-reviews__grid--four { grid-template-columns: 1fr; }
	.pl-hero__watermark { display: none; }
	.pl-hero__statbox { right: 12px; bottom: 12px; padding: 12px 16px; }
}

/* =========================================================================
   HERO — layouty per miasto (1:1 z Figmy „Invicta | Landingi")
   ========================================================================= */

/* --- FULLBLEED (Tychy): zdjęcie w tle bleed + scrimy + tekst nałożony --- */
.pl-hero--fullbleed {
	position: relative;
	min-height: 720px;
	display: flex;
	align-items: center;
	padding-inline: 0;
	overflow: hidden;
}
.pl-hero--fullbleed .pl-hero__bg {
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: 62%;
	background-size: cover;
	background-position: center 20%;
	z-index: 0;
}
.pl-hero--fullbleed .pl-hero__scrim {
	position: absolute; inset: 0; z-index: 1;
	background:
		linear-gradient(90deg, var(--pl-granat-800) 33%, rgba(21,34,50,0.72) 47%, rgba(21,34,50,0) 66%),
		linear-gradient(0deg, var(--pl-granat-800) 1%, rgba(21,34,50,0) 24%);
}
.pl-hero--fullbleed .pl-hero__inner { position: relative; z-index: 3; width: 100%; padding-block: 96px; justify-content: flex-start; }
.pl-hero--fullbleed .pl-hero__left { width: 700px; max-width: 62%; }
.pl-hero--fullbleed .pl-hero__watermark { z-index: 2; }

/* --- GOLDFRAME (Ruda): zdjęcie z przesuniętą złotą ramką --- */
.pl-hero--goldframe .pl-hero__image { position: relative; flex: 0 0 auto; width: 686px; border-radius: 0; overflow: visible; }
.pl-hero__goldframe {
	position: absolute; inset: 0; z-index: 0;
	transform: translate(22px, 22px);
	border: 1px solid var(--pl-zloto);
	border-radius: 8px;
}
.pl-hero--goldframe .pl-hero__image img { position: relative; z-index: 1; border-radius: 8px; }

/* Prominentny telefon w hero (Tychy) */
.pl-hero__phone-num { font-family: var(--pl-font-heading); font-size: 22px; color: var(--pl-zloto); }

@media (max-width: 1024px) {
	.pl-hero--fullbleed { min-height: 0; }
	.pl-hero--fullbleed .pl-hero__bg { width: 100%; }
	.pl-hero--fullbleed .pl-hero__left { width: 100%; max-width: 100%; }
	.pl-hero--fullbleed .pl-hero__scrim {
		background: linear-gradient(0deg, var(--pl-granat-800) 18%, rgba(21,34,50,0.55) 60%, rgba(21,34,50,0.35) 100%);
	}
	.pl-hero--goldframe .pl-hero__image { width: 100%; }
}

/* =========================================================================
   Ukrycie widgetu czatu (Tawk.to) — TYLKO na landingach (ten CSS ładuje się
   warunkowo wyłącznie na stronach landingów, więc nie rusza reszty witryny).
   ========================================================================= */
iframe[title="chat widget"],
#tawkchat-container,
#tawkchat-minified,
#tawkchat-minified-iframe,
.tawk-min-container,
.tawk-button,
[class^="tawk-"],
[id^="tawk_"],
div[class*="tawk"] {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* =========================================================================
   MOBILE — poprawki wariantów miast (fullbleed hero, overflow, wyśrodkowanie)
   ========================================================================= */
/* Guard: żaden wariant nie może powodować poziomego scrolla */
.pl { overflow-x: hidden; }

@media (max-width: 1024px) {
	/* Fullbleed (Tychy): tekst na ciemnym + zdjęcie jako osobny blok POD (jak w Figmie mobile) */
	.pl-hero--fullbleed {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
		padding-inline: 0;
		overflow: hidden;
	}
	.pl-hero--fullbleed .pl-hero__inner { order: 1; width: 100%; align-items: stretch; }
	.pl-hero--fullbleed .pl-hero__lead { max-width: 100%; }
	.pl-hero--fullbleed .pl-hero__scrim { display: none; }
	.pl-hero--fullbleed .pl-hero__bg {
		position: relative;
		order: 2;
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
	}
	.pl-hero--fullbleed .pl-hero__left { width: 100%; max-width: 100%; }
	/* Goldframe (Ruda) na mobile: ramka bez przesunięcia poza ekran */
	.pl-hero__goldframe { transform: translate(10px, 10px); }
}

@media (max-width: 640px) {
	/* Hero: CTA + telefon wyśrodkowane (jak w Figmie mobile) */
	.pl-hero__cta { align-items: stretch; }
	.pl-hero__phone-note,
	.pl-hero__rating { justify-content: center; text-align: center; }
	.pl-hero__phone-note { text-align: center; }
	/* Statbox (Rydułtowy) — nie wystawaj poza kadr */
	.pl-hero__statbox { right: 12px; bottom: 12px; }
}

/* Normalizacja szerokości hero/stats na wąskich ekranach (bez przepełnień) */
@media (max-width: 640px) {
	.pl-hero__inner { width: 100% !important; max-width: 100% !important; }
	.pl-hero__left { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
	.pl-hero__lead, .pl-hero__title { max-width: 100% !important; }
	.pl-stats__inner { width: 100% !important; max-width: 100% !important; }
	.pl-stat { min-width: 0 !important; padding: 22px 10px !important; }
	.pl-stat__num { font-size: 30px; }
}

/* Rydułtowy: centrowane CTA po chipach + baner „Opisz swoją sprawę" po opiniach */
.pl-services__cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	margin-top: 60px;
	text-align: center;
}
.pl-services__cta p {
	font-family: var(--pl-font-heading);
	font-size: 20px;
	color: var(--pl-granat-800);
}
.pl-banner-section { padding-block: 0 70px; }
.pl-banner-section .pl-cta-banner { margin-top: 0; }