:root {
	--color-primary: #d91e48;
	--color-primary-strong: #231f20;
	--color-bg: #f9f9f9;
	--color-surface: #ffffff;
	--color-surface-low: #f3f3f3;
	--color-surface-lowest: #eeeeee;
	--color-text: #231f20;
	--color-text-muted: #6f5a60;
	--color-outline: #8a666f;
	--color-outline-variant: #d9b5bf;
	--color-overlay: rgba(249, 249, 249, 0.9);
	--shadow-ambient: 0 40px 80px rgba(35, 31, 32, 0.08);
	--container: 1200px;
}

html[data-theme="dark"] {
	--color-primary: #d91e48;
	--color-primary-strong: #231f20;
	--color-bg: #231f20;
	--color-surface: #2a2526;
	--color-surface-low: #302b2c;
	--color-surface-lowest: #1d1a1b;
	--color-text: #e2e2e2;
	--color-text-muted: #c8c6c5;
	--color-outline: #af878f;
	--color-outline-variant: #5f464d;
	--color-overlay: rgba(35, 31, 32, 0.84);
	--shadow-ambient: 0 40px 80px rgba(0, 0, 0, 0.32);
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
}

body {
	background: var(--color-bg);
	color: var(--color-text);
	font-family: "Inter", sans-serif;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Epilogue", sans-serif;
	font-weight: 800;
	letter-spacing: -0.03em;
	margin: 0;
}

p {
	margin: 0;
}

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

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

.container {
	max-width: var(--container);
	width: min(100% - 3rem, var(--container));
	margin-inline: auto;
}

.section {
	padding: clamp(4rem, 7vw, 7rem) 0;
}

.kicker {
	font: 800 0.72rem/1 "Inter", sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	color: var(--color-primary);
	margin-bottom: 1.2rem;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.95rem 1.45rem;
	font: 800 0.78rem/1 "Inter", sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	transition: transform 0.2s ease, filter 0.2s ease;
}

.btn:hover {
	transform: translateY(-1px);
	filter: brightness(1.05);
}

.btn-primary {
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-strong));
	color: #fff;
}

.btn-secondary {
	background: var(--color-text);
	color: var(--color-bg);
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	backdrop-filter: blur(20px);
	background: color-mix(in srgb, var(--color-surface) 88%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--color-outline-variant) 20%, transparent);
}

.topbar {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	min-height: 74px;
	gap: 1rem;
}

.brand {
	display: inline-flex;
	align-items: center;
}

.brand-logo {
	height: 64px;
	width: auto;
}

.footer-logo {
	height: 64px;
	width: auto;
}

.topbar-actions {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.mobile-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.35rem;
	height: 2.35rem;
	padding: 0;
	background: color-mix(in srgb, var(--color-surface-low) 82%, transparent);
	border: 1px solid color-mix(in srgb, var(--color-outline-variant) 38%, transparent);
	color: var(--color-text);
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.mobile-nav-toggle:hover {
	border-color: color-mix(in srgb, var(--color-primary) 42%, transparent);
	background: color-mix(in srgb, var(--color-surface) 90%, var(--color-primary) 10%);
}

.mobile-nav-toggle-icon,
.mobile-nav-toggle-icon::before,
.mobile-nav-toggle-icon::after {
	display: block;
	width: 1rem;
	height: 2px;
	background: currentColor;
	content: "";
	transition: transform 0.22s ease, opacity 0.22s ease;
}

.mobile-nav-toggle-icon {
	position: relative;
}

.mobile-nav-toggle-icon::before,
.mobile-nav-toggle-icon::after {
	position: absolute;
	left: 0;
}

.mobile-nav-toggle-icon::before {
	top: -0.34rem;
}

.mobile-nav-toggle-icon::after {
	top: 0.34rem;
}

.site-header.nav-open .mobile-nav-toggle-icon {
	background: transparent;
}

.site-header.nav-open .mobile-nav-toggle-icon::before {
	transform: translateY(0.34rem) rotate(45deg);
}

.site-header.nav-open .mobile-nav-toggle-icon::after {
	transform: translateY(-0.34rem) rotate(-45deg);
}

.header-book-now {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.62rem 0.95rem;
	font: 800 0.68rem/1 "Inter", sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #fff;
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-strong));
	border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
	transition: transform 0.2s ease, filter 0.2s ease;
}

