/* Mobile-only: fallback image if video doesn't play */
@media (max-width:700px) {
	.video-bg { display:block; }
	.video-fallback {
		position: fixed;
		top: 0; left: 0;
		width: 100vw;
		height: 100vh;
		object-fit: cover;
		z-index: -1;
		display: block;
	}
	/* Hide video if it fails to play (JS can toggle .video-bg display:none) */
}
/* Homepage preloader overlay */
#preloader {
	position: fixed;
	inset: 0;
	background: #fff;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
		transition: opacity .9s cubic-bezier(.77,0,.18,1);
}
#preloader.hide {
	opacity: 0;
	pointer-events: none;
}
body, html {
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
body.no-scroll { overflow: hidden; }
.video-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	object-fit: cover;
	z-index: -1;
}
.video-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.45); /* adjust darkness here */
	z-index: 0;
	pointer-events: none;
}
.content {
	position: relative;
	z-index: 1;
	color: white;
	text-align: center;
	font-family: 'Lexend', Arial, sans-serif;
	min-height: 100vh;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 2rem 1rem; /* small padding for mobile */
	box-sizing: border-box;
	opacity: 0;
	animation: fadeIn 1.1s ease forwards .2s;
}
@keyframes fadeIn { from { opacity:0; transform: translateY(12px);} to { opacity:1; transform: translateY(0);} }
.site-title {
	font-size: 3rem;
	font-weight: 500; /* changed from 700 to 500 (Lexend 500) */
	margin: 0 0 1rem 0;
	letter-spacing: .05em;
	text-shadow: 0 4px 20px rgba(0,0,0,.45);
	font-family: 'Lexend', Arial, sans-serif;
}
.main-links {
	display: flex;
	justify-content: center;
	gap: 2rem;
	margin-top: 2rem;
	flex-wrap: wrap;
}

.main-links a {
	position: relative;
	font-size: 1.15rem;
	font-weight: 300; /* Lexend 300 */
	font-family: 'Lexend', Arial, sans-serif;
	color: #ffffff;
	text-decoration: none;
	letter-spacing: -0.01em;
	padding: .4rem .2rem;
	transition: color .35s ease, transform .35s ease;
	will-change: transform;
}
.main-links a:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: 0;
	background: linear-gradient(90deg, rgba(255,255,255,.2), #ffffff);
	transition: width .35s ease;
}
.main-links a:hover:after, .main-links a:focus:after, .main-links a:focus-visible:after {
	width: 100%;
}
.main-links a:hover, .main-links a:focus, .main-links a:focus-visible {
	color: #f3f3f3;
	transform: none; /* removed lift effect */
}
.main-links a:focus-visible {
	outline: 2px solid rgba(255,255,255,.7);
	outline-offset: 4px;
	border-radius: 4px;
}
.hero-logo {
	display:block;
	margin:0 auto;
	max-width:500px;
	width:100%;
	height:auto;
	border-radius:0;
	box-shadow:none;
}
/* Hero brand & stack */
.hero-brand { display:flex; flex-direction:column; align-items:center; }
.hero-stack { width:auto; max-width:900px; display:flex; flex-direction:column; align-items:center; gap:2.2rem; padding:0; box-sizing:border-box; }
.hero-stack .main-links { margin-top:0; }
/* Ensure no unintended backdrop blur or background on logo container */
.hero-stack, .hero-brand, .hero-logo, .hero-logo-picture, .hero-logo-crop { 
	background: transparent !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
 }
