/* =========================================================================
   Ardon - arkusz glowny
   -------------------------------------------------------------------------
   Odwzorowuje wyglad wersji 1 (kreator Nicepage) bez ani jednej jego klasy.
   Wersja 1 byla ciemna: tlo #1a1a1a, tekst bialy, akcent pomaranczowy #ea5a06,
   czarny sticky header, a sekcje rozdzielala cienka pionowa oliwkowa kreska.
   To wszystko zostaje. Zmieniamy swiadomie tylko menu i stopke - byly
   najslabszymi elementami starej strony.

   Kolejnosc sekcji w pliku odpowiada kolejnosci na stronie, zeby dalo sie
   szukac wzrokiem: tokeny -> baza -> header -> bloki tresci -> stopka.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokeny
   ------------------------------------------------------------------------- */
:root{
	--ard-orange:#ea5a06;
	--ard-orange-soft:#f0894c;
	--ard-orange-dark:#c94b03;

	--ard-base:#1a1a1a;      /* tlo strony - dokladnie jak w v1 */
	--ard-base-2:#141414;
	--ard-black:#000;        /* header */
	--ard-surface:#232323;   /* kafelki, pola formularza */
	--ard-surface-2:#2b2b2b;

	--ard-white:#fff;
	--ard-muted:#dbd8d8;     /* kolor linkow w v1 */
	--ard-muted-2:#a1a1a1;   /* hover linkow w v1 */
	--ard-grey:#a5a5a5;
	--ard-grey-light:#c0bfbf;
	--ard-brown:#594d4d;
	--ard-olive:#8d8b55;     /* pionowa kreska miedzy sekcjami */
	--ard-line:rgba(255,255,255,.12);

	--ard-display:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
	--ard-body:'Open Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

	--ard-wrap:1180px;
	--ard-gutter:24px;
	--ard-radius:30px;       /* v1 mialo --radius:30px na przyciskach */
	--ard-radius-sm:10px;

	--ard-header-h:88px;
	--ard-header-h-sm:66px;

	--ard-ease:cubic-bezier(.2,.8,.3,1);
}

/* -------------------------------------------------------------------------
   2. Baza
   ------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
	margin:0;
	background:var(--ard-base);
	color:var(--ard-white);
	font-family:var(--ard-body);
	font-size:16px;
	line-height:1.7;
	-webkit-font-smoothing:antialiased;
	overflow-x:hidden;
}

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

h1,h2,h3,h4,h5,h6{
	font-family:var(--ard-display);
	color:var(--ard-white);
	margin:0 0 .6em;
	letter-spacing:.01em;
}
/* v1 uzywalo lekkich, duzych naglowkow - stad waga 300 na h1/h2. */
h1{ font-weight:300; font-size:clamp(2.1rem,1.2rem + 3.2vw,3.4rem); line-height:1.14; }
h2{ font-weight:300; font-size:clamp(1.75rem,1.1rem + 2.2vw,2.6rem); line-height:1.22; }
h3{ font-weight:600; font-size:clamp(1.2rem,1rem + .7vw,1.55rem); }
h4{ font-weight:600; font-size:1.15rem; }
h5{ font-weight:600; font-size:1.05rem; }
h6{ font-weight:600; font-size:.95rem; }

p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

a{ color:var(--ard-orange); text-decoration:none; transition:color .2s; }
a:hover{ color:var(--ard-orange-soft); }

ul,ol{ margin:0 0 1.1em; padding-left:1.15em; }
li{ margin-bottom:.45em; }

hr{ border:0; border-top:1px solid var(--ard-line); margin:2rem 0; }

