.page-hero {
	--chevron-clip-path-mobile: polygon(50% 15%, 100% 0, 100% 85%, 50% 100%, 0 85%, 0 0);
	--chevron-aspect-ratio-mobile: 320/288;
	--chevron-clip-path: polygon(85% 0, 100% 50%, 85% 100%, 0% 100%, 15% 50%, 0% 0%);
	--chevron-aspect-ratio: 630/560; /* 9/8 */
}

.page-hero {
	position: relative;
	z-index: 1;
	background-color: var(--color-brand-red,#b6151d);
}

.page-hero.veteran-story {
	background-color: #EBEFF2;
}

.page-hero.tertiary {
	background-color: #EBEFF2;
	background-position: 100vw 0px!important;
}

.page-hero.veteran-story {
	background-position: 0px -95vw!important;
}

.page-hero.secondary::before {
	content: '';
	z-index: -1;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: linear-gradient(180deg, #B6151D 75%, var( --e-global-color-primary ) 75%);
	mix-blend-mode: color;
}

.page-hero.tertiary::before,
.page-hero.veteran-story::before {
	content: '';
	z-index: -1;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: linear-gradient(180deg, #EBEFF2 70%, var( --e-global-color-primary ) 75%);
	mix-blend-mode: color;
}

.page-hero.tertiary::after {
	content: '';
	z-index: -2;
	position: absolute;
	top: 75%;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: inherit;
	background-size: auto;
	background-position: center;
	background-repeat: no-repeat;
}

.page-hero.veteran-story::before {
	background-image: linear-gradient(180deg, #EBEFF2 25%, #EBEFF2 25%);
}

.page-hero .container {
	max-width: var(--content-width, 1440px);
	margin: 0 auto;
	padding: 32px 0 24px;
}

.page-hero.veteran-story .container {
	display: flex;
	flex-direction: column-reverse;
	padding-top: 0;
	margin-top: -8px;
	z-index: 1;
}

.page-hero .hero-content {
	padding: 0 1.5rem .5rem;
}

.page-hero h1 {
	margin: 0;
}

.page-hero.secondary h1 {
	color: #ffffff;
	margin: 0;
	max-width: 32rem;
}

.page-hero.tertiary h1,
.page-hero.tertiary .intro-text,
.page-hero.tertiary .cta-container { 
	padding-left: 2.25rem;
}

.page-hero.tertiary .intro-text,
.page-hero.veteran-story .intro-text {
	max-width: 32em;
}

.page-hero.tertiary h1 {
	color: var( --color-primary);
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="36" viewBox="0 0 26 36" fill="none"><path d="M12.1797 0L25.6895 18L12.1797 36H0L13.5098 18L0 0H12.1797Z" fill="%23B6151D"/></svg>');
	background-repeat: no-repeat;
	background-position: left .275rem;
	background-size: 26px 36px;
}

.page-hero .veteran-meta {
	display: flex;
	flex-direction: column;
	gap: 8px;
	justify-content: flex-start;
	align-items: flex-start;
	margin-bottom: 1.25rem;
	margin-top: .5rem;
}

.page-hero .veteran-meta span {
	font-size: 0.875rem;
	font-weight: 700;
}

.page-hero .cta-container {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 1.5rem 0;
}

.page-hero h1 + .cta-container {
	margin-top: 1.5rem;
}

.page-hero .cta-container .button {
	text-align: center;
}

.page-hero .chevron-image-container {
	clip-path: var(--chevron-clip-path-mobile);
	aspect-ratio: var(--chevron-aspect-ratio-mobile);
	background-color: #ffffff;
	display: flex;
}

.page-hero .chevron-image-container .chevron-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.page-hero img {
	clip-path: var(--chevron-clip-path-mobile);
	width: 100%;
	height: calc(100% - 8px);
	object-fit: cover;
	object-position: center;
	margin-top: 4px;
}

@media (max-width: 767px) {
	.page-hero.veteran-story .chevron-image-container,
	.page-hero.veteran-story img {
		clip-path: polygon(50% 0, 100% 0, 100% 85%, 50% 100%, 0 85%, 0 0);
		aspect-ratio: 320/196;
	}
}

@media (min-width: 768px) {
	.page-hero.veteran-story {
		background-position: -75vw 0px!important;
	}

	.page-hero.secondary::before {
		background-image: linear-gradient(90deg, #B6151D 75%, var( --e-global-color-primary ) 75%);
	}

	.page-hero.tertiary::before {
		background-image: linear-gradient(90deg, #EBEFF2 75%, var( --e-global-color-primary ) 75%);
	}

	.page-hero.tertiary::after {
		top: 0;
		left: 75%;
	}
	
	.page-hero.veteran-story::before {
		background-image: linear-gradient(90deg, var(--color-secondary) 25%, #EBEFF200 25%);
	}
	
	.page-hero .container {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: stretch;
		padding: 0 80px
	}

	.page-hero.veteran-story .container {
		flex-direction: row-reverse;
		margin-top: 0;
	}

	.page-hero .hero-content {
		flex: 7;
		padding: 3rem 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 1.5rem;
	}

	.page-hero.veteran-story .hero-content {
		padding-left: 2.5rem;
	}

	.page-hero.veteran-story .veteran-meta {
		flex-direction: row;
		gap: 0;
	}

	.page-hero.veteran-story .veteran-meta span {
		z-index: 2;
		position: relative;
	}

	.page-hero.veteran-story .veteran-meta span + span {
		margin-left: -20px;
		z-index: 1;
		padding-left: 1.75rem;
	}

	.page-hero .cta-container {
		justify-content: flex-start;
		align-items: flex-start;
		margin-bottom: 0;
	}

	.page-hero .cta-container .button {
		text-align: left;
		width: auto;
	}
	.page-hero .chevron-image-container {
		clip-path: var(--chevron-clip-path);
		aspect-ratio: var(--chevron-aspect-ratio);
		flex: 4;
		margin: 0;

	}

	.page-hero img {
		clip-path: var(--chevron-clip-path);
		width: calc(100% - 8px);
		height: 100%;
		margin-top: 0;
		margin-left: 4px;
	}
}

@media( min-width: 992px) {

	.page-hero .hero-content {
		min-height: 464px;
	}
	
	.page-hero.tertiary h1,
	.page-hero.tertiary .intro-text,
	.page-hero.tertiary .cta-container { 
		padding-left: 4rem;
	}
	.page-hero.tertiary h1 {
		background-position: left .5rem;
		background-size: 40px 56px;
	}

	.page-hero .cta-container {
		flex-direction: row;
	}
	.page-hero.veteran-story .hero-content {
		padding-left: 5rem;
	}
}