/* =========================================================
   FONTS
========================================================= */

@font-face {
	font-family: "Inter";
	src: url("../fonts/Inter-VariableFont_opszwght.ttf") format("truetype");
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
}

@font-face {
	font-family: "PlayfairDisplay";
	src: url("../fonts/PlayfairDisplay-VariableFont_wght.ttf") format("truetype");
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
}


/* =========================================================
   ROOT
========================================================= */

:root {
	--font-heading: "PlayfairDisplay", Georgia, serif;
	--font-body: "Inter", Arial, Helvetica, sans-serif;

	--color-text: #2d2725;
	--color-muted: #7c736a;

	--color-background: #f4f0eb;

	--color-primary: #c5b087;
	--color-primary-alpha: rgba(197, 176, 135, 0.9);

	--color-hours-background: #e6e6e6;
	--color-hours-border: rgba(197, 176, 135, 0.9);

	--text-4xl: clamp(
		1.8rem,
		calc(4.19vw + 0.96rem),
		4.74rem
	);

	--text-l: clamp(
		1.13rem,
		calc(0.54vw + 1.02rem),
		1.5rem
	);

	--text-m: clamp(
		1rem,
		calc(0.18vw + 0.96rem),
		1.13rem
	);

	--space-s: clamp(
		0.8rem,
		calc(0.63vw + 0.68rem),
		1.24rem
	);

	--space-m: clamp(
		1rem,
		calc(1.07vw + 0.79rem),
		1.75rem
	);

	--space-l: clamp(
		1.25rem,
		calc(1.75vw + 0.9rem),
		2.47rem
	);

	--space-xl: clamp(
		1.56rem,
		calc(2.77vw + 1.01rem),
		3.5rem
	);

	--text-3xl: clamp(
		1.6rem,
		calc(2.79vw + 1.04rem),
		3.55rem
	);

	--text-s: clamp(
		0.89rem,
		calc(-0.06vw + 0.9rem),
		0.84rem
	);

	--text-xl: clamp(
		1.27rem,
		calc(1.05vw + 1.06rem),
		2rem
	);

	--space-2xl: clamp(
		1.95rem,
		calc(4.28vw + 1.1rem),
		4.95rem
	);

	--color-card: #ffffff;
	--color-muted-soft: #ebe6e0;
}


/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
	background-color: #fcfbf8;
}