::selection{ background:var(--ard-orange); color:#fff; }

:focus-visible{ outline:2px solid var(--ard-orange); outline-offset:3px; }


/* -------------------------------------------------------------------------
   3. Uklad
   ------------------------------------------------------------------------- */
.wrap{
	width:100%;
	max-width:var(--ard-wrap);
	margin-inline:auto;
	padding-inline:var(--ard-gutter);
}
.wrap--narrow{ max-width:820px; }
.wrap--wide{ max-width:1360px; }

.ard-section{ padding-block:clamp(48px,6vw,84px); position:relative; }
.ard-section--flush{ padding-block:0; }
.ard-section--tight{ padding-block:clamp(32px,4vw,52px); }
.ard-section--dark{ background:var(--ard-base-2); }

/*
   Separator z v1: 50px odstepu, 100px pionowej kreski, 50px odstepu.
   W oryginale byly to trzy osobne puste sekcje - tu jeden element.
*/
.ard-divider{
	height:200px;
	display:flex;
	align-items:center;
	justify-content:center;
	pointer-events:none;
}
.ard-divider::before{
	content:"";
	width:1px;
	height:100px;
	background:var(--ard-olive);
}
.ard-divider--short{ height:120px; }
.ard-divider--short::before{ height:60px; }
@media (max-width:768px){
	.ard-divider{ height:120px; }
	.ard-divider::before{ height:60px; }
}

/* Nadkreslenie sekcji - krotka pomaranczowa kreska nad naglowkiem. */
.ard-eyebrow{
	display:inline-block;
	font-family:var(--ard-display);
	font-size:.75rem;
	font-weight:700;
	letter-spacing:.22em;
	text-transform:uppercase;
	color:var(--ard-orange);
	margin-bottom:14px;
}

.ard-lead{ font-size:1.05rem; color:var(--ard-muted); }

/* -------------------------------------------------------------------------
   4. Przyciski
   ------------------------------------------------------------------------- */
.ard-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	font-family:var(--ard-display);
	font-size:.875rem;
	font-weight:700;
	letter-spacing:2px;
	text-transform:uppercase;
	padding:16px 40px;
	border:2px solid transparent;
	border-radius:var(--ard-radius);
	background:var(--ard-orange);
	color:#fff;
	cursor:pointer;
	transition:background .3s var(--ard-ease),color .3s,border-color .3s,transform .3s var(--ard-ease),box-shadow .3s;
	box-shadow:0 0 8px rgba(0,0,0,.45);
}
.ard-btn:hover{ background:var(--ard-orange-soft); color:#fff; transform:translateY(-2px); }
.ard-btn:active{ transform:translateY(0); }

.ard-btn--ghost{
	background:transparent;
	border-color:var(--ard-orange);
	color:var(--ard-orange);
	box-shadow:none;
}
.ard-btn--ghost:hover{ background:var(--ard-orange); color:#fff; }

.ard-btn--light{
	background:transparent;
	border-color:rgba(255,255,255,.35);
	color:#fff;
	box-shadow:none;
}
.ard-btn--light:hover{ background:#fff; color:var(--ard-base); border-color:#fff; }

.ard-btn--sm{ padding:11px 24px; font-size:.75rem; letter-spacing:1.5px; }
.ard-btn--block{ display:flex; width:100%; }


/* -------------------------------------------------------------------------
   5. Naglowek + menu
   -------------------------------------------------------------------------
   Napisane od nowa. Stare menu bylo plaska lista 18 pozycji, ktora na wezszych
   ekranach rozjezdzala sie na kilka rzedow. Teraz: pasek informacyjny u gory
   (telefon, e-mail, godziny), pod nim wlasciwe menu z dwoma rozwijanymi
   panelami - Uslugi i Produkty. Po przewinieciu pasek informacyjny chowa sie,
   a header zwe.za sie i dostaje pomaranczowa kreske u dolu.

   Prog szuflady to 1280 px, a nie 1200. Ponizej tej szerokosci siedem pozycji
   menu obok logo i przyciskow zaczynalo nachodzic na siebie - lepiej pokazac
   hamburger niz scisniete, zachodzace na siebie napisy.
   ------------------------------------------------------------------------- */
.ard-header{
	position:fixed;
	inset:0 0 auto 0;
	z-index:900;
	background:var(--ard-black);
	transition:box-shadow .3s,background .3s;
}
.ard-header::after{
	content:"";
	position:absolute;
	left:0; right:0; bottom:0;
	height:2px;
	background:linear-gradient(90deg,var(--ard-orange) 0%,rgba(234,90,6,0) 55%);
	opacity:0;
	transition:opacity .3s;
}
.ard-header.is-stuck{ box-shadow:0 12px 34px rgba(0,0,0,.55); }
.ard-header.is-stuck::after{ opacity:1; }

/* --- pasek informacyjny --------------------------------------------------- */
.ard-topbar{
	background:#0a0a0a;
	border-bottom:1px solid rgba(255,255,255,.07);
	font-size:.8rem;
	color:var(--ard-muted);
	overflow:hidden;
	max-height:44px;
	transition:max-height .3s var(--ard-ease),opacity .25s;
}
.ard-header.is-stuck .ard-topbar{ max-height:0; opacity:0; border-bottom-color:transparent; }

.ard-topbar__inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:20px;
	min-height:43px;
}
.ard-topbar__group{ display:flex; align-items:center; gap:22px; }
.ard-topbar a{ color:var(--ard-muted); display:inline-flex; align-items:center; gap:7px; }
.ard-topbar a:hover{ color:var(--ard-orange); }
.ard-topbar svg{ width:14px; height:14px; flex:none; color:var(--ard-orange); }
.ard-topbar__hours{ display:inline-flex; align-items:center; gap:7px; }
@media (max-width:1024px){ .ard-topbar{ display:none; } }

/* --- pasek glowny --------------------------------------------------------- */
/*
   Naglowek dostaje wlasny, szeroki kontener.

   Tresc czyta sie lepiej w 1180 px, ale menu z siedmioma pozycjami, logo
   i przyciskami po prostu sie w tym nie miesci. Pasek nie jest tekstem do
   czytania, wiec moze wykorzystac cala szerokosc ekranu.
*/
.ard-header .wrap{ max-width:1720px; padding-inline:32px; }
@media (max-width:768px){ .ard-header .wrap{ padding-inline:18px; } }

/*
   Dwa uklady paska, przelaczane szerokoscia ekranu.

   Jeden rzad (logo | menu | przyciski) dziala tylko wtedy, gdy wszystko
   naprawde sie miesci. Wczesniej srodkowa kolumna mogla sie scisnac ponizej
   swojej tresci, a pozycje menu maja white-space:nowrap - wiec zamiast sie
   zawinac, wychodzily poza kolumne i nachodzily na logo oraz na numer
   telefonu. Teraz kolumna menu ma minimum rowne swojej tresci (1fr, nie
   minmax(0,1fr)), a ponizej 1600 px uklad rozpada sie na dwa rzedy:
   logo z przyciskami u gory, menu pod spodem.
*/
.ard-bar{
	display:grid;
	grid-template-columns:auto 1fr auto;
	grid-template-areas:"logo nav actions";
	align-items:center;
	gap:24px;
	min-height:var(--ard-header-h);
	transition:min-height .3s var(--ard-ease);
}
.ard-header.is-stuck .ard-bar{ min-height:74px; }

.ard-logo{ grid-area:logo; display:block; line-height:0; }
.ard-nav{ grid-area:nav; min-width:0; }
.ard-actions{ grid-area:actions; }

/* Dwa rzedy: od progu szuflady do 1600 px. */
@media (min-width:1281px) and (max-width:1599px){
	.ard-bar{
		grid-template-columns:auto 1fr;
		grid-template-areas:
			"logo actions"
			"nav  nav";
		row-gap:2px;
		padding-block:10px 6px;
		min-height:0;
	}
	.ard-header.is-stuck .ard-bar{ min-height:0; }
	.ard-nav__list{ padding-bottom:2px; }
}

/*
   Logo NIE zmienia rozmiaru po przewinieciu.

   Wczesniej zwe.zalo sie z 44 na 36 px i pociagalo za soba cale menu - to
   bylo zrodlo "przesuwania sie" przy scrollu. Teraz zmienia sie wylacznie
   wysokosc paska, czyli ruch jest czysto pionowy.
*/
.ard-logo img{
	height:46px;
	width:auto;
	/* Wlasciwe proporcje pliku (1000x194). Bez tego przegladarka liczy je
	   z atrybutow width/height znacznika i logo wychodzi sciesnione. */
	aspect-ratio:1000 / 194;
}

/* --- lista pozycji -------------------------------------------------------- */
.ard-nav__list{
	display:flex;
	align-items:center;
	justify-content:center;
	flex-wrap:wrap;
	gap:2px;
	list-style:none;
	margin:0;
	padding:0;
}
.ard-nav__item{ position:relative; margin:0; }

.ard-nav__link{
	position:relative;
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:12px 13px;
	font-family:var(--ard-display);
	font-size:.8rem;
	font-weight:600;
	letter-spacing:.05em;
	text-transform:uppercase;
	color:#fff;
	white-space:nowrap;
	background:none;
	border:0;
	cursor:pointer;
}
.ard-nav__link::after{
	content:"";
	position:absolute;
	left:13px; right:13px; bottom:4px;
	height:2px;
	background:var(--ard-orange);
	transform:scaleX(0);
	transform-origin:left center;
	transition:transform .28s var(--ard-ease);
}
.ard-nav__link:hover{ color:#fff; }
.ard-nav__link:hover::after,
.ard-nav__item.is-open > .ard-nav__link::after,
.ard-nav__item.is-active > .ard-nav__link::after{ transform:scaleX(1); }

.ard-nav__caret{
	width:9px; height:9px;
	flex:none;
	transition:transform .28s var(--ard-ease);
	color:var(--ard-orange);
}
.ard-nav__item.is-open .ard-nav__caret{ transform:rotate(180deg); }

/* --- panel rozwijany ------------------------------------------------------ */
.ard-mega{
	position:absolute;
	top:calc(100% + 10px);
	left:50%;
	transform:translate(-50%,10px);
	width:min(720px,92vw);
	background:#101010;
	border:1px solid rgba(255,255,255,.09);
	border-top:2px solid var(--ard-orange);
	border-radius:14px;
	box-shadow:0 30px 70px rgba(0,0,0,.65);
	padding:22px;
	opacity:0;
	visibility:hidden;
	pointer-events:none;
	transition:opacity .24s var(--ard-ease),transform .24s var(--ard-ease),visibility .24s;
}
/*
   Mostek nad przerwa miedzy przyciskiem a panelem.

   Panel wisi 10 px ponizej przycisku. Bez tego niewidzialnego paska kursor
   w drodze do panelu opuszczal element menu, odpalal mouseleave i panel
   znikal, zanim dalo sie w cokolwiek kliknac. Pasek domyka obszar najechania
   w jedna calosc - nic nie zaslania, bo nie ma tla.
*/
.ard-mega::before{
	content:"";
	position:absolute;
	left:0;
	right:0;
	top:-16px;
	height:16px;
}

.ard-nav__item.is-open > .ard-mega{
	opacity:1; visibility:visible; pointer-events:auto;
	transform:translate(-50%,0);
}
/* Panel przy prawej krawedzi nie moze wyjsc poza ekran. */
.ard-mega--right{ left:auto; right:0; transform:translate(0,10px); }
.ard-nav__item.is-open > .ard-mega--right{ transform:translate(0,0); }

.ard-mega__grid{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:4px;
	list-style:none;
	margin:0;
	padding:0;
}
.ard-mega__grid li{ margin:0; }

.ard-mega__link{
	display:flex;
	align-items:flex-start;
	gap:12px;
	padding:11px 13px;
	border-radius:10px;
	color:#fff;
	transition:background .2s,transform .2s var(--ard-ease);
}
.ard-mega__link:hover{ background:rgba(234,90,6,.12); color:#fff; transform:translateX(3px); }

.ard-mega__ico{
	flex:none;
	width:34px; height:34px;
	display:grid;
	place-items:center;
	border-radius:9px;
	background:rgba(234,90,6,.14);
	color:var(--ard-orange);
}
.ard-mega__ico svg{ width:17px; height:17px; }

.ard-mega__title{
	display:block;
	font-family:var(--ard-display);
	font-size:.88rem;
	font-weight:600;
	line-height:1.3;
}
.ard-mega__desc{
	display:block;
	font-size:.76rem;
	line-height:1.45;
	color:var(--ard-muted-2);
	margin-top:2px;
}

.ard-mega__foot{
	margin-top:16px;
	padding-top:14px;
	border-top:1px solid rgba(255,255,255,.09);
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:14px;
	font-size:.8rem;
	color:var(--ard-muted-2);
}

/* --- akcje po prawej ------------------------------------------------------ */
.ard-actions{ display:flex; align-items:center; justify-content:flex-end; gap:12px; justify-self:end; }
.ard-actions__phone{
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-family:var(--ard-display);
	font-weight:700;
	font-size:.88rem;
	color:#fff;
	white-space:nowrap;
}
.ard-actions__phone svg{ width:16px; height:16px; color:var(--ard-orange); flex:none; }
.ard-actions__phone:hover{ color:var(--ard-orange); }
/* Na waskich ekranach zostaje sama ikona sluchawki - napis zjadlby miejsce
   potrzebne hamburgerowi. */
@media (max-width:1024px){ .ard-actions__phone span{ display:none; } }

/* Tuz nad progiem szuflady menu ma wlasny rzad, ale nadal warto zbic
   odstepy, zeby siedem pozycji zmiescilo sie w jednej linii. */
@media (min-width:1281px) and (max-width:1400px){
	.ard-nav__link{ padding-inline:9px; font-size:.76rem; letter-spacing:.03em; }
	.ard-nav__link::after{ left:9px; right:9px; }
	.ard-actions{ gap:10px; }
}

/* --- hamburger ------------------------------------------------------------ */
.ard-burger{
	display:none;
	width:44px; height:44px;
	border:1px solid rgba(255,255,255,.2);
	border-radius:10px;
	background:transparent;
	cursor:pointer;
	padding:0;
	place-items:center;
}
.ard-burger span{
	display:block;
	width:20px; height:2px;
	background:#fff;
	margin:3px auto;
	transition:transform .3s var(--ard-ease),opacity .2s;
}
.ard-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.ard-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.ard-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

/* --- uklad mobilny -------------------------------------------------------- */
@media (max-width:1280px){
	.ard-burger{ display:grid; }
	.ard-actions__cta{ display:none; }

	.ard-nav{
		position:fixed;
		inset:0 0 0 auto;
		width:min(420px,100%);
		background:#0d0d0d;
		border-left:1px solid rgba(255,255,255,.08);
		padding:calc(var(--ard-header-h-sm) + 24px) 22px 40px;
		overflow-y:auto;
		transform:translateX(100%);
		transition:transform .35s var(--ard-ease);
		margin:0;
	}
	.ard-nav.is-open{ transform:translateX(0); }

	.ard-nav__list{ flex-direction:column; align-items:stretch; gap:0; }
	.ard-nav__item{ border-bottom:1px solid rgba(255,255,255,.06); }
	.ard-nav__link{
		width:100%;
		justify-content:space-between;
		padding:15px 4px;
		font-size:.88rem;
	}
	.ard-nav__link::after{ display:none; }

	.ard-mega{
		position:static;
		width:auto;
		transform:none;
		opacity:1;
		visibility:visible;
		pointer-events:auto;
		background:transparent;
		border:0;
		border-radius:0;
		box-shadow:none;
		padding:0 0 10px;
		display:none;
	}
	.ard-mega::before{ display:none; }
	.ard-nav__item.is-open > .ard-mega{ display:block; transform:none; }
	.ard-mega__grid{ grid-template-columns:1fr; gap:0; }
	.ard-mega__link{ padding:11px 4px 11px 10px; border-radius:8px; }
	.ard-mega__desc{ display:none; }
	.ard-mega__foot{ display:none; }

	.ard-nav__mobile-cta{ display:block; margin-top:26px; }
}

/* Miedzy 1025 a 1280 px pasek informacyjny jest jeszcze widoczny, wiec
   naglowek jest wyzszy niz na telefonie i szuflada musi zaczynac sie nizej. */
@media (min-width:1025px) and (max-width:1280px){
	.ard-nav{ padding-top:calc(var(--ard-header-h) + 60px); }
}
@media (min-width:1281px){ .ard-nav__mobile-cta{ display:none; } }

/* Przyciemnienie tla przy otwartym menu mobilnym. */
.ard-scrim{
	position:fixed;
	inset:0;
	z-index:890;
	background:rgba(0,0,0,.6);
	backdrop-filter:blur(2px);
	opacity:0;
	visibility:hidden;
	transition:opacity .3s,visibility .3s;
}
.ard-scrim.is-open{ opacity:1; visibility:visible; }
html.ard-lock, html.ard-lock body{ overflow:hidden; }

@media (max-width:768px){
	.ard-bar{ min-height:var(--ard-header-h-sm); }
	.ard-header.is-stuck .ard-bar{ min-height:var(--ard-header-h-sm); }
	.ard-logo img{ height:34px; }
	.ard-actions__phone{ font-size:.8rem; }
}

/* Pasek admina nie moze zaslaniac przyklejonego naglowka. */
body.admin-bar .ard-header{ top:32px; }
@media (max-width:782px){ body.admin-bar .ard-header{ top:46px; } }

/* Odsuniecie tresci spod przyklejonego naglowka. Strony z hero radza sobie
   same - inaczej nad zdjeciem powstalaby czarna luka. */
.ard-main{ padding-top:calc(var(--ard-header-h) + 43px); }
@media (max-width:1024px){ .ard-main{ padding-top:var(--ard-header-h); } }
@media (max-width:768px){ .ard-main{ padding-top:var(--ard-header-h-sm); } }
.ard-main--hero{ padding-top:0; }


/* -------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------
   W v1 hero to sekcja z tlem i przyciemnieniem linear-gradient(0deg,
   rgba(0,0,0,.4), rgba(0,0,0,.4)) oraz wysrodkowanym H1. Zostawiamy ten sam
   efekt, dokladajac tylko delikatne pogrubienie u dolu, zeby tekst byl
   czytelny takze na jasnych zdjeciach.
   ------------------------------------------------------------------------- */
.ard-hero{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	min-height:clamp(360px,52vh,560px);
	padding:calc(var(--ard-header-h) + 80px) 0 80px;
	background-position:50% 50%;
	background-size:cover;
	background-repeat:no-repeat;
	overflow:hidden;
}
.ard-hero::before{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.38) 45%,rgba(0,0,0,.62) 100%);
}
.ard-hero > .wrap{ position:relative; z-index:1; }
.ard-hero h1{ margin:0; text-shadow:0 2px 24px rgba(0,0,0,.5); }
.ard-hero__sub{
	margin:18px auto 0;
	max-width:60ch;
	font-size:1.05rem;
	color:rgba(255,255,255,.9);
}
.ard-hero__actions{ margin-top:30px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* Hero strony glownej - wyzsze, z logo zamiast naglowka. */
.ard-hero--home{ min-height:clamp(520px,86vh,860px); }
.ard-hero--home .ard-hero__logo{
	width:min(560px,78vw);
	margin:0 auto;
	filter:drop-shadow(0 6px 30px rgba(0,0,0,.55));
}

/* Okruszki nad naglowkiem hero. */
.ard-crumbs{
	font-size:.78rem;
	letter-spacing:.05em;
	text-transform:uppercase;
	color:rgba(255,255,255,.72);
	margin-bottom:16px;
}
.ard-crumbs a{ color:rgba(255,255,255,.72); }
.ard-crumbs a:hover{ color:var(--ard-orange); }
.ard-crumbs span{ margin-inline:8px; opacity:.5; }

/* -------------------------------------------------------------------------
   7. Sekcja dwukolumnowa (tekst + zdjecie)
   -------------------------------------------------------------------------
   Odpowiednik "u-parallax" z v1: po jednej stronie tekst, po drugiej zdjecie
   w tle. Zamiast prawdziwego parallaxu (skrypt skrollr) uzywamy
   background-attachment:fixed, ktore daje ten sam efekt bez javascriptu.
   ------------------------------------------------------------------------- */
.ard-split{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:clamp(28px,4vw,60px);
	align-items:center;
}
.ard-split--reverse .ard-split__media{ order:-1; }

.ard-split__body h2{ margin-bottom:.5em; }
.ard-split__body ul{ list-style:none; padding:0; margin:1.4em 0 0; }
.ard-split__body ul li{
	position:relative;
	padding-left:26px;
	margin-bottom:.85em;
	color:var(--ard-muted);
	font-size:.97rem;
}
.ard-split__body ul li::before{
	content:"";
	position:absolute;
	left:0; top:.62em;
	width:9px; height:9px;
	background:var(--ard-orange);
	transform:rotate(45deg);
}
.ard-split__body .ard-btn{ margin-top:26px; }

.ard-split__media{
	position:relative;
	min-height:340px;
	border-radius:var(--ard-radius-sm);
	overflow:hidden;
	background-position:50% 50%;
	background-size:cover;
	background-repeat:no-repeat;
}
.ard-split__media img{ width:100%; height:100%; object-fit:contain; }
.ard-split__media--photo img{ object-fit:cover; }

/* Kolumna zlozona ze zdjecia i kafelka pod nim. */
.ard-stack{ display:grid; gap:18px; align-content:start; }
.ard-stack__photo{
	width:100%;
	border-radius:var(--ard-radius-sm);
	object-fit:cover;
	aspect-ratio:4 / 3;
}

/* Podpis pod zdjeciem - w v1 pelnil role tekstu SEO. */
.ard-caption{
	margin-top:12px;
	font-size:.8rem;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--ard-grey);
}

@media (max-width:900px){
	.ard-split{ grid-template-columns:1fr; }
	.ard-split--reverse .ard-split__media{ order:0; }
	.ard-split__media{ min-height:260px; }
}

/* Wariant z tlem na calej szerokosci sekcji. */
.ard-band{
	position:relative;
	background-position:50% 50%;
	background-size:cover;
	background-repeat:no-repeat;
	background-attachment:fixed;
}
.ard-band::before{ content:""; position:absolute; inset:0; background:rgba(15,15,15,.78); }
.ard-band > .wrap{ position:relative; z-index:1; }
@media (max-width:900px){ .ard-band{ background-attachment:scroll; } }

/* -------------------------------------------------------------------------
   8. Pas ze zdjeciem
   ------------------------------------------------------------------------- */
.ard-figure{ margin:0; }
.ard-figure img{
	width:100%;
	border-radius:var(--ard-radius-sm);
	object-fit:cover;
}
.ard-figure figcaption{
	margin-top:12px;
	font-size:.8rem;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--ard-grey);
	text-align:center;
}

/* -------------------------------------------------------------------------
   9. Kafelki uslug (ikona + nazwa)
   ------------------------------------------------------------------------- */
.ard-tiles{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
	gap:18px;
	margin-top:44px;
}
.ard-tile{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:16px;
	text-align:center;
	padding:34px 20px;
	background:var(--ard-surface);
	border:1px solid rgba(255,255,255,.07);
	border-radius:var(--ard-radius-sm);
	color:#fff;
	transition:transform .3s var(--ard-ease),border-color .3s,background .3s;
}
.ard-tile:hover{
	transform:translateY(-6px);
	border-color:rgba(234,90,6,.55);
	background:var(--ard-surface-2);
	color:#fff;
}
.ard-tile--static{ cursor:default; }
.ard-tile--static:hover{ transform:none; border-color:rgba(255,255,255,.07); background:var(--ard-surface); }
.ard-tile img{ width:58px; height:58px; object-fit:contain; }
.ard-tile h4{ margin:0; font-size:1rem; }

/* -------------------------------------------------------------------------
   10. Karty marek (Kronospan, GTV, Blum...)
   ------------------------------------------------------------------------- */
.ard-brand{
	display:grid;
	grid-template-columns:minmax(0,1fr) 300px;
	gap:clamp(26px,4vw,56px);
	align-items:center;
	padding:clamp(26px,3vw,42px);
	background:var(--ard-surface);
	border:1px solid rgba(255,255,255,.07);
	border-left:3px solid var(--ard-orange);
	border-radius:var(--ard-radius-sm);
}
.ard-brand + .ard-brand{ margin-top:22px; }
.ard-brand--reverse{ grid-template-columns:300px minmax(0,1fr); }
.ard-brand--reverse .ard-brand__logo{ order:-1; }
.ard-brand h2{ font-size:clamp(1.5rem,1.1rem + 1.2vw,2rem); margin-bottom:.4em; }
.ard-brand p{ color:var(--ard-muted); }
.ard-brand__logo{
	display:grid;
	place-items:center;
	padding:22px;
	background:#fff;
	border-radius:var(--ard-radius-sm);
	min-height:150px;
}
.ard-brand__logo img{ max-height:120px; width:auto; object-fit:contain; }
@media (max-width:820px){
	.ard-brand,.ard-brand--reverse{ grid-template-columns:1fr; }
	.ard-brand--reverse .ard-brand__logo{ order:0; }
}

/* -------------------------------------------------------------------------
   11. Karty maszyn (park maszynowy)
   ------------------------------------------------------------------------- */
.ard-machine{
	display:grid;
	grid-template-columns:minmax(0,420px) minmax(0,1fr);
	gap:clamp(24px,3.5vw,48px);
	align-items:start;
	padding-block:clamp(30px,4vw,50px);
	border-top:1px solid var(--ard-line);
}
.ard-machine:first-child{ border-top:0; padding-top:0; }
.ard-machine--reverse{ grid-template-columns:minmax(0,1fr) minmax(0,420px); }
.ard-machine--reverse .ard-machine__media{ order:1; }

.ard-machine__media{ display:grid; gap:12px; }
.ard-machine__media img{
	width:100%;
	border-radius:var(--ard-radius-sm);
	object-fit:cover;
	aspect-ratio:4/3;
}
.ard-machine__tag{
	display:inline-block;
	font-family:var(--ard-display);
	font-size:.72rem;
	font-weight:700;
	letter-spacing:.2em;
	text-transform:uppercase;
	color:var(--ard-orange);
	margin-bottom:10px;
}
.ard-machine h3{ margin-bottom:.3em; }
.ard-machine__claim{
	font-size:1.02rem;
	color:var(--ard-grey-light);
	margin-bottom:1em;
}
.ard-machine ul{ list-style:none; padding:0; margin:1.2em 0 0; }
.ard-machine ul li{
	position:relative;
	padding-left:26px;
	margin-bottom:.8em;
	color:var(--ard-muted);
	font-size:.95rem;
}
.ard-machine ul li::before{
	content:"";
	position:absolute;
	left:0; top:.6em;
	width:9px; height:9px;
	background:var(--ard-orange);
	transform:rotate(45deg);
}
@media (max-width:900px){
	.ard-machine,.ard-machine--reverse{ grid-template-columns:1fr; }
	.ard-machine--reverse .ard-machine__media{ order:0; }
}

/* -------------------------------------------------------------------------
   12. Galeria realizacji
   ------------------------------------------------------------------------- */
.ard-gallery{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:14px;
}
.ard-gallery__item{
	position:relative;
	display:block;
	overflow:hidden;
	border-radius:var(--ard-radius-sm);
	aspect-ratio:3/4;
	background:var(--ard-surface);
}
.ard-gallery__item img{
	width:100%; height:100%;
	object-fit:cover;
	transition:transform .6s var(--ard-ease);
}
.ard-gallery__item:hover img{ transform:scale(1.08); }
.ard-gallery__item::after{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.55) 100%);
	opacity:0;
	transition:opacity .35s;
}
.ard-gallery__item:hover::after{ opacity:1; }
@media (max-width:900px){ .ard-gallery{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .ard-gallery{ grid-template-columns:1fr; } }

/*
   Wariant portfolio - zdjecia w swoich wlasnych proporcjach.

   Siatka wyzej narzuca kadr 3:4 i sprawdza sie tam, gdzie wszystkie zdjecia
   sa pionowe (paski "przykladowe realizacje" na podstronach produktowych).
   Na podstronie Realizacje zdjecia sa mieszane: wnetrza sklepow w 16:9,
   meble w pionie 3:4, produkcja w 3:2. Wtloczone w jeden kadr traca po
   polowie kompozycji - stad uklad kolumnowy, ktory nie przycina niczego.

   CSS columns, a nie grid: grid nie potrafi ulozyc kafelkow o roznej
   wysokosci bez dziur, a masonry w grid nie jest jeszcze powszechnie
   obslugiwane.
*/
.ard-gallery--portfolio{
	display:block;
	columns:3;
	column-gap:16px;
}
.ard-gallery--portfolio .ard-gallery__item{
	break-inside:avoid;
	margin-bottom:16px;
	aspect-ratio:auto;
	display:block;
	width:100%;
}
.ard-gallery--portfolio .ard-gallery__item img{
	height:auto;
	object-fit:contain;
}
@media (max-width:1000px){ .ard-gallery--portfolio{ columns:2; } }
@media (max-width:600px){ .ard-gallery--portfolio{ columns:1; } }

/* -------------------------------------------------------------------------
   13. Trojka kart informacyjnych (godziny / pytania / lokalizacja)
   ------------------------------------------------------------------------- */
.ard-info{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:18px;
}
.ard-info__card{
	padding:clamp(26px,3vw,36px);
	background:var(--ard-surface);
	border:1px solid rgba(255,255,255,.07);
	border-radius:var(--ard-radius-sm);
	transition:border-color .3s,transform .3s var(--ard-ease);
}
.ard-info__card:hover{ border-color:rgba(234,90,6,.45); transform:translateY(-4px); }
.ard-info__ico{
	width:46px; height:46px;
	display:grid; place-items:center;
	border-radius:12px;
	background:rgba(234,90,6,.14);
	color:var(--ard-orange);
	margin-bottom:18px;
}
.ard-info__ico svg{ width:22px; height:22px; }
.ard-info__card h4{ margin-bottom:.5em; }
.ard-info__card p{ color:var(--ard-muted); font-size:.95rem; }
.ard-info__card a{ display:inline-block; }
@media (max-width:860px){ .ard-info{ grid-template-columns:1fr; } }

/* -------------------------------------------------------------------------
   14. Pas z logotypami partnerow
   -------------------------------------------------------------------------
   W v1 byla to karuzela Bootstrapa. Zastapiona przewijaniem CSS - bez
   javascriptu, bez skokow, zatrzymuje sie po najechaniu i respektuje
   ustawienie ograniczonego ruchu w systemie.
   ------------------------------------------------------------------------- */
.ard-logos{ overflow:hidden; position:relative; padding-block:8px; }
.ard-logos::before,
.ard-logos::after{
	content:"";
	position:absolute;
	top:0; bottom:0;
	width:90px;
	z-index:2;
	pointer-events:none;
}
.ard-logos::before{ left:0;  background:linear-gradient(90deg,var(--ard-base),transparent); }
.ard-logos::after{  right:0; background:linear-gradient(270deg,var(--ard-base),transparent); }

.ard-logos__track{
	display:flex;
	align-items:center;
	gap:64px;
	width:max-content;
	animation:ard-marquee 42s linear infinite;
}
.ard-logos:hover .ard-logos__track{ animation-play-state:paused; }
.ard-logos__track img{
	height:56px;
	width:auto;
	object-fit:contain;
	filter:grayscale(1) brightness(1.9);
	opacity:.65;
	transition:filter .3s,opacity .3s;
}
.ard-logos__track img:hover{ filter:none; opacity:1; }
@keyframes ard-marquee{
	from{ transform:translateX(0); }
	to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion:reduce){
	.ard-logos__track{ animation:none; flex-wrap:wrap; justify-content:center; width:auto; }
}

/* -------------------------------------------------------------------------
   15. Naglowek sekcji (wysrodkowany)
   ------------------------------------------------------------------------- */
.ard-head{ text-align:center; max-width:760px; margin:0 auto 8px; }
.ard-head p{ color:var(--ard-muted); }
.ard-head--left{ text-align:left; margin-inline:0; }


/* -------------------------------------------------------------------------
   16. Formularz kontaktowy
   -------------------------------------------------------------------------
   W v1 pola byly podkreslone tylko od dolu (border-no-left/right/top).
   Zostawiamy ten sam charakter, ale dokladamy widoczny stan aktywny i
   komunikaty bledow, ktorych stary formularz w ogole nie mial.
   ------------------------------------------------------------------------- */
.ard-form{
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,360px);
	gap:clamp(28px,4vw,54px);
	align-items:start;
}
@media (max-width:940px){ .ard-form{ grid-template-columns:1fr; } }

