/* This is the stylesheet that I am going to start moving class declarations to that I find a lot of repetition in */
/* I'll attach it to the the pages along with the other style sheets and remove matching classes from the individual page stylesheets as a way testing for breaks */
/* Once I can confirm that shifting the classes to this main point is bulletproof, I will refactor anything that that I can, and begin sorting it into the root.css */
/* I feel this is normally bass ackwards, but this entire thing has been a bit of a shifting curve learning experience, I'm fundamentally doing this in the wrong order this time, I think. */
/* One thing I can say for certain now, is that I have a polished interest in design systems, as a result */

/* Let's keep two major compartments for now, between sub-pages and homepages styling, which later we can merge together as much as possible */

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 

																																		HOMEPAGE

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 

																																		SUBPAGES

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* ------------------------------------------------ Hero / Banner ------------------------------------------------------- */

.page-header {
	position: relative;
	min-height: 50vh;
	background: var(--quat);
}

.page-banner {
	overflow-y: hidden;
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(auto, 130ch) auto;
	align-items: center;
	justify-items: center;

	padding: 0 1rem;

	top: calc(var(--contact-strip-ht) + var(--navbar-ht));
	height: var(--page-banner-ht);

	background: var(--page-banner-img) center no-repeat;
	background-size: cover;
	--page-banner-img: url('../assets/images/contact-pavan-trikutam-unsplash.jpg');
}

.page-banner::before {
	position: absolute;
	display: block;
	content: '';
	background-color: var(--quat);
	bottom: 0;
	left: 0;
	width: 100%;
	height: calc(100% - 15vh);
	height: 100%;
	opacity: 0.6;
}

.page-banner .wrapper {
	grid-column-start: 2;
	padding-left: 1rem;
	width: 100%;

	z-index: 1;
}

.banner-heading {
	max-width: 25ch;
	font-size: var(--h5-size);
	font-weight: 500;

	color: var(--detail);
}

.banner-sub-heading {
	max-width: 25ch;
	font-size: var(--h3-size);
	color: var(--prim);
}

/* ------------------------------------------------ Main ------------------------------------------------------- */

.main {
	margin-left: auto;
	margin-right: auto;
	/* padding: 0 var(--r4); */
	max-width: 1024px;
	max-width: 64rem;
	max-width: 130ch;
}

.main > * + * {
	margin-top: 5rem;
}

.main p {
	padding: var(--r4);
	margin-top: var(--r4);
	padding-right: 0;
	max-width: 65ch;
}

/* ------------------------------------------------ Section Stylings ------------------------------------------------------- */

.page-intro {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

	/* margin-top: 5rem; */
	padding: var(--r7) var(--r4);
	padding-top: var(--r7);
	min-height: 50vh;
}

.page-intro > * + * {
	margin-top: 2.5rem;
}

.page-intro > header {
	width: 100%;
	text-align: center;
}

.head-body-wrap,
.page-intro .image-wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1 0 45ch;

	margin-left: auto;
	margin-right: auto;
	max-width: 60ch;
}

/* .page-intro .image-wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1 0 45ch;

	margin-left: auto;
	margin-right: auto;
	max-width: 60ch;
} */

.page-intro .image-wrapper {
	overflow: hidden;
	display: inline-block;

	/* padding-left: var(--r6);
	padding-right: var(--r4); */
	max-height: 40ch;
}

.aspect-ratio-wrap {
	position: relative;

	height: 0;
	padding-top: 100%;
	margin-left: 1rem;

	background-color: white;
}

.aspect-ratio-wrap img {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	left: 0;

	height: 100%;
	width: 100%;

	object-fit: cover;
}

.watermarked {
	position: relative;
}

.watermarked > * {
	z-index: 1;
}

.watermarked::before {
	position: absolute;
	content: 'Our Work';
	content: var(--watermark, inherit);

	/* height: 100%; */
	width: 100%;

	top: 0;
	right: 0;
	left: 0;

	font-size: calc(1rem + 7vw);
	font-weight: 600;
	text-align: center;
	line-height: 1;
	color: var(--quat);
	opacity: 0.1;
}

.intro-header {
	position: relative;
	display: inline-block;
	padding: var(--r4) var(--r6);
	margin: 0 var(--r4);
}

.intro-header::before,
.intro-header::after {
	position: absolute;
	content: '';
	height: 140%;
	height: 100%;
	width: 10%;
	border: 0.5rem solid var(--detail);

	top: -20%;
	top: 0;
	bottom: -20%;
	bottom: 0;
}

.intro-header::before {
	left: -2rem;
	left: 0;
	border-right: unset;
}

.intro-header::after {
	right: -2rem;
	right: 0;
	border-left: unset;
}

.intro-heading {
	line-height: 1;
	font-size: var(--h5-size);
}

p.heading-subscript {
	margin-top: 0.5rem;
	padding: 0;

	font-size: var(--h3-size);
	font-weight: 600;
	line-height: 1;
	color: var(--quat);
}