/*
Theme Name: Scented Ghost Tours Bath
Author: Adam Greenough
Author URI: https://adamgreenough.net/
Description: Bespoke ACF-powered theme for Scented Ghost Tours Bath.
Version: 2025.7
Text Domain: sgtb
*/


/*************************************************************/
/* Global Styles 
**************************************************************/

@font-face {
	font-family: 'SGTB Font';
	src: url('./fonts/sgtb-webfont.woff2') format('woff2'),
		url('./fonts/sgtb-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

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

:root {
	--primary-color: #FF0000;
	--font-heading: 'SGTB Font', Arial, sans-serif;
	--font-body: 'IM Fell English', Georgia, serif;
	--page-background: #f3f3f3;

	font-size: 20px;

	@media(max-width: 1000px) {
		font-size: 19px;
	}

	@media(max-width: 800px) {
		font-size: 18px;
	}

	@media(max-width: 600px) {
		font-size: 17px;
	}
}

::selection {
	background-color: var(--primary-color);
	color: white;
}

::-moz-selection {
	background-color: var(--primary-color);
	color: white;
}

body {
	font-family: var(--font-body);
	line-height: 1.4;
	margin: 0;
	padding: 0;
	background-color: var(--page-background);
	background-size: cover;
	overflow-x: hidden;
	width: 100vw;
	background-image: url('./images/fog-portrait-thicker-darker.png');
	background-size: cover;
	background-position: center top;
}

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

p {
	margin: 0.75rem 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
.card-title,
.testimonial-item h4,
.faq-question {
	font-family: var(--font-heading);
	font-weight: normal;
	line-height: 1.1;
}

h1 {
	line-height: 0.95;
}

h2 {
	font-size: 2rem;
	margin: 0;
}

h3 {
	font-family: var(--font-body);
}

.primary-color,
span.highlight {
	color: var(--primary-color);
}

.container {
	width: 100%;
	max-width: 64rem;
	margin: 0 auto;
	padding: 0 2rem;

	@media(max-width: 768px) {
		padding: 0 1rem;
	}
}

main#primary {
	position: relative;
	overflow: hidden;
}

.button {
	display: inline-block;
	background-color: #000;
	color: #fff;
	font-family: var(--font-heading);
	font-size: 1.4rem;
	padding: 0.7rem 2.5rem 0.6rem;
	border-radius: 50px;
	text-decoration: none;
	transition: all 0.3s ease;
	text-align: center;
	border: 2px solid transparent;
	line-height: 1.1;

	&:hover {
		background-color: var(--primary-color);
		color: #fff;
		transform: translateY(-3px);
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	}
}

h3 {
	color: var(--primary-color);
	font-size: 1.5rem;
	margin: 0;

	& + p {
		margin-top: 0;
	}
}

/*************************************************************/
/* CRITICAL LCP OPTIMIZATION - Ultra-fast masthead render
**************************************************************/

#masthead {
	background-color: #000;
	/* background-image removed to prevent double-loading - using <picture> element instead */
	padding: 0.75rem 0 40rem;
	margin-bottom: -39.5rem;
	
	position: relative;
	overflow: hidden;
	z-index: 0;
	
	/* CRITICAL LCP optimizations - ELIMINATE render delays */
	contain: layout style paint; /* Isolate layout calculations */
	transform: translateZ(0); /* Force GPU layer for immediate composite */
	will-change: auto; /* Don't hold GPU memory unnecessarily */

	/* Better mobile responsiveness */
	@media (max-width: 768px) {
		padding: 2rem 0 25rem;
		margin-bottom: -22rem;
	}
}

/* ULTRA-CRITICAL: Picture and image elements - ZERO layout shift allowed */
.masthead-bg {
	position: absolute !important;
	inset: 0 !important;
	z-index: 0 !important;
	pointer-events: none !important;
	
	/* CRITICAL: Force immediate GPU composite layer */
	transform: translateZ(0);
	backface-visibility: hidden;
	
	/* Prevent ANY layout calculations */
	contain: layout size paint;
	
	/* Desktop: Keep mask for fade effect */
	-webkit-mask-image: linear-gradient(to top, 
		rgba(0, 0, 0, 0) 0%, 
		rgba(0, 0, 0, 0) 20%, 
		rgba(0, 0, 0, 1) 50%, 
		rgba(0, 0, 0, 1) 100%);
	mask-image: linear-gradient(to top, 
		rgba(0, 0, 0, 0) 0%, 
		rgba(0, 0, 0, 0) 20%, 
		rgba(0, 0, 0, 1) 50%, 
		rgba(0, 0, 0, 1) 100%);
}

/* Mobile: Complete mask removal for instant paint */
@media (max-width: 768px) {
	.masthead-bg {
		-webkit-mask-image: none !important;
		mask-image: none !important;
		-webkit-mask: none !important;
		mask: none !important;
		-webkit-mask-composite: none !important;
		mask-composite: none !important;
	}
}

/* Mobile gradient overlay */
.masthead-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, 
		#cbcbcb 0%, 
		rgba(203, 203, 203, 0.8) 20%, 
		rgba(203, 203, 203, 0.3) 50%, 
		transparent 100%);
	pointer-events: none;
	z-index: 1;
	
	/* Hide on desktop, show on mobile */
	@media (min-width: 769px) {
		display: none;
	}
}

.masthead-bg img {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center top !important;
	
	/* CRITICAL render optimizations */
	transform: translateZ(0);
	backface-visibility: hidden;
	image-rendering: optimizeSpeed; /* Trade quality for instant render speed */
	
	/* Prevent any reflow triggers */
	contain: size layout paint;
}

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

.masthead-top {
	display: flex;
	justify-content: space-between;
	align-items: center;

	@media (max-width: 768px) {
		flex-direction: column;
		gap: 1.363rem;
		padding-top: 1.364rem;
		padding-bottom: 1.364rem;
	}
}

.masthead-lightning {
	position: absolute;
	top: -1rem;
	aspect-ratio: 16 / 9;
	width: auto;
	height: 15rem;
	right: -8rem;
	transform: rotate(140deg);
	mix-blend-mode: lighten;
	animation: lightning-flash 6s infinite;

	video {
		width: 100%;
		height: 100%;
		position: absolute;
		top: -1rem;
		left: 0;
		aspect-ratio: 16 / 9;
	}

	@media(min-width: 64rem) {
		right: calc(50% - 36rem);
	}
}

.masthead-social {
	display: flex;
	align-items: center;
	flex: 1;
	justify-content: flex-start;

	.social-icons {
		display: flex;
		gap: 28px;
		padding: 0;
		list-style: none;
		margin: 0;

		li {
			margin: 0;
		}

		.social-icon {
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			width: 1.818rem;
			height: 1.818rem;
			border-radius: 50%;
			transition: all 0.3s ease;
			will-change: transform;

			img {
				width: 36px;
				height: 36px;
			}

			&:hover {
				transform: scale(1.1) translateY(-0.091rem);

				svg {
					fill: rgba(255, 255, 255, 1);
				}

				.social-circle {
					opacity: 1;
					box-shadow: 0 0.136rem 0.227rem rgba(0, 0, 0, 0.3);
				}
			}

			.social-circle {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				border-radius: 50%;
				transition: all 0.3s ease;
				box-shadow: 0 0.091rem 0.182rem rgba(0, 0, 0, 0.2);
			}

			svg {
				width: 0.818rem;
				height: 0.818rem;
				position: relative;
				z-index: 1;
				fill: white;
				transition: fill 0.2s ease;
				display: block;
				margin: 0 auto;
			}

			&.facebook {
				.social-circle {
					background-color: #3b5998;
				}

				svg {
					width: 0.727rem;
					/* 16px / 22px base */
					height: 0.727rem;
					/* 16px / 22px base */
				}
			}

			&.tripadvisor {
				.social-circle {
					background-color: #00af87;
				}

				svg {
					width: 0.909rem;
					/* 20px / 22px base */
					height: 0.909rem;
					/* 20px / 22px base */
				}
			}

			&.instagram {
				.social-circle {
					background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
				}

				svg {
					width: 0.818rem;
					/* 18px / 22px base */
					height: 0.818rem;
					/* 18px / 22px base */
				}
			}

			&.youtube {
				.social-circle {
					background-color: #ff0000;
				}

				svg {
					width: 0.818rem;
					/* 18px / 22px base */
					height: 0.818rem;
					/* 18px / 22px base */
				}
			}
		}

		@media (max-width: 767px) {
			justify-content: center;
		}
	}

	@media (max-width: 768px) {
		order: 3;
		/* Move to bottom on mobile */
	}
}