.ard-form__row{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:20px;
}
@media (max-width:600px){ .ard-form__row{ grid-template-columns:1fr; } }

.ard-form__field{ margin-bottom:22px; }
.ard-form__field label{
	display:block;
	font-family:var(--ard-display);
	font-size:.76rem;
	font-weight:600;
	letter-spacing:.12em;
	text-transform:uppercase;
	color:var(--ard-grey);
	margin-bottom:8px;
}
.ard-form__field input,
.ard-form__field select,
.ard-form__field textarea{
	width:100%;
	padding:13px 2px;
	background:transparent;
	border:0;
	border-bottom:2px solid rgba(255,255,255,.22);
	border-radius:0;
	color:#fff;
	font-family:var(--ard-body);
	font-size:1rem;
	transition:border-color .25s;
	appearance:none;
}
.ard-form__field textarea{ min-height:130px; resize:vertical; }
.ard-form__field select{ padding-right:20px; }
.ard-form__field select option{ background:var(--ard-surface); color:#fff; }
.ard-form__field input::placeholder,
.ard-form__field textarea::placeholder{ color:rgba(255,255,255,.34); }
.ard-form__field input:focus,
.ard-form__field select:focus,
.ard-form__field textarea:focus{
	outline:none;
	border-bottom-color:var(--ard-orange);
}
.ard-form__field input:-webkit-autofill{
	-webkit-text-fill-color:#fff;
	-webkit-box-shadow:0 0 0 1000px var(--ard-base) inset;
}

/* Zgoda RODO. Etykieta musi plynac jednym akapitem - stad blok z wcieciem,
   a nie flex (na tym potykal sie motyw referencyjny). */
.ard-form__check{
	display:block;
	position:relative;
	padding-left:30px;
	margin:6px 0 24px;
	font-size:.82rem;
	line-height:1.6;
	color:var(--ard-muted-2);
}
.ard-form__check input[type=checkbox]{
	position:absolute;
	left:0; top:.28em;
	width:17px; height:17px;
	margin:0;
	accent-color:var(--ard-orange);
	flex:none;
}
.ard-form__check a{ text-decoration:underline; }

.ard-form__submit{ margin-top:4px; }

/* Ukryta pulapka na boty - poza ekranem, a nie display:none, bo to
   czesciej rozpoznawany wzorzec. */
.ard-form__trap{
	position:absolute;
	left:-9999px;
	top:auto;
	width:1px; height:1px;
	overflow:hidden;
}

/* Komunikat po wyslaniu. */
.ard-note{
	padding:16px 20px;
	border-radius:var(--ard-radius-sm);
	margin-bottom:26px;
	font-size:.94rem;
	border:1px solid transparent;
}
.ard-note--ok{
	background:rgba(46,160,67,.12);
	border-color:rgba(46,160,67,.5);
	color:#9be7a6;
}
.ard-note--err{
	background:rgba(234,90,6,.12);
	border-color:rgba(234,90,6,.5);
	color:var(--ard-orange-soft);
}

/* Boczna kolumna formularza. */
.ard-form__side{ display:grid; gap:16px; }
.ard-form__quick{
	padding:clamp(24px,3vw,32px);
	background:var(--ard-surface);
	border:1px solid rgba(255,255,255,.07);
	border-radius:var(--ard-radius-sm);
}
.ard-form__quick h3{ margin-bottom:.4em; font-size:1.15rem; }
.ard-form__quick p{ color:var(--ard-muted); font-size:.92rem; }
.ard-form__quick a{
	display:inline-flex;
	align-items:center;
	gap:9px;
	font-family:var(--ard-display);
	font-weight:700;
	font-size:1.05rem;
	margin-top:6px;
}
.ard-form__quick svg{ width:17px; height:17px; flex:none; }

/* -------------------------------------------------------------------------
   17. Dane kontaktowe (podstrona Kontakt)
   ------------------------------------------------------------------------- */
.ard-contact{ display:grid; gap:26px; }
.ard-contact__row{
	display:flex;
	gap:16px;
	align-items:flex-start;
}
.ard-contact__ico{
	flex:none;
	width:42px; height:42px;
	display:grid; place-items:center;
	border-radius:11px;
	background:rgba(234,90,6,.14);
	color:var(--ard-orange);
}
.ard-contact__ico svg{ width:19px; height:19px; }
.ard-contact__row h4{ margin:0 0 .25em; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ard-grey); }
.ard-contact__row p{ margin:0; font-size:1.02rem; }
.ard-contact__row a{ color:#fff; }
.ard-contact__row a:hover{ color:var(--ard-orange); }

.ard-map{
	border:0;
	width:100%;
	height:clamp(280px,38vh,420px);
	border-radius:var(--ard-radius-sm);
	filter:grayscale(1) invert(.92) contrast(.85);
}

/* -------------------------------------------------------------------------
   18. Blog / aktualnosci
   ------------------------------------------------------------------------- */
.ard-posts{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
	gap:26px;
}
.ard-post{
	display:flex;
	flex-direction:column;
	background:var(--ard-surface);
	border:1px solid rgba(255,255,255,.07);
	border-radius:var(--ard-radius-sm);
	overflow:hidden;
	transition:transform .3s var(--ard-ease),border-color .3s;
}
.ard-post:hover{ transform:translateY(-6px); border-color:rgba(234,90,6,.45); }
.ard-post__thumb{ display:block; aspect-ratio:16/10; overflow:hidden; background:var(--ard-base-2); }
.ard-post__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ard-ease); }
.ard-post:hover .ard-post__thumb img{ transform:scale(1.06); }
.ard-post__body{ padding:24px; display:flex; flex-direction:column; flex:1; }
.ard-post__date{
	font-size:.74rem;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--ard-orange);
	margin-bottom:10px;
}
.ard-post__body h3{ font-size:1.1rem; margin-bottom:.5em; }
.ard-post__body h3 a{ color:#fff; }
.ard-post__body h3 a:hover{ color:var(--ard-orange); }
.ard-post__excerpt{ color:var(--ard-muted); font-size:.93rem; flex:1; }
.ard-post__more{
	margin-top:18px;
	font-family:var(--ard-display);
	font-size:.78rem;
	font-weight:700;
	letter-spacing:.14em;
	text-transform:uppercase;
	display:inline-flex;
	align-items:center;
	gap:8px;
}
.ard-post__more svg{ width:14px; height:14px; transition:transform .25s var(--ard-ease); }
.ard-post__more:hover svg{ transform:translateX(4px); }

/* Pojedynczy wpis. */
.ard-article{ max-width:820px; margin-inline:auto; }
.ard-article img{ border-radius:var(--ard-radius-sm); margin-block:1.6em; }
.ard-article h2{ margin-top:1.6em; }
.ard-article h3{ margin-top:1.4em; }
.ard-article ul,.ard-article ol{ color:var(--ard-muted); }
.ard-article blockquote{
	margin:1.8em 0;
	padding:4px 0 4px 24px;
	border-left:3px solid var(--ard-orange);
	color:var(--ard-grey-light);
	font-size:1.06rem;
}

/* Paginacja. */
.ard-pager{
	display:flex;
	justify-content:center;
	gap:8px;
	margin-top:48px;
	flex-wrap:wrap;
}
.ard-pager .page-numbers{
	display:grid;
	place-items:center;
	min-width:42px;
	height:42px;
	padding-inline:12px;
	border:1px solid var(--ard-line);
	border-radius:10px;
	color:#fff;
	font-size:.9rem;
}
.ard-pager .page-numbers:hover{ border-color:var(--ard-orange); color:var(--ard-orange); }
.ard-pager .page-numbers.current{ background:var(--ard-orange); border-color:var(--ard-orange); color:#fff; }

/* -------------------------------------------------------------------------
   19. Tresc redakcyjna (polityka prywatnosci, strony tekstowe)
   ------------------------------------------------------------------------- */
.ard-prose{ max-width:840px; margin-inline:auto; color:var(--ard-muted); }
.ard-prose h2{ color:#fff; margin-top:1.8em; }
.ard-prose h3{ color:#fff; margin-top:1.5em; }
.ard-prose h2:first-child{ margin-top:0; }
.ard-prose a{ text-decoration:underline; }
.ard-prose ul li{ margin-bottom:.5em; }
.ard-prose--wide{ max-width:960px; }


/* -------------------------------------------------------------------------
   20. Stopka
   -------------------------------------------------------------------------
   Napisana od nowa. Stara stopka byla jedna dluga kolumna 17 linkow pod
   logotypem. Teraz cztery kolumny: firma, uslugi, produkty, kontakt -
   plus dolny pasek z prawami autorskimi i odnosnikiem do ustawien cookies.
   Pomaranczowa kreska nad stopka zostaje - byla znakiem rozpoznawczym v1.
   ------------------------------------------------------------------------- */
.ard-footer{
	background:var(--ard-black);
	border-top:1px solid var(--ard-orange);
	padding-top:clamp(48px,5vw,72px);
	font-size:.92rem;
	color:var(--ard-muted);
}

/* Piec kolumn: marka, uslugi, produkty, firma, kontakt.
   Stopka jest jednoczesnie mapa witryny, wiec wymienia wszystkie podstrony. */
.ard-footer__grid{
	display:grid;
	grid-template-columns:minmax(0,1.2fr) repeat(4,minmax(0,1fr));
	gap:clamp(24px,2.5vw,40px);
	padding-bottom:clamp(36px,4vw,54px);
}
@media (max-width:1200px){ .ard-footer__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:820px){ .ard-footer__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .ard-footer__grid{ grid-template-columns:1fr; } }

.ard-footer__logo img{ height:48px; width:auto; aspect-ratio:1000 / 194; margin-bottom:20px; }
.ard-footer__about{ max-width:38ch; line-height:1.75; }

.ard-footer__social{ display:flex; gap:10px; margin-top:22px; }
.ard-footer__social a{
	width:38px; height:38px;
	display:grid; place-items:center;
	border:1px solid rgba(255,255,255,.16);
	border-radius:10px;
	color:#fff;
	transition:background .25s,border-color .25s,color .25s,transform .25s var(--ard-ease);
}
.ard-footer__social a:hover{
	background:var(--ard-orange);
	border-color:var(--ard-orange);
	color:#fff;
	transform:translateY(-3px);
}
.ard-footer__social svg{ width:17px; height:17px; }

.ard-footer h4{
	font-size:.8rem;
	font-weight:700;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:#fff;
	margin-bottom:18px;
	position:relative;
	padding-bottom:12px;
}
.ard-footer h4::after{
	content:"";
	position:absolute;
	left:0; bottom:0;
	width:26px; height:2px;
	background:var(--ard-orange);
}

.ard-footer__list{ list-style:none; margin:0; padding:0; }
.ard-footer__list li{ margin-bottom:.62em; }
.ard-footer__list a{
	color:var(--ard-muted);
	display:inline-flex;
	align-items:center;
	gap:8px;
	transition:color .2s,transform .2s var(--ard-ease);
}
.ard-footer__list a::before{
	content:"";
	width:5px; height:5px;
	background:var(--ard-orange);
	transform:rotate(45deg);
	opacity:0;
	transition:opacity .2s;
	flex:none;
}
.ard-footer__list a:hover{ color:#fff; transform:translateX(3px); }
.ard-footer__list a:hover::before{ opacity:1; }

/* Blok kontaktowy w stopce. */
.ard-footer__contact{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.ard-footer__contact li{ display:flex; gap:12px; align-items:flex-start; margin:0; }
.ard-footer__contact svg{ width:17px; height:17px; color:var(--ard-orange); flex:none; margin-top:4px; }
.ard-footer__contact a{ color:#fff; }
.ard-footer__contact a:hover{ color:var(--ard-orange); }
.ard-footer__contact span{ display:block; color:var(--ard-muted); }

/* Dolny pasek. */
.ard-footer__bar{
	border-top:1px solid rgba(255,255,255,.09);
	padding-block:22px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	flex-wrap:wrap;
	font-size:.82rem;
	color:var(--ard-muted-2);
}
.ard-footer__bar a{ color:var(--ard-muted-2); }
.ard-footer__bar a:hover{ color:var(--ard-orange); }
.ard-footer__bar nav{ display:flex; gap:20px; flex-wrap:wrap; }

/* -------------------------------------------------------------------------
   Pasek kontaktowy przy krawedzi ekranu
   -------------------------------------------------------------------------
   Trzy okragle przyciski jeden pod drugim: powrot na gore, WhatsApp, telefon.
   Kolumna jest zakotwiczona u dolu, wiec pojawienie sie przycisku "na gore"
   rozpycha stos ku gorze i nie rusza pozostalymi.
   ------------------------------------------------------------------------- */
.ard-float{
	position:fixed;
	right:clamp(14px,2vw,26px);
	bottom:clamp(14px,2vw,26px);
	z-index:880;
	display:grid;
	gap:12px;
	justify-items:center;
}

.ard-float__btn{
	width:52px;
	height:52px;
	display:grid;
	place-items:center;
	border:0;
	border-radius:50%;
	color:#fff;
	cursor:pointer;
	box-shadow:0 10px 26px rgba(0,0,0,.5);
	transition:transform .25s var(--ard-ease),background-color .25s var(--ard-ease);
}
.ard-float__btn:hover{ transform:scale(1.08); color:#fff; }
.ard-float__btn svg{ width:23px; height:23px; }

.ard-float__btn--wa{ background:#25d366; }
.ard-float__btn--wa:hover{ background:#1fbe5a; }

.ard-float__btn--tel{ background:var(--ard-orange); }
.ard-float__btn--tel:hover{ background:var(--ard-orange-soft); }

/* Powrot na gore jest przyciskiem drugoplanowym - ciemny, zeby nie
   konkurowal kolorem z dwoma przyciskami kontaktowymi. */
.ard-float__btn--top{
	background:rgba(35,35,35,.92);
	border:1px solid rgba(255,255,255,.14);
	opacity:0;
	visibility:hidden;
	transform:translateY(10px);
	transition:opacity .3s,visibility .3s,transform .3s var(--ard-ease),background-color .25s;
}
.ard-float__btn--top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.ard-float__btn--top:hover{ background:rgba(55,55,55,.96); transform:scale(1.08); }
.ard-float__btn--top svg{ width:19px; height:19px; }

@media (max-width:768px){
	.ard-float{ gap:10px; }
	.ard-float__btn{ width:48px; height:48px; }
	.ard-float__btn svg{ width:21px; height:21px; }
}

/* -------------------------------------------------------------------------
   21. Wejscie sekcji w kadr
   -------------------------------------------------------------------------
   V1 animowalo kazdy element wlasnym skryptem. Tu jeden obserwator dodaje
   klase .is-in, a CSS robi reszte. Przy ustawieniu ograniczonego ruchu
   animacja w ogole sie nie wlacza.
   ------------------------------------------------------------------------- */
[data-reveal]{
	opacity:0;
	transform:translateY(22px);
	transition:opacity .7s var(--ard-ease),transform .7s var(--ard-ease);
	will-change:opacity,transform;
}
[data-reveal].is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
	[data-reveal]{ opacity:1; transform:none; transition:none; }
}

/* -------------------------------------------------------------------------
   22. Drobiazgi
   ------------------------------------------------------------------------- */
.screen-reader-text{
	position:absolute !important;
	width:1px; height:1px;
	padding:0; margin:-1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
	white-space:nowrap;
	border:0;
}
.skip-link{
	position:absolute;
	left:-9999px;
	top:0;
	z-index:1000;
	padding:12px 20px;
	background:var(--ard-orange);
	color:#fff;
}
.skip-link:focus{ left:8px; top:8px; color:#fff; }

.ard-center{ text-align:center; }
.ard-mt-40{ margin-top:40px; }
.aligncenter{ margin-inline:auto; }
.alignwide{ max-width:1360px; margin-inline:auto; }
.alignfull{ max-width:none; }

/* Strona 404 i wyniki wyszukiwania. */
.ard-404{ text-align:center; padding-block:clamp(60px,9vw,120px); }
.ard-404 h1{ font-size:clamp(3.5rem,2rem + 7vw,7rem); color:var(--ard-orange); margin-bottom:.1em; }

/* Blokada przewijania pod modalem cookies wspoldzieli klase z menu. */


/* -------------------------------------------------------------------------
   23. Powiekszenie zdjecia z galerii
   -------------------------------------------------------------------------
   Zastepuje lightbox Nicepage. Markup buduje skrypt, tu tylko wyglad.
   ------------------------------------------------------------------------- */
.ard-lb{
	position:fixed;
	inset:0;
	z-index:1000;
	display:none;
	align-items:center;
	justify-content:center;
	padding:40px 64px;
	background:rgba(0,0,0,.92);
}
.ard-lb.is-open{ display:flex; }

.ard-lb__img{
	max-width:100%;
	max-height:100%;
	width:auto;
	border-radius:var(--ard-radius-sm);
	box-shadow:0 30px 90px rgba(0,0,0,.7);
}

.ard-lb__close,
.ard-lb__nav{
	position:absolute;
	border:0;
	background:rgba(255,255,255,.08);
	color:#fff;
	cursor:pointer;
	display:grid;
	place-items:center;
	border-radius:50%;
	transition:background .2s,transform .2s var(--ard-ease);
	line-height:1;
}
.ard-lb__close:hover,
.ard-lb__nav:hover{ background:var(--ard-orange); }

.ard-lb__close{
	top:20px; right:20px;
	width:44px; height:44px;
	font-size:26px;
}
.ard-lb__nav{
	top:50%;
	transform:translateY(-50%);
	width:48px; height:48px;
	font-size:32px;
}
.ard-lb__nav:hover{ transform:translateY(-50%) scale(1.06); }
.ard-lb__nav--prev{ left:14px; }
.ard-lb__nav--next{ right:14px; }

@media (max-width:640px){
	.ard-lb{ padding:16px; }
	.ard-lb__nav{ width:40px; height:40px; font-size:26px; }
	.ard-lb__close{ width:38px; height:38px; font-size:22px; top:12px; right:12px; }
}