body {
	margin: 0;
	min-width: 320px;

	background: transparent;

	color: var(--color-text);

	font-family: var(--font-body);
	font-weight: 400;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

body.menu-open {
	overflow: hidden;
}

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

a {
	color: inherit;
	text-decoration: none;
}

button,
input,
textarea,
select {
	font: inherit;
}

button {
	margin: 0;
	padding: 0;

	border: 0;
	background: none;

	color: inherit;
	cursor: pointer;
}

ul,
ol {
	margin: 0;
	padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
	margin-top: 0;
}


/* =========================================================
   GLOBAL LAYOUT
========================================================= */

.site-main {
	min-height: 60vh;
}


/* =========================================================
   HEADER
========================================================= */

.site-header {
	position: sticky;
	z-index: 998;
	top: 0;

	width: 100%;

	background: var(--color-background);

	color: var(--color-text);

	isolation: isolate;

	transition:
		background-color 0.2s,
		transform 0.4s;
}


/* =========================================================
   IOS / IN-APP BROWSER TOP COVER
========================================================= */

.site-header::before {
	content: "";

	position: absolute;

	left: 0;
	right: 0;
	bottom: 100%;

	height:
		calc(
			120px +
			env(safe-area-inset-top, 0px)
		);

	background: var(--color-background);

	pointer-events: none;
}


/* =========================================================
   HEADER INNER
========================================================= */

.site-header__inner {
	position: relative;
	display: grid;
	grid-template-columns: 40% 60%;
	align-items: center;

	width: 100%;

	padding: 19.84px 28px;

	background: rgb(244, 240, 235);

	box-shadow: none;

	transition:
		background-color 0.2s,
		transform 0.4s;
}


/* =========================================================
   HEADER — SCROLLING STATE
========================================================= */

.site-header.scrolling .site-header__inner {
	box-shadow:
		rgba(13, 13, 13, 0.1)
		0
		4px
		10px
		0;
}


/* =========================================================
   HEADER LEFT
========================================================= */

.site-header__left {
	display: flex;
	align-items: flex-start;

	width: 100%;
}


/* =========================================================
   LOGO
========================================================= */

.site-header__logo {
	display: block;

	font-family: var(--font-heading);
	font-size: 24px;
	font-weight: 400;
	line-height: normal;

	color: var(--color-muted);

	white-space: nowrap;
}


/* =========================================================
   HEADER RIGHT
========================================================= */

.site-header__right {
	display: flex;
	align-items: center;
	justify-content: flex-end;

	width: 100%;
}


/* =========================================================
   NAVIGATION
========================================================= */

.site-header__navigation {
	display: block;
}


/* =========================================================
   MENU
========================================================= */

.site-header__menu {
	display: flex;
	align-items: center;

	margin: 0;
	padding: 0;

	list-style: none;
}

.site-header__menu > li {
	margin: 0 0 0 16px;
	padding: 0;

	list-style: none;
}

.site-header__menu > li > a {
	display: flex;
	align-items: center;

	margin: 0;
	padding: 0;

	font-family: var(--font-body);
	font-size: 17.952px;
	font-weight: 400;
	line-height: 21.5424px;
	letter-spacing: normal;

	/* Неактивні */
	color: #7c736a;

	white-space: nowrap;

	transition: color 0.2s ease;
}


/* =========================================================
   CURRENT / ACTIVE MENU ITEM
========================================================= */

.site-header__menu > .current-menu-item > a,
.site-header__menu > .current_page_item > a,
.site-header__menu > .current-menu-ancestor > a {
	color: #2d2725;
}


/* =========================================================
   HOVER
========================================================= */

.site-header__menu > li > a:hover,
.site-header__menu > li > a:focus-visible {
	color: #2d2725;
}


/* =========================================================
   WORKING HOURS
========================================================= */

.site-header__hours {
	display: block;

	margin-left: 32px;
	padding: 5px;

	font-family: var(--font-body);
	font-size: 17.952px;
	font-weight: 400;
	font-variation-settings: "wght" 500;
	line-height: 21.5424px;

	text-rendering: auto;

	color: var(--color-muted);

	background: var(--color-hours-background);

	border: 1px solid var(--color-hours-border);
	border-radius: 5px;

	white-space: nowrap;
}

.site-header__hours--mobile {
	display: none;
}

.site-header__mobile-booking {
	display: none;
}

.site-header__overlay {
	display: none;
}


/* =========================================================
   MOBILE MENU TOGGLE
========================================================= */

.site-header__toggle {
	position: relative;

	display: none;

	flex: 0 0 20px;

	width: 20px;
	height: 16px;
}

.site-header__toggle span {
	position: absolute;
	left: 0;

	display: block;

	width: 100%;
	height: 1px;

	background: var(--color-text);

	transition:
		transform 0.25s ease,
		top 0.25s ease,
		opacity 0.2s ease;
}

.site-header__toggle span:nth-child(1) {
	top: 0;
}

.site-header__toggle span:nth-child(2) {
	top: 7.5px;
}

.site-header__toggle span:nth-child(3) {
	top: 15px;
}


/* =========================================================
   MOBILE HEADER
========================================================= */

@media (max-width: 991px) {

	:root {
		--mobile-menu-width: 300px;
	}
	
	
		html.vitalpath-header-ready .site-header {
		position: fixed;

		top: 0;
		right: 0;
		left: 0;

		width: 100%;

		background: var(--color-background);
	}


	html.vitalpath-header-ready body {
		padding-top:
			var(
				--site-header-height,
				0px
			);
	}


	/* =====================================================
	   HEADER
	===================================================== */

	.site-header__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: start;

		padding: 16px 17px 11px;
	}


	/* =====================================================
	   LEFT
	===================================================== */

	.site-header__left {
		display: flex;
		flex-direction: column;
		align-items: flex-start;

		width: auto;
	}


	/* =====================================================
	   LOGO
	===================================================== */

	.site-header__logo {
		font-size: 16px;
		line-height: 1.25;

		color: #7c736a;
	}


	/* =====================================================
	   WORKING HOURS
	===================================================== */

	.site-header__hours--desktop {
		display: none;
	}

	.site-header__hours--mobile {
	display: block;

	margin: 7px 0 0;
	padding: 4px 5px;

	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 400;
	font-variation-settings: "wght" 500;
	line-height: 18px;

	text-rendering: auto;

	color: #7c736a;
	background: #e6e6e6;

	border: 1px solid rgba(197, 176, 135, 0.9);
	border-radius: 5px;

	white-space: nowrap;
	}

	/* =====================================================
	   RIGHT
	===================================================== */

	.site-header__right {
		display: flex;
		align-items: flex-start;
		justify-content: flex-end;

		width: auto;
	}


	/* =====================================================
	   BURGER
	===================================================== */

	.site-header__toggle {
		position: relative;
		z-index: 1003;

		display: block;

		width: 22px;
		height: 18px;

		margin-top: 16px;

		flex: 0 0 22px;
	}


	.site-header__toggle span {
		position: absolute;
		left: 0;

		width: 100%;
		height: 2px;

		background: #2d2725;

		border-radius: 2px;

		transition:
			top 0.25s ease,
			transform 0.25s ease,
			opacity 0.2s ease;
	}


	.site-header__toggle span:nth-child(1) {
		top: 0;
	}

	.site-header__toggle span:nth-child(2) {
		top: 8px;
	}

	.site-header__toggle span:nth-child(3) {
		top: 16px;
	}


	/* =====================================================
	   OVERLAY
	===================================================== */

	.site-header__overlay {
		position: fixed;
		z-index: 1000;
		inset: 0;

		display: block;

		width: 100%;
		height: 100%;

		padding: 0;

		background: rgba(45, 39, 37, 0.30);

		border: 0;

		opacity: 0;
		visibility: hidden;
		pointer-events: none;

		transition:
			opacity 0.3s ease,
			visibility 0.3s ease;
	}


	.site-header.is-menu-open .site-header__overlay {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}


	/* =====================================================
	   MOBILE NAV PANEL
	===================================================== */

	.site-header__navigation {
		position: fixed;
		z-index: 1002;

		top: 0;
		left: 0;

		display: flex;
		flex-direction: column;

		width: var(--mobile-menu-width);
		max-width: calc(100vw - 40px);

		height: 100vh;
		height: 100dvh;

		padding: 20px 30px 24px;

		background: #7c736a;

		overflow-y: auto;

		opacity: 0;
		visibility: hidden;

		transform: translateX(-100%);

		transition:
			transform 0.3s ease,
			opacity 0.3s ease,
			visibility 0.3s ease;
	}


	.site-header.is-menu-open .site-header__navigation {
		opacity: 1;
		visibility: visible;

		transform: translateX(0);
	}


	/* =====================================================
	   MOBILE MENU
	===================================================== */

	.site-header__menu {
		display: flex;
		flex-direction: column;
		align-items: stretch;

		width: 100%;

		margin: 0;
		padding: 0;

		list-style: none;
	}


	.site-header__menu > li {
		width: 100%;

		margin: 0;
		padding: 0;
	}


	.site-header__menu > li > a {
		display: block;

		width: 100%;

		padding: 24px 0;

		font-family: "Inter", sans-serif;

		/*
		 * У донора:
		 * font-size: var(--text-l);
		 *
		 * Точного значення змінної ми ще не знімали.
		 * 18px поки відповідає скріну дуже близько.
		 */
		font-size: 18px;

		font-weight: 500;
		line-height: 1.35;

		font-style: normal;

		text-transform: uppercase;

		color: #f4f0eb;

		opacity: 1;

		transition: opacity 0.2s ease;
	}


	/* На мобільному active не робимо темним */

	.site-header__menu > .current-menu-item > a,
	.site-header__menu > .current_page_item > a,
	.site-header__menu > .current-menu-ancestor > a {
		color: #f4f0eb;
	}


	.site-header__menu > li > a:hover,
	.site-header__menu > li > a:focus-visible {
		color: #f4f0eb;
		opacity: 0.8;
	}


	/* =====================================================
	   MASSAGEBOOK
	===================================================== */

	.site-header__mobile-booking {
		position: absolute;

		left: 20px;
		bottom: 20px;

		display: block;

		width: auto;
		max-width: 112px;
	}


	.site-header__mobile-booking img {
		display: block;

		width: 100%;
		height: auto;
	}


	/* =====================================================
	   OPEN STATE — BURGER TO X
	===================================================== */

	.site-header.is-menu-open .site-header__toggle {
		position: fixed;

		top: 32px;
		left: calc(var(--mobile-menu-width) - 12px);

		margin: 0;

		transform: translateX(-50%);
	}


	.site-header.is-menu-open .site-header__toggle span {
		background: #2d2725;
	}


	.site-header.is-menu-open .site-header__toggle span:nth-child(1) {
		top: 8px;

		transform: rotate(45deg);
	}


	.site-header.is-menu-open .site-header__toggle span:nth-child(2) {
		opacity: 0;
	}


	.site-header.is-menu-open .site-header__toggle span:nth-child(3) {
		top: 8px;

		transform: rotate(-45deg);
	}
}




