/* ====================================================
   FOX — стилі сайту.
   Один файл, без зовнішніх шрифтів і бібліотек —
   навмисно, щоб сторінка вантажилась швидко.
   ==================================================== */

:root{
	--ink:#1b1c1e;
	--ink-soft:#4a4c50;
	--paper:#ffffff;
	--paper-dim:#f4f3f0;
	--amber:#f8c301;
	--amber-dark:#da241c;
	--line:#e5e3de;
	--radius:4px;
	--maxw:1180px;
}

body{
	color:var(--ink);
	background:var(--paper);
	line-height:1.55;
	font-size:17px;
}

.wrap,
.footer-contact{
	max-width:var(--maxw);
	margin-left:auto;
	margin-right:auto;
	padding-left:24px;
	padding-right:24px;
}

h1, h2, h3, h4{
	font-family:'Arial Narrow', Arial, sans-serif;
	font-weight:700;
	letter-spacing:0.3px;
	color:var(--ink);
	line-height:1.15;
	margin:0 0 16px;
}

h1{ font-size:clamp(30px, 4vw, 46px); }
h2{ font-size:clamp(22px, 3vw, 30px); }
h3{ font-size:18px; text-transform:uppercase; letter-spacing:1px; }

p{ margin:0 0 16px; }

a{ color:var(--amber-dark); }
a:hover{ color:var(--amber); }

ul.plain{ margin:0 0 20px; padding-left:22px; }
ul.plain li{ margin-bottom:8px; }

/* ---------- Header ---------- */

.site-header{
	position:sticky;
	top:0;
	z-index:1000;
	background:var(--paper);
	border-bottom:3px solid var(--ink);
}

.site-header-inner{
	max-width:var(--maxw);
	margin-left:auto;
	margin-right:auto;
	padding:14px 24px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:20px;
	flex-wrap:wrap;
	position:relative;
}

.site-logo-link{
	display:inline-block;
	line-height:0;
	flex-shrink:0;
}

.site-logo{
	max-height:56px;
	width:auto;
	display:block;
}

.site-nav{
	flex:1 1 auto;
}

.site-nav ul{
	display:flex;
	flex-wrap:wrap;
	gap:4px 6px;
	margin:0;
	padding:0;
	list-style:none;
}

.site-nav a{
	display:inline-block;
	padding:8px 12px;
	color:var(--ink);
	font-size:14px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:0.4px;
	border-radius:var(--radius);
}

.site-nav a:hover{
	background:var(--ink);
	color:#fff;
}

.site-nav .menu-item-highlight > a{
	background:var(--amber-dark);
	color:#fff;
	padding:10px 22px;
	border-radius:8px;
}

.site-nav .menu-item-highlight > a:hover{
	background:#b91f18;
	color:#fff;
}

.site-header-actions{
	display:flex;
	align-items:center;
	gap:14px;
	flex-shrink:0;
}

.site-phone{
	display:inline-flex;
	align-items:center;
	gap:8px;
	background:var(--amber);
	color:var(--ink);
	font-family:'Arial Narrow', Arial, sans-serif;
	font-weight:800;
	font-size:18px;
	letter-spacing:0.3px;
	white-space:nowrap;
	padding:11px 20px;
	border-radius:999px;
}

.site-phone-icon{
	flex-shrink:0;
}

.site-phone:hover{
	background:var(--amber-dark);
	color:#fff;
}

.menu-toggle{
	display:none;
	position:relative;
	width:42px;
	height:42px;
	padding:0;
	background:transparent;
	border:2px solid var(--ink);
	border-radius:var(--radius);
	cursor:pointer;
	flex-shrink:0;
}

.menu-toggle-bar{
	position:absolute;
	left:50%;
	width:20px;
	height:2px;
	background:var(--ink);
	transform:translateX(-50%);
	transition:transform .2s ease, opacity .2s ease, top .2s ease;
}

.menu-toggle-bar:nth-child(1){ top:14px; }
.menu-toggle-bar:nth-child(2){ top:20px; }
.menu-toggle-bar:nth-child(3){ top:26px; }

.menu-toggle.is-active .menu-toggle-bar:nth-child(1){
	top:20px;
	transform:translateX(-50%) rotate(45deg);
}

.menu-toggle.is-active .menu-toggle-bar:nth-child(2){
	opacity:0;
}

.menu-toggle.is-active .menu-toggle-bar:nth-child(3){
	top:20px;
	transform:translateX(-50%) rotate(-45deg);
}

.screen-reader-text{
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
	white-space:nowrap;
	border:0;
}

