/* Storm Hero Block Styles - Adjusted for Client Navigation Z-Index */
/* Client Nav Z-Index: Desktop 40, Mobile 10 */
/* Loading Screen Z-Index: 50 (covers nav during initial load) */

/* Spacer and Padding */
.hide {
	display: none !important;
}
.csh-spacer {
	width: 100%;
	height: 100vh;
	display: block;
	visibility: hidden;
	pointer-events: none;
	transition: height 1.5s ease-in-out;
	position: relative;
	z-index: 1;  /* Low z-index for spacer */
}

/* Mobile and tablet: account for navigation in spacer */
@media (max-width: 768px) {
	.csh-spacer {
		height: calc(100vh - var(--nav-height-mobile));
		margin-top: var(--nav-height-mobile);
	}
}

@media (min-width: 769px) and (max-width: 1280px) {
	.csh-spacer {
		height: calc(100vh - var(--nav-height-tablet));
		margin-top: var(--nav-height-tablet);
	}
}

.csh-spacer.csh-hidden {
	height: 0;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

.csh-pad {
	width: 100%;
	height: 50vh;
	background: #fff;
	display: block;
	position: relative;
	z-index: 1;  /* Keep pad at low z-index */
	min-height: 300px;
	max-height: 600px;
}

/* Loading Screen - Just above client's nav (40) to cover everything */
.csh-load {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: #000;
	z-index: 50;  /* Above client's nav (40) to cover everything during load */
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	visibility: visible;
	transition: opacity 0.8s ease, visibility 0.8s ease;
	will-change: opacity;
}

/* Mobile and tablet: Full coverage */
@media (max-width: 768px) {
	.csh-load {
		top: 0;  /* Start from absolute top */
		height: 100vh;  /* Full viewport */
		z-index: 50;  /* Above mobile nav (10) */
	}
}

@media (min-width: 769px) and (max-width: 1280px) {
	.csh-load {
		top: 0;  /* Start from absolute top */
		height: 100vh;  /* Full viewport */
		z-index: 50;  /* Above nav */
	}
}

.csh-load.csh-fade {
	opacity: 0;
	visibility: hidden;
}

.csh-load-txt {
	font-family: 'Comcast New Vision', sans-serif;
	font-size: 24px;
	font-weight: 300;
	color: #fff;
	letter-spacing: 0.1em;
	animation: csh-pulse 1.5s infinite;
	z-index: 51;  /* Above loading background */
	position: relative;
}

@keyframes csh-pulse {
	0%, 100% { opacity: 0.4; }
	50% { opacity: 0.8; }
}

/* Main Hero Container - Below client's nav (40) but above content */
.csh-hero {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	z-index: 30;  /* Below client's nav (40) but above body content */
	background: #000;
	transition: none;
	transform: translateZ(0);
	contain: layout style paint;
}

/* Mobile and tablet: account for lower nav z-index */
@media (max-width: 768px) {
	.csh-hero {
		z-index: 8;  /* Below mobile nav (10) but above content */
		top: 0;
		height: 100vh;
	}
}

@media (min-width: 769px) and (max-width: 1280px) {
	.csh-hero {
		z-index: 8;  /* Below mobile nav (10) for tablets */
		top: 0;
		height: 100vh;
	}
}

.csh-hero:not(.csh-done) {
	will-change: transform, opacity;
}

.csh-hero.csh-done {
	animation: csh-hero-exit 1.5s ease-in-out forwards;
	pointer-events: none;
}

.csh-hero.csh-reactivating {
	animation: csh-hero-enter 0.6s ease-out forwards;
}

@keyframes csh-hero-exit {
	0% {
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
	100% {
		transform: translate3d(0, -100%, 0);
		opacity: 0;
		visibility: hidden;
	}
}

@keyframes csh-hero-enter {
	0% {
		transform: translate3d(0, -100%, 0);
		opacity: 0;
		visibility: visible;
	}
	100% {
		transform: translate3d(0, 0, 0);
		opacity: 1;
		visibility: visible;
	}
}

.csh-hero:not(.csh-done) {
	pointer-events: auto;
	visibility: visible;
	opacity: 1;
}

/* Video fade during exit */
.csh-hero.csh-done .csh-vid-wrap {
	animation: csh-video-fade 1.5s ease-out forwards;
}

@keyframes csh-video-fade {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

/* Video Background */
.csh-vid-wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.csh-vid,
.csh-fbimg {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	transform: translate3d(-50%, -50%, 0) scale(1.05);
	object-fit: cover;
}

.csh-fbimg {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.csh-vid { display: none; }
	.csh-fbimg { display: block; }
}

/* Overlay */
.csh-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		to bottom,
		rgba(30, 34, 43, 0.4) 0%,
		rgba(30, 34, 43, 0.6) 50%,
		rgba(30, 34, 43, 0.4) 100%
	);
	z-index: 1;
	transition: opacity 1.5s ease-out;
}

.csh-hero.csh-done .csh-overlay {
	opacity: 0;
}

/* Slides Container */
.csh-slides {
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 2;
}

/* Individual Slides */
.csh-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transform: translateZ(0);
	backface-visibility: hidden;
	will-change: opacity, visibility;
}

