/* ------------------------------ */
:root {
	--page-banner-height: calc(100vh - var(--masthead-height));
}

/* --------------- Page Banner --------------- */
header#pageBanner {
	--anchor-position: 0px;
	--banner-clip-margin: 100%;
	--clip-bottom-skew: 15%;
	--image-center-offset: 50%;
	--image-size: 100%;
	height: var(--page-banner-height);
	position: fixed;
	top: 0px;
}
header#pageBanner.active {
	--banner-clip-margin: 35%;
}
header#pageBanner img, header#pageBanner div.textArea, header#pageBanner div.overlay {
	clip-path: polygon(var(--clip-offset) 0%, 100% 0%, 100% 100%, calc(var(--clip-offset) + var(--clip-bottom-skew)) 100%);
	height: var(--image-size);
	left: var(--anchor-position);
	position: absolute;
	top: var(--anchor-position);
	transition-duration: 0.5s;
	transition-property: clip-path;
	width: var(--image-size);
}
header#pageBanner img, header#pageBanner div.textArea {
	transition-delay: 0.5s;
}
header#pageBanner img {
	object-fit: cover;
	object-position: var(--image-center-offset) center;
}
header#pageBanner img.base {
	opacity: 0;
	transition: opacity 1s;
}
header#pageBanner.active img.base {
	opacity: 1;
}
header#pageBanner img.overlay, header#pageBanner div.textArea {
	--clip-offset: var(--banner-clip-margin);
}
header#pageBanner img.overlay {
	filter: grayscale(100%) contrast(110%);
}
header#pageBanner div.textArea {
	background-color: var(--blue-overlay);
}
header#pageBanner div.overlay {
	--clip-offset: calc(var(--banner-clip-margin) + 100px);
	align-items: center;
	background-color: rgba(0, 0, 0, 0.75);
	box-sizing: border-box;
	display: flex;
	justify-content: flex-end;
	padding-left: calc(var(--clip-offset) + var(--clip-bottom-skew));
	padding-right: var(--page-margin);
	transition-delay: 0.75s;
}
header#pageBanner div.boundingBox {
	color: #FFFFFF;
	opacity: 0;
	transition-delay: 1s;
	transition-duration: 1s;
	transition-property: opacity;
}
header#pageBanner.active div.boundingBox {
	opacity: 1;
}
header#pageBanner h1 {
	box-sizing: border-box;
	font-family: var(--font-gotham);
	font-size: 48px;
	line-height: 55px;
	margin-bottom: 20px;
	padding: 30px;
	position: relative;
}
header#pageBanner h1::before, header#pageBanner h1::after {
	--dimension: 50px;
	--border-thickness: 10px;
	border: var(--blue-03) solid var(--border-thickness);
	box-sizing: border-box;
	content: ' ';
	display: block;
	height: var(--dimension);;
	left: var(--anchor-position);
	position: absolute;
	top: var(--anchor-position);
	width: var(--dimension);	
}
header#pageBanner h1::before {
	--anchor-position: 0%;
	clip-path: polygon(0% 0%, 0% 0%, 100% 0%, 0% 100%);
}
header#pageBanner h1::after {
	--anchor-position: 100%;
	--translate-by: calc(var(--anchor-position) * -1);
	clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 0% 100%);
	transform: translate(var(--translate-by), var(--translate-by));
}
header#pageBanner h1 em {
	color: var(--blue-03);
	font-style: normal;
}
header#pageBanner p {
	font-size: 20px;
	line-height: 30px;
	text-align: right;
}

/* --------------- Section Services --------------- */
section#sectionServices {
	background-color: var(--background);
	padding-bottom: var(--gap);
	padding-top: var(--gap);
	position: relative;
	margin-top: calc(var(--page-banner-height) + var(--masthead-height));
}

/* --------------- Section About --------------- */
section#sectionAbout {
	background-color: #FFFFFF;
	padding-bottom: var(--gap);
	padding-top: var(--gap);
	position: relative;
	width: 100%;
}
section#sectionAbout div.containerNarrow {
	align-items: center;
	display: flex;
	column-gap: var(--gap);
}
section#sectionAbout div.logo {
	align-content: center;
	align-items: center;
	display: flex;
	flex: 1;
}
section#sectionAbout img.logo {
	height: auto;
	max-width: 500px;
	width: 100%;
}
section#sectionAbout div.writeUp {
	flex: 1;	
}
section#sectionAbout h2.header1 {
	align-items: flex-start;
}

/* --------------- Footer --------------- */
footer#footer {
	margin-top: 0px;
}

/* ------------------------------ */
@media screen and (orientation: portrait) {
/* ------------------------------ */
:root {
	--page-banner-height: calc(75vh - var(--masthead-height));
}

/* --------------- Page Banner --------------- */
header#pageBanner {
	--image-center-offset: 40%;
}
}

/* ------------------------------ */
@media all and (max-width: 1369px) {
/* --------------- Page Banner --------------- */
header#pageBanner.active {
	--banner-clip-margin: 25%;
}
header#pageBanner div.overlay {
	--clip-offset: calc(var(--banner-clip-margin) + 70px);
}
header#pageBanner h1 {
	font-size: 36px;
	line-height: 45px;
	padding: 25px;
}
header#pageBanner h1::before, header#pageBanner h1::after {
	--dimension: 40px;
	--border-thickness: 8px;
}
header#pageBanner p {
	font-size: 16px;
	line-height: 25px;
}
}

/* ------------------------------ */
@media all and (max-width: 1079px) {
/* --------------- Page Banner --------------- */
header#pageBanner.active {
	--banner-clip-margin: 15%;
}
header#pageBanner div.overlay {
	--clip-offset: calc(var(--banner-clip-margin) + 60px);
}
}

/* ------------------------------ */
@media all and (max-width: 769px) {
/* --------------- Page Banner --------------- */
header#pageBanner h1 {
	font-size: 28px;
	line-height: 34px;
	padding: 20px;
}
header#pageBanner h1::before, header#pageBanner h1::after {
	--dimension: 35px;
	--border-thickness: 6px;
}
header#pageBanner p {
	font-size: 14px;
	line-height: 20px;
}

/* --------------- Section About --------------- */
section#sectionAbout div.containerNarrow {
	flex-direction: column;
}
section#sectionAbout div.logo {
	margin-bottom: var(--gap);
}
section#sectionAbout img.logo {
	max-width: 360px;
}
section#sectionAbout h2.header1 {
	align-items: center;
}
}

/* ------------------------------ */
@media all and (max-width: 419px) {
/* --------------- Page Banner --------------- */
header#pageBanner.active {
	--banner-clip-margin: 5%;
}
header#pageBanner div.overlay {
	--clip-offset: calc(var(--banner-clip-margin) + 40px);
}
header#pageBanner h1 {
	font-size: 24px;
	line-height: 30px;
}

/* --------------- Section About --------------- */
section#sectionAbout img.logo {
	max-width: 280px;
}
}