@media (max-width: 900px){
	.site-nav{
		display:none;
		position:absolute;
		top:100%;
		left:0;
		right:0;
		background:var(--paper);
		border-top:1px solid var(--line);
		box-shadow:0 16px 24px rgba(0,0,0,0.12);
		max-height:calc(100vh - 100%);
		overflow-y:auto;
		padding:10px 24px 20px;
		z-index:5;
	}

	.site-nav.is-open{
		display:block;
	}

	.site-nav ul{
		flex-direction:column;
		gap:2px;
	}

	.site-nav a{
		display:block;
		padding:12px 8px;
	}

	.menu-toggle{
		display:flex;
	}
}

@media (max-width: 480px){
	.site-phone{
		font-size:15px;
		padding:9px 14px;
		gap:6px;
	}
}

/* ---------- Page content (custom-layouts) ---------- */

.fox-section{
	max-width:var(--maxw);
	margin:0 auto;
	padding:48px 24px;
}

.fox-section.tight{ padding-top:0; }

.fox-hero{
	position:relative;
	background:var(--ink);
	color:#fff;
	overflow:hidden;
	height:clamp(440px, 56vw, 680px);
}

.fox-hero-media{
	position:absolute;
	inset:0;
	overflow:hidden;
}

.fox-hero-media img{
	position:absolute;
	top:-25%;
	left:0;
	width:100%;
	height:150%;
	object-fit:cover;
	opacity:0.85;
	display:block;
	will-change:transform;
}

.fox-hero-media::after{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(100deg, rgba(10,10,12,0.86) 0%, rgba(10,10,12,0.6) 42%, rgba(10,10,12,0.28) 100%);
	pointer-events:none;
}

@media (prefers-reduced-motion: reduce){
	.fox-hero-media img{
		top:0;
		height:100%;
	}
}

.fox-hero-copy{
	position:absolute;
	inset:0;
	display:flex;
	flex-direction:column;
	justify-content:center;
	max-width:var(--maxw);
	margin:0 auto;
	padding:0 24px;
}

.fox-hero-copy h1{
	color:#fff;
	max-width:640px;
	margin-bottom:10px;
}

.fox-hero-sub{
	color:#f1efe9;
	font-weight:500;
	font-size:17px;
	line-height:1.5;
	max-width:560px;
	margin:0 0 20px;
}

.fox-hero-trust{
	display:flex;
	flex-wrap:wrap;
	gap:10px 24px;
	margin-bottom:24px;
}

.fox-hero-trust-item{
	color:#fff;
	font-weight:600;
	font-size:14px;
	white-space:nowrap;
}

.fox-hero-actions{
	display:flex;
	flex-wrap:wrap;
	gap:14px;
}

.fox-hero .btn{
	align-self:flex-start;
}



@media (max-width:600px){
	.fox-hero-trust{
		flex-direction:column;
		gap:6px;
	}
}

.btn{
	display:inline-block;
	background:var(--amber);
	color:var(--ink);
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:0.5px;
	font-size:14px;
	padding:13px 26px;
	border-radius:var(--radius);
	border:2px solid transparent;
	cursor:pointer;
}

.btn:hover{
	background:var(--amber-dark);
	color:#fff;
}

.btn.btn-outline{
	background:transparent;
	color:#fff;
	border-color:#fff;
}

.btn.btn-outline:hover{
	background:#fff;
	color:var(--ink);
	border-color:#fff;
}

.fox-media-row{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:40px;
	align-items:center;
}

.fox-media-row img{
	width:100%;
	border-radius:var(--radius);
}

@media (max-width: 760px){
	.fox-media-row{ grid-template-columns:1fr; }
}

.fox-service-list{
	background:var(--paper-dim);
	border-radius:var(--radius);
	padding:32px;
}

/* Accordion (сennik) — чистий HTML5 details/summary, без жодного JS */
.fox-accordion details{
	border-bottom:1px solid var(--line);
}

.fox-accordion summary{
	cursor:pointer;
	padding:16px 4px;
	font-weight:700;
	list-style:none;
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:12px;
}

.fox-accordion summary::-webkit-details-marker{ display:none; }

.fox-accordion summary::after{
	content:"+";
	font-size:22px;
	color:var(--amber);
	flex-shrink:0;
}

.fox-accordion details[open] summary::after{
	content:"–";
}

.fox-accordion .accordion-body{
	padding:0 4px 18px;
	color:var(--ink-soft);
}

/* Tables (wypożyczalnia) */
.fox-table-wrap{
	overflow-x:auto;
}

table.fox-table{
	width:100%;
	border-collapse:collapse;
	font-size:15px;
}

table.fox-table th,
table.fox-table td{
	padding:10px 12px;
	border-bottom:1px solid var(--line);
	text-align:left;
	white-space:nowrap;
}