.masthead-brand {
	text-align: center;
	flex: 1;


	a {
		display: inline-block;
		margin-bottom: 0.2rem;

		img {
			height: 7rem;
			width: auto;
			display: block;
		}
	}
}

.masthead-subtitle {
	text-align: center;
	text-shadow: 0.091rem 0.091rem 0.182rem rgba(0, 0, 0, 0.5);

	h1 {
		margin: 0 0 1rem 0;
		color: var(--primary-color);
		line-height: 0.7;
		font-size: 2.6rem;

		span {
			font-size: 1.8rem;
			color: #fff;
		}
	}

	h2 {
		margin: 0;
		color: #fff;
		line-height: 1.2;
		font-size: 1.6rem;
		max-width: 100%;
		font-weight: normal !important;
	}
}

.masthead-cta {
	flex: 1;
	display: flex;
	justify-content: flex-end;
	align-items: center;

	@media (max-width: 768px) {
		order: 2;
		justify-content: center;
	}

	.button {
		min-width: 9rem;
		box-shadow: 0 0.227rem 0.455rem rgba(0, 0, 0, 0.3);
		animation: lightning-glow 6s infinite;
		border: solid 1px rgba(255,255,255,0.3);

		&:hover {
			transform: translateY(-0.136rem);
			box-shadow: 0 0.318rem 0.636rem rgba(0, 0, 0, 0.4);
		}
	}
}

.masthead-callout {
	text-align: center;
	color: #fff;
	margin: 1.2rem 0 0.8rem !important;
	font-size: 1.5rem !important;
	display: block;
	text-shadow: 0.091rem 0.091rem 0.182rem rgba(0, 0, 0, 0.5);
}

.masthead-nav {
	margin: 1.2rem 0 -1rem;
	position: relative;
	z-index: 5;

	ul {
		display: flex;
		justify-content: center;
		list-style: none;
		padding: 0;
		margin: 0;
		gap: 3rem; /* Reduced from 4.5rem to 3rem for tighter spacing */
		flex-wrap: wrap;
		overflow-x: auto;
		overflow-y: hidden;
		white-space: nowrap;
		max-width: 100vw;
		box-sizing: border-box;
		-webkit-overflow-scrolling: touch;

		li {
			margin: 0;
			position: relative;
			white-space: nowrap;

			&.current_page_item {
				a { color: var(--primary-color) !important; }
			}

			a {
				font-family: var(--font-body);
				color: #fff;
				text-decoration: none;
				font-size: 1.4rem;
				transition: all 0.3s ease;
				padding: 0.25rem 0;
				font-weight: 300;
				position: relative;
				text-shadow: 0.091rem 0.091rem 0.182rem rgba(0, 0, 0, 0.5);

				&::after {
					content: '';
					position: absolute;
					width: 0;
					height: 0.091rem;
					/* 2px / 22px base */
					background-color: var(--primary-color);
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					transition: width 0.3s ease;
				}

				&:hover {
					color: var(--primary-color);

					&::after {
						width: 100%;
					}
				}
			}
		}
	}
}


@keyframes lightning-flash{0%,100%,14%,22%,26%,40%,56%,72%{opacity:0}16%,20%,30%,34%,60%,62%,64%,68%{opacity:.6}18%,28%,36%,61%,66%{opacity:.4}21%,38%,58%,70%{opacity:.3}32%,63%{opacity:.5}}
@keyframes lightning-glow {
	0%,100%,14%,22%,26%,40%,56%,72% {
		box-shadow: 0 .227rem .455rem rgba(0,0,0,.3);
	}
	16%,28% {
		box-shadow: 0 .227rem .455rem rgba(0,0,0,.3),
			0 0 1.2rem rgba(147,112,219,.5),
			0 0 2rem rgba(147,112,219,.3);
	}
	18% {
		box-shadow: 0 .227rem .455rem rgba(0,0,0,.3),
			0 0 1.6rem rgba(147,112,219,.7),
			0 0 2.5rem rgba(147,112,219,.4);
	}
	20%,36%,61%,66% {
		box-shadow: 0 .227rem .455rem rgba(0,0,0,.3),
			0 0 1.4rem rgba(147,112,219,.6),
			0 0 2.2rem rgba(147,112,219,.32);
	}
	21%,38%,58%,70% {
		box-shadow: 0 .227rem .455rem rgba(0,0,0,.3),
			0 0 1rem rgba(147,112,219,.4),
			0 0 1.8rem rgba(147,112,219,.22);
	}
	30%,34% {
		box-shadow: 0 .227rem .455rem rgba(0,0,0,.3),
			0 0 1.8rem rgba(147,112,219,.8),
			0 0 3rem rgba(147,112,219,.5);
	}
	32% {
		box-shadow: 0 .227rem .455rem rgba(0,0,0,.3),
			0 0 1.6rem rgba(147,112,219,.7),
			0 0 2.5rem rgba(147,112,219,.44);
	}
	60%,62%,64%,68% {
		box-shadow: 0 .227rem .455rem rgba(0,0,0,.3),
			0 0 2rem rgba(147,112,219,.9),
			0 0 3.5rem rgba(147,112,219,.6);
	}
	63% {
		box-shadow: 0 .227rem .455rem rgba(0,0,0,.3),
			0 0 1.8rem rgba(147,112,219,.7),
			0 0 3rem rgba(147,112,219,.44);
	}
}

@media (max-width: 768px) {

	/* Remove body padding since we're showing the masthead on mobile now */
	body {
		padding-top: 0;
	}

	/* Remove the ::before pseudo-element since we're showing the actual masthead */
	body::before {
		display: none;
	}

	/* Make desktop masthead responsive for mobile */
	#masthead {
		display: block;
		padding: 1rem 0 20rem;
		margin-bottom: -19rem;
	}

	.masthead-top {
		flex-direction: column;
		gap: 1rem;
		padding-top: 1rem;
		padding-bottom: 0;
	}

	.masthead-social {
		display: none; /* Hide social links on mobile - they'll be in hamburger menu */
	}

	.masthead-brand {
		order: 2; /* Moved logo to second position */
	}

	.masthead-brand a img {
		height: 4rem;
		width: auto;
	}

	.masthead-cta {
		order: 1; /* Moved CTA to first position */
		justify-content: center;
		flex: none;
	}

	.masthead-subtitle h1 {
		font-size: 2.2rem;
		margin-bottom: 0.8rem;
	}

	.masthead-subtitle h2 {
		font-size: 1rem;
		padding: 0 1rem;
	}

	.masthead-nav ul {
		gap: 0.5rem;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0 1rem;
	}

	.masthead-nav ul li a {
		font-size: 1rem;
		padding: 0.8rem 1.2rem;
		text-shadow: 0.091rem 0.091rem 0.182rem rgba(0, 0, 0, 0.5);
	}

	/* Sticky header mobile responsiveness - size adjustments only */
	.sticky-header-content {
		min-height: 3.5rem;
		padding: 0.5rem 0;
	}

	.sticky-brand img {
		height: 2.2rem;
		margin-right: 0.8rem;
	}

	.sticky-brand .brand-text {
		font-size: 1rem;
	}

	.mobile-cta {
		width: 3rem !important; /* Bigger and more prominent */
		height: 3rem !important; /* Bigger and more prominent */
		border-radius: 50% !important; /* Perfect circle */
		font-size: 0.8rem !important; /* Readable text */
		padding: 0 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		min-width: auto !important;
		text-align: center !important;
		line-height: 1 !important;
		font-weight: bold !important;
		background: linear-gradient(135deg, var(--primary-color) 0%, #cc0000 100%) !important;
		border: 2px solid rgba(255, 255, 255, 0.3) !important;
		box-shadow: 0 0 1rem rgba(255, 0, 0, 0.4), 
		            0 4px 8px rgba(0, 0, 0, 0.3),
		            inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
		animation: book-button-pulse 3s ease-in-out infinite !important;
		transition: all 0.3s ease !important;
		text-transform: uppercase !important;
		letter-spacing: 0.5px !important;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
		position: relative !important;
		overflow: hidden !important;
	}

	.mobile-cta::before {
		content: '' !important;
		position: absolute !important;
		top: -2px !important;
		left: -2px !important;
		right: -2px !important;
		bottom: -2px !important;
		border-radius: 50% !important;
		background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%) !important;
		animation: book-button-shimmer 2s linear infinite !important;
		z-index: -1 !important;
	}

	.mobile-cta:hover {
		transform: scale(1.1) !important;
		box-shadow: 0 0 1.5rem rgba(255, 0, 0, 0.6), 
		            0 0 2.5rem rgba(255, 0, 0, 0.3),
		            0 6px 12px rgba(0, 0, 0, 0.4),
		            inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
		animation: book-button-pulse 1.5s ease-in-out infinite !important;
	}

	.mobile-cta:active {
		transform: scale(0.95) !important;
		box-shadow: 0 0 0.8rem rgba(255, 0, 0, 0.6), 
		            0 2px 4px rgba(0, 0, 0, 0.4),
		            inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
	}

	.hamburger-toggle {
		width: 2.2rem;
		height: 2.2rem;
		padding: 0.4rem;
	}

	.hamburger-line {
		width: 1.2rem;
	}

	/* Mobile menu improvements - consistent with main styles */
	.mobile-menu {
		max-height: calc(100vh - 3.5rem);
	}

	.mobile-nav-menu a {
		padding: 1.2rem 2rem;
		font-size: 1.1rem;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
	}
}

