/* PEP homepage hero refinement v1.0. Scope: homepage #top only. */

.pep-home-hero-v1 #top.panorama .panorama__shade {
	background:
		linear-gradient(90deg, rgba(17, 23, 20, .80), rgba(17, 23, 20, .60) 34%, rgba(17, 23, 20, .15) 76%),
		linear-gradient(0deg, rgba(17, 23, 20, .84), transparent 48%);
}

.pep-home-hero-v1 #top.panorama .panorama__lead.pep-hero-copy {
	max-width: 720px;
	margin: 26px 0 0;
	color: #fff;
	font-size: clamp(16px, 1.25vw, 18px);
	font-weight: 400;
	line-height: 1.95;
	letter-spacing: .01em;
	text-shadow: 0 1px 14px rgba(0, 0, 0, .22);
}

.pep-home-hero-v1 #top.panorama .pep-hero-copy__line {
	display: block;
}

.pep-home-hero-v1 #top.panorama .pep-hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
	width: max-content;
	max-width: 100%;
	margin-top: 28px;
}

.pep-home-hero-v1 #top.panorama .pep-hero-actions__link {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	min-width: 210px;
	min-height: 56px;
	padding: 14px 22px;
	border: 1px solid transparent;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.7;
	letter-spacing: .02em;
	text-decoration: none;
}

.pep-home-hero-v1 #top.panorama .pep-hero-actions__link > span {
	white-space: nowrap;
}

.pep-home-hero-v1 #top.panorama .pep-hero-actions__link > span:last-child {
	font-size: 19px;
	font-weight: 400;
	line-height: 1;
}

.pep-home-hero-v1 #top.panorama .pep-hero-actions__link--primary {
	background: #f47700;
	color: #22251f;
}

.pep-home-hero-v1 #top.panorama .pep-hero-actions__link--secondary {
	border-color: rgba(255, 255, 255, .72);
	background: rgba(17, 23, 20, .58);
}

.pep-home-hero-v1 #top.panorama .pep-hero-actions__link:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 5px;
}

.pep-home-hero-v1 #top.panorama .panorama__transport button {
	width: 44px;
	height: 44px;
	background: rgba(17, 23, 20, .65);
}

@media (hover: hover) and (pointer: fine) {
	.pep-home-hero-v1 #top.panorama .pep-hero-actions__link--primary:hover {
		background: #ff9127;
	}
	.pep-home-hero-v1 #top.panorama .pep-hero-actions__link--secondary:hover {
		border-color: #fff;
		background: rgba(17, 23, 20, .82);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.pep-home-hero-v1 #top.panorama .pep-hero-actions__link {
		transition: background-color .2s, border-color .2s;
	}
}

@media (max-width: 820px) {
	.pep-home-hero-v1 #top.panorama .panorama__stage {
		min-height: 700px;
	}
	.pep-home-hero-v1 #top.panorama .panorama__shade {
		background:
			linear-gradient(90deg, rgba(17, 23, 20, .78), rgba(17, 23, 20, .30)),
			linear-gradient(0deg, rgba(17, 23, 20, .9), transparent 72%);
	}
	.pep-home-hero-v1 #top.panorama .panorama__lead.pep-hero-copy {
		max-width: 580px;
		margin-top: 24px;
		font-size: 16px;
		line-height: 1.9;
	}
	.pep-home-hero-v1 #top.panorama .pep-hero-actions {
		margin-top: 24px;
	}
	.pep-home-hero-v1 #top.panorama .pep-hero-actions__link {
		gap: 24px;
		min-height: 54px;
		padding: 13px 20px;
	}
}

@media (max-width: 480px) {
	.pep-home-hero-v1 #top.panorama .panorama__stage {
		min-height: 740px;
	}
	.pep-home-hero-v1 #top.panorama .panorama__content {
		padding-top: 88px;
		padding-bottom: 176px;
	}
	.pep-home-hero-v1 #top.panorama .panorama__lead.pep-hero-copy {
		font-size: 15px;
		line-height: 1.9;
	}
	.pep-home-hero-v1 #top.panorama .pep-hero-actions {
		width: 100%;
		max-width: 340px;
		flex-direction: column;
	}
	.pep-home-hero-v1 #top.panorama .pep-hero-actions__link {
		min-height: 52px;
		padding: 12px 20px;
	}
}