/* Page Steps - reusable front-end section. */

.hs-process{
	position:relative;
	height:100vh;
	--hs-title-font-size:clamp(29.333px,3.027vw,56px);
	--hs-desc-font-size:clamp(18.667px,1.667vw,26.667px);
}

.hs-button{
	background: #FFF;
  	min-width: 233px;
	max-width: max-content;
	padding: 0 20px;
  	height: 71px;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	gap: 16px;
	font-size: 18px;
  	border-radius: 144px;
  	margin-top: 25px;
}

.hs-button:hover{
	transform: scale(1.05);
	opacity: 0.8;
}

.hs-process.hs-fonts-small{
	--hs-title-font-size:clamp(22px,2.27vw,44px);
	--hs-desc-font-size:clamp(14px,1.25vw,20px);
}

.hs-stage{
	position:relative;
	height:100vh;
	overflow:hidden;
	background:#0C1029;
}

.hs-step{
	position:relative;
	display:grid;
	grid-template-columns:1fr 1fr;
	height:100vh;
}

/* LEFT - navy panel */
.hs-panel{
	position:relative;
	background:#0C1029;
	padding:clamp(2.5rem,5vw,5rem);
	display:flex;
	flex-direction:column;
}

.hs-num{
	font-family:'Cormorant Garamond',serif;
	font-weight:300;
	font-size:clamp(56px,6.979vw,134px);
	line-height:1;
	color:rgba(255,255,255,.2);
	letter-spacing:.02em;
}

.hs-text{
	margin-top:auto;
}

.hs-title{
	font-family:'PP Pangaia','Cormorant Garamond',Georgia,serif;
	font-weight:200;
	font-size:var(--hs-title-font-size);
	line-height:1.12;
	letter-spacing:.01em;
	color:#fff;
	margin:0;
	text-transform: capitalize !important;
}

.hs-desc{
	margin-top:1rem;
	font-size:var(--hs-desc-font-size);
	line-height:1.5;
	color:#fff;
}

.hs-desc p{
	margin:0 0 .6em;
}

.hs-desc p:last-child{
	margin-bottom:0;
}

/* RIGHT - featured image only */
.hs-media{
	position:relative;
	overflow:hidden;
	background:#15110c;
}

.hs-bg{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	will-change:transform;
	filter:saturate(1.02) brightness(.92);
}

.hs-media::after{
	content:"";
	position:absolute;
	inset:0;
	pointer-events:none;
	background:
		linear-gradient(90deg,rgba(12,16,41,.55) 0%,rgba(12,16,41,0) 22%),
		linear-gradient(180deg,rgba(20,14,8,.12),rgba(20,14,8,.30));
}

/* Mobile (<768px): stacked, no pin, all steps visible. */
@media (max-width:767px){
	.hs-process{
		height:auto;
	}

	.hs-stage{
		height:auto;
		overflow:visible;
	}

	.hs-step{
		grid-template-columns:1fr;
		height:auto;
	}

	.hs-panel{
		padding:2.5rem 1.6rem 3rem;
	}

	.hs-text{
		margin-top:1.6rem;
	}

	.hs-media{
		height:62vh;
	}
}

/* Desktop/tablet initial state before GSAP boots. */
@media (min-width:768px){
	.hs-step{
		position:absolute;
		inset:0;
	}

	.hs-step:not(:first-child){
		opacity:0;
		visibility:hidden;
	}
}