*, *::before, *::after {
	box-sizing: border-box;
	-webkit-appearance: none;
	-moz-appearance: none;
	-webkit-overflow-scrolling: touch;
	text-decoration-thickness: 1px !important;
	text-underline-offset: .25em !important;
}

html {
	font-size: 0.0625vw;
	background-color: var(--c0);
	scroll-behavior: smooth;
}

:root {
	--c0: #FFFFFF;
	--c1: #F8FAF0;
	--c3: #171717;
	--c4: #2E3C29;
	--c5: #EBA41C;
}

body {
	font-size: max(14px, 20rem);
	font-family: "Inter", sans-serif;
	color: var(--c3);
}

a, address, b, blockquote, body, button, dd, div, dl, dt, em, fieldset, figure, form, h1, h2, h3, h4, h5, hr, html, i, input, ins, legend, li, mark, menu, ol, p, strong, td, textarea, th, var, video, ul {
	margin: 0;
	padding: 0;
	outline: none;
	text-decoration: none;
	font-style: inherit;
	font-weight: inherit;
	text-align: inherit;
	color: inherit;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Oranienbaum", serif;
	line-height: 1;
}

h1 {
	font-size: max(36px, 97rem);
}

h2 {
	font-size: max(32px, 52rem);
}

h3 {
	font-size: max(24px, 40rem);
}

h4 {
	font-size: max(18px, 32rem);
	color: var(--c4);
}

p {
	font-family: "Inter", sans-serif;
}

.fill::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

body > svg {
	position: absolute;
}

.site-header {
	background-color: var(--c1);
	z-index: 99999;
	position: relative;
}

.wrapper {
	padding: 0 max(20px, 100rem);
	margin: 0 auto;
}

svg, symbol {
	overflow: visible;
	fill: currentColor;
}

.preloader {
	position: fixed;
	inset: 0;
	background: #F8FAF0;
	z-index: 999999;
	transform: translateY(0);
	transition: transform .8s cubic-bezier(.22,.61,.36,1);
}
.preloader.is-done { transform: translateY(-100%); }

.preloader__counter {
	position: absolute;
	right: clamp(12px, 2.2vw, 28px);
	bottom: clamp(12px, 2.2vw, 28px);
	font-family: "Oranienbaum", serif;
	font-size: max(60px, 100rem);
	user-select: none;
}

.popup-menu .menu-container[hidden],
.popup-menu .opt-product[hidden] { display:none !important; }

.opt-product {
	display: flex;
	height: 100%;
	margin: max(20px, 200rem) 0;
}

.start-popup {
	flex: 1.2;
}

.opt-form {
	flex: .8;
	margin-left: max(20px, 100rem);
}

.title-popup h3 span {
	color: var(--c5);
}

.body-popup {
	margin-top: max(20px, 30rem);
}

.body-popup p, .body-popup ul {
	margin-bottom: 1em;
}

.body-popup h4 {
	margin-bottom: .5em;
}

.body-popup li {
	margin-left: 1.2em;
}

.popup-close {
	position: absolute;
	top: 60px;
	right: 60px;
	width: 50px;
	height: 50px;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	background-color: transparent;
	border: none;
}

.popup-close span {
	width: 100%;
	height: 1px;
	display: block;
	background-color: var(--c3);
	position: absolute;
	left: 0;
	transition: transform .35s 
		ease, top .35s 
		ease, bottom .35s 
		ease, opacity .25s 
		ease;
	transform-origin: 50% 50%;
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
}

.popup-close span:nth-child(2) {
	bottom: auto;
	top: 50%;
	transform: translateY(-50%) rotate(-45deg);
}

html.preloader-lock, body.preloader-lock { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.preloader { transition: none; }
}

.icon {
	display: flex;
	max-height: 100%;
	align-items: center;
	justify-content: center;
	line-height: 0;
	max-width: 100%;
	width: auto;
	height: auto;
}

.header-container {
	padding: 20px 0;
	border-bottom: 1px solid var(--c3);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.menu{width:50px;height:50px;position:relative;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;}
.menu span{width:100%;height:1px;display:block;background-color:var(--c3);position:absolute;left:0;
	transition:transform .35s ease, top .35s ease, bottom .35s ease, opacity .25s ease;transform-origin:50% 50%;}
.menu span:nth-child(1){top:14px;}
.menu span:nth-child(2){bottom:14px;}
.menu.is-open span:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg);}
.menu.is-open span:nth-child(2){bottom:auto;top:50%;transform:translateY(-50%) rotate(-45deg);}