.header-book-now:hover {
	filter: brightness(1.06);
	transform: translateY(-1px);
}

.main-menu {
	list-style: none;
	display: flex;
	align-items: stretch;
	align-self: stretch;
	justify-content: center;
	gap: 0;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
	font: 800 0.75rem/1.1 "Inter", sans-serif;
	letter-spacing: 0.11em;
	color: var(--color-text-muted);
}

.main-menu li {
	display: flex;
	align-items: stretch;
}

.main-menu a {
	display: flex;
	align-items: center;
	padding: 0 1rem;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.main-menu li.main-menu-mobile-cta {
	display: none;
}

.main-menu a:hover,
.main-menu .current-menu-item a {
	color: var(--color-primary);
	background: color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.theme-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: color-mix(in srgb, var(--color-surface) 75%, transparent);
	color: var(--color-text);
	border: 1px solid color-mix(in srgb, var(--color-text-muted) 30%, transparent);
	padding: 0.6rem 0.9rem;
	font: 800 0.7rem/1 "Inter", sans-serif;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	backdrop-filter: blur(10px);
}

.theme-toggle:hover {
	background: color-mix(in srgb, var(--color-surface) 92%, var(--color-primary) 8%);
}

.site-footer {
	background: var(--color-surface);
	padding: 3rem 0 2rem;
	border-top: 1px solid color-mix(in srgb, var(--color-outline-variant) 20%, transparent);
}

.footer-wrap {
	display: grid;
	gap: 1.6rem;
}

.footer-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.2rem, 2.4vw, 2.4rem);
	align-items: start;
}

.footer-col {
	display: grid;
	align-content: start;
	gap: 0.75rem;
}

.footer-follow-logo {
	height: 50px;
	width: auto;
	margin-bottom: 0.4rem;
}

.footer-title {
	font: 900 1.1rem/1.2 "Epilogue", sans-serif;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	color: color-mix(in srgb, var(--color-text) 95%, transparent);
}

html[data-theme="dark"] .footer-title {
	color: color-mix(in srgb, var(--color-text) 98%, #fff 2%);
}

.footer-copy {
	font: 500 0.92rem/1.7 "Inter", sans-serif;
	color: var(--color-text-muted);
}

.footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.footer-links a {
	font: 800 0.68rem/1.4 "Inter", sans-serif;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.footer-links a:hover {
	color: var(--color-primary);
}

.footer-address,
.footer-contact-item {
	margin: 0;
	font: 500 0.92rem/1.7 "Inter", sans-serif;
	color: var(--color-text-muted);
}

.footer-contact-item a {
	color: var(--color-text);
}

.footer-contact-item a:hover {
	color: var(--color-primary);
}

.copyright,
.social-links a {
	font: 800 0.68rem/1.4 "Inter", sans-serif;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.copyright {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	text-align: center;
	padding-top: 1rem;
	border-top: 1px solid color-mix(in srgb, var(--color-outline-variant) 16%, transparent);
}

.copyright-sep {
	opacity: 0.55;
}

.copyright-link {
	color: var(--color-text-muted);
}

.copyright-link:hover {
	color: var(--color-primary);
}

.social-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 1.2rem;
	flex-wrap: wrap;
}

.social-links-icons {
	gap: 0.75rem;
}

.social-links-icons a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid color-mix(in srgb, var(--color-outline-variant) 22%, transparent);
	background: color-mix(in srgb, var(--color-surface-low) 70%, transparent);
	transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.social-links-icons svg {
	width: 1.1rem;
	height: 1.1rem;
	fill: currentColor;
}

.social-links-icons a:hover {
	color: var(--color-primary);
	border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
	transform: translateY(-1px);
}

.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;
}

.social-links a:hover {
	color: var(--color-primary);
}

.material-symbols-outlined {
	font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
	font-size: 1rem;
	line-height: 1;
	vertical-align: middle;
}

.cursor-trail,
.cursor-dot {
	position: fixed;
	left: 0;
	top: 0;
	pointer-events: none;
	z-index: 9999;
	transform: translate3d(-100px, -100px, 0);
	will-change: transform;
}

.cursor-trail {
	width: 34px;
	height: 34px;
	border-radius: 999px;
	border: 1.5px solid color-mix(in srgb, var(--color-primary) 72%, var(--color-text) 28%);
	background: color-mix(in srgb, var(--color-primary) 12%, transparent);
	box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-primary) 10%, transparent);
	margin-left: -17px;
	margin-top: -17px;
}