/* Sticky Header Hamburger Menu - Show on screens smaller than 1068px */
@media (max-width: 1068px) {
	/* Show mobile controls instead of desktop nav on medium and smaller screens */
	.sticky-nav-desktop {
		display: none !important;
	}

	.sticky-cta-desktop {
		display: none !important;
	}

	.mobile-header-controls {
		display: flex !important;
	}
}

/* Sticky Header */
.sticky-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	z-index: 1000;
	transform: translateY(-100%);
	transition: transform 0.3s ease-in-out;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sticky-header.visible {
	transform: translateY(0);
}

.sticky-header-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem 0;
	min-height: 4rem;
}

.sticky-brand {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.sticky-brand a {
	display: flex;
	align-items: center;
	text-decoration: none;
	color: #fff;
}

.sticky-brand img {
	height: 2.7rem;
	width: auto;
	margin-right: 1rem;
}

.sticky-brand .brand-text {
	font-family: var(--font-heading);
	font-size: 1.2rem;
	color: var(--white);
	white-space: normal;
	line-height: 1.1;
	display: flex;
	flex-direction: column;
}

.sticky-nav-desktop {
	flex: 1;
	display: flex;
	justify-content: center;
}

.sticky-nav-menu {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 2rem;
}

.sticky-nav-menu li {
	margin: 0;
}

.sticky-nav-menu a {
	color: #fff;
	text-decoration: none;
	font-family: var(--font-body);
	font-size: 1.1rem;
	transition: color 0.3s ease;
	padding: 0.5rem 0;
	text-shadow: 0.091rem 0.091rem 0.182rem rgba(0, 0, 0, 0.5);
}

.sticky-nav-menu a:hover {
	color: var(--primary-color);
}

.sticky-cta-desktop {
	flex-shrink: 0;
}

.sticky-cta-desktop .button {
	font-size: 1.1rem;
	padding: 0.6rem 1rem;
	min-width: auto;
}

/* Mobile Header Controls */
.mobile-header-controls {
	display: none;
	align-items: center;
	gap: 0.5rem;
}

.mobile-cta {
	width: 3rem !important; /* Bigger and more prominent */
	height: 3rem !important; /* Bigger and more prominent */
	border-radius: 50% !important; /* Perfect circle */
	font-size: 0.8rem !important; /* Readable text */
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: auto !important;
	text-align: center !important;
	line-height: 1 !important;
	font-weight: bold !important;
	background: linear-gradient(135deg, var(--primary-color) 0%, #cc0000 100%) !important;
	border: 2px solid rgba(255, 255, 255, 0.3) !important;
	box-shadow: 0 0 1rem rgba(255, 0, 0, 0.4), 
	            0 4px 8px rgba(0, 0, 0, 0.3),
	            inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
	animation: book-button-pulse 3s ease-in-out infinite !important;
	transition: all 0.3s ease !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
	position: relative !important;
	overflow: hidden !important;
}

.mobile-cta::before {
	content: '' !important;
	position: absolute !important;
	top: -2px !important;
	left: -2px !important;
	right: -2px !important;
	bottom: -2px !important;
	border-radius: 50% !important;
	background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%) !important;
	animation: book-button-shimmer 2s linear infinite !important;
	z-index: -1 !important;
}

.mobile-cta:hover {
	transform: scale(1.1) !important;
	box-shadow: 0 0 1.5rem rgba(255, 0, 0, 0.6), 
	            0 0 2.5rem rgba(255, 0, 0, 0.3),
	            0 6px 12px rgba(0, 0, 0, 0.4),
	            inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
	animation: book-button-pulse 1.5s ease-in-out infinite !important;
}

.mobile-cta:active {
	transform: scale(0.95) !important;
	box-shadow: 0 0 0.8rem rgba(255, 0, 0, 0.6), 
	            0 2px 4px rgba(0, 0, 0, 0.4),
	            inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Hamburger Menu */
.hamburger-toggle {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 2.5rem;
	height: 2.5rem;
	position: relative;
}

.hamburger-line {
	width: 1.5rem;
	height: 2px;
	background-color: #fff;
	margin: 2px 0;
	transition: all 0.3s ease;
	transform-origin: center;
}

.hamburger-toggle.active .hamburger-line:nth-child(1) {
	transform: rotate(45deg) translate(5px, 5px);
}

.hamburger-toggle.active .hamburger-line:nth-child(2) {
	opacity: 0;
}

.hamburger-toggle.active .hamburger-line:nth-child(3) {
	transform: rotate(-45deg) translate(7px, -6px);
}

/* Mobile Menu - Redesigned for consistency and style */
.mobile-menu {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(20, 20, 20, 0.95) 100%);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	transform: translateY(-100%);
	opacity: 0;
	visibility: hidden;
	transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	border-top: 2px solid rgba(255, 0, 0, 0.3);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 
	            0 0 20px rgba(255, 0, 0, 0.1);
	max-height: calc(100vh - 4rem);
	overflow-y: auto;
	border-radius: 0 0 15px 15px;
}

.mobile-menu.active {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
}

.mobile-nav-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mobile-nav-menu li {
	margin: 0;
	position: relative;
}

.mobile-nav-menu li:last-child {
	border-bottom: none;
}

.mobile-nav-menu a {
	display: block;
	color: #fff;
	text-decoration: none;
	font-family: var(--font-body);
	font-size: 1.2rem;
	font-weight: 300;
	padding: 0.8rem 1rem;
	transition: all 0.3s ease;
	position: relative;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.mobile-nav-menu a::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 4px;
	height: 100%;
	background: linear-gradient(to bottom, var(--primary-color), #cc0000);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform 0.3s ease;
	opacity: 0;
}

.mobile-nav-menu a:hover {
	color: var(--primary-color);
	background: linear-gradient(90deg, rgba(255, 0, 0, 0.1) 0%, transparent 50%);
	padding-left: 1.5rem;
	text-shadow: 0 0 8px rgba(255, 0, 0, 0.3);
}

.mobile-nav-menu a:hover::before {
	transform: scaleY(1);
	transform-origin: top;
	opacity: 1;
}

.mobile-nav-menu a:active {
	background: rgba(255, 0, 0, 0.2);
	color: #fff;
}

/* Mobile Menu Social Links - Redesigned to match */
.mobile-menu-social {
	padding: 1.2rem 1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	text-align: left;
	background: linear-gradient(135deg, rgba(255, 0, 0, 0.05) 0%, transparent 100%);
	margin-top: auto; /* Push to bottom */
}

.mobile-menu-social .social-icons {
	display: flex;
	justify-content: flex-start;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mobile-menu-social .social-icons li a {
	display: inline-block;
	padding: 0.6rem !important;
	background: rgba(255, 255, 255, 0.1) !important;
	border-radius: 50% !important;
	transition: all 0.3s ease !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	backdrop-filter: blur(10px) !important;
	text-shadow: none !important;
	transform: none !important;
}

.mobile-menu-social .social-icons li a:hover {
	background: rgba(255, 0, 0, 0.2) !important;
	border-color: rgba(255, 0, 0, 0.4) !important;
	transform: scale(1.1) !important;
	padding-left: 0.6rem !important;
	box-shadow: 0 0 15px rgba(255, 0, 0, 0.3) !important;
}

.mobile-menu-social .social-icons li a::before {
	display: none !important;
}

.mobile-menu-social .social-icons li a img {
	height: 1.4rem;
	width: auto;
	display: block;
	filter: brightness(1.2);
	transition: filter 0.3s ease;
}

.mobile-menu-social .social-icons li a:hover img {
	filter: brightness(1.5) drop-shadow(0 0 5px rgba(255, 0, 0, 0.3));
}

/* Mobile masthead removed - now using responsive desktop masthead */

/* Footer Styles */
#footer {
	background-image: url('images/footer-bg.png');
	background-size: cover;
	background-position: center center;
	padding: 3.636rem 0 1.818rem;
	/* 80px and 40px / 22px base */
	color: #fff;
	overflow: hidden;
	background-color: black;
	position: relative;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 2.273rem;
		/* 50px / 22px base */
		background-image: url('images/footer-divider.svg');
		z-index: 2;
		transform: rotate(180deg);
		margin-top: -1.818rem;
		/* -40px / 22px base */
	}

	a {
		color: #fff;
		text-decoration: none;
		transition: color 0.3s ease;

		&:hover {
			color: var(--primary-color);
		}
	}

	h2 {
		margin: 0 0 0.227rem 0;
		/* 5px / 22px base */
	}

	.container {
		display: flex;
		flex-direction: column;
		gap: 1.364rem;
		/* 30px / 22px base */
		text-align: center;

		@media (min-width: 768px) {
			flex-direction: row;
			justify-content: space-between;
			align-items: flex-start;
			text-align: left;

			.footer-brand,
			.footer-menu,
			.footer-contact {
				flex: 1;
			}
		}
	}

	.footer-brand {
		margin-bottom: 0.909rem;
		/* 20px / 22px base */

		img {
			width: 100%;
			max-width: 9.091rem;
			/* 200px / 22px base */
		}
	}

	.footer-menu {
		display: flex;
		flex-direction: column;

		@media (max-width: 767px) {
			align-items: center;
		}

		@media (min-width: 768px) {
			display: flex;
			justify-content: center;
		}

		h2 {
			margin: 0 0 0.455rem 0;
			/* 10px / 22px base */
		}

		ul {
			list-style: none;
			padding: 0;
			margin: 0;
			column-count: 2;
			column-gap: 1.364rem;
			/* 30px / 22px base */
			display: inline-block;
			width: fit-content;
			max-width: 100%;

			li {
				margin-bottom: 0.455rem;
				/* 10px / 22px base */
				position: relative;
				/* 15px / 22px base */
				break-inside: avoid;
			}
		}
	}

	.contact-list {
		list-style: none;
		padding: 0;
		margin: 0 0 1.818rem;
		/* 40px / 22px base */

		li {
			margin-bottom: 0.545rem;
			/* 12px / 22px base */
		}

		.contact-item {
			display: flex;
			align-items: center;
			gap: 0.455rem;
			/* 10px / 22px base */
			transition: transform 0.3s ease;

			@media (max-width: 767px) {
				justify-content: center;
			}

			&:hover {
				transform: translateX(3px);

				.contact-icon {
					stroke: var(--primary-color);
					stroke-width: 2.2;
				}
			}

			.contact-icon {
				width: 0.909rem;
				/* 20px / 22px base */
				height: 0.909rem;
				/* 20px / 22px base */
				stroke: #ffffff;
				flex-shrink: 0;
				transition: stroke-width 0.2s ease, stroke 0.2s ease;
			}

			span {
				line-height: 1.2;
			}
		}
	}

	.social-icons {
		display: flex;
		gap: 28px;
		margin-top: 1rem;
		padding: 0;
		list-style: none;

		@media (max-width: 767px) {
			justify-content: center;
		}

		li {
			margin: 0;
		}

		.social-icon {
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			width: 2rem;
			height: 2rem;
			border-radius: 50%;
			transition: transform 0.3s ease;

			img {
				width: 36px;
				height: 36px;
			}

			&:hover {
				transform: scale(1.1);

				svg {
					fill: rgba(255, 255, 255, 0.9);
				}

				.social-circle {
					opacity: 0.9;
				}
			}

			.social-circle {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}

			svg {
				width: 0.818rem;
				/* 18px / 22px base */
				height: 0.818rem;
				/* 18px / 22px base */
				position: relative;
				z-index: 1;
				fill: white;
				transition: fill 0.2s ease;
				display: block;
				margin: 0 auto;
			}

			&.facebook {
				.social-circle {
					background-color: #3b5998;
				}

				svg {
					width: 0.727rem;
					height: 0.727rem;
				}
			}

			&.tripadvisor {
				.social-circle {
					background-color: #00af87;
				}

				svg {
					width: 0.909rem;
					height: 0.909rem;
				}
			}

			&.instagram {
				.social-circle {
					background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
				}

				svg {
					width: 0.818rem;
					height: 0.818rem;
				}
			}

			&.youtube {
				.social-circle {
					background-color: #ff0000;
				}

				svg {
					width: 0.818rem;
					height: 0.818rem;
				}
			}
		}
	}

	.footer-copyright {
		margin-top: 1.818rem;
		padding-top: 0.909rem;

		.container {
			display: block;
		}

		p {
			text-align: center;
			margin: 0;
			font-size: 0.85rem;
			opacity: 0.8;
		}
	}
}

/* 4. Flexible Content Blocks */

/* Section Spacing */
.flexi-video,
.flexi-text-image,
.flexi-feature-cards,
.flexi-testimonials,
.flexi-image-carousel,
.flexi-text-block,
.flexi-faqs,
.flexi-image-title,
.flexi-classifieds {
	padding: 2rem 0;
	/* 60px / 22px base */

	@media(max-width: 800px) {
		padding: 1rem 0;
	}
}

/* 4.1 Video Block */
section.flexi-video {
	position: relative;
	z-index: 2;
	padding-top: 1.5rem !important;

	.bg-container {
		background-image: url('./images/video-bg.svg');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center center;
		background-attachment: local;
		min-height: 100%;
		width: 100%;
		padding: 2.1% 3%;
		    max-width: 1160px;
    margin: auto;
	}

	.video-container {
		position: relative;
		margin: 0 auto;

		.video-cover {
			position: relative;
			aspect-ratio: 16 / 9;
			background-size: cover;
			background-position: center;
			cursor: pointer;

			.video-play-btn {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 120px;
				height: 120px;
				background-color: rgba(0,0,0,0.8);
				border-radius: 50%;
				border: none;
				cursor: pointer;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: background-color 0.3s ease;

				&:hover {
					background-color: var(--primary-color);
				}

				&:focus {
					outline: 2px solid var(--primary-color);
					outline-offset: 2px;
				}

				svg {
					width: 72px;
					/* 30px / 22px base */
					height: 72px;
					/* 30px / 22px base */
					fill: #fff;
				}
			}
		}

		.vimeo-player-wrapper {
			display: none;
			width: 100%;
			aspect-ratio: 16 / 9;

			iframe {
				width: 100%;
				height: 100%;
				border: none;
			}
		}
	}
}

/* 4.2 Text and Image Block */
section.flexi-text-image {
	.text-image-row {
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;
		overflow: hidden;
		align-items: center;

		.text-content,
		.image-content {
			flex: 1 0;
		}

		h2 {
			font-family: inherit;
		}

		p {
			font-size: 1.05rem;
		}

		.image-content {
			max-width: 45%;

			img {
				max-width: 100%;
			}

			&.has-mask img {
				-webkit-mask-image: url('./images/image-mask.svg');
				mask-image: url('./images/image-mask.svg');
				-webkit-mask-size: 100% 100%;
				mask-size: 100% 100%;
				-webkit-mask-repeat: no-repeat;
				mask-repeat: no-repeat;
				-webkit-mask-position: center;
				mask-position: center;
				object-fit: cover;
				object-position: center center;
			}
		}
	}

	&.alignment-left .text-image-row {
		flex-direction: row-reverse;
	}

	@media(max-width: 800px) {
		.text-image-row {
			flex-direction: column !important;

			.image-content {
				max-width: 100%;
				margin-bottom: 1rem;
			}

			.text-content {
				max-width: 100%;
			}
		}
	}
}

/* Dropcap styling for text and image blocks */
p.dropcap::first-letter {

	font-family: inherit;
	font-size: 2.5em;
	line-height: 0.9;
	color: var(--primary-color);
	margin-right: 0.05em;
	margin-top: 0.05em;
	font-weight: normal;
}

/* 4.3 Full Width Image Block */
section.flexi-full-width-image {
	padding: 0;

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

/* 4.4 Feature Cards Block */
section.flexi-feature-cards {
	.feature-cards-row {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 1.5rem;
		margin-bottom: 1rem;

		.feature-card {
			flex: 1 1 14rem;
			max-width: 30rem;
			text-align: left;
			padding: 0;
			display: flex;
			flex-direction: column;
			align-items: stretch;
			position: relative;
			background-image: url('./images/box-mask.svg');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position: center;
			background-blend-mode: lighten;
			box-shadow: none;
			transition: transform 0.3s ease, box-shadow 0.3s ease;
			border-radius: 0;

			.card-image {
				margin: 0;
				width: 100%;
				aspect-ratio: 8 / 5;
				overflow: hidden;
				border-radius: 0;
				display: block;
				position: relative;
				top: 0;
				left: 0;
				right: 0;
				height: auto;
				min-height: 0;
				z-index: 1;

				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					aspect-ratio: 8 / 5;
					display: block;
					border-radius: 0;
					-webkit-mask-image: url('./images/box-mask.svg');
					mask-image: url('./images/box-mask.svg');
					-webkit-mask-size: 100% 100%;
					mask-size: 100% 100%;
					-webkit-mask-repeat: no-repeat;
					mask-repeat: no-repeat;
					-webkit-mask-position: center;
					mask-position: center;
				}
			}

			.card-inner {
				padding: 1rem 1.5rem 1.25rem;
				display: flex;
				flex-direction: column;
				flex: 1 1 auto;
			}

			.card-title {
				margin-top: 0;
				margin-bottom: 0.455rem;
				/* 10px / 22px base */
				font-size: 1.5rem;
				color: var(--black);

				span {
					color: var(--primary-color);
				}
			}

			p {
				margin: 0 0 0.5rem;
				font-size: 0.9rem;
				/* Smaller paragraph font size */
				line-height: 1.4;
			}
		}
	}
}

/* 4.5 Testimonials Block */
section.flexi-testimonials {
	.testimonials-title {
		text-align: center;
		margin-bottom: 2rem;
		font-size: 2.25rem;
		font-weight: normal;
		color: #000;
	}

	.testimonials-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem;
		max-width: 1200px;
		margin: 0 auto;

		.testimonial-item {
			padding: 2rem;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			min-height: 200px;
			background-image: url('./images/box-mask.svg');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position: center;
			background-blend-mode: lighten;
			box-shadow: none;

			.testimonial-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 1rem;

				.quote-icon {
					width: 1.5rem;
					height: 1.5rem;
					color: #999;
					flex-shrink: 0;

					svg {
						width: 100%;
						height: 100%;
					}
				}

				.testimonial-stars {
					display: flex;
					gap: 0.09rem;

					.star {
						display: inline-block;
						width: 1.5rem;
						height: 1.5rem;

						&.star-filled {
							background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" fill="%23DAA520"/></svg>');
							background-size: contain;
						}

						&.star-empty {
							background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" fill="lightgrey"/></svg>');
							background-size: contain;
						}
					}
				}
			}

			.testimonial-quote {
				font-style: normal;
				flex-grow: 1;
				line-height: 1.5;
				font-size: 1rem;
			}
		}
	}

	/* Mobile responsive */
	@media (max-width: 768px) {
		.testimonials-grid {
			grid-template-columns: 1fr;
			gap: 1.5rem;
			max-width: 100%;

			.testimonial-item {
				padding: 1.5rem;
				min-height: auto;

				.testimonial-header {
					margin-bottom: 0.75rem;

					.quote-icon {
						width: 1.2rem;
						height: 1.2rem;
					}

					.testimonial-stars .star {
						width: 1.2rem;
						height: 1.2rem;
					}
				}

				.testimonial-quote {
					font-size: 0.9rem;
					line-height: 1.4;
				}
			}
		}
	}
}