/* =========================================================
   SITE FOOTER
========================================================= */

.site-footer {
	width: 100%;

	font-family: var(--font-body);

	color: var(--color-muted);
}


/* =========================================================
   CONTAINER
========================================================= */

.site-footer__container {
	width: 100%;
	max-width: 1384px;

	margin:
		0
		auto;
}


/* =========================================================
   MAIN
========================================================= */

.site-footer__main {
	width: 100%;

	padding:
		var(--space-2xl)
		0
		16px;

	background: var(--color-muted-soft);
}


/* =========================================================
   GRID
========================================================= */

.site-footer__grid {
	display: grid;

	grid-template-columns:
		minmax(0, 1.5fr)
		minmax(180px, 0.75fr)
		minmax(280px, 1fr);

	align-items: start;

	column-gap: 32px;
	row-gap: 32px;
}


/* =========================================================
   BRAND
========================================================= */

.site-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}


.site-footer__logo {
	margin:
		0
		0
		8px;

	font-family: var(--font-heading);

	font-size: var(--text-l);
	font-weight: 400;
	line-height: normal;

	color: var(--color-muted);

	text-decoration: none;
}


.site-footer__tagline {
	margin: 0 0 16px;
	font-size: var(--text-s);
	font-weight: 500;
	line-height: 1.5;
	color: var(--color-muted);
}


