/* =========================================================
   GPN — OUR STORY
========================================================= */

.gpn-about-story {

	position: relative;

	padding: 145px 0 0;

	background: #faf8f2;

	color: #1b3021;

	overflow: hidden;

}


/* =========================================================
   CONTAINER
========================================================= */

.gpn-about-story__container {

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

	margin: 0 auto;

	display: grid;

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

	align-items: center;

	gap: 105px;

}


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

.gpn-about-story__visual {

	position: relative;

	padding:
		0 35px
		35px 0;

}


.gpn-about-story__image-wrap {

	position: relative;

	width: 100%;

	height: 670px;

	overflow: hidden;

	background: #e7e2d7;

}


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

	content: "";

	position: absolute;

	inset: 0;

	background:
		linear-gradient(
			180deg,
			transparent 55%,
			rgba(18, 38, 24, .28)
		);

	pointer-events: none;

}


.gpn-about-story__image-wrap img {

	width: 100%;

	height: 100%;

	display: block;

	object-fit: cover;

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

}


.gpn-about-story__visual:hover
.gpn-about-story__image-wrap img {

	transform: scale(1.045);

}


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

.gpn-about-story__caption {

	position: absolute;

	left: 18px;

	right: 53px;

	bottom: 53px;

	z-index: 2;

	display: flex;

	justify-content: space-between;

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

	font-family:
		Arial,
		sans-serif;

	font-size: 8px;

	font-weight: 700;

	letter-spacing: 2px;

}


/* =========================================================
   DECORATIVE MARK
========================================================= */

.gpn-about-story__leaf-mark {

	position: absolute;

	right: 0;

	bottom: 0;

	width: 95px;

	height: 95px;

	display: grid;

	place-items: center;

	background: #d5b45d;

	color: #243b29;

	font-size: 28px;

}


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

.gpn-about-story__content {

	padding-bottom: 30px;

}


.gpn-about-story__eyebrow {

	display: flex;

	align-items: center;

	gap: 15px;

	margin-bottom: 22px;

	color: #8a6c32;

	font-family:
		Arial,
		sans-serif;

	font-size: 9px;

	font-weight: 700;

	letter-spacing: 2.5px;

	text-transform: uppercase;

}


.gpn-about-story__eyebrow::after {

	content: "";

	width: 60px;

	height: 1px;

	background: #b59a60;

}


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

.gpn-about-story__title {

	max-width: 600px;

	margin: 0 0 42px;

	color: #183522;

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

	font-size:
		clamp(
			50px,
			5.2vw,
			76px
		);

	font-weight: 400;

	line-height: .95;

	letter-spacing: -3.5px;

}


.gpn-about-story__title em {

	display: block;

	color: #6e845c;

	font-style: italic;

}


/* =========================================================
   COPY
========================================================= */

.gpn-about-story__copy {

	max-width: 570px;

}


.gpn-about-story__copy p {

	margin: 0 0 22px;

	color: #697169;

	font-family:
		Arial,
		sans-serif;

	font-size: 12.5px;

	line-height: 1.9;

}


.gpn-about-story__copy
.gpn-about-story__lead {

	margin-bottom: 30px;

	color: #314635;

	font-family:
		Georgia,
		serif;

	font-size: 18px;

	line-height: 1.65;

}


.gpn-about-story__lead strong {

	display: block;

	margin-top: 5px;

	color: #526d49;

	font-size: 21px;

	font-weight: 400;

	font-style: italic;

}


/* =========================================================
   SIGNATURE
========================================================= */

.gpn-about-story__signature {

	display: flex;

	align-items: center;

	gap: 18px;

	margin-top: 38px;

}


.gpn-about-story__signature-line {

	width: 50px;

	height: 1px;

	background: #b49a62;

}


.gpn-about-story__signature div {

	display: flex;

	flex-direction: column;

	gap: 5px;

}


.gpn-about-story__signature span {

	color: #354b39;

	font-family:
		Georgia,
		serif;

	font-size: 14px;

	font-style: italic;

}


.gpn-about-story__signature small {

	color: #8a9289;

	font-family:
		Arial,
		sans-serif;

	font-size: 7px;

	font-weight: 700;

	letter-spacing: 1.5px;

	text-transform: uppercase;

}


/* =========================================================
   STATEMENT
========================================================= */

.gpn-about-story__statement {

	margin-top: 135px;

	padding:
		72px 0
		78px;

	background: #203727;

	color: #f4f1e8;

}


.gpn-about-story__statement-inner {

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

	margin: 0 auto;

	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: 60px;

}


.gpn-about-story__statement-inner > span {

	color: #c7a75a;

	font-family:
		Arial,
		sans-serif;

	font-size: 8px;

	font-weight: 700;

	letter-spacing: 2.5px;

	white-space: nowrap;

}


.gpn-about-story__statement-inner strong {

	max-width: 760px;

	font-family:
		Georgia,
		serif;

	font-size:
		clamp(
			28px,
			3.2vw,
			47px
		);

	font-weight: 400;

	line-height: 1.05;

	letter-spacing: -1.5px;

}


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

@media (max-width: 1000px) {

	.gpn-about-story {

		padding-top: 100px;

	}


	.gpn-about-story__container {

		width:
			calc(
				100% - 50px
			);

		grid-template-columns:
			1fr 1fr;

		gap: 50px;

	}


	.gpn-about-story__image-wrap {

		height: 570px;

	}


	.gpn-about-story__title {

		font-size: 52px;

	}


	.gpn-about-story__statement-inner {

		width:
			calc(
				100% - 50px
			);

	}

}


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

@media (max-width: 700px) {

	.gpn-about-story {

		padding-top: 80px;

	}


	.gpn-about-story__container {

		width:
			calc(
				100% - 30px
			);

		display: flex;

		flex-direction: column;

		gap: 55px;

	}


	.gpn-about-story__visual {

		width: 100%;

		padding:
			0 20px
			25px 0;

	}


	.gpn-about-story__image-wrap {

		height: 500px;

	}


	.gpn-about-story__caption {

		right: 38px;

		bottom: 42px;

		left: 15px;

	}


	.gpn-about-story__leaf-mark {

		width: 75px;

		height: 75px;

		font-size: 22px;

	}


	.gpn-about-story__title {

		font-size: 50px;

		letter-spacing: -2.5px;

		margin-bottom: 30px;

	}


	.gpn-about-story__copy
	.gpn-about-story__lead {

		font-size: 17px;

	}


	.gpn-about-story__statement {

		margin-top: 85px;

		padding:
			55px 0
			60px;

	}


	.gpn-about-story__statement-inner {

		width:
			calc(
				100% - 30px
			);

		align-items: flex-start;

		flex-direction: column;

		gap: 25px;

	}


	.gpn-about-story__statement-inner strong {

		font-size: 34px;

	}

}