/* 4.6 Image Carousel Block */
section.flexi-image-carousel {
	.image-swiper {
		width: 100%;
		/* Fill container width */
		margin: 0 auto;
		padding-bottom: 2.25rem;
		/* 50px */

		.swiper-wrapper {
			.swiper-slide {
				.image-carousel-pair {
					display: flex;
					gap: 1.5rem;
					/* 30px */
					justify-content: center;
					padding: 1rem 0;
					/* 20px */

					.carousel-item {
						flex: 1;
						box-sizing: border-box;
						aspect-ratio: 8 / 5;
						/* Force 8:5 aspect ratio */
						overflow: hidden;
						/* Hide any overflow from cropping */

						img {
							width: 100%;
							height: 100%;
							object-fit: cover;
							/* Crop image to fit aspect ratio */
						}
					}
				}
			}
		}

		.image-carousel-pagination {
			bottom: 0.5rem;
			/* 10px */

			.swiper-pagination-bullet {
				width: 1.5rem;
				/* 30px - smaller than previous 40px */
				height: 0.4rem;
				/* 8px - smaller than previous 10px */
				border-radius: 50px;
				background-color: #cbcbcb;
				/* 20% gray (darker gray) */
				opacity: 1;
				margin: 0 0.2rem;
				/* 4px - slightly smaller margin */

				&.swiper-pagination-bullet-active {
					background-color: #000;
					/* Black instead of primary color */
				}
			}
		}
	}
}