/* Popup у footer */
.popup-menu {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	height: 100vh;
	transform: translateY(-100%);
	transition: transform .45s cubic-bezier(.2, .7, .2, 1);
	background: var(--c1);
	z-index: 9999;
	will-change: transform;
}
.popup-menu.is-open{ transform:translateY(0); }

.popup-menu .wrapper {
	height: 100%;
}
.menu-container {
	padding-top: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}
.menu-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
.menu-list a {
	display: block;
	font-family: 'Oranienbaum', sans-serif;
	font-size: max(36px, 60rem);
	text-align: center;
	text-transform: uppercase;
	transition: opacity .2s 
		ease, transform .25s 
		ease;
}
.menu-list a:hover{opacity:.85;transform:translateX(4px);}

/* Блокування скролу під попапом */
html.menu-open, body.menu-open{overflow:hidden;}


.cover, .contain {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-position: center;
	pointer-events: none;
}

.cover {
	object-fit: cover;
}

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

.btn {
	font-size: max(16px, 18rem);
	padding: max(14px, 18rem) max(28px, 44rem);
	border-radius: max(13px, 20rem);
	display: inline-flex;
	overflow: hidden;
	position: relative;
}

.btn-primary {
	background-color: var(--c4);
	color: var(--c0);
}

.button-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: center;
	position: relative;
	z-index: 2;
	min-width: 0;
	padding: 0 .1em;
}

.btn-primary:hover {
	background-color: rgba(0, 0, 0, 0);
	transition-delay: .5s;
}

.btn:hover .bubble::before {
	transform: scale(1);
}

.btn .button-text {
	transition: color .5s 0s;
}

.btn-primary:hover .button-text, .btn-secondary:hover .button-text {
	color: var(--c0);
	transition-delay: 0s;
}

.btn-secondary {
	border: 1px solid var(--c4);
	color: var(--c4);
}

.section {
	position: relative;
	margin-top: max(50px, 170rem);
}

.section:first-child {
	margin-top: 0;
}

.animation {
	z-index: 2;
	position: relative;
}

.animation span {
	position: relative;
	white-space: nowrap;
	font-weight: inherit;
}

.animation span:before {
	content: "";
	position: absolute;
	bottom: .2em;
	left: 0;
	width: 100%;
	height: .1em;
	background-color: var(--c5);
	z-index: -1;
	transform: scaleX(0);
	transform-origin: left bottom;
	will-change: transform;
	transition: transform 2s .5s;
}

.animation.active span::before{
	transform: scaleX(1);        
}


input {
	border: 1px solid;
	min-height: max(30px, 50rem);
	border-radius: 10px;
	padding: 10px max(10px, 20rem);
	width: 100%;
}

@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {

	.bubble {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		width: 220%;
		display: flex;
		align-items: center;
		justify-content: center;
		aspect-ratio: 1 / 1;
		transform: translate(-50%, -50%);
		pointer-events: none;
	}

	.btn-primary .bubble::before {
		content: "";
		flex: none;
		transform: scale(0);
		background-color: var(--c5);
		width: 100%;
		border-radius: 50%;
		transition: transform .5s ease-out;
		will-change: transform;
		height: 100%;
	}

	.btn-secondary .bubble::before {
		content: "";
		flex: none;
		transform: scale(0);
		background-color: var(--c4);
		width: 100%;
		border-radius: 50%;
		transition: transform .5s ease-out;
		will-change: transform;
		height: 100%;
	}

	.btn {
		transition: background-color .1s 0s;
	}

}

@media (prefers-reduced-motion: reduce){
	.animation span::before{
		transition: none;
		transform: none;
	}
}