/* Adjust vertical centering on mobile/tablet to account for nav */
@media (max-width: 768px) {
	.csh-slide {
		padding-bottom: calc(var(--nav-height-mobile) / 2);
	}
}

@media (min-width: 769px) and (max-width: 1280px) {
	.csh-slide {
		padding-bottom: calc(var(--nav-height-tablet) / 2);
	}
}

@media (min-width: 1281px) {
	.csh-slide {
		align-items: flex-start;
		padding-top: calc(33vh - 60px);
	}
}

.csh-slide.csh-active {
	opacity: 1;
	visibility: visible;
}

/* Content Container */
.csh-content {
	text-align: center;
	padding: 0 20px;
	padding-left: max(20px, env(safe-area-inset-left));
	padding-right: max(20px, env(safe-area-inset-right));
	max-width: 100%;
	width: 100%;
	transform: translateZ(0);
	backface-visibility: hidden;
	will-change: transform, opacity;
}

.csh-s1-content {
	/* Initial state for fade-in animation */
	opacity: 0;
	transform: translate3d(0, 30px, 0);
}

@media (max-width: 768px) {
	.csh-content { 
		padding: 0 40px;
		padding-left: max(40px, env(safe-area-inset-left));
		padding-right: max(40px, env(safe-area-inset-right));
	}
}

@media (min-width: 769px) {
	.csh-content { 
		padding: 0 50px; 
	}
}

@media (min-width: 1281px) {
	.csh-content { 
		padding: 0 60px; 
	}
}

@media (min-width: 1920px) {
	.csh-content {
		padding: 0 80px;
	}
}

/* Typography */
.csh-h1 {
	font-family: Comcast New Vision, Verdana, sans-serif;
	font-size: clamp(32px, 6vw, 96px);
	font-weight: 300;
	line-height: 1.1;
	color: #fff;
	margin: 0 auto;
	max-width: 100%;
	letter-spacing: -0.02em;
	opacity: 0;
	-webkit-font-smoothing: antialiased;
	backface-visibility: hidden;
	transform: translateZ(0);
}

/* Initial load animation for slide 1 */
.csh-slide.csh-s1.csh-active .csh-content {
	animation: csh-fade-in 1.2s ease-out 0.3s forwards;
}

@keyframes csh-fade-in {
	0% {
		opacity: 0;
		transform: translate3d(0, 30px, 0);
	}
	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

/* Keep the glow animation separate */
.csh-slide.csh-s1.csh-active .csh-h1 {
	animation: csh-glow 8s infinite 2s;
}

@keyframes csh-glow {
	0%, 100% {
		text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5),
					 0 0 40px rgba(255, 255, 255, 0);
	}
	50% {
		text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5),
					 0 0 60px rgba(255, 255, 255, 0.2),
					 0 0 100px rgba(255, 255, 255, 0.1);
	}
}