/* Cropping wrapper to eliminate any surrounding box */
.hero-logo-crop { display:inline-block; padding:0; margin:0; background:transparent !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
.hero-logo-crop picture, .hero-logo-crop img { display:block; }
@media (max-width:760px){
	.content{min-height:100vh;}
	.hero-logo{max-width:70vw; margin:0;}
	.hero-logo{filter: brightness(0) invert(1);}
	/* Nudge logo + links upward for better visual centering */
	.hero-stack{transform:translateY(-6vh);}
}
/* Hamburger button */
.menu-toggle {
	position: fixed;
	top: 0.85rem;
	right: 0.85rem;
	width: 34px; /* keep larger hit box */
	height: 34px;
	border: none;
	background: none;
	backdrop-filter: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 0;
	cursor: pointer;
	z-index: 20;
	transform: rotate(45deg); /* rotate X to form + */
	transform-origin: center center;
}
.menu-toggle span {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px; /* smaller cross */
	height: 2px;
	background: #fff;
	border-radius: 2px;
	transition: background .3s ease;
}
.menu-toggle span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.menu-toggle span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }
.menu-toggle:focus-visible { outline: 2px solid rgba(255,255,255,.7); outline-offset: 4px; }
.menu-toggle:hover span, .menu-toggle:focus-visible span { background:#e2e2e2; }
/* (Removed old hamburger bar styling) */
.mobile-drawer.open ~ .content { pointer-events: none; }
/* Drawer */
.mobile-drawer {
	position: fixed;
	top: 0;
	right: 0;
	height: 100vh;
	width: min(70%, 320px);
	background: rgba(15,15,15,.92);
	backdrop-filter: blur(8px);
	box-shadow: -4px 0 24px -6px rgba(0,0,0,.5);
	transform: translateX(100%);
	transition: transform .45s cubic-bezier(.65,.05,.36,1);
	z-index: 30;
	display: flex;
	align-items: flex-start;
	padding-top: 6rem;
	padding-left: 2rem;
}
.mobile-drawer.open { transform: translateX(0); }
.drawer-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.4);
	z-index: 25;
}
.drawer-close {
	position:absolute;
	top:1rem;
	right:1rem;
	width:40px;
	height:40px;
	background:transparent;
	border:none;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0;
	opacity:.85;
	transition:opacity .25s ease;
}
.drawer-close::before {
	content:"";
	width:10px;
	height:10px;
	border-top:2px solid #fff;
	border-right:2px solid #fff;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%) rotate(45deg);
}
.drawer-close:hover, .drawer-close:focus-visible { opacity:1; }
.drawer-close:focus-visible { outline:2px solid rgba(255,255,255,.6); outline-offset:2px; }
.mobile-links { display: flex; flex-direction: column; gap: 1.75rem; }
.mobile-links a {
	font-family: 'Lexend', Arial, sans-serif;
	font-weight: 300;
	font-size: 1.25rem;
	color: #fff;
	text-decoration: none;
	letter-spacing: -0.01em;
	position: relative;
}
.mobile-links a:after {
	content: "";
	position: absolute;
	left: 0; bottom: -4px;
	height: 2px; width: 0;
	background: linear-gradient(90deg, rgba(255,255,255,.25), #fff);
	transition: width .35s ease;
}
.mobile-links a:hover:after, .mobile-links a:focus-visible:after { width: 100%; }

/* Hide desktop nav on mobile; show hamburger */
@media (max-width:760px){
	.main-links { display: none; }
	.menu-toggle { display: flex; }
	/* Mobile-only: subtle white container for burger (matching shape of other pages) */
	.menu-toggle {
		background: rgba(255,255,255,.55);
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
		border-radius: 10px;
		box-shadow: 0 2px 6px rgba(0,0,0,.18);
		transition: background .3s ease, box-shadow .3s ease;
	}
	.menu-toggle span { background:#111; }
	.menu-toggle:hover, .menu-toggle:focus-visible { background: rgba(255,255,255,.7); box-shadow:0 3px 10px rgba(0,0,0,.28); }
	.menu-toggle:hover span, .menu-toggle:focus-visible span { background:#000; }
}
/* Show desktop nav; hide hamburger, drawer on larger screens */
@media (min-width: 761px) {
	.menu-toggle, .mobile-drawer, .drawer-overlay { display: none; }
}
@media (min-width:1400px) { .hero-logo { max-width:700px; } }
@media (min-width: 700px) {
	.main-links { gap: 3rem; }
	.main-links a { font-size: 1.05rem; }
}
@media (min-width: 1100px) {
	.main-links a { font-size: 1.15rem; }
}