/* 4.7 Text Block */
section.flexi-text-block {
	/* Text block styles can be added here if needed */
	position: relative;
	p {
		font-size: 1.05rem;
	}
}

/* 4.8 FAQs Block */
section.flexi-faqs {
	.container>h2 {
		font-size: 3rem;
		font-family: inherit;
		color: var(--primary-color);
		text-align: center;
		margin-top: 0;
	}

	.faqs-accordion {
		width: 100%;
		/* Full width of container */
		margin: 0 auto;

		.faq-item {
			margin-bottom: 1rem;
			/* 22px */
			border: 1px solid #000;
			/* Black border */
			background: #fff;

			.faq-question {
				cursor: pointer;
				padding: 1rem 3rem 1rem 1rem;
				/* 22px 66px 22px 22px - more padding for better click area */
				margin: 0;
				position: relative;
				font-family: var(--font-heading);
				/* Heading font */
				text-transform: uppercase;
				/* All caps */
				font-weight: normal;
				background: #f8f8f8;
				/* Light background for questions */
				border-bottom: 1px solid #000;
				/* Separate question from answer */
				transition: background-color 0.3s ease;
				font-size: 1.4rem;
				/* 26px - larger font size for better readability */

				&:hover {
					background: #f0f0f0;
				}

				&:after {
					content: "+";
					position: absolute;
					right: 1rem;
					/* 22px */
					top: 50%;
					transform: translateY(-50%);
					font-size: 1.5rem;
					/* 33px - bigger plus icon */
					font-family: var(--font-body);
					/* Use body font for cleaner icon */
					transition: transform 0.3s ease;
				}
			}

			.faq-answer {
				display: none;
				padding: 1rem;
				/* 22px */
				font-family: var(--font-body);
				/* Body font */
				line-height: 1.6;

				p {
					margin: 0 0 1rem 0;

					&:last-child {
						margin-bottom: 0;
					}
				}
			}

			&.active {
				.faq-question {
					background: #e8e8e8;

					&:after {
						content: "−";
						/* Use proper minus symbol */
						transform: translateY(-50%) rotate(0deg);
					}
				}

				.faq-answer {
					display: block;
				}
			}
		}
	}
}

/* 4.9 Image Title Block */
section.flexi-image-title {
	position: relative;
	z-index: 2;
	padding: 2.727rem 0;
	
	@media(max-width: 800px) {
		padding: 2rem 0 0;
	}

	.bg-container {
		background-image: url('./images/video-bg.svg');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center center;
		background-attachment: local;
		min-height: 100%;
		width: 100%;
		padding: 2%;
	}

	.image-title-container {
		position: relative;
		width: 100%;
		aspect-ratio: 16 / 8;
		overflow: hidden;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	.image-title-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0);
		display: flex;
		align-items: flex-end;
		justify-content: center;
		padding-bottom: 3rem;
	}

	.image-title-overlay .container {
		width: 100%;
		text-align: center;
	}

	.image-title-heading {
		font-family: var(--font-body);
		font-size: 3.5rem;
		color: #ffffff;
		text-align: center;
		margin: 0 0 2rem 0;
		padding: 0 1rem;
		text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
		line-height: 1.2;
		font-weight: normal;
		text-transform: none;
		/* Explicitly prevent any capitalization */
	}

	.image-title-heading span {
		color: var(--primary-color);
	}

	/* Mobile responsive adjustments */
	@media (max-width: 768px) {
		.image-title-container {
			aspect-ratio: unset;
			/* Remove fixed aspect ratio on mobile */
			min-height: auto;
		}

		.image-title-overlay {
			position: relative;
			/* Change to relative positioning */
			min-height: 250px;
			/* Minimum height for visual appeal */
			padding: 2rem 0;
			/* Add consistent padding */
			align-items: center;
			/* Center the content vertically */
			background: rgba(0, 0, 0, 0.5);
			/* Slightly more opaque on mobile */
		}

		.image-title-heading {
			font-size: 1.8rem;
			/* Much smaller on mobile */
			margin: 0;
			line-height: 1.4;
			padding: 0 1rem;
		}
	}

	@media (max-width: 480px) {
		.image-title-overlay {
			min-height: 200px;
			/* Even smaller minimum height */
			padding: 1.5rem 0;
		}

		.image-title-heading {
			font-size: 1.5rem;
			/* Even smaller on very small screens */
		}
	}
}

