/*
Theme Name: asaritemplate2023-nhome
Theme URI: https://www.n-home.pl/
Description: Motyw potomny asaritemplate2023 dla N-Home Nieruchomosci Wroclaw. Jasny skin, akcent zolty #ebc900, fonty Roboto/Poppins.
Author: ASARI
Template: asaritemplate2023
Version: 0.1.0
*/

:root {
	--nh-yellow: #ebc900;
	--nh-yellow-dark: #d4b500;
	--nh-black: #111111;
	--nh-grey: #6b6b6b;
	--nh-white: #ffffff;
}

/*
 * Akcent motywu rodzica: colors-default.css definiuje --color-1 (ZIELEN
 * #00763F) + 16 wariantow alpha NA BODY (nie :root!) — podswietlenia menu,
 * strzalki dropdownow, detale. Nadpisujemy caly zestaw na zolty N-Home.
 */
body {
	--color-1: #d4b500;
	--color-1-a: #d4b50080;
	--color-1-1: #d4b500EE;
	--color-1-2: #d4b500DD;
	--color-1-3: #d4b500CC;
	--color-1-4: #d4b500BB;
	--color-1-5: #d4b500AA;
	--color-1-6: #d4b50099;
	--color-1-7: #d4b50088;
	--color-1-8: #d4b50077;
	--color-1-9: #d4b50066;
	--color-1-10: #d4b50055;
	--color-1-11: #d4b50044;
	--color-1-12: #d4b50033;
	--color-1-13: #d4b50024;
	--color-1-14: #d4b50017;
	--color-1-15: #d4b5000E;
	--color-1-16: #d4b50007;
}

body {
	font-family: 'Roboto', Arial, sans-serif;
	color: var(--nh-black);
}

h1, h2, h3, h4, h5, h6,
.btn, button, input[type="submit"] {
	font-family: 'Poppins', 'Roboto', Arial, sans-serif;
}

/* --- akcent zolty (parent resetuje style, stad !important) --- */
a { color: var(--nh-black); }
a:hover { color: var(--nh-yellow-dark); }

.btn,
button[type="submit"],
input[type="submit"],
.asariplug_sengine_submit,
.asariplug_sengine input[type="submit"] {
	background-color: var(--nh-yellow) !important;
	border-color: var(--nh-yellow) !important;
	color: var(--nh-black) !important;
}

.btn:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
	background-color: var(--nh-yellow-dark) !important;
	border-color: var(--nh-yellow-dark) !important;
	color: var(--nh-black) !important;
}

/* ==================================================================
   HEADER — jasny pasek jak na n-home.pl (logo | menu | tel + marki)
   ================================================================== */

/* Parent pozycjonuje .main-part absolutnie jako overlay na sliderze
   (#header ma wysokosc 0). Oryginal n-home.pl ma SOLIDNY bialy navbar
   fixed-top — odtwarzamy go: header fixed, .main-part w flow. */
/* sticky (nie fixed): header rezerwuje swoja wysokosc w layoucie,
   wiec nie potrzeba body padding-top i nie powstaje szczelina przy
   innej realnej wysokosci paska */
#header {
	position: sticky !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background: var(--nh-white) !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
	height: auto !important;
}

#header #top-bar { display: none !important; } /* oryginal nie ma topbara */

/* Parent dokleja do #header 450px ciemnego gradientu (::after) pod
   przezroczysty header na hero — z bialym fixed headerem wisi jako
   ciemny pas na gorze kazdej strony. Wylaczamy. */
#header::after { display: none !important; content: none !important; }

/* Parent klonuje menu do .sliding-part (wlasny pasek doklejany przy
   scrollu) — nasz header jest sticky, wiec to dubel. Wylaczony w calosci. */
#header .sliding-part { display: none !important; }

#header .main-part {
	position: static !important;
	display: flex !important;
	align-items: center;
	gap: 16px;
	padding: 10px 28px !important;
	width: auto !important;
	background: transparent !important;
}

body { padding-top: 0; } /* header jest sticky — sam rezerwuje miejsce */
#header .main-part { min-height: 68px; }

/* strzalka dropdownu (parent: absolute right 15px) nie moze nachodzic na tekst */
#header #menu-main > li.menu-item-has-children > a { padding-right: 28px; }

/* Mobile (breakpoint rodzica: 767px) — .main-part znika, rodzic pokazuje
   sklonowany .mobile-part (fixed). Topbar ukryty, wiec top: 0. */