.csh-txt {
	font-family: Comcast New Vision, Verdana, sans-serif;
	font-size: clamp(16px, 2vw, 32px);
	font-weight: 300;
	line-height: 1.4;
	color: #fff;
	margin: 0 auto;
	max-width: 900px;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
	letter-spacing: -0.01em;
	transform: translateZ(0);
	-webkit-font-smoothing: antialiased;
	backface-visibility: hidden;
}

/* Slide Animations */
.csh-slide.csh-exit .csh-content:not(.csh-s1-content) {
	animation: csh-out 0.4s ease-out forwards;
}

.csh-slide.csh-exit-r .csh-content:not(.csh-s1-content) {
	animation: csh-out-r 0.4s ease-out forwards;
}

.csh-slide.csh-enter .csh-content {
	animation: csh-in 0.5s ease-out forwards;
}

.csh-slide.csh-enter-r .csh-content {
	animation: csh-in-r 0.5s ease-out forwards;
}

/* Special animations for slide 1 */
.csh-s1.csh-exit .csh-h1 {
	animation: none !important;
}

.csh-s1.csh-exit .csh-content {
	animation: csh-blur-out 0.8s ease-out forwards !important;
}

/* When returning to slide 1 from slide 2 */
.csh-s1.csh-enter-r .csh-content {
	animation: csh-blur-in 0.8s ease-out forwards !important;
}

/* Ensure h1 is visible for animations */
.csh-slide.csh-s1.csh-active .csh-h1,
.csh-slide.csh-s1.csh-enter-r .csh-h1 {
	opacity: 1;
}

/* Blur transition animations */
@keyframes csh-blur-out {
	0% {
		opacity: 1;
		transform: translateY(0) scale(1);
		filter: blur(0) brightness(1);
		-webkit-filter: blur(0) brightness(1);
	}
	10% {
		opacity: 0.98;
		transform: translateY(-4px) scale(1.01);
		filter: blur(2px) brightness(1.08);
		-webkit-filter: blur(2px) brightness(1.08);
	}
	20% {
		opacity: 0.95;
		transform: translateY(-8px) scale(1.02);
		filter: blur(5px) brightness(1.15);
		-webkit-filter: blur(5px) brightness(1.15);
	}
	30% {
		opacity: 0.9;
		transform: translateY(-12px) scale(1.03);
		filter: blur(10px) brightness(1.2);
		-webkit-filter: blur(10px) brightness(1.2);
	}
	40% {
		opacity: 0.8;
		transform: translateY(-16px) scale(1.04);
		filter: blur(15px) brightness(1.25);
		-webkit-filter: blur(15px) brightness(1.25);
	}
	50% {
		opacity: 0.65;
		transform: translateY(-20px) scale(1.05);
		filter: blur(22px) brightness(1.3);
		-webkit-filter: blur(22px) brightness(1.3);
	}
	60% {
		opacity: 0.5;
		transform: translateY(-24px) scale(1.07);
		filter: blur(30px) brightness(1.35);
		-webkit-filter: blur(30px) brightness(1.35);
	}
	70% {
		opacity: 0.35;
		transform: translateY(-28px) scale(1.08);
		filter: blur(38px) brightness(1.4);
		-webkit-filter: blur(38px) brightness(1.4);
	}
	80% {
		opacity: 0.2;
		transform: translateY(-32px) scale(1.09);
		filter: blur(45px) brightness(1.45);
		-webkit-filter: blur(45px) brightness(1.45);
	}
	90% {
		opacity: 0.1;
		transform: translateY(-36px) scale(1.095);
		filter: blur(52px) brightness(1.48);
		-webkit-filter: blur(52px) brightness(1.48);
	}
	100% {
		opacity: 0;
		transform: translateY(-40px) scale(1.1);
		filter: blur(60px) brightness(1.5);
		-webkit-filter: blur(60px) brightness(1.5);
	}
}