/* 4.10 Blog List Block */
section.flexi-blog-list {
	padding: 2.727rem 0;
	/* 60px / 22px base */
	background-color: transparent;

	.blog-list-heading {
		font-family: var(--font-heading);
		font-size: 2.5rem;
		text-align: center;
		margin-bottom: 3rem;
		color: #000;
		text-transform: uppercase;
	}

	.blog-posts-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
		gap: 2rem;
		max-width: 1200px;
		margin: 0 auto;
	}

	.blog-post-item {
		background: #fff;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		transition: transform 0.3s ease, box-shadow 0.3s ease;
		border: 1px solid #ddd;

		&:hover {
			transform: translateY(-4px);
			box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
		}
	}

	.blog-post-content {
		display: flex;
		flex-direction: row;
		height: 100%;
	}

	.blog-post-image {
		flex: 0 0 40%;
		overflow: hidden;

		a {
			display: block;
			height: 100%;
		}

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform 0.3s ease;
		}

		&:hover img {
			transform: scale(1.05);
		}
	}

	.blog-post-text {
		flex: 1;
		padding: 1.5rem;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.blog-post-title {
		font-family: var(--font-heading);
		font-size: 1.3rem;
		margin: 0 0 1rem 0;
		line-height: 1.4;
		text-transform: uppercase;

		a {
			color: #000;
			text-decoration: none;
			transition: color 0.3s ease;

			&:hover {
				color: var(--primary-color);
			}
		}
	}

	.blog-post-excerpt {
		font-family: var(--font-body);
		font-size: 0.9rem;
		line-height: 1.5;
		color: #666;
		margin-bottom: 1.5rem;
		flex-grow: 1;
	}

	.blog-read-more {
		font-family: var(--font-heading);
		font-size: 0.8rem;
		color: var(--primary-color);
		text-decoration: none;
		text-transform: uppercase;
		font-weight: bold;
		transition: color 0.3s ease;
		align-self: flex-start;

		&:hover {
			color: #000;
		}
	}

	/* Mobile adjustments */
	@media (max-width: 768px) {
		.blog-posts-grid {
			grid-template-columns: 1fr;
			gap: 1.5rem;
		}

		.blog-post-content {
			flex-direction: column;
		}

		.blog-post-image {
			flex: none;
			height: 200px;
		}

		.blog-list-heading {
			font-size: 2rem;
		}
	}
}

/* 4.11 Vimeo Embed Block */
section.flexi-vimeo-embed {
	padding: 2.727rem 0;
	/* 60px / 22px base */
	background-color: transparent;

	.vimeo-embed-wrapper {
		position: relative;
		padding-bottom: 56.25%;
		/* 16:9 aspect ratio */
		height: 0;
		overflow: hidden;
		border-radius: 8px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);



		iframe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border-radius: 8px;
		}
	}

	@media (max-width: 768px) {
		padding: 2rem 0;
	}
}

/* 4.12 CTA Block */
section.flexi-cta {
	padding: 1rem 0 3rem;
	/* 88px / 22px base */
	background-color: transparent;

	.cta-content {
		text-align: center;
		max-width: 800px;
		margin: 0 auto;
	}

	h2 {
		margin-top: 0;
	}

	.cta-heading {
		font-family: var(--font-heading);
		font-size: 2.5rem;
		/* 55px / 22px base */
		color: #000;
		margin-bottom: 2rem;
		/* 44px / 22px base */
		line-height: 1.2;
		text-transform: uppercase;
	}

	.cta-button {
		font-size: 1.273rem;
		/* 28px / 22px base */
		padding: 0.6rem 2rem;
		/* 13px and 44px / 22px base */
		min-width: 10rem;
		/* 220px / 22px base */
	}

	@media (max-width: 768px) {
		padding: 3rem 0;

		.cta-heading {
			font-size: 2rem;
			/* 44px / 22px base */
			margin-bottom: 1.5rem;
		}

		.cta-button {
			font-size: 1.1rem;
			/* 24px / 22px base */
			padding: 0.5rem 1.5rem;
		}
	}
}

/* 4.13 Classifieds Block */
section.flexi-classifieds {
	.classifieds-intro {
		text-align: center;
		margin-bottom: 3rem;
		/* 66px / 22px base */

		h2 {
			font-size: 2.25rem;
			/* 50px / 22px base */
			font-weight: normal;
			color: #000;
			margin-bottom: 1rem;
			/* 22px / 22px base */
		}

		p {
			font-size: 1.1rem;
			/* 24px / 22px base */
			margin: 0.5rem auto;
			max-width: 900px;
		}
	}

	.classifieds-swiper {
		width: 100%;
		margin: 0 auto;
		padding-bottom: 3rem;
		/* 50px */

		.swiper-wrapper {
			align-items: stretch;
			/* Ensure equal height slides */

			.swiper-slide {
				height: auto;
				/* Allow slide to match content height */

				.classified-card {
					background: #fff;
					border-radius: 12px;
					overflow: hidden;
					box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
					transition: all 0.3s ease;
					height: 100%;
					/* Fill the slide height */
					display: flex;
					flex-direction: column;

					&:hover {
						transform: translateY(-5px);
						box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
					}

					.classified-image {
						aspect-ratio: 16 / 9;
						overflow: hidden;

						img {
							width: 100%;
							height: 100%;
							object-fit: cover;
							transition: transform 0.3s ease;
						}
					}

					&:hover .classified-image img {
						transform: scale(1.05);
					}

					.classified-content {
						padding: 1.5rem;
						/* 33px / 22px base */
						flex: 1;
						display: flex;
						flex-direction: column;

						h3 {
							font-family: var(--font-heading);
							font-size: 1.4rem;
							/* 31px / 22px base */
							color: #000;
							margin: 0 0 0.5rem 0;
							line-height: 1.3;
						}

						p {
							margin: 0.4rem 0;
						}

						p:last-child {
							margin-bottom: 0;
						}

						/* Style any links in content */
						a {
							color: var(--primary-color);
							text-decoration: underline;

							&:hover {
								text-decoration: none;
							}
						}

						/* Style any buttons in content */
						.button {
							font-size: 0.9rem;
							padding: 0.4rem 1rem;
							margin-top: 0.5rem;
						}
					}
				}
			}
		}

		.classifieds-pagination {
			bottom: 0.5rem;
			/* 11px / 22px base */

			.swiper-pagination-bullet {
				width: 1.5rem;
				/* 33px / 22px base */
				height: 0.4rem;
				/* 9px / 22px base */
				border-radius: 50px;
				background-color: #cbcbcb;
				opacity: 1;
				margin: 0 0.2rem;
				/* 4px / 22px base */

				&.swiper-pagination-bullet-active {
					background-color: #000;
				}
			}
		}
	}

	@media (max-width: 768px) {
		.classifieds-intro {
			margin-bottom: 2rem;

			h2 {
				font-size: 1.8rem;
				/* 40px / 22px base */
			}

			p {
				font-size: 1rem;
			}
		}

		.classifieds-swiper {
			.swiper-slide {
				.classified-card {
					.classified-content {
						padding: 1.2rem;
						/* 26px / 22px base */

						h3 {
							font-size: 1.2rem;
							/* 26px / 22px base */
						}
					}
				}
			}
		}
	}
}

/* 4.14 Ghost Quiz Block */
section.flexi-ghost-quiz {
	padding: 2.5rem 0;
	background: transparent;
	position: relative;
	overflow: hidden;
}