@media (max-width: 767px) {
	#header .main-part { display: none !important; min-height: 0; }
	#header .mobile-part { top: 0 !important; background: var(--nh-white) !important; }
	#header .mobile-part .nh-header-extras { display: none; }
	/* na mobile rodzic pokazuje .mobile-part jako FIXED — header w flow
	   ma wysokosc 0, wiec tu padding na body zostaje */
	body { padding-top: 64px; }
}

#header .brand { flex: 0 0 auto; }
#header .brand img { height: 48px; max-height: 48px; width: auto; }

#header .navigation { margin-left: auto; position: static !important; }

#header #menu-main {
	display: flex;
	align-items: center;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: nowrap;
	white-space: nowrap;
}

#header #menu-main > li { position: relative; }

#header #menu-main > li > a { display: block; padding: 10px 9px; }

#header #menu-main > li > .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 240px;
	padding: 8px 0;
	margin: 0;
	list-style: none;
	display: none;
	z-index: 1001;
}

#header #menu-main > li:hover > .sub-menu { display: block; }

#header #menu-main .sub-menu a {
	display: block;
	padding: 8px 18px;
	font-size: 13px;
}

#header #menu-main > li > a,
#header .navigation a {
	color: var(--nh-black) !important;
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
	font-size: 13px;
	letter-spacing: .02em;
	text-transform: uppercase;
}

#header #menu-main > li > a:hover,
#header .navigation a:hover {
	color: var(--nh-grey) !important;
}

/* menu BEZ kolorowego podswietlenia (decyzja usera): aktywna pozycja
   i strzalki dropdownow czarne jak reszta, zero akcentu koloru */
#header .navigation .current-menu-item > a,
#header .navigation .current_page_item > a,
#header .navigation .current-menu-ancestor > a,
#header .navigation .current-menu-parent > a {
	color: var(--nh-black) !important;
	background: transparent !important;
}

#header .navigation li.menu-item-has-children > a::after {
	color: var(--nh-black) !important;
	text-shadow: none !important;
}

#header #menu-main .sub-menu,
#header #menu-main ul {
	background: var(--nh-white);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}

.nh-header-extras {
	display: flex;
	align-items: center;
	gap: 18px;
	flex: 0 0 auto;
}

.nh-header-tel {
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 15px;
	color: var(--nh-black) !important;
	white-space: nowrap;
}

.nh-header-brand img { max-height: 34px; width: auto; display: block; }

@media (max-width: 1200px) {
	.nh-header-tel { display: none; }
}
@media (max-width: 1024px) {
	.nh-header-extras { display: none; }
}

/* ==================================================================
   HERO — 1:1 z n-home.pl (ciemne zdjecie, H1, benefity, CTA)
   ================================================================== */

.nh-hero {
	position: relative;
	min-height: 88vh;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden; /* warstwa parallaxy nie wystaje */
}

/* warstwa tla pod parallax (transform na GPU, skala 1.12 = zapas krawedzi) */
.nh-hero-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transform: scale(1.12);
	will-change: transform;
	z-index: 0;
}

.nh-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .45);
	z-index: 1;
}

.nh-hero-inner {
	position: relative;
	z-index: 2;
	text-align: center;
	color: var(--nh-white);
	padding: 120px 20px 60px;
	max-width: 900px;
}

.nh-hero-title {
	font-size: clamp(30px, 5vw, 56px);
	font-weight: 700;
	letter-spacing: .03em;
	color: var(--nh-white);
	margin-bottom: 10px;
}

.nh-hero-sub {
	font-size: clamp(15px, 2vw, 22px);
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
	letter-spacing: .06em;
	margin-bottom: 34px;
}

.nh-hero-benefits {
	list-style: none;
	display: flex;
	justify-content: center;
	gap: 34px;
	margin: 0 0 40px;
	padding: 0;
	flex-wrap: wrap;
}

.nh-hero-benefits li {
	font-size: 15px;
	position: relative;
	padding-left: 26px;
}

.nh-hero-benefits li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--nh-yellow);
}

.nh-hero-cta {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}

.nh-btn {
	display: inline-block;
	padding: 14px 34px;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: .05em;
	border-radius: 4px;
	transition: all .18s ease;
	text-transform: uppercase;
}

.nh-btn-yellow {
	background: var(--nh-yellow) !important;
	color: var(--nh-black) !important;
	border: 2px solid var(--nh-yellow);
}