.site-footer__description {
	margin: 0;

	max-width: 480px;

	font-size: var(--text-m);
	font-weight: 500;
	line-height: 1.6;

	color: var(--color-muted);
}


/* =========================================================
   COLUMN TITLE
========================================================= */

.site-footer__heading {
    margin: 0 0 13px;
    font-family: var(--font-heading);
    font-size: var(--text-m);
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-muted);
}


/* =========================================================
   MENU
========================================================= */

.site-footer__navigation {
	display: flex;
	flex-direction: column;

	align-items: flex-start;
}


.site-footer__menu {
	display: flex;
	flex-direction: column;

	align-items: flex-start;

	margin: 0;
	padding: 0;

	gap: 10px;

	list-style: none;
}


.site-footer__menu a,
.site-footer__book-link {
	font-family: var(--font-body);

	font-size: var(--text-m);
	font-weight: 400;
	line-height: 1.5;

	color: var(--color-muted);

	text-decoration: none;

	transition:
		color 0.3s ease,
		transform 0.3s ease;
}


.site-footer__book-link {
	margin-top: 10px;
}


/* =========================================================
   CONNECT
========================================================= */

.site-footer__contact {
	display: flex;
	flex-direction: column;

	align-items: flex-start;

	gap: 22px;
}


.site-footer__contact-link,
.site-footer__contact-text,
.site-footer__hours {
	margin: 0;

	font-family: var(--font-body);

	font-size: var(--text-m);
	font-weight: 400;
	line-height: 1.5;

	color: var(--color-muted);

	text-decoration: none;
}

/* =========================================================
   HOVER
========================================================= */

@media (hover: hover) and (pointer: fine) {

	.site-footer__menu a:hover,
	.site-footer__book-link:hover,
	.site-footer__contact-link:hover {
		color: var(--color-text);
	}


	.site-footer__social:hover {
		color: #ffffff;

		background: var(--color-primary);
	}


	.site-footer__social:hover svg {
		transform:
			rotate(12deg);
	}
}