.s0 {
	padding: max(20px, 100rem) 0 0;
	background: linear-gradient(to bottom, #F8FAF0 80%, transparent 80%);
}

.s0-1 {
	text-align: center;
	margin-bottom: max(20px, 50rem);
}

.section.s0 .s0_1 { position: relative; min-height: clamp(480px, 72vh, 920px); }

.s0-2 {
	display: flex;
	justify-content: center;
	gap: max(16px, 20rem);
	margin-bottom: max(20px, 50rem);
}

.s0-3 {
	position: relative;
	border-radius: 50rem;
	overflow: hidden;
}

.s1-2 {
	text-align: center;
}

.s1-3 {
	margin-top: max(20px, 50rem);
	display: flex;
	gap: 20px;
}

.s1-4 {
	flex: 1;
	background-color: var(--c1);
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: max(20px, 50rem) max(10px, 20rem);
}

.s1-5 {
	font-family: 'Oranienbaum';
	font-size: max(32px, 52rem);
	margin-bottom: max(10px, 16rem);
}

.s1-6 {
	text-transform: uppercase;
	font-family: 'Oranienbaum';
	font-weight: 600;
	color: var(--c4);
	font-size: max(24px, 32rem);
}

.s1-7 {
	text-transform: uppercase;
	font-size: max(18px, 20rem);
}

.s2-2 {
	text-align: center;
}

.s2-3 {
	display: flex;
	margin-top: max(20px, 50rem);
	gap: max(20px, 40rem);
}

.s2-4 {
	flex: 1;
	border: 1px solid var(--c4);
	border-radius: max(20px, 30rem);
	padding: max(10px, 20rem) max(10px, 20rem) max(10px, 120rem);
	position: relative;
}

.s2-4 {
	opacity: 0;
	transform: translateY(22px);
	transition:
		opacity .5s ease,
		transform .6s cubic-bezier(.18,.67,.15,1.01);
}
.s2-4.card-on {
	opacity: 1;
	transform: translateY(0);
}

.s2-4 img {
	display:block; width:100%; height:auto;
	clip-path: inset(100% 0 0 0);
	transition: clip-path .8s cubic-bezier(.18,.67,.15,1.01);
}
.s2-4 .wrapper-label,
.s2-4 .s2-7,  /* h3 */
.s2-4 .s2-8,  /* p  */
.s2-4 .s2-9 { /* btn wrap */
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity .45s ease,
		transform .55s cubic-bezier(.18,.67,.15,1.01);
}

/* кроки таймлайна всередині картки */
.s2-4.step-img   img        { clip-path: inset(0 0 0 0); }
.s2-4.step-label .wrapper-label { opacity:1; transform: translateY(0); }
.s2-4.step-title .s2-7      { opacity:1; transform: translateY(0); }
.s2-4.step-desc  .s2-8      { opacity:1; transform: translateY(0); }
.s2-4.step-btn   .s2-9      { opacity:1; transform: translateY(0); }


.s2-5 {
	position: relative;
	overflow: hidden;
	border-radius: 20px;
	background-color: var(--c1);
}

.s2-5 img {
	min-height: 300rem;
	object-fit: cover;
}

.wrapper-label {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	gap: max(5px, 10rem);
}

.wrapper-label span {
	background-color: var(--c4);
	color: var(--c0);
	padding: max(5px, 10rem) max(10px, 10rem);
	border-radius: 14px;
	font-size: max(12px, 16rem);
}

.s2-6 {
	margin-top: max(20px, 20rem);
}

.s2-8 {
	margin-top: max(10px, 16rem);
}

.s3-2 {
	text-align: center;
}

.s3-3 {
	display: flex;
	margin-top: max(20px, 50rem);
	gap: max(20px, 20rem);
}

.s3-4 {
	flex: 1;
	background-color: var(--c1);
	border-radius: max(10px, 30rem);
	padding: max(10px, 20rem);
}

/* s3: поява картки */
.s3-4{
	opacity:0; transform: translateY(22px);
	transition: opacity .5s ease, transform .6s cubic-bezier(.18,.67,.15,1.01);
}
.s3-4.card-on{ opacity:1; transform: translateY(0); }

/* початкові стани внутрішніх елементів */
.s3-6 img{
	display:block; width:100%; height:auto;
	clip-path: inset(100% 0 0 0);
	transition: clip-path .8s cubic-bezier(.18,.67,.15,1.01);
}
.s3-7, .s3-9, .s3-10, .s3-11{
	opacity:0; transform: translateY(16px);
	transition: opacity .45s ease, transform .55s cubic-bezier(.18,.67,.15,1.01);
}

.s3-4.step-img   .s3-6 img { clip-path: inset(0 0 0 0); }
.s3-4.step-num   .s3-7     { opacity:1; transform: translateY(0); }
.s3-4.step-title .s3-9     { opacity:1; transform: translateY(0); }
.s3-4.step-desc  .s3-10    { opacity:1; transform: translateY(0); }
.s3-4.step-btn   .s3-11    { opacity:1; transform: translateY(0); }


.s3-5 {
	display: flex;
}

.s3-6 {
	position: relative;
	flex: 1.3;
	overflow: hidden;
	border-radius: max(6px, 20rem);
}

.s3-6 img {
	width: 100%;
	height: auto;
}

.s3-7 {
	flex: 0.7;
	text-align: end;
	font-family: 'Oranienbaum', sans-serif;
	font-size: max(24px, 40rem);
}

.s3-8 {
	margin-top: max(10px, 20rem);
}

.s3-9, .s3-10 {
	font-family: 'Oranienbaum', sans-serif;
	font-size: max(24px, 32rem);
}

.s3-10 {
	color: var(--c4);
}

.s3-11 {
	margin-top: max(16px, 20rem);
}

.s4-2 {
	text-align: center;
}

.s4-3 {
	margin-top: max(20px, 50rem);
	display: flex;
	gap: max(20px, 60rem);
}

.s4-4, .s4-5 {
	flex: 1;
}

.s4-4 {
	border-radius: max(10px, 30rem);
	overflow: hidden;
}

.s4-6 {
	background-color: var(--c1);
	border-radius: 10px;
	padding: 20px;
	overflow: hidden;
}

.s4-6:not(:first-child) {
	margin-top: max(20px, 30rem);
}

.s4-7 {
	position: relative;
	cursor: pointer;
}

.s4-8 {
	font-family: 'Oranienbaum', sans-serif;
	font-size: max(18px, 32rem);
}

.s4-9 {
	position: absolute;
	top: 2px;
	right: 0;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--c4);
	border-radius: 5px;
	cursor:pointer;
	transition:transform .35s ease;
}