.nh-btn-yellow:hover {
	background: var(--nh-yellow-dark) !important;
	border-color: var(--nh-yellow-dark);
}

.nh-btn-ghost {
	background: transparent;
	color: var(--nh-white) !important;
	border: 2px solid var(--nh-white);
}

.nh-btn-ghost:hover {
	background: var(--nh-white);
	color: var(--nh-black) !important;
}

.nh-hero .theres-more-button { z-index: 3; }

/* ==================================================================
   ANIMACJE (animations.dev): transform+opacity only, custom ease-out,
   reveal raz, stagger w gridach, hover za media query, reduced-motion
   ================================================================== */

:root {
	--nh-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* --- wejscie tresci hero (stagger po zaladowaniu) --- */
.nh-hero-inner > * {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 700ms var(--nh-ease-out), transform 700ms var(--nh-ease-out);
}

.nh-hero-in .nh-hero-inner > *:nth-child(1) { transition-delay: 60ms; }
.nh-hero-in .nh-hero-inner > *:nth-child(2) { transition-delay: 140ms; }
.nh-hero-in .nh-hero-inner > *:nth-child(3) { transition-delay: 220ms; }
.nh-hero-in .nh-hero-inner > *:nth-child(4) { transition-delay: 300ms; }

.nh-hero-in .nh-hero-inner > * {
	opacity: 1;
	transform: translateY(0);
}

/* --- scroll reveal (klasy nadaje JS — bez JS nic nie jest ukryte) --- */
.nh-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 600ms var(--nh-ease-out), transform 600ms var(--nh-ease-out);
}

.nh-reveal.nh-in {
	opacity: 1;
	transform: translateY(0);
}

/* --- parallax tla sekcji "Napisz lub zadzwon" (desktop z myszka) --- */
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
	.nh-callband {
		background-attachment: fixed;
	}
}

/* --- hover: zoom zdjec (wrapper przycina, img skaluje) --- */
@media (hover: hover) and (pointer: fine) {
	.nh-about-img,
	.nh-service-img {
		overflow: hidden;
		border-radius: 6px;
	}

	.nh-about-img img,
	.nh-service-img img {
		transition: transform 500ms var(--nh-ease-out);
		will-change: transform;
	}

	.nh-about-img:hover img,
	.nh-service-img:hover img {
		transform: scale(1.05);
	}

	/* karty Szukaj/Zglos: uniesienie + zoom tla (bg na elemencie -> skala calej karty) */
	.nh-card {
		transition: transform 450ms var(--nh-ease-out), box-shadow 450ms var(--nh-ease-out);
	}

	.nh-card:hover {
		transform: translateY(-6px) scale(1.015);
		box-shadow: 0 18px 40px rgba(0, 0, 0, .22);
	}

	/* opinie: delikatne uniesienie */
	.nh-review {
		transition: transform 350ms var(--nh-ease-out), box-shadow 350ms var(--nh-ease-out);
	}

	.nh-review:hover {
		transform: translateY(-4px);
		box-shadow: 0 10px 26px rgba(0, 0, 0, .08);
	}

	/* kafle o-firmie */
	.nh-tile {
		transition: transform 350ms var(--nh-ease-out), box-shadow 350ms var(--nh-ease-out);
	}

	.nh-tile:hover {
		transform: translateY(-4px);
		box-shadow: 0 10px 26px rgba(0, 0, 0, .08);
	}

	/* oferty asariplug (po syncu CRM): zoom zdjecia oferty */
	.asariplug_common_box { overflow: hidden; }
	.asariplug_common_box img {
		transition: transform 500ms var(--nh-ease-out);
	}
	.asariplug_common_box:hover img {
		transform: scale(1.05);
	}
}