/* =========================================================
   FOOTER BOTTOM
========================================================= */

.site-footer__bottom {
	width: 100%;

	padding:
		32px
		0;

	background: var(--color-muted-soft);
}


.site-footer__bottom-inner {
	display: flex;

	align-items: flex-start;
	justify-content: space-between;

	width: 100%;

	gap: 32px;
}


/* =========================================================
   COPYRIGHT
========================================================= */

.site-footer__copyright {
	display: flex;
	flex-direction: column;

	gap: 6px;
}


.site-footer__legal,
.site-footer__credit {
	margin: 0;
	font-size: var(--text-s);
	font-weight: 500;
	line-height: 1.5;
	color: var(--color-muted);
}


.site-footer__credit a {
	color: inherit;

	text-decoration: none;
}


/* =========================================================
   LEGAL LINKS
========================================================= */

.site-footer__legal-links {
	display: flex;

	flex-wrap: wrap;

	align-items: center;
	justify-content: flex-end;

	gap:
		12px
		24px;
}


.site-footer__legal-links a {
	font-size: var(--text-s);
	line-height: 1.5;

	color: var(--color-muted);

	text-decoration: none;

	transition:
		color 0.3s ease,
		font-weight 0.3s ease;
}


@media (hover: hover) and (pointer: fine) {

	.site-footer__legal-links a:hover,
	.site-footer__credit a:hover {
		color: var(--color-text);
	}
}


/* =========================================================
   SCROLL TO TOP
========================================================= */

.site-scroll-top {
	position: fixed;

	right: 30px;
	bottom: 30px;

	z-index: 999;

	display: flex;

	align-items: center;
	justify-content: center;

	width: 50px;
	height: 50px;

	padding: 0;

	color: #ffffff;
	background: var(--color-text);

	border: 0;
	border-radius: 50%;

	box-shadow:
		0
		4px
		10px
		rgba(0, 0, 0, 0.2);

	cursor: pointer;

	opacity: 0;
	visibility: hidden;

	transform:
		translateY(12px);

	transition:
		opacity 0.3s ease,
		visibility 0.3s ease,
		transform 0.3s ease,
		background-color 0.3s ease;
}


.site-scroll-top.is-visible {
	opacity: 1;
	visibility: visible;

	transform:
		translateY(0);
}


.site-scroll-top svg {
	width: 24px;
	height: 24px;

	fill: none;

	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

	.site-footer__grid {
		grid-template-columns:
			1.4fr
			0.8fr
			1fr;
	}
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

	.site-footer__container {
		padding:
			0
			17px;
	}


	.site-footer__grid {
		grid-template-columns:
			1fr
			1fr;
	}


	.site-footer__brand {
		grid-column:
			1
			/
			-1;

		max-width: 520px;
	}


	.site-footer__bottom-inner {
		flex-direction: column;
	}


	.site-footer__legal-links {
		justify-content: flex-start;
	}


	.site-scroll-top {
		right: 20px;
		bottom: 20px;
	}
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 478px) {

	.site-footer__grid {
		grid-template-columns: 1fr;
	}


	.site-footer__brand {
		grid-column: auto;
	}


	.site-footer__bottom {
		padding:
			24px
			0;
	}
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.site-footer__social,
	.site-footer__social svg,
	.site-scroll-top {
		transition: none;
	}
}



/* =========================================================
   404 PAGE
========================================================= */

.error-404-page {
	width: 100%;

	background: #fcfbf8;
}


/* =========================================================
   404 HERO
========================================================= */

.error-404 {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	width: 100%;
	min-height: 68vh;

	padding:
		var(--space-3xl)
		28px;

	background: var(--color-background);

	transition:
		background-color
		.6s
		ease;
}


.error-404__container {
	display: flex;
	flex-direction: column;

	align-items: center;
	justify-content: center;

	width: 100%;
	max-width: 1384px;

	margin: 0 auto;

	text-align: center;

	transition:
		transform
		.5s
		cubic-bezier(.25, .46, .45, .94);
}


/* =========================================================
   EYEBROW
========================================================= */