table.fox-table th{
	background:var(--ink);
	color:#fff;
	text-transform:uppercase;
	font-size:12px;
	letter-spacing:0.5px;
}

table.fox-table tr:nth-child(even){
	background:var(--paper-dim);
}

/* ---------- Footer ---------- */

.site-footer{
	background:var(--ink);
	color:#d9d8d5;
	margin-top:40px;
}

.footer-contact{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:32px;
	padding-top:44px;
	padding-bottom:12px;
}

.footer-contact h3{
	color:var(--amber);
}

.footer-contact a{
	color:#fff;
}

.footer-label{
	margin-bottom:4px;
	color:#9a9894;
	font-size:13px;
	text-transform:uppercase;
	letter-spacing:0.5px;
}

.footer-hours{
	list-style:none;
	margin:0;
	padding:0;
}

.footer-hours li{
	display:flex;
	align-items:baseline;
	gap:16px;
	margin-bottom:6px;
	color:#fff;
	font-weight:700;
	font-size:14px;
}

.footer-hours-day{
	min-width:64px;
}

.footer-hours-time{
	color:var(--amber);
}

.footer-phones{
	list-style:none;
	margin:0 0 16px;
	padding:0;
}

.footer-phones li{
	margin-bottom:6px;
}

.footer-phones a{
	display:inline-flex;
	align-items:center;
	gap:8px;
}

.footer-phones svg{
	flex-shrink:0;
	color:var(--amber);
}

.footer-mail-link{
	display:inline-flex;
	align-items:center;
	gap:8px;
}

.footer-mail-link svg{
	flex-shrink:0;
	color:var(--amber);
}

.footer-social{
	display:flex;
	gap:10px;
	margin-top:16px;
}

.footer-social-link{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:34px;
	height:34px;
	border:1px solid #3a3b3d;
	border-radius:50%;
	color:#fff;
}

.footer-social-link:hover{
	background:var(--amber);
	border-color:var(--amber);
	color:var(--ink);
}

.footer-services{
	list-style:none;
	margin:0;
	padding:0;
}

.footer-services li{
	margin-bottom:6px;
}

.footer-services a:hover{
	color:var(--amber);
}

@media (max-width: 760px){
	.footer-contact{ grid-template-columns:1fr; }
}

.site-footer-bottom{
	max-width:var(--maxw);
	margin-left:auto;
	margin-right:auto;
	padding-left:24px;
	padding-right:24px;
	padding-top:16px;
	padding-bottom:24px;
	border-top:1px solid #37383a;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:center;
	gap:6px 24px;
	font-size:13px;
	color:#8b8a86;
}

.site-footer-copy{
	margin:0;
}

.site-footer-credit{
	margin:0;
}

.site-footer-bottom a{
	color:#b7b5b1;
}

.site-footer-bottom a:hover{
	color:var(--amber);
}

.footer-legal-links{
	margin-left:6px;
}

.footer-legal-links a{
	margin:0 4px;
}

.footer-legal-links span{
	color:#5b5a57;
}

a.footer-credit-link{
	color:var(--amber);
	font-weight:700;
}

a.footer-credit-link:hover{
	color:#fff;
}

@media (max-width: 760px){
	.site-footer-bottom{
		flex-direction:column;
		align-items:center;
		text-align:center;
		gap:10px;
	}

	.footer-legal-links{
		margin-left:0;
		display:block;
		margin-top:6px;
	}
}

/* ---------- Scroll to top ---------- */

.scroll-top-btn{
	position:fixed;
	right:24px;
	bottom:24px;
	z-index:900;
	width:48px;
	height:48px;
	border:none;
	border-radius:50%;
	background:var(--amber);
	color:var(--ink);
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	box-shadow:0 6px 16px rgba(0,0,0,0.25);
	opacity:0;
	pointer-events:none;
	transition:opacity .15s ease, background .2s ease, color .2s ease;
}

.scroll-top-btn:hover{
	background:var(--amber-dark);
	color:#fff;
}

@media (max-width: 480px){
	.scroll-top-btn{
		right:16px;
		bottom:16px;
		width:42px;
		height:42px;
	}
}

/* ====================================================
   Плавна поява контенту при скролі (fade up)
   Клас .reveal-up додається лише через JS — якщо JS
   не спрацює, контент завжди лишається видимим одразу.
   ==================================================== */

.reveal-up{
	opacity:0;
	transform:translateY(28px);
	transition:opacity 0.7s ease, transform 0.7s ease;
}

.reveal-up.is-visible{
	opacity:1;
	transform:translateY(0);
}

@media (prefers-reduced-motion: reduce){
	.reveal-up{
		opacity:1;
		transform:none;
		transition:none;
	}
}