/* --- przyciski: feedback wcisniecia --- */
.nh-btn,
.nh-float a {
	transition: transform 140ms var(--nh-ease-out), background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.nh-btn:active,
.nh-float a:active {
	transform: scale(0.97);
}

/* --- reduced motion: zero ruchu, zostaje krotkie opacity --- */
@media (prefers-reduced-motion: reduce) {
	.nh-hero-inner > *,
	.nh-reveal {
		transform: none !important;
		transition: opacity 200ms ease !important;
	}

	.nh-hero-bg { will-change: auto; }

	.nh-callband { background-attachment: scroll; }

	.nh-card:hover,
	.nh-review:hover,
	.nh-tile:hover,
	.nh-about-img:hover img,
	.nh-service-img:hover img {
		transform: none;
	}
}

/* ==================================================================
   BANER PODSTRON — zastepuje slider+box CRM rodzica
   ================================================================== */

/* ukrycie slidera/box CRM rodzica na podstronach (backup do template override) */
body:not(.home) #slider { display: none !important; } /* tylko gorny slider strony; #gallery-slider ofert i inne slidery tresci zostaja widoczne */

.nh-subbanner {
	width: 100%;
	min-height: 240px;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nh-subbanner-title {
	color: var(--nh-white);
	font-family: 'Poppins', sans-serif;
	font-size: clamp(26px, 3.6vw, 40px);
	font-weight: 600;
	letter-spacing: .28em;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

/* ==================================================================
   SEKCJE STRONY GLOWNEJ
   ================================================================== */

.nh-sec { padding: 70px 28px; max-width: 1320px; margin: 0 auto; }

.nh-h2 {
	text-align: center;
	font-size: clamp(24px, 3.4vw, 38px);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	margin-bottom: 12px;
}

.nh-h2::after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	background: var(--nh-yellow);
	margin: 14px auto 0;
}

.nh-sec-lead {
	text-align: center;
	color: var(--nh-grey);
	max-width: 720px;
	margin: 0 auto 40px;
}

/* KOMPLEKSOWA OBSLUGA — zdjecie + lista atutow */
.nh-about {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}

.nh-about img { width: 100%; height: auto; border-radius: 6px; }

.nh-about-items { display: flex; flex-direction: column; gap: 22px; }

.nh-about-item h3 {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 4px;
}

.nh-about-item p { color: var(--nh-grey); margin: 0; }

/* NAPISZ LUB ZADZWON — pelna szerokosc, ciemne tlo ze zdjeciem */
.nh-callband {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: 90px 20px;
	background-size: cover;
	background-position: center;
	text-align: center;
	color: var(--nh-white);
}

.nh-callband::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .5);
}

.nh-callband > * { position: relative; z-index: 2; }

.nh-callband h2 {
	color: var(--nh-white);
	font-size: clamp(24px, 3.4vw, 38px);
	text-transform: uppercase;
	margin-bottom: 26px;
}

.nh-callband a {
	display: inline-block;
	color: var(--nh-white) !important;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: clamp(18px, 2.6vw, 28px);
	margin: 6px 22px;
}

.nh-callband a:hover { color: var(--nh-yellow) !important; }

/* SZUKAJ / ZGLOS — dwie karty ze zdjeciami */
.nh-twocards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
}

.nh-card {
	position: relative;
	border-radius: 6px;
	overflow: hidden;
	min-height: 340px;
	display: flex;
	align-items: flex-end;
	background-size: cover;
	background-position: center;
}

.nh-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, .18));
}

.nh-card-body {
	position: relative;
	z-index: 2;
	padding: 28px;
	color: var(--nh-white);
}

.nh-card-body h3 {
	color: var(--nh-white);
	font-size: 22px;
	text-transform: uppercase;
	margin-bottom: 8px;
}

.nh-card-body p { color: rgba(255, 255, 255, .88); margin-bottom: 16px; }