.s4-6.is-open .s4-9 .icon {
	transform:rotate(180deg);
}

.s4-9 svg {
	padding: 6px;
	line-height: 1;
}

.is-open .s4-10 {
	padding-top: max(10px, 20rem);
	border-top: 1px solid;
	margin-top: max(10px, 20rem);
}

.section.s4 .s4-6 {
	--delay: 0ms;
	--dur: 600ms;
	--easing: cubic-bezier(.2,.7,.2,1);

	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity var(--dur) var(--easing) var(--delay),
		transform var(--dur) var(--easing) var(--delay);
	will-change: opacity, transform;
}

.section.s4 .s4-6.is-visible {
	opacity:1;
	transform:none;
}

.s4-10 {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .45s ease;
}

.s4-10 span {
	color: var(--c5);
}

.s4-10__inner {
	overflow: hidden;
}

.s4-6.is-open .s4-10 {
	grid-template-rows: 1fr; 
}

@media (prefers-reduced-motion: reduce){
	.s4-10{transition:none !important}
}

.s5-2 {
	text-align: center;
	display: flex;
	justify-content: center;
}

.s5-2 h2::before {
	content: '';
	display: inline-block;
	width: max(20px, 50rem);
	height: max(20px, 50rem);
	background: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'><path d='M50 25L42.7812 24.8356C39.155 24.7523 35.7952 23.6016 33.0028 21.6863C33.6224 18.3561 35.1837 15.1666 37.6897 12.5439L42.677 7.32298L37.4569 12.3103C34.8334 14.8163 31.6439 16.3768 28.3145 16.9972C26.3984 14.2048 25.2477 10.8442 25.1651 7.21883L25 0L24.8349 7.21883C24.7523 10.8442 23.6016 14.2048 21.6863 16.9972C18.3561 16.3768 15.1659 14.8163 12.5439 12.3103L7.32224 7.32224L12.3103 12.5431C14.8163 15.1666 16.3768 18.3561 16.9972 21.6863C14.2041 23.6016 10.845 24.7523 7.21884 24.8356L0 25L7.21884 25.1644C10.845 25.2477 14.2041 26.3984 16.9972 28.3137C16.3768 31.6439 14.8163 34.8334 12.3103 37.4561L7.32224 42.6778L12.5439 37.6897C15.1659 35.1837 18.3561 33.6232 21.6863 33.0028C23.6016 35.7952 24.7523 39.155 24.8349 42.7812L25 50L25.1651 42.7812C25.2477 39.155 26.3984 35.7952 28.3145 33.0028C31.6439 33.6232 34.8334 35.1837 37.4569 37.6897L42.677 42.6778L37.6897 37.4569C35.1837 34.8334 33.6224 31.6439 33.0028 28.3137C35.7952 26.3984 39.155 25.2477 42.7812 25.1644L50 25Z' fill='%232E3C29'/></svg>");
}