.error-404__eyebrow {
	position: relative;

	display: inline-block;

	width: auto;

	margin:
		0
		0
		18px;

	padding:
		.6rem
		1rem;

	font-family: var(--font-body);
	font-size: var(--text-s);
	font-weight: 500;
	line-height: 1.2;

	color: var(--color-text);

	background: #e7e1da;

	border-radius: 9999rem;

	cursor: default;

	transition:
		letter-spacing
		.38s
		ease,
		opacity
		.38s
		ease;
}


.error-404__eyebrow::after {
	content: "";

	position: absolute;

	left: 0;
	bottom: -3px;

	width: 0;
	height: 1px;

	background: currentColor;

	opacity: .4;

	transition:
		width
		.45s
		cubic-bezier(.25, .46, .45, .94);
}


/* =========================================================
   TITLE
========================================================= */

.error-404__title {
	position: relative;

	width: 70%;

	margin: 0;

	font-family: var(--font-heading);
	font-size: var(--text-4xl);
	font-weight: 400;
	font-style: normal;
	line-height: 1.2;

	text-align: center;

	color: var(--color-text);

	cursor: default;

	transition:
		letter-spacing
		.45s
		cubic-bezier(.25, .46, .45, .94),
		opacity
		.45s
		ease;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.error-404__description {
	width: 60%;
	max-width: 760px;

	margin:
		1rem
		0
		0;

	font-family: var(--font-body);
	font-size: var(--text-l);
	font-weight: 500;
	line-height: 1.6;

	text-align: center;

	color: var(--color-muted);

	opacity: .78;

	cursor: default;

	transition:
		opacity
		.4s
		ease,
		transform
		.4s
		cubic-bezier(.25, .46, .45, .94);
}


/* =========================================================
   ACTIONS
========================================================= */

.error-404__actions {
	display: flex;

	flex-direction: row;

	align-items: center;
	justify-content: center;

	gap: 1rem;

	margin-top: 2rem;
}


/* =========================================================
   BUTTONS
========================================================= */

.error-404__button {
	position: relative;

	display: inline-flex;

	align-items: center;
	justify-content: center;

	min-height: 48px;

	padding:
		.8rem
		1.7rem;

	overflow: hidden;

	font-family: var(--font-body);
	font-size: 1.1em;
	font-weight: 500;
	line-height: 1.2;

	text-align: center;
	text-decoration: none;

	border-radius: 999px;

	transition:
		transform
		.32s
		cubic-bezier(.25, .46, .45, .94),
		box-shadow
		.32s
		ease,
		letter-spacing
		.32s
		ease,
		color
		.4s
		ease,
		background-color
		.4s
		ease;
}


/* Primary */

.error-404__button--primary {
	color: #fff;

	background: var(--color-primary);

	border:
		1px
		solid
		var(--color-primary);
}


.error-404__button--primary::before {
	content: "";

	position: absolute;

	inset: 0;

	background:
		linear-gradient(
			110deg,
			transparent 25%,
			rgba(255, 255, 255, .15) 50%,
			transparent 75%
		);

	transform:
		translateX(-100%);

	transition:
		transform
		.55s
		ease;

	pointer-events: none;
}


/* Outline */

.error-404__button--outline {
	color: var(--color-primary);

	background: transparent;

	border:
		2px
		solid
		var(--color-primary);
}


.error-404__button--outline::after {
	content: "";

	position: absolute;

	inset: 0;

	background: currentColor;

	opacity: .07;

	transform:
		scaleY(0);

	transform-origin:
		center
		bottom;

	transition:
		transform
		.38s
		cubic-bezier(.25, .46, .45, .94);

	pointer-events: none;
}


/* =========================================================
   HOVER
========================================================= */

@media (hover: hover) and (pointer: fine) {

	.error-404:hover
	.error-404__container {
		transform:
			translateY(-4px);
	}


	.error-404__eyebrow:hover {
		letter-spacing:
			.12em;

		opacity:
			.7;
	}


	.error-404__eyebrow:hover::after {
		width:
			100%;
	}


	.error-404__title:hover {
		letter-spacing:
			.03em;

		opacity:
			.88;
	}


	.error-404__description:hover {
		opacity:
			1;

		transform:
			translateX(5px);
	}


	.error-404__button--primary:hover {
		transform:
			translateY(-4px);

		box-shadow:
			0
			14px
			36px
			rgba(0, 0, 0, .22);

		letter-spacing:
			.04em;
	}


	.error-404__button--primary:hover::before {
		transform:
			translateX(100%);
	}


	.error-404__button--outline:hover {
		transform:
			translateY(-4px);

		color: var(--color-text);

		background: var(--color-background);

		box-shadow:
			0
			10px
			28px
			rgba(0, 0, 0, .13);

		letter-spacing:
			.04em;
	}


	.error-404__button--outline:hover::after {
		transform:
			scaleY(1);
	}

}


/* =========================================================
   ACTIVE
========================================================= */

.error-404__button:active {
	transform:
		translateY(1px);

	transition-duration:
		.08s;
}


/* =========================================================
   FOCUS
========================================================= */

.error-404__button:focus-visible {
	outline:
		2px
		solid
		var(--color-primary);

	outline-offset:
		4px;
}


/* =========================================================
   TABLET
   <= 991px
========================================================= */

@media (max-width: 991px) {

	.error-404 {
		min-height: 64vh;
	}


	.error-404__title {
		width: 90%;
	}


	.error-404__description {
		width: 80%;
	}

}


/* =========================================================
   MOBILE
   <= 767px
========================================================= */

@media (max-width: 767px) {

	.error-404 {
		min-height: 60vh;

		padding:
			4rem
			17px;
	}


	.error-404__description {
		width: 80%;
	}


	.error-404__actions {
		flex-direction: column;

		width: 100%;

		gap: .85rem;
	}


	.error-404__button {
		width: auto;
	}

}


/* =========================================================
   SMALL MOBILE
   <= 478px
========================================================= */

@media (max-width: 478px) {

	.error-404__title,
	.error-404__description {
		width: 100%;
	}


	.error-404__actions {
		width: 100%;
	}


	.error-404__button {
		width: 100%;
		max-width: 320px;
	}

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.error-404,
	.error-404__container,
	.error-404__eyebrow,
	.error-404__eyebrow::after,
	.error-404__title,
	.error-404__description,
	.error-404__button,
	.error-404__button::before,
	.error-404__button::after {
		transition: none;
	}

}



/* =========================================================
   FIXED MASSAGEBOOK BUTTON
========================================================= */

.site-massagebook-fixed {
	position: fixed;

	left: 28px;
	bottom: 28px;

	z-index: 900;

	display: inline-flex;

	align-items: center;
	justify-content: center;

	width: auto;
	height: auto;

	padding: 0;

	text-decoration: none;

	border: 0;
	border-radius: 8px;

	box-shadow:
		0
		8px
		24px
		rgba(0, 0, 0, 0.14);

	overflow: hidden;

	transform:
		translateZ(0);

	transition:
		transform
		0.3s
		cubic-bezier(0.25, 0.46, 0.45, 0.94),

		box-shadow
		0.3s
		ease,

		opacity
		0.3s
		ease;
}


/* =========================================================
   IMAGE
========================================================= */

.site-massagebook-fixed__image {
	display: block;
	width: auto;
	height: auto;
	max-width: 130px;
	margin: 0;
	padding: 0;
	border: 0;
}


/* =========================================================
   HOVER
========================================================= */

@media (hover: hover) and (pointer: fine) {

	.site-massagebook-fixed:hover {
		transform:
			translateY(-4px);

		box-shadow:
			0
			14px
			32px
			rgba(0, 0, 0, 0.18);
	}

}


/* =========================================================
   FOCUS
========================================================= */

.site-massagebook-fixed:focus-visible {
	outline:
		2px
		solid
		var(--color-primary);

	outline-offset:
		4px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

	.site-massagebook-fixed {
		left: 17px;
		bottom: 20px;
	}


	.site-massagebook-fixed__image {
		max-width: 125px;
	}

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 478px) {

	.site-massagebook-fixed {
		left: 14px;
		bottom: 16px;
	}


	.site-massagebook-fixed__image {
		max-width: 112px;
	}

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.site-massagebook-fixed {
		transition: none;
	}

}