/* OPINIE — CENIMY WSPOLPRACE */
.nh-reviews {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.nh-review {
	background: #faf9f6;
	border: 1px solid #eee;
	border-radius: 6px;
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.nh-review p { color: #333; font-size: 14.5px; line-height: 1.65; margin: 0; flex: 1; }

.nh-review cite {
	font-style: normal;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
}

.nh-review .nh-stars { color: var(--nh-yellow-dark); font-size: 16px; letter-spacing: 2px; }

.nh-google-badge { display: block; margin: 0 auto 34px; max-height: 56px; width: auto; }

/* USLUGI — sekcje naprzemienne (uklad jak na n-home.pl/services) */
.nh-service {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
	padding: 44px 0;
	border-bottom: 1px solid #f0f0f0;
}

.nh-service:nth-child(even) .nh-service-img { order: 2; }

.nh-service-img img { width: 100%; height: auto; border-radius: 6px; }

.nh-service h2,
.nh-service .nh-service-txt h1 {
	font-size: clamp(20px, 2.6vw, 30px);
	text-transform: uppercase;
	margin-bottom: 14px;
}

.nh-service .nh-service-txt h1::after,
.nh-service h2::after {
	content: "";
	display: block;
	width: 52px;
	height: 4px;
	background: var(--nh-yellow);
	margin-top: 12px;
}

.nh-service p { color: #444; margin-bottom: 22px; }

/* PODSTRONY — naglowki, kafle, pomocnicze */
.nh-landing-h1 {
	font-size: clamp(26px, 3.6vw, 40px);
	text-transform: uppercase;
	margin-bottom: 16px;
}

.nh-landing-h1::after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	background: var(--nh-yellow);
	margin-top: 14px;
}

.nh-center { text-align: center; }
.nh-center .nh-landing-h1::after,
.nh-landing-h1.nh-center::after { margin-left: auto; margin-right: auto; }

.nh-wide-p { color: #444; max-width: 980px; margin: 18px auto; }

.nh-statement {
	font-family: 'Poppins', sans-serif;
	font-size: clamp(18px, 2.4vw, 26px);
	font-weight: 500;
	max-width: 820px;
	margin: 26px auto 34px;
}

.nh-tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin: 44px 0;
}

.nh-tile {
	background: #faf9f6;
	border: 1px solid #eee;
	border-top: 4px solid var(--nh-yellow);
	border-radius: 6px;
	padding: 26px;
}

.nh-tile h3 { font-size: 18px; text-transform: uppercase; margin-bottom: 10px; }
.nh-tile p { color: var(--nh-grey); margin: 0; font-size: 14.5px; }

.nh-service-txt h2 a { color: var(--nh-black); }
.nh-service-txt h2 a:hover { color: var(--nh-yellow-dark); }

/* ==================================================================
   MAPA SENGINE — czarno-biala, zolte markery, bez "Zaznacz obszar"
   ================================================================== */

/* kontrolki zaznaczania obszaru — wylaczone (decyzja usera) */
.asariplug_sengine_mapsearch_info { display: none !important; }

/* kafle OSM w skali szarosci */
.asariplug_sengine_mapsearch .leaflet-tile {
	filter: grayscale(1) contrast(1.02);
}

/* zolte pinezki SVG (fill=currentColor z asariwww_osm.js);
   !important — inaczej wygrywa zielony kolor dziedziczony z rodzica */
.leaflet-marker-icon.custom-map-marker,
.custom-map-marker {
	color: var(--nh-yellow) !important;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
}

/* zolte klastry (leaflet.markercluster) */
.asariplug_sengine_mapsearch .marker-cluster-small,
.asariplug_sengine_mapsearch .marker-cluster-medium,
.asariplug_sengine_mapsearch .marker-cluster-large {
	background-color: rgba(235, 201, 0, .5);
}

.asariplug_sengine_mapsearch .marker-cluster-small div,
.asariplug_sengine_mapsearch .marker-cluster-medium div,
.asariplug_sengine_mapsearch .marker-cluster-large div {
	background-color: var(--nh-yellow);
	color: var(--nh-black);
	font-weight: 700;
}

/* USLUGI z kotwicami */
.nh-service { position: relative; scroll-margin-top: 90px; }
.nh-legacy-anchor { position: absolute; top: -90px; }
.nh-map-anchor { scroll-margin-top: 90px; display: block; }

/* RODO: osadzony Google Form (przeniesiony 1:1 ze starej strony) */
.nh-gform-wrap {
	max-width: 760px;
	margin: 34px auto 0;
}

.nh-gform-wrap iframe {
	width: 100%;
	height: 2400px; /* formularz Google jest dlugi; bez scrolla w scrollu */
	border: 0;
}

@media (max-width: 680px) {
	.nh-gform-wrap iframe { height: 2800px; }
}

/* ZESPOL — sekcja O FIRMIE z kolazem 4 zdjec (1:1 z n-home.pl/about-us) */
.nh-ofirmie {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
	margin-top: 30px;
}

.nh-collage {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
}

.nh-collage img {
	width: 100%;
	height: auto;
	border-radius: 4px;
	display: block;
	/* lewitacja: kazde zdjecie w innym tempie i fazie (ujemne delaye) */
	animation: nh-float 5.6s ease-in-out infinite alternate;
	will-change: transform;
}

.nh-collage img:nth-child(1) { animation-duration: 5.2s; }
.nh-collage img:nth-child(2) { animation-duration: 6.4s; animation-delay: -2.1s; }
.nh-collage img:nth-child(3) { animation-duration: 5.8s; animation-delay: -3.4s; }
.nh-collage img:nth-child(4) { animation-duration: 6.9s; animation-delay: -1.2s; }

@keyframes nh-float {
	from { transform: translateY(-5px); }
	to   { transform: translateY(7px); }
}

/* offset przez margines (transform nalezy do animacji lewitacji) */
.nh-collage-down { margin-top: 34px; }

.nh-ofirmie-txt h2 {
	font-size: clamp(22px, 2.8vw, 32px);
	text-transform: uppercase;
	margin-bottom: 18px;
}

.nh-ofirmie-txt p { color: #444; margin-bottom: 16px; }

.nh-btn-pill { border-radius: 999px; }

/* ==================================================================
   SLIDER ZESPOL — premium: crossfade zdjec z osadzeniem skali,
   stagger tekstu, paski postepu autoplaya, swipe
   ================================================================== */

.nh-oslider-band {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	background: #f7f6f3;
	padding: 84px 0;
	margin-top: 70px;
}

.nh-oslider {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 28px;
}

.nh-oslider-grid {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 64px;
	align-items: center;
}

.nh-oslider-eyebrow {
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--nh-yellow-dark);
	margin-bottom: 14px;
}

/* teksty slajdow — crossfade ze staggerem h3 -> p */
.nh-otxts { position: relative; min-height: 240px; }

.nh-otxt {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.nh-otxt h3 {
	font-size: clamp(24px, 3vw, 36px);
	text-transform: uppercase;
	margin-bottom: 16px;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 250ms ease, transform 250ms ease;
}

.nh-otxt p {
	color: #444;
	font-size: 16px;
	line-height: 1.7;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 250ms ease, transform 250ms ease;
}

.nh-otxt.nh-active { pointer-events: auto; }

.nh-otxt.nh-active h3 {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 550ms var(--nh-ease-out) 120ms, transform 550ms var(--nh-ease-out) 120ms;
}

.nh-otxt.nh-active p {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 550ms var(--nh-ease-out) 210ms, transform 550ms var(--nh-ease-out) 210ms;
}

/* zdjecia — crossfade + "osadzenie" skali (1.06 -> 1) */
.nh-oimgs {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .14);
	touch-action: pan-y;
	cursor: grab;
}

.nh-oimgs:active { cursor: grabbing; }

.nh-oimg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.06);
	transition: opacity 700ms var(--nh-ease-out), transform 1200ms var(--nh-ease-out);
	pointer-events: none;
	-webkit-user-drag: none;
	user-select: none;
}

.nh-oimg.nh-active {
	opacity: 1;
	transform: scale(1);
}

/* nawigacja: strzalki-chevrony + paski postepu */
.nh-oslider-nav {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 26px 0 30px;
}

.nh-oslider-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid #dcdcd6 !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: var(--nh-black) !important;
	padding: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: border-color 180ms ease, background 180ms ease, transform 140ms var(--nh-ease-out);
}