.ghost-quiz-container {
	min-height: 900px;
}

.quiz-header {
	text-align: center;
	margin-bottom: 2rem;
}

.quiz-header h2 {
	color: var(--primary-color);
	font-size: 2.5rem;
	margin-bottom: 0.5rem;
	text-shadow: 0 0 1rem rgba(255, 0, 0, 0.3);
}



/* Progress Bar */
.quiz-progress {
	margin-bottom: 2rem;
	position: relative;
}

.progress-bar {
	width: 100%;
	height: 0.5rem;
	background: rgba(0, 0, 0, 0.1);
	border-radius: 0.25rem;
	overflow: hidden;
	margin-bottom: 0.5rem;
}

.progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--primary-color) 0%, #ff6666 100%);
	width: 0%;
	transition: width 0.3s ease;
	border-radius: 0.25rem;
	box-shadow: 0 0 1rem rgba(255, 0, 0, 0.3);
}

.progress-text {
	color: #666;
	font-size: 0.9rem;
	text-align: center;
	display: block;
}

/* Question Cards */
.quiz-questions {
	margin-bottom: 2rem;
	position: relative;
}

.question-card {
	display: none;
	animation: fadeIn 0.5s ease-in-out;
}

.question-card.active {
	display: block;
}

.question-card h3 {
	color: #2d83b1;
	font-size: 1.5rem;
	margin-bottom: 2rem;
	text-align: center;
	position: relative;
	-webkit-box-reflect: below -12px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
	line-height: 1;
	font-family: var(--font-heading);
}


.options {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.option {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1rem;
	background: rgba(0, 0, 0, 0.03);
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 0.5rem;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
}

.option:hover {
	background: rgba(255, 0, 0, 0.05);
	border-color: rgba(255, 0, 0, 0.3);
	box-shadow: 0 4px 1rem rgba(255, 0, 0, 0.1);
}

.option input[type="radio"] {
	margin: 0;
	width: 1.2rem;
	height: 1.2rem;
	flex-shrink: 0;
	accent-color: var(--primary-color);
}

.option-text {
	color: #333;
	font-size: 1rem;
	line-height: 1.4;
	flex: 1;
}

.option input[type="radio"]:checked+.option-text {
	color: var(--primary-color);
	font-weight: bold;
}

/* Navigation */
.quiz-navigation {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 1rem;
	min-height: 3.5rem;
	padding: 0.5rem 0;
	position: relative;
}

.quiz-navigation.has-prev {
	justify-content: space-between;
}

.quiz-navigation .quiz-btn:only-child {
	margin-left: 0;
}

.quiz-btn {
	padding: 0.75rem 2rem;
	border: none;
	border-radius: 2rem;
	font-family: var(--font-heading);
	font-size: 1rem;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.quiz-btn-primary {
	background: linear-gradient(135deg, var(--primary-color) 0%, #cc0000 100%);
	color: #fff;
	box-shadow: 0 4px 1rem rgba(255, 0, 0, 0.3);
}

.quiz-btn-primary:hover:not(:disabled) {
	background: linear-gradient(135deg, #cc0000 0%, var(--primary-color) 100%);
	box-shadow: 0 4px 1.2rem rgba(255, 0, 0, 0.4);
}

.quiz-btn-primary:disabled {
	background: rgba(0, 0, 0, 0.1);
	color: rgba(0, 0, 0, 0.3);
	cursor: not-allowed;
	box-shadow: none;
}

.quiz-btn-secondary {
	background: transparent;
	color: #333;
	border: 1px solid rgba(0, 0, 0, 0.3);
}

.quiz-btn-secondary:hover {
	background: rgba(0, 0, 0, 0.05);
	border-color: rgba(0, 0, 0, 0.5);
}

/* Loading Screen */
.quiz-loading {
	text-align: center;
	padding: 3rem 0;
	position: relative;
	min-height: 400px;
}

.loading-content {
	position: relative;
}

.loading-content h3 {
	color: var(--primary-color);
	font-size: 1.8rem;
	margin-bottom: 2rem;
	animation: pulse 2s ease-in-out infinite;
}

/* Results Section */
.quiz-results {
	text-align: center;
	padding: 2rem 0;
	position: relative;
	min-height: 400px;
}

.result-content {
	position: relative;
	opacity: 1;
	transform: scale(1) translateY(0);
}

.result-content h3 {
	color: #666;
	font-size: 1.2rem;
	margin-bottom: 0.5rem;
}

.ghost-type-name {
	color: var(--primary-color);
	font-size: 3rem;
	margin: 0;
	text-shadow: 0 0 1rem rgba(255, 0, 0, 0.5);
	animation: glow 2s ease-in-out infinite alternate;
	min-height: 3.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ghost-type-description {
	color: #333;
	font-size: 1.2rem;
	line-height: 1.6;
	margin-bottom: 2rem;
	max-width: 40rem;
	margin-left: auto;
	margin-right: auto;
	min-height: 4rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Enhanced existing animations */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(1rem);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes pulse {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.7;
	}
}

@keyframes glow {
	0% {
		text-shadow: 0 0 1rem rgba(255, 0, 0, 0.5);
	}

	100% {
		text-shadow: 0 0 2rem rgba(255, 0, 0, 0.8), 0 0 3rem rgba(255, 0, 0, 0.3);
	}
}

/* Book Button Animations - Inspired by ghost tour dramatic effects */
@keyframes book-button-pulse {
	0%, 100% {
		box-shadow: 0 0 1rem rgba(255, 0, 0, 0.4), 
		            0 4px 8px rgba(0, 0, 0, 0.3),
		            inset 0 1px 0 rgba(255, 255, 255, 0.2);
	}
	
	25% {
		box-shadow: 0 0 1.3rem rgba(255, 0, 0, 0.5), 
		            0 0 2rem rgba(255, 0, 0, 0.2),
		            0 4px 8px rgba(0, 0, 0, 0.3),
		            inset 0 1px 0 rgba(255, 255, 255, 0.25);
	}
	
	50% {
		box-shadow: 0 0 1.5rem rgba(255, 0, 0, 0.6), 
		            0 0 2.5rem rgba(255, 0, 0, 0.3),
		            0 4px 12px rgba(0, 0, 0, 0.4),
		            inset 0 1px 0 rgba(255, 255, 255, 0.3);
	}
	
	75% {
		box-shadow: 0 0 1.2rem rgba(255, 0, 0, 0.45), 
		            0 0 1.8rem rgba(255, 0, 0, 0.25),
		            0 4px 10px rgba(0, 0, 0, 0.35),
		            inset 0 1px 0 rgba(255, 255, 255, 0.22);
	}
}

@keyframes book-button-shimmer {
	0% {
		transform: rotate(0deg) translateX(-100%);
		opacity: 0;
	}
	
	50% {
		opacity: 1;
	}
	
	100% {
		transform: rotate(360deg) translateX(100%);
		opacity: 0;
	}
}

/* Mystery Boxes Section */
.mystery-boxes-section {
	margin-top: 3rem;
	text-align: center;
	padding: 1rem;
}

.mystery-intro {
	font-size: 1rem;
	margin-bottom: 2rem;
	max-width: 50rem;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.6;
}

.mystery-boxes {
	display: flex;
	gap: 2rem;
	justify-content: center;
	flex-wrap: wrap;
}

.mystery-box {
	position: relative;
	flex: 1 0;
	min-height: 280px;
	height: auto;
	background: linear-gradient(135deg, rgba(128, 0, 128, 0.1) 0%, rgba(75, 0, 130, 0.1) 100%);
	border: 2px solid rgba(128, 0, 128, 0.3);
	border-radius: 1rem;
	padding: 1.5rem;
	cursor: pointer;
	overflow: hidden;
	box-shadow: 0 0 2rem rgba(128, 0, 128, 0.3);
	transition: box-shadow 0.3s ease;
}

.mystery-box:hover {
	box-shadow: 0 0 2rem rgba(128, 0, 128, 0.6);
}

.mystery-canvas {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 5;
	border-radius: 1rem;
	pointer-events: none;
}

.mystery-content {
	position: relative;
	z-index: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
	text-align: left;
}

.mystery-content h4 {
	color: var(--primary-color);
	font-size: 1.2rem;
	margin: 0 0 1rem 0;
	text-align: center;
	text-shadow: 0 0 1rem rgba(255, 0, 0, 0.5);
}

.mystery-text {
	flex: 1;
}

.mystery-text strong {
	color: #333;
	font-size: 1rem;
	display: block;
	margin-bottom: 0.5rem;
	line-height: 1.3;
}

.mystery-text p {
	color: #666;
	font-size: 0.9rem;
	line-height: 1.5;
	margin: 0;
}

/* Mobile responsive */
@media (max-width: 768px) {
	.mystery-boxes {
		flex-direction: column;
		align-items: center;
		gap: 1.5rem;
	}

	.mystery-box {
		width: 100%;
		max-width: 300px;
		min-height: 220px;
		height: auto;
		padding: 1rem;
	}

	.mystery-intro {
		font-size: 0.9rem;
		margin-bottom: 1.5rem;
	}
}

/* Beyond the Veil Specific */
.page-id-65 main h2 {
	color: #7030A0 !important;
	text-shadow: 2px 2px 4px rgba(255, 0, 0, 0.25);
}

/*************
Booking Popup
*/

.booking-popup-modal {
  position: fixed; z-index: 9999; top: 0; left: 0; width: 100vw; height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.5); transition: opacity 0.2s;
}
.booking-popup-modal[aria-hidden="true"], .booking-popup-modal[style*="display: none"] {
  opacity: 0; pointer-events: none;
}
.booking-popup-overlay {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5);
}
.booking-popup-content {
  position: relative;
  background: #fff;
  border-radius: 8px;
  max-width: 800px;
  width: 90%;
  max-height: 90vh;
  min-height: 500px; /* Minimum height of 500px */
  height: 70vh; /* Default height is 70% of the viewport */
  overflow: hidden; /* Ensure iframe fits within the container */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  padding: 0; /* Remove padding to fit title bar and iframe */
  animation: popup-in 0.2s;
}

.booking-popup-title-bar {
  background: #333;
  color: #fff;
  padding: 0.5em 1em;
  border-radius: 8px 8px 0 0;
  text-align: center;
}
.booking-popup-title-bar h2 {
  margin: 0;
  font-size: 1.25em;
}

#booking-widget-container {
  height: 100%; /* Ensure the container takes up the full height */
}

#booking-widget-container iframe {
  width: 100%;
  height: 100%; /* Ensure the iframe fills the container */
  border: none;
}

.booking-popup-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.2em;
  color: #666;
  display: none; /* Hidden by default */
}