.s5-2 h2 {
	display: flex;
	align-items: center;
}

.s5-3 {
	display: flex;
	gap: max(20px, 50rem);
	margin-top: max(20px, 50rem);
}

.s5-4, .s5-6, .s5-7 {
	flex: 1;
}

.s5-4 img, .s5-7 img {
	margin: max(20px, 30rem) 0;
	border-radius: 20px;
}

.s5-5 p:not(:first-child) {
	padding-top: 16px;
}

.s5-6 img {
	height: 100%;
	object-fit: cover;
	border-radius: 20px;
}

/* поява блоків */
.s5-4, .s5-6, .s5-7 {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .5s ease, transform .6s cubic-bezier(.18,.67,.15,1.01);
}
.s5-4.card-on, .s5-6.card-on, .s5-7.card-on {
	opacity: 1;
	transform: translateY(0);
}

/* початкові стани всередині */
.s5-4 h4, .s5-4 .s5-5,
.s5-7 .s5-8, .s5-7 .s5-9 {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .45s ease, transform .55s cubic-bezier(.18,.67,.15,1.01);
}

.s5-4 img,
.s5-6 img,
.s5-7 > img {
	display:block; width:100%; height:auto;
	clip-path: inset(100% 0 0 0);
	transition: clip-path .8s cubic-bezier(.18,.67,.15,1.01);
}

/* кроки таймлайна */
.s5-4.step-title h4 { opacity:1; transform: translateY(0); }
.s5-4.step-img   img { clip-path: inset(0 0 0 0); }
.s5-4.step-text  .s5-5 { opacity:1; transform: translateY(0); }

.s5-6.step-img   img { clip-path: inset(0 0 0 0); }

.s5-7.step-text  .s5-8 { opacity:1; transform: translateY(0); }
.s5-7.step-img   > img { clip-path: inset(0 0 0 0); }
.s5-7.step-title .s5-9 h4 { opacity:1; transform: translateY(0); }
.s5-7.step-list  .s5-9 { opacity:1; transform: translateY(0); }


.s5-9 h4 {
	padding-bottom: 16px;
}

.s5-9 ul li {
	margin-left: 1.2em;
	list-style-type: disc;
}

.s6-2 {
	position: relative;
}

.s6-2 img {
	border-radius: max(20px, 50rem);
}

.s6-3 {
	display: flex;
}

.s6-4 {
	flex: 1.2;
	margin-top: max(10px, 30rem);
}

.s6-4 span {
	color: var(--c5);
}

.s6-5 {
	flex: 0.8;
	display: flex;
	justify-content: flex-end;
	position: relative;
}

.s6-6 {
	background-color: var(--c0);
	padding: max(20px, 30rem);
	border-radius: 20px;
	position: absolute;
	bottom: 0;
	border: 1px solid;
}

.section.s6 .s6-2 img {
	display: block;
	width: 100%;
	height: auto;
	clip-path: inset(100% 0 0 0);
	transition: clip-path .9s cubic-bezier(.18, .67, .15, 1.01);
	will-change: clip-path;
	max-height: 600rem;
	object-fit: cover;
}

.section.s6 .s6-4 h2,
.section.s6 .s6-4 h2 span,
.section.s6 .s6-7 h3,
.section.s6 .s6-5,
.section.s6 .s6-5 .wpcf7{
	opacity:0; transform: translateY(18px);
	transition: opacity .5s ease, transform .6s cubic-bezier(.18,.67,.15,1.01);
	will-change: opacity, transform;
}

/* Кроки таймлайна — вішатимемо КЛАСИ на .section.s6 */
.section.s6.ready.step-img   .s6-2 img       { clip-path: inset(0 0 0 0); }
.section.s6.ready.step-title .s6-4 h2        { opacity:1; transform: translateY(0); }
.section.s6.ready.step-sub   .s6-4 h2 span   { opacity:1; transform: translateY(0); }
.section.s6.ready.step-h3    .s6-7 h3        { opacity:1; transform: translateY(0); }
.section.s6.ready.step-form  .s6-5           { opacity:1; transform: translateY(0); }
.section.s6.ready.step-form2 .s6-5 .wpcf7    { opacity:1; transform: translateY(0); }

