/* =========================================================
   GPN ARTISTIC HERO
========================================================= */

.gpn-hero {
	position: relative;

	width: 100%;
	height: min(900px, 100vh);

	min-height: 680px;

	overflow: hidden;

	background: #102d18;

	color: #fff;
}


/* =========================================================
   SLIDER
========================================================= */

.gpn-hero-slider {
	position: absolute;

	inset: 0;
}


/* =========================================================
   SLIDE
========================================================= */

.gpn-hero-slide {
	position: absolute;

	inset: 0;

	visibility: hidden;

	opacity: 0;

	z-index: 1;

	transition:
		opacity 1.1s ease,
		visibility 1.1s ease;
}


.gpn-hero-slide.is-active {
	visibility: visible;

	opacity: 1;

	z-index: 2;
}


/* =========================================================
   IMAGE
========================================================= */

.gpn-hero-image {
	position: absolute;

	inset: 0;

	overflow: hidden;
}


.gpn-hero-image img {
	width: 100%;
	height: 100%;

	display: block;

	object-fit: cover;

	transform: scale(1.04);

	transition:
		transform 7s cubic-bezier(.2,.6,.2,1);
}


.gpn-hero-slide.is-active
.gpn-hero-image img {
	transform: scale(1.11);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.gpn-hero-overlay {
	position: absolute;

	inset: 0;

	z-index: 2;

	background:

		linear-gradient(
			90deg,
			rgba(6, 25, 12, .82) 0%,
			rgba(6, 25, 12, .58) 34%,
			rgba(6, 25, 12, .18) 72%,
			rgba(6, 25, 12, .10) 100%
		),

		linear-gradient(
			180deg,
			rgba(4, 17, 8, .35),
			transparent 30%,
			rgba(4, 17, 8, .35)
		);
}


/* =========================================================
   CONTENT
========================================================= */

.gpn-hero-content {
	position: relative;

	z-index: 3;

	height: 100%;

	display: flex;

	align-items: center;

	width: min(1200px, 92%);

	margin: 0 auto;
}


.gpn-hero-content-inner {
	max-width: 690px;

	padding-top: 55px;
}


/* =========================================================
   KICKER
========================================================= */

.gpn-hero-kicker {
	display: inline-flex;

	align-items: center;

	gap: 12px;

	margin-bottom: 25px;

	color: #dfb653;

	font-size: 11px;

	font-weight: 700;

	letter-spacing: 3px;

	text-transform: uppercase;
}


.gpn-hero-kicker::before {
	content: "";

	width: 36px;
	height: 1px;

	background: #dfb653;
}


/* =========================================================
   HEADLINE
========================================================= */

.gpn-hero h1,
.gpn-hero h2 {
	max-width: 720px;

	margin: 0;

	color: #fff;

	font-family:
		Georgia,
		"Times New Roman",
		serif;

	font-size: clamp(58px, 7vw, 102px);

	font-weight: 400;

	line-height: .93;

	letter-spacing: -3px;
}


.gpn-hero h1 em,
.gpn-hero h2 em {
	display: block;

	color: #dfb653;

	font-style: italic;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.gpn-hero-content p {
	max-width: 510px;

	margin: 30px 0 0;

	color: rgba(255,255,255,.78);

	font-size: 17px;

	line-height: 1.7;
}


/* =========================================================
   BUTTONS
========================================================= */

.gpn-hero-actions {
	display: flex;

	align-items: center;

	gap: 13px;

	margin-top: 34px;
}


.gpn-btn {
	display: inline-flex;

	align-items: center;

	justify-content: center;

	gap: 22px;

	min-height: 52px;

	padding: 0 24px;

	border-radius: 999px;

	font-size: 12px;

	font-weight: 700;

	letter-spacing: .4px;

	text-decoration: none;

	transition:
		transform .3s ease,
		background-color .3s ease,
		border-color .3s ease,
		color .3s ease;
}


.gpn-btn:hover {
	transform: translateY(-2px);
}


/* Primary */

.gpn-btn-primary {
	color: #102d18;

	background: #dfb653;
}


.gpn-btn-primary:hover {
	color: #102d18;

	background: #edce78;
}


.gpn-btn-primary span:last-child {
	font-size: 18px;

	transition: transform .3s ease;
}


.gpn-btn-primary:hover span:last-child {
	transform: translateX(4px);
}


/* Outline */

.gpn-btn-outline {
	color: #fff;

	background: rgba(255,255,255,.06);

	border: 1px solid rgba(255,255,255,.38);
}


.gpn-btn-outline:hover {
	color: #dfb653;

	background: rgba(255,255,255,.1);

	border-color: #dfb653;
}


/* =========================================================
   CONTROLS
========================================================= */

.gpn-hero-controls {
	position: absolute;

	right: 5%;

	bottom: 80px;

	z-index: 10;

	display: flex;

	align-items: center;

	gap: 17px;
}


.gpn-hero-arrow {
	width: 48px;
	height: 48px;

	display: flex;

	align-items: center;

	justify-content: center;

	padding: 0;

	color: #fff;

	background: rgba(255,255,255,.07);

	border: 1px solid rgba(255,255,255,.28);

	border-radius: 50%;

	cursor: pointer;

	transition:
		background .3s ease,
		color .3s ease,
		border-color .3s ease,
		transform .3s ease;
}


.gpn-hero-arrow:hover {
	color: #102d18;

	background: #dfb653;

	border-color: #dfb653;

	transform: translateY(-2px);
}


.gpn-hero-arrow span {
	font-size: 17px;
}


/* =========================================================
   COUNTER
========================================================= */

.gpn-hero-counter {
	display: flex;

	align-items: center;

	gap: 12px;

	color: rgba(255,255,255,.55);

	font-size: 11px;

	font-weight: 600;

	letter-spacing: 1px;
}


.gpn-current-slide {
	color: #dfb653;

	font-size: 15px;
}


.gpn-counter-line {
	width: 34px;
	height: 1px;

	background: rgba(255,255,255,.35);
}


/* =========================================================
   PROGRESS
========================================================= */

.gpn-hero-progress {
	position: absolute;

	left: 0;
	right: 0;

	bottom: 0;

	z-index: 10;

	height: 2px;

	background: rgba(255,255,255,.15);
}


.gpn-hero-progress-bar {
	display: block;

	width: 33.333%;

	height: 100%;

	background: #dfb653;

	transform-origin: left;

	transition:
		width .4s ease;
}


/* =========================================================
   SCROLL INDICATOR
========================================================= */

.gpn-hero-scroll {
	position: absolute;

	left: 4%;

	bottom: 66px;

	z-index: 10;

	display: flex;

	align-items: center;

	gap: 15px;

	color: rgba(255,255,255,.62);

	font-size: 9px;

	font-weight: 600;

	letter-spacing: 2px;

	text-transform: uppercase;

	transform: rotate(-90deg);

	transform-origin: left center;
}


.gpn-scroll-line {
	display: block;

	width: 55px;
	height: 1px;

	background: rgba(255,255,255,.45);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

	.gpn-hero {
		height: 820px;

		min-height: 650px;
	}


	.gpn-hero-content {
		width: 88%;
	}


	.gpn-hero h1,
	.gpn-hero h2 {
		font-size: clamp(54px, 9vw, 82px);
	}


	.gpn-hero-controls {
		right: 6%;

		bottom: 55px;
	}


	.gpn-hero-scroll {
		display: none;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

	.gpn-hero {
		height: 760px;

		min-height: 650px;
	}


	.gpn-hero-image img {
		object-position: 60% center;
	}


	.gpn-hero-overlay {
		background:

			linear-gradient(
				180deg,
				rgba(6,25,12,.35),
				rgba(6,25,12,.52) 45%,
				rgba(6,25,12,.88) 100%
			);
	}


	.gpn-hero-content {
		width: 88%;

		align-items: flex-end;

		padding-bottom: 150px;
	}


	.gpn-hero-content-inner {
		padding-top: 0;
	}


	.gpn-hero-kicker {
		margin-bottom: 18px;

		font-size: 9px;

		letter-spacing: 2.3px;
	}


	.gpn-hero h1,
	.gpn-hero h2 {
		font-size: clamp(45px, 14vw, 66px);

		line-height: .95;

		letter-spacing: -2px;
	}


	.gpn-hero-content p {
		margin-top: 20px;

		font-size: 14px;

		line-height: 1.6;
	}


	.gpn-hero-actions {
		margin-top: 25px;
	}


	.gpn-btn {
		min-height: 48px;

		padding: 0 19px;

		font-size: 10px;
	}


	.gpn-btn-outline {
		display: none;
	}


	.gpn-hero-controls {
		right: 6%;

		bottom: 58px;
	}


	.gpn-hero-arrow {
		width: 40px;
		height: 40px;
	}


	.gpn-hero-counter {
		gap: 8px;
	}


	.gpn-counter-line {
		width: 22px;
	}

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.gpn-hero-slide,
	.gpn-hero-image img,
	.gpn-btn,
	.gpn-btn-primary span:last-child,
	.gpn-hero-arrow {
		transition: none;
	}

}