@keyframes popup-in { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.booking-popup-close {
  position: absolute; top: 0.5em; right: 0.5em; background: none; border: none; font-size: 2em; color: #333; cursor: pointer; z-index: 2;
}
@media (max-width: 600px) {
  .booking-popup-content { width: 98vw; max-width: 98vw; padding: 1em 0.5em; }
}

.typewriter-blur .letter {
  opacity: 0;
  filter: blur(6px);
  transition: opacity 0.3s cubic-bezier(0.4,0,0.2,1), filter 0.3s cubic-bezier(0.4,0,0.2,1);
  display: inline-block;
  will-change: opacity, filter;
}

.typewriter-blur .letter.revealed {
  opacity: 1;
  filter: blur(0);
}

.typewriter-blur .letter.revealed {
  opacity: 1;
  filter: blur(0);
  text-shadow: 0 0 8px #fff, 0 0 16px rgb(222, 222, 222), 0 0 24px rgb(116, 116, 116);
  /* Adjust color and spread for your desired glow */
}

/* 5. Partners Page */
body.page-template-page-partner {
	&::before {
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(255,255,255,0.5);
		pointer-events: none;
		z-index: 0;
	}

	.container {
		max-width: 1500px;
		padding: 0 2rem;

			* {
		position: relative;
		z-index: 1;
	}
	}
	
	.partner-top {
		text-align: center;
		margin-bottom: 1.5rem;

		.partner-intro {
			color: #6d32a0;
			text-align: center;
			font-size: 1.4rem;
			margin-top: 0.5rem;
			margin-bottom: 0;
		}

		img {
			max-width: 60%;
			width: 7rem;
			margin: 0.5rem auto 0;
		}

		h1 {
			color: var(--primary-color);
			font-size: 2.3rem;
			margin: 0 0 0.3rem 0;
		}
	}

	.partner-text {
		text-align: center;

		h2 {
			font-size: 1.8rem;
			color: #fbff00;
			text-shadow: 0px 0px 20px #0f00f9, 0 0 20px #1200ff, 0 0 9px #1000ff, 0 0 20px #1200ff, 2px 4px 30px #1000ff;
			margin-bottom: 1.5rem;
		}

		h3 {
			color: inherit;
			margin: 0.5rem 0;
			font-size: 1.3rem;
		}

		.image img {
			max-width: 500px;
			width: 100%;
			margin: auto auto 1.5rem auto;
			display: block;
		}

		.image .button {
			font-size: 1rem;
		}
	}

	.masthead-callout {
		background: linear-gradient(to bottom, #dea9ff 0%, #dea9ff 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		text-fill-color: transparent;
	}

	.masthead-subtitle h2 {
		        background: linear-gradient(to bottom, #d1d170 0%, #a7a729 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		text-fill-color: transparent;

	}

	.highlights-list {
		list-style: none;
		font-size: 1.3rem;
		font-family: var(--font-heading);
		font-weight: normal;
		margin-top: 2rem;
		margin-bottom: 2rem;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1rem;

		span {
			color: #fdff1d;
			text-shadow: 0px 0px 20px #0f00f9, 0 0 20px #1200ff, 0 0 9px #1000ff, 0 0 20px #1200ff, 2px 4px 30px #1000ff;
		}

		@media(max-width: 768px) {
			grid-template-columns: 1fr;
			gap: 0.7rem;
		}
	}

	.partner-highlights {
		margin-bottom: 0rem;
	}

	.sticky-nav-desktop {
		display: none;
	}

	.flexi-cta {
		padding: 0 0 1rem !important;
	}

	.cta-heading {
		font-size: 2rem !important;
		margin-top: 0;
		margin-bottom: 1rem !important;
	}

	.tour-details {
		list-style: none; display: flex; gap: 1.5rem; align-items:center; justify-content: center; font-weight: normal; font-size: 1rem;

		@media(max-width: 768px) {
			flex-direction: column;
			gap: 0.7rem;
		}
	}
 
	.testimonials-title {
		font-size: 1.2rem;
		margin: 0;
	}

	.partner-testimonials {
		margin-bottom: 1.5rem;
		font-size: 1.1rem;
	}

	.partner-logo-image {
		height: 3rem;
		width: auto;
	}
}

/* Beyond the Veil Specific */
.page-id-65 {
	@media(min-width: 768px) {
		#masthead {
			mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 1) 101%) !important;
		}
	}

	main {
		margin-top: 3rem;

		@media(max-width: 768px) {
			margin-top: 1rem;
		}
	}
}

/* === Desktop mask, Mobile gradient override === */
#masthead {
	/* Desktop: Apply mask to masthead container (like page-id-65 but normal size) */
	@media (min-width: 769px) {
		mask-image: linear-gradient(to top, 
			rgba(0, 0, 0, 0) 0%, 
			rgba(0, 0, 0, 0) 20%, 
			rgba(0, 0, 0, 1) 50%, 
			rgba(0, 0, 0, 1) 100%) !important;
		-webkit-mask-image: linear-gradient(to top, 
			rgba(0, 0, 0, 0) 0%, 
			rgba(0, 0, 0, 0) 20%, 
			rgba(0, 0, 0, 1) 50%, 
			rgba(0, 0, 0, 1) 100%) !important;
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
	}
}

#masthead .masthead-bg {
	/* Mobile ONLY: No masking for faster LCP */
	@media (max-width: 768px) {
		-webkit-mask-image: none !important;
		mask-image: none !important;
		position: relative;
	}
	
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* Mobile ONLY: Gray gradient overlay to replace mask */
@media (max-width: 768px) {
	#masthead .masthead-bg::after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(to top, 
			#cbcbcb 0%, 
			rgba(203, 203, 203, 0.8) 20%, 
			rgba(203, 203, 203, 0.3) 50%, 
			transparent 100%);
		pointer-events: none;
		z-index: 1;
	}
}

/* Ensure lightning video shows again on mobile */
@media (max-width: 768px) {
	.masthead-lightning { display: block !important; }
}

/* Desktop/Mobile mask handling - properly organized */
/* Mask should be on picture element, not img - removed conflicting rules */

/* Remove any gradient overlay element so we only use true transparency */
.masthead-blur { display: none !important; background: none !important; backdrop-filter: none !important; filter: none !important; }