/* опційно: повага до reduce motion */
@media (prefers-reduced-motion: reduce){
	.section.s6 .s6-2 img{ transition:none; clip-path: inset(0 0 0 0); }
	.section.s6 .s6-4 h2,
	.section.s6 .s6-4 h2 span,
	.section.s6 .s6-7 h3,
	.section.s6 .s6-5,
	.section.s6 .s6-5 .wpcf7{ transition:none; opacity:1; transform:none; }
}



.s6-7 {
	margin-bottom: max(10px, 20rem);
}

form p:not(:first-child) {
	padding-bottom: max(7px, 20rem);
}

.button-form {
	margin-top: max(5px, 10rem);
}

.section:last-child {
	margin-bottom: max(50px, 150rem);
}

.footer {
	background-color: var(--c1);
	padding: max(20px, 50rem) 0;
}

.footer-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.footer-menu ul {
	display: flex;
}

.footer-menu ul li:not(:first-child) {
	padding-left: max(0px, 16rem);
}

.footer-menu ul li {
	list-style: none;
}

.footer-social {
	display: flex;
	align-items: center;
}

.footer-social a:not(:first-child) {
	margin-left: max(0px, 16rem);
}

.footer-social a svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-height: 30px;
	max-width: 30px;
	width: 100%;
	height: 100%;
}

.footer-container__end {
	margin-top: max(20px, 50rem);
	padding-top: max(20px, 50rem);
	border-top: 1px solid;
	display: flex;
	justify-content: space-between;
}

.footer-menu ul li a {
	transition: background-size .5s, color .5s;
	background-size: 0 max(1px, 1rem);
	background-repeat: no-repeat;
	background-position: right bottom;
	background-image: linear-gradient(currentColor, currentColor);
}

.footer-menu ul li a:hover {
	background-size: 100% max(1px, 1rem);
	background-position: left bottom;
	color: var(--c3);
}

.footer-link_social {
	width: max(30px, 50rem);
	height: max(30px, 50rem);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .25s;
	padding: max(5px, 18rem);
	border: 1px solid #000000;
	border-radius: 12rem;
	position: relative;
}

.footer-link_social:hover {
	background-color: var(--c4);
	color: var(--c0);
	border-color: rgba(0, 0, 0, 0);
	transition: all .25s;
}

.footer-social a:hover svg path {
	fill: var(--c1);
	transition: all .25s;
}

/* ===== Reveal base (як було) ===== */
.reveal-up,
.reveal-img { --delay: 0ms; }

.reveal-up {
	opacity: 0;
	transform: translateY(28px);
	transition:
		transform .8s cubic-bezier(.18,.67,.15,1.01) var(--delay),
		opacity   .6s ease var(--delay);
	will-change: transform, opacity;
}
.reveal-up.is-visible { opacity: 1; transform: translateY(0); }

/* Прогрес-відкриття */
.reveal-img-progress {
	position: relative;
	overflow: hidden;
	background: #fff;
	--p-num: 0;                 /* 0..100 */
	isolation: isolate;         /* свій стек для коректних z-index */
}

.reveal-img-progress img {
	display: block;
	width: 100%;
	height: auto;
	position: relative;
	z-index: 0;                 /* картинка під шторкою */
}

/* Біла шторка поверх зображення */
.reveal-img-progress::before {
	content: "";
	position: absolute; inset: 0;
	background: #fff;
	transform: translateY(calc(-1% * var(--p-num)));
	transition: transform .12s linear;
	will-change: transform;
	z-index: 2;                 /* ВАЖЛИВО: поверх img */
}

/* Рухома тонка лінія (над шторкою) */
.reveal-img-progress::after {
	content: "";
	position: absolute; left: 0; right: 0;
	bottom: calc(1% * var(--p-num));
	height: 2px;
	background: rgba(0,0,0,.12);
	pointer-events: none;
	z-index: 3;                 /* над шторкою */
}

