/* =========================================================
   GPN — ABOUT HERO
========================================================= */

.gpn-about-hero {

	position: relative;

	min-height: 820px;

	padding:
		80px
		0
		90px;

	background:
		#f4f1e8;

	overflow: hidden;

	color: #193323;

}


/* =========================================================
   INNER
========================================================= */

.gpn-about-hero__inner {

	width:
		min(
			1380px,
			calc(100% - 80px)
		);

	min-height: 650px;

	margin: 0 auto;

	display: grid;

	grid-template-columns:
		.92fr
		1.08fr;

	align-items: center;

	gap: 80px;

}


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

.gpn-about-hero__content {

	position: relative;

	z-index: 3;

	padding-left: 35px;

}


.gpn-about-hero__eyebrow {

	display: flex;

	align-items: center;

	gap: 15px;

	margin-bottom: 30px;

	color: #8b6d31;

	font-family:
		Arial,
		sans-serif;

	font-size: 9px;

	font-weight: 700;

	letter-spacing: 2.8px;

	text-transform: uppercase;

}


.gpn-about-hero__line {

	width: 62px;

	height: 1px;

	background: #a58b54;

}


/* =========================================================
   TITLE
========================================================= */

.gpn-about-hero__title {

	max-width: 680px;

	margin: 0;

	color: #183522;

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

	font-size:
		clamp(
			58px,
			6.4vw,
			94px
		);

	font-weight: 400;

	line-height: .91;

	letter-spacing: -5px;

}


.gpn-about-hero__title span {

	display: block;

	margin-top: 8px;

	color: #71865c;

	font-style: italic;

}


/* =========================================================
   INTRO
========================================================= */

.gpn-about-hero__intro {

	max-width: 470px;

	margin:
		40px
		0
		28px;

	color: #657067;

	font-family:
		Arial,
		sans-serif;

	font-size: 13px;

	line-height: 1.9;

}


/* =========================================================
   META
========================================================= */

.gpn-about-hero__meta {

	display: flex;

	align-items: center;

	gap: 13px;

	color: #354b3b;

	font-family:
		Arial,
		sans-serif;

	font-size: 8px;

	font-weight: 700;

	letter-spacing: 2px;

}


.gpn-about-hero__dot {

	color: #ad8b45;

	font-size: 11px;

}


/* =========================================================
   VISUAL
========================================================= */

.gpn-about-hero__visual {

	position: relative;

	height: 650px;

}


.gpn-about-hero__image-wrap {

	position: absolute;

	top: 0;

	right: 0;

	width: 78%;

	height: 100%;

	overflow: hidden;

}


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

.gpn-about-hero__image {

	display: block;

	width: 100%;

	height: 100%;

	object-fit: cover;

	object-position: center;

	transform:
		scale(1.01);

	transition:
		transform
		1.5s
		cubic-bezier(
			.2,
			.65,
			.2,
			1
		);

}


.gpn-about-hero:hover
.gpn-about-hero__image {

	transform:
		scale(1.045);

}


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

.gpn-about-hero__image-caption {

	position: absolute;

	right: 22px;

	bottom: 22px;

	left: 22px;

	z-index: 3;

	display: flex;

	align-items: center;

	justify-content: space-between;

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

	font-family:
		Arial,
		sans-serif;

	font-size: 8px;

	font-weight: 700;

	letter-spacing: 1.5px;

	text-transform: uppercase;

}


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

.gpn-about-hero__image-wrap::after {

	content: "";

	position: absolute;

	inset: 0;

	background:
		linear-gradient(
			to top,
			rgba(
				12,
				31,
				18,
				.45
			),
			transparent 35%
		);

	pointer-events: none;

}


/* =========================================================
   FLOATING GPN MARK
========================================================= */

.gpn-about-hero__number {

	position: absolute;

	left: 0;

	bottom: 55px;

	width: 145px;

	height: 145px;

	display: flex;

	flex-direction: column;

	align-items: center;

	justify-content: center;

	background: #d7b65f;

	color: #183522;

	transform:
		translateX(-20px);

}


.gpn-about-hero__number span {

	margin-bottom: 8px;

	font-family:
		Arial,
		sans-serif;

	font-size: 8px;

	font-weight: 700;

	letter-spacing: 3px;

}


.gpn-about-hero__number strong {

	font-family:
		Georgia,
		serif;

	font-size: 46px;

	font-weight: 400;

	line-height: 1;

}


/* =========================================================
   BOTTOM
========================================================= */

.gpn-about-hero__bottom {

	width:
		min(
			1380px,
			calc(100% - 80px)
		);

	margin:
		25px
		auto
		0;

	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: 60px;

}


.gpn-about-hero__scroll {

	display: flex;

	align-items: center;

	gap: 13px;

	color: #718073;

	font-family:
		Arial,
		sans-serif;

	font-size: 8px;

	font-weight: 700;

	letter-spacing: 1.7px;

	text-transform: uppercase;

}


.gpn-about-hero__scroll-line {

	width: 50px;

	height: 1px;

	background: #aeb5a8;

}


.gpn-about-hero__bottom p {

	max-width: 500px;

	margin: 0;

	color: #727a72;

	font-family:
		Georgia,
		serif;

	font-size: 14px;

	font-style: italic;

	line-height: 1.7;

}


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

@media (max-width: 1000px) {

	.gpn-about-hero {

		padding:
			70px
			0
			75px;

	}


	.gpn-about-hero__inner {

		width:
			calc(
				100% - 50px
			);

		grid-template-columns:
			1fr
			1fr;

		gap: 40px;

	}


	.gpn-about-hero__content {

		padding-left: 0;

	}


	.gpn-about-hero__visual {

		height: 580px;

	}


	.gpn-about-hero__image-wrap {

		width: 88%;

	}


	.gpn-about-hero__number {

		width: 110px;

		height: 110px;

	}

}


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

@media (max-width: 700px) {

	.gpn-about-hero {

		min-height: auto;

		padding:
			65px
			0
			60px;

	}


	.gpn-about-hero__inner {

		width:
			calc(
				100% - 30px
			);

		display: flex;

		flex-direction: column;

		align-items: stretch;

		gap: 50px;

	}


	.gpn-about-hero__title {

		font-size: 55px;

		letter-spacing: -3px;

	}


	.gpn-about-hero__intro {

		margin-top: 30px;

		font-size: 12px;

	}


	.gpn-about-hero__visual {

		height: 500px;

	}


	.gpn-about-hero__image-wrap {

		width: 88%;

	}


	.gpn-about-hero__number {

		left: 0;

		bottom: 35px;

		width: 100px;

		height: 100px;

		transform: none;

	}


	.gpn-about-hero__number strong {

		font-size: 35px;

	}


	.gpn-about-hero__bottom {

		width:
			calc(
				100% - 30px
			);

		margin-top: 35px;

		align-items: flex-start;

		flex-direction: column;

		gap: 22px;

	}


	.gpn-about-hero__bottom p {

		font-size: 13px;

	}

}


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

@media (max-width: 420px) {

	.gpn-about-hero__title {

		font-size: 48px;

	}


	.gpn-about-hero__visual {

		height: 430px;

	}

}