.nh-oslider-arrow:hover {
	background: var(--nh-white) !important;
	border-color: var(--nh-black) !important;
}

.nh-oslider-arrow:active { transform: scale(0.94); }

.nh-obars { display: flex; gap: 10px; }

.nh-obar {
	position: relative;
	width: 44px;
	height: 3px;
	border: 0 !important;
	padding: 0 !important;
	background: #e0dfda !important;
	border-radius: 2px !important;
	box-shadow: none !important;
	cursor: pointer;
	overflow: hidden;
}

.nh-obar i {
	position: absolute;
	inset: 0;
	background: var(--nh-yellow);
	transform: scaleX(0);
	transform-origin: left;
}

/* pasek postepu autoplaya: wypelnia sie przez czas slajdu */
.nh-obar.nh-active i {
	animation: nh-bar-fill 6s linear forwards;
}

.nh-oslider:hover .nh-obar.nh-active i { animation-play-state: paused; }

@keyframes nh-bar-fill {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

.nh-oslider-btn { margin-top: 4px; }

@media (max-width: 900px) {
	.nh-oslider-grid { grid-template-columns: 1fr; gap: 30px; }
	.nh-oimgs { order: -1; }
	.nh-otxts { min-height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
	.nh-oimg, .nh-otxt h3, .nh-otxt p { transition: opacity 200ms ease !important; transform: none !important; }
	.nh-obar.nh-active i { animation: none; transform: scaleX(1); }
}

@media (max-width: 900px) {
	.nh-ofirmie { grid-template-columns: 1fr; gap: 34px; }
	.nh-collage-down { margin-top: 18px; }
}

/* reveal dwukierunkowy: wyjscie szybsze niz wejscie (asymetria) */
.nh-reveal:not(.nh-in) { transition-duration: 260ms; }

@media (prefers-reduced-motion: reduce) {
	.nh-collage img { animation: none; }
}

/* ZESPOL — karty agentow z CRM (asariplug-team, layout boxes) */
.nh-team-wrap { margin-top: 20px; }

.nh-team-wrap .widget-team h2 {
	text-align: center;
	font-size: clamp(20px, 2.6vw, 30px);
	text-transform: uppercase;
	margin: 30px 0 26px;
}

.nh-team-wrap .widget-team .person {
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 6px;
	overflow: hidden;
}

@media (hover: hover) and (pointer: fine) {
	.nh-team-wrap .widget-team .person {
		transition: transform 350ms var(--nh-ease-out), box-shadow 350ms var(--nh-ease-out);
	}
	.nh-team-wrap .widget-team .person:hover {
		transform: translateY(-4px);
		box-shadow: 0 12px 30px rgba(0, 0, 0, .10);
	}
	.nh-team-wrap .widget-team .person .image img {
		transition: transform 500ms var(--nh-ease-out);
	}
	.nh-team-wrap .widget-team .person:hover .image img {
		transform: scale(1.05);
	}
}

.nh-team-wrap .widget-team .person .image {
	overflow: hidden;
	background: #f5f4f0;
}

/* brak zdjecia agenta w CRM -> zgrabny placeholder zamiast pustego pudla */
.nh-team-wrap .widget-team .person .image:empty,
.nh-team-wrap .widget-team .person a.image:empty {
	display: block;
	aspect-ratio: 4 / 3;
	background: #f5f4f0 url('assets/img/logo-brand.svg') center / 34% no-repeat;
	opacity: .55;
}

.nh-team-wrap .widget-team .person .name {
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	text-transform: uppercase;
}

/* KONTAKT — dwie kolumny jak na n-home.pl/contact */
.nh-kontakt-grid {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 64px;
	align-items: start;
	margin-top: 30px;
}

.nh-kontakt-info h2,
.nh-kontakt-form h2 {
	font-size: clamp(20px, 2.4vw, 28px);
	text-transform: uppercase;
	margin-bottom: 8px;
}

.nh-kontakt-info h2::after,
.nh-kontakt-form h2::after {
	content: "";
	display: block;
	width: 52px;
	height: 4px;
	background: var(--nh-yellow);
	margin-top: 12px;
}

.nh-kinfo-block {
	margin-top: 30px;
	padding-left: 18px;
	border-left: 3px solid var(--nh-yellow);
}

.nh-kinfo-block h3 {
	font-size: 15px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--nh-grey);
	margin-bottom: 10px;
}

.nh-kinfo-block p { margin: 0 0 14px; color: #333; line-height: 1.65; }

.nh-kinfo-big a {
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 16px;
	color: #333 !important;
}

.nh-kinfo-big a:hover { color: var(--nh-yellow-dark) !important; }

.nh-kinfo-big { line-height: 1.5; }

.nh-kontakt-lead { color: var(--nh-grey); margin-bottom: 24px; }

@media (max-width: 900px) {
	.nh-kontakt-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* formularz "Zapytaj o usluge" na dole strony uslug */
.nh-uslugi-form { scroll-margin-top: 90px; }
.nh-form-wrap { max-width: 620px; margin: 0 auto; }
.nh-form-wrap input[type="text"],
.nh-form-wrap input[type="email"],
.nh-form-wrap input[type="tel"],
.nh-form-wrap textarea.form-control,
.nh-form-wrap textarea {
	width: 100%;
	border: 2px solid #e6e6e6 !important;
	border-radius: 4px;
	padding: 10px 14px;
	transition: border-color 180ms ease;
}
.nh-form-wrap input:focus,
.nh-form-wrap textarea:focus {
	border-color: var(--nh-yellow) !important;
	outline: none;
}

/* formularz zgloszen (asariplug submit-form) — zwezony z marginesami */
.asariwww_zglosform {
	max-width: 960px;
	margin: 0 auto;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 16px rgba(0,0,0,.06);
	padding: 32px 40px;
}
.asariwww_zglosform label {
	font-size: 14px;
	color: #333;
}
.asariwww_zglosform input[type="text"],
.asariwww_zglosform input[type="email"],
.asariwww_zglosform input[type="tel"],
.asariwww_zglosform input[type="number"],
.asariwww_zglosform select,
.asariwww_zglosform textarea {
	border: 2px solid #e6e6e6 !important;
	border-radius: 4px;
	padding: 8px 12px;
	font-size: 14px;
	transition: border-color 180ms ease;
}
.asariwww_zglosform input:focus,
.asariwww_zglosform select:focus,
.asariwww_zglosform textarea:focus {
	border-color: var(--nh-yellow) !important;
	outline: none;
}
.asariwww_zglosform input[type="submit"] {
	border-radius: 40px;
	padding: 12px 36px;
	font-size: 14px;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* wyszukiwarka sengine — fix ucinania selectow (np. "Piętro...") */
.asariplug_sengine select {
	text-overflow: ellipsis;
	min-width: 0;
	overflow: visible;
}
.asariplug_sengine .form-group {
	min-width: 0;
	overflow: visible;
}

/* ==================================================================
   FOOTER — jak na n-home.pl (logo, adres, linki, copyright)
   ================================================================== */

#footer.nh-footer {
	background: var(--nh-white) !important;
	color: #212529;
	margin-top: 60px;
	padding: 0 !important;
	border-top: 1px solid #ececec;
}

.nh-footer-inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 56px 28px 40px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: start;
}

.nh-footer-brand img { max-height: 64px; width: auto; margin-bottom: 18px; }
.nh-footer-brand p { margin: 0 0 10px; line-height: 1.45; color: #212529; font-size: 14px; }
.nh-footer-brand a { color: var(--nh-black) !important; font-weight: 600; font-size: 14px; }
.nh-footer-brand a:hover { color: var(--nh-yellow-dark) !important; }

.nh-footer-links {
	display: grid;
	grid-template-columns: repeat(3, auto);
	gap: 10px 34px;
	justify-content: end;
	align-content: start;
}

.nh-footer-links a {
	color: #212529 !important;
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.nh-footer-links a:hover { color: var(--nh-yellow-dark) !important; }

.nh-footer-bottom {
	border-top: 1px solid #ececec;
	text-align: center;
	padding: 18px 20px;
	font-size: 13px;
	color: #6b6b6b;
}

/* mobile */
@media (max-width: 900px) {
	.nh-tiles { grid-template-columns: 1fr; }
	.nh-footer-inner { grid-template-columns: 1fr; gap: 28px; }
	.nh-footer-links { justify-content: start; grid-template-columns: repeat(2, auto); }
	.nh-about, .nh-twocards, .nh-service { grid-template-columns: 1fr; }
	.nh-service:nth-child(even) .nh-service-img { order: 0; }
	.nh-reviews { grid-template-columns: 1fr; }
	.nh-sec { padding: 48px 18px; }
}

/* --- plywajace przyciski kontaktu --- */
.nh-float {
	position: fixed;
	right: 18px;
	bottom: 24px;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.nh-float a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--nh-yellow);
	color: var(--nh-black);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
	transition: transform .15s ease, background .15s ease;
}

.nh-float a:hover {
	transform: scale(1.08);
	background: var(--nh-yellow-dark);
}

.nh-float svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
	pointer-events: none;
}

.person:has(a[href*="rezerwacje-zyrafa"]) { display: none !important; }
/* ------------------------------------------------------------------ */
/* Profil agenta /zespol/{slug}/ — kadrowanie zdjecia w karcie.        */
/* Core wp-block-library (bazowy wp-block-cover) nie jest ladowany na  */
/* tym szablonie, wiec odtwarzamy zachowanie cover: obraz absolutny,   */
/* przyciety object-fit:cover do wysokosci .wp-block-cover.            */
/* ------------------------------------------------------------------ */
#intro .wp-block-cover {
	position: relative;
	display: flex;
	overflow: hidden;
	box-sizing: border-box;
}
#intro .wp-block-cover > .wp-block-cover__image-background {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	z-index: 0;
}
#intro .wp-block-cover > .wp-block-cover__gradient-background,
#intro .wp-block-cover > .wp-block-cover__background {
	position: absolute;
	inset: 0;
	z-index: 1;
}
#intro .wp-block-cover > .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}