/* Опційна сітка 20% */
.reveal-img-progress.with-grid::before {
	background:
		linear-gradient(#fff, #fff),
		repeating-linear-gradient(to top, rgba(0,0,0,.1) 0 1px, transparent 1px 20%);
}

.reveal-img-progress.wipe-hidden::before { transform: translateY(0) !important; }
.reveal-img-progress.wipe-hidden::after  { bottom: 0 !important; }

/* Кліп-анімація зображення без фону (—p-num: 0..100) */
.reveal-img-clip { position: relative; overflow: hidden; --p-num: 0; }
.reveal-img-clip img {
	display: block;
	width: 100%;
	height: auto;
	will-change: clip-path;
	max-height: 800rem;
	object-fit: cover;
}

/* Напрямки */
.reveal-img-clip.dir-bu img { clip-path: inset(calc(100% - var(--p-num) * 1%) 0 0 0); } /* bottom → up */
.reveal-img-clip.dir-td img { clip-path: inset(0 0 calc(100% - var(--p-num) * 1%) 0); } /* top → down */

/* Замок до старту анімації */
.reveal-img-clip.wipe-hidden.dir-bu img { clip-path: inset(100% 0 0 0) !important; }
.reveal-img-clip.wipe-hidden.dir-td img { clip-path: inset(0 0 100% 0) !important; }


@media (prefers-reduced-motion: reduce) {
	.reveal-up { transition: none; transform: none; opacity: 1; }
	.reveal-img-progress::before { transition: none; transform: translateY(-100%); }
	.reveal-img-progress::after { display: none; }
}


@media (min-width: 1024px) {
	.s2-9 {
		position: absolute;
		bottom: max(10px, 20rem);
	}
}

@media (max-width:1024px) {

	.menu {
		width: max(30px, 50rem);
		height: max(30px, 50rem);
	}

	.menu span:nth-child(1) {
		top: 7px;
	}

	.menu span:nth-child(2) {
		bottom: 7px;
	}

	.btn.btn-secondary {
		display: none;
	}

	.section.s0 .s0_1 {
		min-height: auto; 
		display: flex;
		flex-direction: column;
	}

	.s0 {    
		background: var(--c1);
		padding-bottom: 35px;
		border-radius: 0 0 20px 20px;
	}

	.s0-1 {
		order: 1;
	}

	.s0-2 {
		order: 3;
		margin-top: 20px;
	}

	.s0-3 {
		order: 2;
	}



	.s1-2 {
		display: none;
	}

	.s1-3 {
		flex-direction: column;
	}

	.s1-7 {
		text-align: center;
	}

	.s2-3 {
		flex-direction: column;
	}

	.s2-4 {
		padding-bottom: max(10px, 20rem);
	}

	.s2-9 {
		margin-top: max(10px, 16rem);
	}


	.s3 {
		overflow: hidden;
	}

	.s3-3 .slick-list {
		overflow: visible;
	}

	.s3-4:not(:first-child) {
		margin-left: 16px;
	}

	.s3-5 {
		display: flex;
		flex-direction: column-reverse;
		gap: 10px;
	}

	.s3-7 {
		text-align: start;
	}

	.s4-3 {
		flex-direction: column;
	}

	.s4-4 img {
		max-height: 200px;
		object-fit: cover;
	}

	.s4-9 {
		top: 3px;
		width: 20px;
		height: 20px;
		border-radius: 2px;
	}

	.s5-6 {
		order: 1;
		display: none;
	}

	.s5-4 {
		order: 2;
	}

	.s5-7 {
		order: 2;
	}

	.s5-3 {
		flex-direction: column;
	}

	.s6-2 {
		margin-bottom: 20px;
	}

	.s6-2 img {
		border-radius: 10px;
	}

	.s6-3 {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.s6-4 {
		flex: none;
	}

	.s6-5 {
		flex: none;
	}

	.s6-6 {
		position: relative;
	}

	.footer-container {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.footer-menu {
		padding: 20px 0;
		border-top: 1px solid;
		border-bottom: 1px solid;
		width: 100%;
		margin: 20px 0;
	}

	.footer-menu ul {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.footer-menu ul li:not(:first-child) {
		padding-left: 0;
	}

	.footer-menu ul li a {
		font-size: 18px;
	}

	.footer-social a svg {
		max-height: 20px;
		max-width: 20px;
	}

	.opt-product {
		flex-direction: column;
	}

	.start-popup {
		flex: none;
	}

	.opt-form {
		flex: none;
		margin-left: 0;
		margin-top: 20px;
	}

	.popup-close {
		top: 20px;
		right: 20px;
		width: 30px;
		height: 30px;
	}

	.mode-opt .wrapper {
		position: relative:
	}

	.mode-opt .wrapper {
		overflow: hidden;
		overflow-y: scroll;
		margin-bottom: 150px;
	}


}