.category-hero-frame {
    height: 120px;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 40px 100%, 0 calc(100% - 40px));
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 40px 100%, 0 calc(100% - 40px));
}
.site-content {
    padding-top: 0;
}
.page-body {
    position: relative;
	min-height: calc(100% - 120px);
    padding: 80px 0 120px;
	background: #fff;
}
.page-body::before,
.page-body::after {
	content: '';
	position: absolute;
	bottom: 0;
	display: block;
	width: 0px;
	height: 0px;
}
.page-body::before {
	left: 0;
	border: 20px solid transparent; 
	border-bottom: 20px solid #2b3035; 
	border-left: 20px solid #2b3035; 
}
.page-body::after {
	right: 0;
	border: 20px solid transparent; 
	border-bottom: 20px solid #2b3035; 
	border-right: 20px solid #2b3035; 
}

.separator-line {
	width: 100%;
	height: 40px;
	margin-top: 58px;
	filter: drop-shadow(0px 1px 0px #BEBEBE);
}
.separator-line span {
	display: block;
	width: 100%;
	height: 40px;
	background: #fff;
	clip-path: polygon(0px 0px, 100% 0px, calc(100% - 40px) 40px, 40px 40px);
}

h1 {
	font: 700 80px/68px Onest;
    margin-bottom: 20px;
}
.h1-wrap {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
    margin-bottom: 20px;
}
.h1-wrap h1,
.h1-wrap p {
    margin-bottom: 0px;
}
.h1-wrap p {
    font: 400 18px/20px Onest;
}


.expansion {}
.expansion-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	box-sizing: border-box;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);
}
.expansion-head a {
	--ch-br: 10px;
}
.expansion-head h3 {
	font: 700 30px/30px Onest;
}
.expansion-blue .expansion-head {
	background: #d2dce7 url(../images/expansion.jpg);
	background-size: cover;
}
.expansion-blue .expansion-head h3 {
	color: #12729B;
}





@media (max-width: 679.98px) {
.category-hero-frame {
    height: 100px;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 30px 100%, 0 calc(100% - 30px));
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 30px 100%, 0 calc(100% - 30px));
}
.page-body::before,
.page-body::after {
	border-width: 15px; 
}
.separator-line {
	height: 30px;
}
.separator-line span {
	height: 30px;
	clip-path: polygon(0px 0px, 100% 0px, calc(100% - 30px) 30px, 30px 30px);
}
h1 {
	font: 700 50px/45px Onest;
}
.h1-wrap p {
    font: 400 16px/18px Onest;
}
.expansion-head {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}
.expansion-head h3 {
	font: 700 20px/20px Onest;
}
}

@media (max-width: 540px) {
.expansion-head {
	flex-direction: column;
	align-items: flex-start;
	gap: 19.5px;
}
}

@media (max-width: 379.98px) {
.category-hero-frame {
    height: 80px;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px));
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px));
}
.page-body::before,
.page-body::after {
	border-width: 10px; 
}
.separator-line {
	height: 20px;
}
.separator-line span {
	height: 20px;
	clip-path: polygon(0px 0px, 100% 0px, calc(100% - 20px) 20px, 20px 20px);
}
}