@keyframes csh-blur-in {
	0% {
		opacity: 0;
		transform: translateY(40px) scale(0.95);
		filter: blur(50px) brightness(1.5);
		-webkit-filter: blur(50px) brightness(1.5);
	}
	20% {
		opacity: 0.2;
		transform: translateY(32px) scale(0.96);
		filter: blur(40px) brightness(1.4);
		-webkit-filter: blur(40px) brightness(1.4);
	}
	40% {
		opacity: 0.5;
		transform: translateY(24px) scale(0.97);
		filter: blur(25px) brightness(1.3);
		-webkit-filter: blur(25px) brightness(1.3);
	}
	60% {
		opacity: 0.8;
		transform: translateY(16px) scale(0.98);
		filter: blur(12px) brightness(1.2);
		-webkit-filter: blur(12px) brightness(1.2);
	}
	80% {
		opacity: 0.95;
		transform: translateY(8px) scale(0.99);
		filter: blur(4px) brightness(1.1);
		-webkit-filter: blur(4px) brightness(1.1);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
		filter: blur(0) brightness(1);
		-webkit-filter: blur(0) brightness(1);
	}
}

/* Content slide animations */
@keyframes csh-out {
	0% {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
	100% {
		opacity: 0;
		transform: translate3d(0, -30px, 0);
	}
}

@keyframes csh-out-r {
	0% {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
	100% {
		opacity: 0;
		transform: translate3d(0, 30px, 0);
	}
}

@keyframes csh-in {
	0% {
		opacity: 0;
		transform: translate3d(0, 30px, 0);
	}
	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes csh-in-r {
	0% {
		opacity: 0;
		transform: translate3d(0, -30px, 0);
	}
	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

/* Text animations for slides 2-4 */
.csh-slide:not(.csh-s1) .csh-txt {
	opacity: 0;
	transform: translate3d(0, 20px, 0);
}

.csh-slide.csh-active:not(.csh-s1):not(.csh-enter):not(.csh-enter-r) .csh-txt {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

.csh-slide.csh-enter:not(.csh-s1) .csh-txt,
.csh-slide.csh-enter-r:not(.csh-s1) .csh-txt {
	opacity: 0;
	animation: csh-txt-in 0.6s ease-out 0.2s both;
}

.csh-slide.csh-exit:not(.csh-s1) .csh-txt,
.csh-slide.csh-exit-r:not(.csh-s1) .csh-txt {
	animation: csh-txt-out 0.4s ease-out forwards;
}

@keyframes csh-txt-in {
	0% {
		opacity: 0;
		transform: translate3d(0, 20px, 0);
	}
	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes csh-txt-out {
	0% {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
	100% {
		opacity: 0;
		transform: translate3d(0, -20px, 0);
	}
}

/* Special exit animation for slide 4 */
.csh-s4.csh-exit .csh-content {
	animation: csh-s4-out 1s ease-out forwards !important;
}

@keyframes csh-s4-out {
	0% { 
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
	100% { 
		opacity: 0;
		transform: translate3d(0, -40px, 0);
	}
}

/* Special animation when exiting from slide 4 to body */
.csh-hero.csh-done .csh-scroll {
	opacity: 0;
	transition: opacity 0.3s ease;
}

/* Scroll Indicator */
.csh-scroll {
	position: absolute;
	bottom: 60px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	color: #fff;
	font-family: 'Comcast New Vision', sans-serif;
	font-size: 14px;
	font-weight: 300;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0;
	transition: opacity 0.5s;
	z-index: 3;
	pointer-events: none;
}

@media (max-width: 768px) {
	.csh-scroll {
		bottom: 40px;
	}
}

@media (min-width: 1281px) {
	.csh-scroll { 
		bottom: 40px; 
	}
}

.csh-scroll.csh-show {
	opacity: 1;
	animation: csh-bounce 2s infinite;
}

@keyframes csh-bounce {
	0%, 100% {
		transform: translateX(-50%) translateY(0);
	}
	50% {
		transform: translateX(-50%) translateY(10px);
	}
}

/* Progress Dots Indicator - Below nav but visible */
.csh-progress {
	position: fixed;
	right: 40px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 24px;
	z-index: 35;  /* Below client's nav (40) but above hero */
	opacity: 0;
	transition: opacity 0.8s ease 1s;
	pointer-events: none;
}

/* Mobile and tablet: adjust for lower nav z-index */
@media (max-width: 768px) {
	.csh-progress {
		z-index: 9;  /* Below mobile nav (10) but visible */
		top: 50%;
	}
}

@media (min-width: 769px) and (max-width: 1280px) {
	.csh-progress {
		z-index: 9;  /* Below mobile nav (10) for tablets */
		top: 50%;
	}
}

.csh-hero:not(.csh-done) .csh-progress {
	opacity: 1;
	pointer-events: auto;
}

.csh-hero.csh-done .csh-progress {
	opacity: 0;
	transition: opacity 0.5s ease;
	pointer-events: none;
}

.csh-progress-dot {
	position: relative;
	width: 24px;
	height: 24px;
	cursor: pointer;
	transition: transform 0.3s ease;
	pointer-events: auto;
}

.csh-progress-dot:hover {
	transform: scale(1.2);
}

.csh-progress-dot:active {
	transform: scale(0.95);
}

.csh-progress-dot::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.4);
	transition: background 0.4s ease, width 0.4s ease, height 0.4s ease;
}

.csh-progress-dot.csh-dot-active::before {
	background: rgba(255, 255, 255, 1);
	width: 10px;
	height: 10px;
}

.csh-progress-dot:hover::before {
	background: rgba(255, 255, 255, 0.7);
	width: 10px;
	height: 10px;
}

/* Ring around active dot */
.csh-dot-ring {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0);
	opacity: 0;
	transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
}

.csh-dot-active .csh-dot-ring {
	border-color: rgba(255, 255, 255, 0.8);
	opacity: 1;
	animation: csh-ring-pulse 2s infinite;
}

@keyframes csh-ring-pulse {
	0%, 100% {
		transform: translate(-50%, -50%) scale(1);
		opacity: 1;
	}
	50% {
		transform: translate(-50%, -50%) scale(1.1);
		opacity: 0.6;
	}
}

/* Responsive adjustments for progress dots */
@media (max-width: 768px) {
	.csh-progress {
		right: 20px;
		gap: 20px;
	}
	
	.csh-progress-dot::before {
		width: 6px;
		height: 6px;
	}
	
	.csh-dot-ring {
		width: 16px;
		height: 16px;
	}
}

/* Hide progress dots on very small screens */
@media (max-width: 480px) {
	.csh-progress {
		display: none;
	}
}

/* Body lock styles */
html.csh-lock,
body.csh-lock {
	overflow: hidden !important;
	position: fixed !important;
	width: 100% !important;
	height: 100%;
	touch-action: none !important;
	-webkit-overflow-scrolling: auto !important;
	overscroll-behavior: none !important;
}

/* Ensure navigation stays on top - matching client's values */
body.csh-lock > nav,
body.csh-lock > header,
body.csh-lock > .navigation,
body.csh-lock > .navbar,
body.csh-lock > [role="navigation"] {
	position: fixed !important;
	z-index: 40 !important;  /* Client's desktop nav z-index */
}

/* Mobile nav z-index */
@media (max-width: 768px) {
	body.csh-lock > nav,
	body.csh-lock > header,
	body.csh-lock > .navigation,
	body.csh-lock > .navbar,
	body.csh-lock > [role="navigation"] {
		z-index: 10 !important;  /* Client's mobile nav z-index */
	}
}

/* Content reveal animation */
.page-content {
	opacity: 0;
	transform: translate3d(0, 50px, 0);
	transition: all 1s ease-out;
	will-change: transform, opacity;
	position: relative;
	z-index: 1;  /* Keep body content at low z-index */
}

body.csh-revealing .page-content {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	transition-delay: 0.5s;
}

/* Ensure all body content stays below hero */
body > *:not(nav):not(header):not(.csh-hero):not(.csh-load):not(#csh-spacer):not(#csh-pad) {
	position: relative;
	z-index: 1;  /* Force low z-index on all body content */
}

/* Responsive Design */
@media (max-width: 480px) {
	.csh-progress {
		display: none;
	}
	.csh-content {
		padding: 0 30px;
		padding-left: max(30px, env(safe-area-inset-left));
		padding-right: max(30px, env(safe-area-inset-right));
	}
	.csh-h1 {
		font-size: clamp(24px, 7vw, 40px);
		line-height: 1.15;
	}
	.csh-txt {
		font-size: clamp(14px, 3.5vw, 18px);
		line-height: 1.45;
	}
}

@media (max-width: 768px) {
	.csh-pad {
		height: 40vh;
		min-height: 250px;
	}
	.csh-h1 {
		font-size: clamp(28px, 8vw, 48px);
		white-space: normal;
		padding: 0 20px;
		line-height: 1.15;
	}
	.csh-txt {
		font-size: clamp(14px, 3.5vw, 20px);
		line-height: 1.4;
		padding: 0 10px;
	}
}

@media (min-width: 769px) and (max-width: 1280px) {
	.csh-h1 {
		font-size: clamp(40px, 4.5vw, 60px);
		white-space: nowrap;
	}
	.csh-txt {
		font-size: clamp(18px, 2.5vw, 28px);
		max-width: 800px;
	}
}

@media (min-width: 1281px) {
	.csh-h1 {
		font-size: clamp(56px, 4vw, 72px);
		white-space: nowrap;
	}
	.csh-txt {
		font-size: clamp(20px, 1.8vw, 32px);
	}
}

@media (min-width: 1920px) {
	.csh-h1 {
		font-size: 72px;
		white-space: nowrap;
	}
	.csh-txt {
		font-size: 32px;
	}
	.csh-slide {
		padding-top: calc(30vh - 60px);
	}
	.csh-pad {
		height: 40vh;
	}
}

@media (min-width: 2560px) {
	.csh-h1 {
		font-size: 80px;
	}
}

/* MOBILE Z-INDEX FIX - Working with client's nav z-index (10) */
@media (max-width: 768px) {
	/* Force hero below nav but above content */
	#csh-hero,
	.csh-hero {
		z-index: 8 !important;  /* Below mobile nav (10) */
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		height: 100vh !important;
	}
	
	#csh-load,
	.csh-load {
		z-index: 50 !important;  /* Loading screen above nav (10) */
	}
	
	.csh-progress {
		z-index: 9 !important;  /* Progress dots below nav (10) */
	}
	
	/* Force ALL body content below hero */
	body > *:not(nav):not(header):not(.csh-hero):not(#csh-hero):not(.csh-load):not(#csh-load) {
		z-index: 1 !important;
		position: relative !important;
	}
	
	.page-content,
	main,
	section,
	article {
		z-index: 1 !important;
		position: relative !important;
	}
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
	.csh-hero {
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
	}
}

/* STACKING CONTEXT FIX */
/* Remove transforms from parent elements that might break z-index */
body {
	transform: none !important;
	-webkit-transform: none !important;
}

body > *:not(.csh-hero):not(.csh-load):not(nav):not(header) {
	transform: none !important;
	-webkit-transform: none !important;
	will-change: auto !important;
}

/* FINAL OVERRIDE - Working with client's z-index values */
#csh-hero {
	z-index: 30 !important;  /* Below nav (40) on desktop */
	position: fixed !important;
}

/* Ensure loading screen covers EVERYTHING including nav */
#csh-load {
	z-index: 50 !important;  /* Above nav (40) to cover everything */
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
}

@media (max-width: 768px) {
	#csh-hero {
		z-index: 8 !important;  /* Below mobile nav (10) */
	}
	
	#csh-load {
		z-index: 50 !important;  /* Still above mobile nav to cover everything */
	}
}