.cursor-dot {
	width: 18px;
	height: 18px;
	border-radius: 0;
	background: transparent;
	background-image: url("../images/df-cursor.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	margin-left: -9px;
	margin-top: -9px;
}

html[data-theme="dark"] .cursor-dot {
	background-image: url("../images/df-cursor-dark.svg");
	filter: none;
}

@media (max-width: 850px) {
	.topbar {
		position: relative;
		grid-template-columns: auto 1fr auto;
		min-height: 66px;
		column-gap: 0.75rem;
	}

	.main-menu {
		display: grid;
		position: absolute;
		top: calc(100% + 0.45rem);
		left: auto;
		right: 0;
		width: min(10rem, calc(100vw - 1.5rem));
		gap: 0.2rem;
		padding: 0.65rem;
		background: color-mix(in srgb, var(--color-surface) 95%, transparent);
		border: 1px solid color-mix(in srgb, var(--color-outline-variant) 22%, transparent);
		box-shadow: 0 18px 45px rgba(0, 0, 0, 0.14);
		opacity: 0;
		pointer-events: none;
		transform: translateY(-8px);
		transition: opacity 0.2s ease, transform 0.2s ease;
		z-index: 120;
	}

	.main-menu li {
		margin: 0;
	}

	.main-menu a {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 0.55rem;
		padding: 0.7rem 0.8rem;
		background: color-mix(in srgb, var(--color-surface-low) 68%, transparent);
		border: 1px solid color-mix(in srgb, var(--color-outline-variant) 16%, transparent);
		font-size: 0.68rem;
		letter-spacing: 0.12em;
		text-align: right;
	}

	.main-menu a::after {
		content: none;
	}

	.main-menu li.main-menu-mobile-cta {
		display: block;
	}

	.main-menu-mobile-cta a {
		background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 20%, transparent), color-mix(in srgb, var(--color-primary-strong) 20%, transparent));
		border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
		color: color-mix(in srgb, var(--color-text) 92%, #fff 8%);
	}

	.site-header.nav-open .main-menu {
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0);
	}

	.topbar-actions {
		justify-self: end;
		gap: 0.4rem;
	}

	.mobile-nav-toggle {
		display: inline-flex;
		order: 2;
	}

	.theme-toggle {
		order: 1;
	}

	.header-book-now {
		display: none;
	}

	.theme-toggle {
		padding: 0.55rem 0.62rem;
	}

	.theme-toggle span:last-child {
		display: none;
	}

	.footer-grid {
		grid-template-columns: 1fr;
		gap: 1.4rem;
	}

	.copyright {
		justify-content: flex-start;
	}
}

@media (max-width: 560px) {
	.container {
		width: min(100% - 1.5rem, var(--container));
	}

	.main-menu {
		padding: 0.75rem;
	}
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
	.cursor-trail,
	.cursor-dot {
		display: none;
	}
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	html,
	body,
	a,
	button,
	input,
	textarea,
	select,
	label,
	[role="button"] {
		cursor: none !important;
	}
}