// ===================================================================
// Generic content + Projects page (page ID: 301)
// ===================================================================
@import "_variables.less";

@projects-ink: #111619;
@projects-paper: #f1eee7;
@projects-copper: #d66a32;
@projects-line: rgba(17,22,25,.16);

.single-content {
	padding: @section-padding 0;
	background-color: @color-background;
}
.single-content__title {
	margin-bottom: 2rem;
	color: @color-primary;
	font-family: @font-display;
	font-size: 32px;
	font-weight: 700;
	text-transform: uppercase;
}
.single-content__media { margin-bottom: 2rem; }
.single-content__media img { width: 100%; height: auto; }
.single-content__body {
	color: @color-on-surface-variant;
	font-family: @font-body;
	font-size: 18px;
	line-height: 1.7;
}
.single-content__body p { margin-bottom: 1.5rem; }

.projects-page {
	overflow: hidden;
	background: @projects-paper;
	color: @projects-ink;

	em {
		color: @projects-copper;
		font-style: normal;
	}
}

.projects-kicker {
	display: flex;
	align-items: center;
	gap: .75rem;
	color: rgba(255,255,255,.72);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;

	span {
		width: 2rem;
		height: 1px;
		background: @projects-copper;
	}

	&--dark { color: #625f59; }
}

.projects-hero {
	position: relative;
	min-height: calc(100svh - 5rem);
	background: @projects-ink;
	color: #fff;

	&__media,
	&__overlay,
	&__grid {
		position: absolute;
		inset: 0;
	}

	&__media {
		background-position: center;
		background-size: cover;
		transform: scale(1.02);
	}

	&__overlay {
		background:
			linear-gradient(90deg, rgba(8,11,13,.94) 0%, rgba(8,11,13,.62) 48%, rgba(8,11,13,.3) 100%),
			linear-gradient(0deg, rgba(8,11,13,.8), transparent 55%);
	}

	&__grid {
		opacity: .18;
		background-image:
			linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
			linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
		background-size: 80px 80px;
	}

	&__inner {
		position: relative;
		display: grid;
		grid-template-columns: minmax(0, 1.35fr) minmax(16rem, .65fr);
		align-content: end;
		gap: 4rem;
		min-height: calc(100svh - 5rem);
		padding-top: 7rem;
		padding-bottom: clamp(3rem, 7vh, 5.5rem);
	}

	&__heading h1 {
		margin-top: 1.8rem;
		font-family: @font-display;
		font-size: clamp(5rem, 11vw, 10.5rem);
		font-weight: 500;
		letter-spacing: -.035em;
		line-height: .78;
		text-transform: uppercase;
	}

	&__summary {
		align-self: end;
		padding-bottom: .5rem;

		p {
			max-width: 27rem;
			color: rgba(255,255,255,.72);
			font-size: clamp(.95rem, 1.2vw, 1.1rem);
			line-height: 1.75;
		}

		a {
			display: inline-flex;
			align-items: center;
			gap: 2.5rem;
			margin-top: 2rem;
			padding-bottom: .6rem;
			border-bottom: 1px solid rgba(255,255,255,.45);
			font-size: .7rem;
			font-weight: 700;
			letter-spacing: .14em;
			text-transform: uppercase;
		}
	}

	&__count {
		position: absolute;
		top: 3rem;
		right: @gutter;
		display: flex;
		align-items: center;
		gap: .8rem;

		strong {
			color: @projects-copper;
			font-family: @font-display;
			font-size: 2rem;
			font-weight: 500;
		}

		span {
			color: rgba(255,255,255,.58);
			font-size: .58rem;
			line-height: 1.35;
			letter-spacing: .12em;
			text-transform: uppercase;
		}
	}
}

.project-index {
	padding: clamp(6rem, 11vw, 10rem) 0;

	&__header {
		display: grid;
		grid-template-columns: 1.25fr .75fr;
		align-items: end;
		gap: 4rem;

		h2 {
			margin-top: 1.3rem;
			font-family: @font-display;
			font-size: clamp(3.6rem, 7vw, 7rem);
			font-weight: 500;
			letter-spacing: -.035em;
			line-height: .9;
			text-transform: uppercase;
		}

		> p {
			max-width: 29rem;
			color: #625f59;
			line-height: 1.8;
		}
	}
}

.project-filters {
	display: flex;
	gap: 1.8rem;
	margin: clamp(3rem, 6vw, 5rem) 0 2.5rem;
	padding: 1.25rem 0;
	overflow-x: auto;
	border-top: 1px solid @projects-line;
	border-bottom: 1px solid @projects-line;
	scrollbar-width: none;

	&::-webkit-scrollbar { display: none; }

	button {
		flex: 0 0 auto;
		padding: 0;
		color: #77736d;
		font-size: .7rem;
		font-weight: 700;
		letter-spacing: .12em;
		text-transform: uppercase;

		sup {
			margin-left: .2rem;
			font-size: .52rem;
		}

		&.is-active,
		&:hover { color: @projects-copper; }
	}
}

.project-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 4vw, 3.5rem);

	&__empty {
		grid-column: 1 / -1;
		padding: 4rem 0;
		color: #77736d;
		font-size: 1rem;
		text-align: center;
	}
}

.project-card {
	&[hidden] { display: none; }

	&:nth-child(even) { margin-top: 7rem; }

	&__media {
		position: relative;
		display: block;
		aspect-ratio: 4 / 3;
		overflow: hidden;
		background-color: #252b2f;
		background-repeat: no-repeat;
		background-size: cover;
		transition: filter .35s ease, transform .35s ease;

		&::after {
			position: absolute;
			inset: 0;
			content: "";
			background: linear-gradient(180deg, rgba(0,0,0,.25), transparent 38%, rgba(0,0,0,.2));
		}

		&:hover {
			filter: contrast(1.05) brightness(1.04);
			transform: translateY(-.35rem);
		}
	}

	&__number,
	&__action {
		position: absolute;
		z-index: 1;
		top: 1.25rem;
		color: #fff;
	}

	&__number {
		left: 1.25rem;
		font-size: .65rem;
		letter-spacing: .15em;
	}

	&__action {
		right: 1.25rem;
		display: grid;
		width: 2.6rem;
		height: 2.6rem;
		place-items: center;
		border: 1px solid rgba(255,255,255,.6);
		border-radius: 50%;
		font-size: 1.1rem;
	}

	&__body {
		padding-top: 1.4rem;

		> p {
			color: @projects-copper;
			font-size: .64rem;
			font-weight: 700;
			letter-spacing: .15em;
			text-transform: uppercase;
		}

		h3 {
			margin: .55rem 0 1rem;
			font-family: @font-display;
			font-size: clamp(2rem, 3.7vw, 3.6rem);
			font-weight: 500;
			letter-spacing: -.025em;
			line-height: 1;
			text-transform: uppercase;
		}

		> div {
			display: flex;
			justify-content: space-between;
			padding-top: .9rem;
			border-top: 1px solid @projects-line;
			color: #77736d;
			font-size: .68rem;
			letter-spacing: .08em;
			text-transform: uppercase;
		}
	}
}

.projects-proof {
	padding: clamp(4rem, 8vw, 7rem) 0;
	background: @projects-ink;
	color: #fff;

	&__inner {
		display: grid;
		grid-template-columns: .8fr 1.2fr;
		align-items: center;
		gap: 4rem;

		> p {
			font-family: @font-display;
			font-size: clamp(2.2rem, 4vw, 4rem);
			line-height: 1;
			text-transform: uppercase;
		}

		ul {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
		}

		li {
			display: flex;
			align-items: flex-end;
			gap: .7rem;
			padding-left: 1.5rem;
			border-left: 1px solid rgba(255,255,255,.18);
		}

		strong {
			color: @projects-copper;
			font-family: @font-display;
			font-size: clamp(2.4rem, 4vw, 4.4rem);
			font-weight: 500;
			line-height: .8;
		}

		span {
			color: rgba(255,255,255,.5);
			font-size: .6rem;
			line-height: 1.4;
			letter-spacing: .1em;
			text-transform: uppercase;
		}
	}
}

.projects-cta {
	position: relative;
	min-height: 38rem;
	color: #fff;
	background: #111619;

	&__media {
		position: absolute;
		inset: 0;
		opacity: .34;
		background-position: center 55%;
		background-size: cover;
		filter: grayscale(.25);

		&::after {
			position: absolute;
			inset: 0;
			content: "";
			background: linear-gradient(90deg, rgba(8,11,13,.94), rgba(8,11,13,.38));
		}
	}

	&__inner {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		min-height: 38rem;

		h2 {
			margin: 1.5rem 0 2.5rem;
			font-family: @font-display;
			font-size: clamp(4rem, 8vw, 8rem);
			font-weight: 500;
			letter-spacing: -.035em;
			line-height: .85;
			text-transform: uppercase;
		}

		> a {
			display: inline-flex;
			align-items: center;
			justify-content: space-between;
			gap: 3rem;
			min-width: 13rem;
			padding: 1rem 1.2rem;
			background: @projects-copper;
			font-size: .7rem;
			font-weight: 700;
			letter-spacing: .12em;
			text-transform: uppercase;
		}
	}
}

@media (max-width: 900px) {
	.projects-hero__inner,
	.project-index__header,
	.projects-proof__inner {
		grid-template-columns: 1fr;
	}

	.projects-hero__inner {
		align-content: end;
		gap: 2.5rem;
	}

	.projects-hero__summary p { max-width: 36rem; }
	.project-index__header { gap: 2rem; }
	.projects-proof__inner { gap: 3rem; }
}

@media (max-width: 640px) {
	.projects-hero {
		min-height: calc(100svh - 5rem);

		&__inner {
			min-height: calc(100svh - 5rem);
			padding-top: 6rem;
			padding-bottom: 2.25rem;
		}

		&__heading h1 {
			margin-top: 1.2rem;
			font-size: clamp(4rem, 21vw, 6.2rem);
		}

		&__summary {
			p { font-size: .9rem; }
			a { margin-top: 1.25rem; }
		}

		&__count {
			top: 1.5rem;
			right: 1.5rem;
		}
	}

	.project-index { padding: 5.5rem 0; }
	.project-index__header h2 { font-size: clamp(3.2rem, 16vw, 5rem); }
	.project-filters { margin-top: 2.75rem; }

	.project-grid {
		grid-template-columns: 1fr;
		gap: 3.5rem;
	}

	.project-card:nth-child(even) { margin-top: 0; }
	.project-card__body h3 { font-size: 2.35rem; }

	.projects-proof__inner ul {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.projects-proof__inner li {
		align-items: center;
		padding: 0 0 1.5rem;
		border-left: 0;
		border-bottom: 1px solid rgba(255,255,255,.18);
	}

	.projects-cta,
	.projects-cta__inner { min-height: 31rem; }
}

// Project detail
.project-single {
	background: @projects-paper;
	color: @projects-ink;

	&__hero {
		position: relative;
		min-height: calc(100svh - 5rem);
		color: #fff;
		background: @projects-ink center / cover no-repeat;
	}

	&__shade {
		position: absolute;
		inset: 0;
		background: linear-gradient(0deg, rgba(8,11,13,.86), rgba(8,11,13,.1) 65%), linear-gradient(90deg, rgba(8,11,13,.55), transparent);
	}

	&__hero-inner {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		min-height: calc(100svh - 5rem);
		padding-top: 7rem;
		padding-bottom: clamp(2.5rem, 6vw, 5rem);

		h1 {
			max-width: 70rem;
			margin: 1.5rem 0 2.5rem;
			font-family: @font-display;
			font-size: clamp(4rem, 10vw, 9.5rem);
			font-weight: 500;
			letter-spacing: -.035em;
			line-height: .84;
			text-transform: uppercase;
		}
	}

	&__hero-bottom {
		display: flex;
		gap: 2rem;
		padding-top: 1.2rem;
		border-top: 1px solid rgba(255,255,255,.35);
		font-size: .7rem;
		letter-spacing: .12em;
		text-transform: uppercase;
	}

	&__intro { padding: clamp(5rem, 10vw, 9rem) 0; }

	&__intro-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
		gap: clamp(3rem, 6vw, 6rem);

		h2 {
			max-width: 38rem;
			margin-top: 1.5rem;
			font-family: @font-display;
			font-size: clamp(1.8rem, 2.25vw, 2.5rem);
			font-weight: 500;
			line-height: 1.08;
			text-transform: uppercase;
		}
	}

	&__facts {
		margin: 0;
		border-top: 1px solid @projects-line;

		div {
			display: grid;
			grid-template-columns: 1fr 1.5fr;
			gap: 1rem;
			padding: 1rem 0;
			border-bottom: 1px solid @projects-line;
		}

		dt {
			color: #77736d;
			font-size: .65rem;
			letter-spacing: .1em;
			text-transform: uppercase;
		}

		dd { margin: 0; font-size: .85rem; }
	}

	&__content {
		max-width: 850px;
		margin-top: clamp(3rem, 7vw, 6rem);
		color: #56534e;
		font-size: clamp(1rem, 1.5vw, 1.2rem);
		line-height: 1.9;

		p { margin-bottom: 1.5rem; }
	}

	&__back {
		padding: 3rem 0;
		border-top: 1px solid @projects-line;

		a {
			color: @projects-copper;
			font-size: .72rem;
			font-weight: 700;
			letter-spacing: .12em;
			text-transform: uppercase;
		}
	}
}

.project-gallery {
	padding: 0 0 clamp(5rem, 10vw, 9rem);

	header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 1.5rem;
		padding-bottom: 1rem;
		border-bottom: 1px solid @projects-line;
	}

	&__grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(.8rem, 1.5vw, 1.25rem);

		figure {
			grid-column: auto;
			overflow: hidden;
			aspect-ratio: 4 / 3;
			background: #d9d6cf;
		}
		figure:first-child {
			grid-column: 1 / -1;
			aspect-ratio: 16 / 9;
		}
		img { width: 100%; height: 100%; object-fit: cover; }
	}

	&__open {
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
		padding: 0;
		overflow: hidden;
		color: #fff;

		&::after {
			position: absolute;
			inset: 0;
			content: "";
			background: linear-gradient(0deg, rgba(8,11,13,.55), transparent 45%);
			opacity: 0;
			transition: opacity .35s ease;
		}

		img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }

		span {
			position: absolute;
			z-index: 1;
			right: 1.25rem;
			bottom: 1.25rem;
			display: inline-flex;
			align-items: center;
			min-height: 2.4rem;
			padding: 0 1rem;
			border: 1px solid rgba(255,255,255,.55);
			background: rgba(8,11,13,.3);
			backdrop-filter: blur(5px);
			font-size: .65rem;
			font-weight: 700;
			letter-spacing: .12em;
			opacity: 0;
			text-transform: uppercase;
			transform: translateY(.5rem);
			transition: opacity .35s ease, transform .35s ease;
		}

		&:hover,
		&:focus-visible {
			&::after { opacity: 1; }
			img { transform: scale(1.035); }
			span { opacity: 1; transform: none; }
		}
	}
}

.project-lightbox-open { overflow: hidden; }

.project-lightbox {
	position: fixed;
	z-index: 1000;
	inset: 0;
	display: grid;
	grid-template-columns: 5rem minmax(0, 1fr) 5rem;
	align-items: center;
	padding: 2rem;
	background: rgba(7,9,10,.97);
	color: #fff;

	&[hidden] { display: none; }

	figure {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: calc(100svh - 4rem);
	}

	img {
		max-width: 100%;
		max-height: calc(100% - 2.5rem);
		object-fit: contain;
	}

	figcaption {
		width: 100%;
		padding-top: 1rem;
		color: rgba(255,255,255,.58);
		font-size: .65rem;
		letter-spacing: .16em;
		text-align: center;
	}

	&__close {
		position: absolute;
		top: 1.25rem;
		right: 1.25rem;
		z-index: 2;
		display: grid;
		width: 3rem;
		height: 3rem;
		place-items: center;
		border: 1px solid rgba(255,255,255,.35);
		border-radius: 50%;
		color: #fff;
		font-size: 1.5rem;
	}

	&__nav {
		display: grid;
		width: 3rem;
		height: 3rem;
		place-items: center;
		justify-self: center;
		border: 1px solid rgba(255,255,255,.25);
		border-radius: 50%;
		color: #fff;
		transition: border-color .25s ease, background .25s ease;

		&:hover { border-color: @projects-copper; background: @projects-copper; }
	}
}

.project-video {
	padding: 0 0 clamp(5rem, 10vw, 9rem);

	&__frame {
		margin-top: 1.5rem;
		aspect-ratio: 16 / 9;
		overflow: hidden;
		background: @projects-ink;

		iframe,
		video,
		.wp-video { width: 100% !important; height: 100% !important; }
	}
}

@media (max-width: 700px) {
	.project-single__intro-grid { grid-template-columns: 1fr; }
	.project-gallery__grid {
		grid-template-columns: 1fr;

		figure,
		figure:first-child {
			grid-column: auto;
			aspect-ratio: 4 / 3;
		}
	}
	.project-gallery__open span { opacity: 1; transform: none; }
	.project-lightbox {
		grid-template-columns: 3rem minmax(0, 1fr) 3rem;
		padding: 1rem .25rem;

		figure { height: calc(100svh - 2rem); }
		&__nav { width: 2.5rem; height: 2.5rem; }
	}
}
// Process page
.process-page {
	background: @color-background;
	color: @color-on-surface;

	&__hero {
		position: relative;
		overflow: hidden;
		min-height: calc(100vh - 5rem);
		display: flex;
		align-items: center;
		background: @color-primary;
		color: @color-on-primary;
	}

	&__grid {
		position: absolute;
		inset: 0;
		opacity: .12;
		background-image:
			linear-gradient(fade(@color-on-primary, 35%) 1px, transparent 1px),
			linear-gradient(90deg, fade(@color-on-primary, 35%) 1px, transparent 1px);
		background-size: 6rem 6rem;
	}

	&__hero-inner {
		position: relative;
		z-index: 1;
		padding-top: 7rem;
		padding-bottom: 7rem;
	}

	&__eyebrow,
	&__section-label {
		font-size: .75rem;
		font-weight: 700;
		letter-spacing: .18em;
		text-transform: uppercase;
	}

	&__eyebrow {
		display: flex;
		align-items: center;
		gap: .75rem;
		margin-bottom: 2.5rem;
		color: @color-secondary;

		&::before { content: ""; width: 2.5rem; height: 2px; background: currentColor; }
	}

	h1 {
		max-width: 950px;
		margin: 0;
		font-family: @font-display;
		font-size: clamp(4rem, 9vw, 8.5rem);
		font-weight: 600;
		line-height: .9;
		letter-spacing: -.035em;
		text-transform: uppercase;

		em { display: block; color: @color-secondary; font-weight: 400; }
	}

	&__intro {
		max-width: 560px;
		margin: 3rem 0 2rem auto;
		font-size: clamp(1rem, 1.5vw, 1.25rem);
		line-height: 1.7;
		color: fade(@color-on-primary, 76%);
	}

	&__jump {
		display: flex;
		justify-content: space-between;
		width: min(100%, 560px);
		margin-left: auto;
		padding-bottom: .75rem;
		border-bottom: 1px solid fade(@color-on-primary, 40%);
		color: @color-on-primary;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: .08em;
	}

	&__steps { padding: clamp(5rem, 10vw, 9rem) 0; }
	&__section-label { margin-bottom: 3rem; color: @color-secondary; }
	&__steps ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid fade(@color-outline, 35%); }
	&__steps li {
		position: relative;
		isolation: isolate;
		display: grid;
		grid-template-columns: 100px 1fr auto;
		gap: 2rem;
		align-items: start;
		padding: 3rem 0;
		border-bottom: 1px solid fade(@color-outline, 35%);
		cursor: default;
		transition:
			background-color .35s ease,
			color .35s ease,
			padding-left .35s ease,
			padding-right .35s ease;

		&::before {
			content: "";
			position: absolute;
			inset: 0 50%;
			z-index: -1;
			background: @color-secondary;
			transition: inset .35s cubic-bezier(.22, 1, .36, 1);
		}

		&:hover,
		&:focus-within {
			color: @color-on-secondary;
			padding-left: 2rem;
			padding-right: 2rem;

			&::before { inset: 0; }
			.process-page__number,
			p { color: fade(@color-on-secondary, 82%); }
			h2 { transform: translateX(.75rem); }
			.material-symbols-outlined { color: @color-on-secondary; transform: translate(.35rem, -.35rem) rotate(8deg); }
		}
	}
	&__number { font-family: @font-display; font-size: 1.2rem; color: @color-secondary; transition: color .35s ease; }
	&__steps h2 { margin: 0 0 1rem; font-family: @font-display; font-size: clamp(2rem, 4vw, 3.75rem); text-transform: uppercase; transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
	&__steps li p { max-width: 650px; margin: 0; color: @color-on-surface-variant; line-height: 1.7; transition: color .35s ease; }
	&__steps .material-symbols-outlined { color: @color-secondary; font-size: 2rem; transition: color .35s ease, transform .35s cubic-bezier(.22, 1, .36, 1); }

	&__cta {
		padding: clamp(4rem, 8vw, 7rem) 0;
		background: @color-secondary;
		color: @color-on-secondary;

		.container { display: flex; justify-content: space-between; align-items: center; gap: 2rem; }
		p { margin: 0; font-family: @font-display; font-size: clamp(2.5rem, 6vw, 5.5rem); line-height: 1; text-transform: uppercase; }
		a { flex: 0 0 auto; padding: 1rem 0; border-bottom: 2px solid currentColor; color: inherit; font-weight: 700; text-transform: uppercase; }
	}
}

@media (max-width: 767px) {
	.process-page {
		&__hero-inner { padding-top: 5rem; padding-bottom: 5rem; }
		&__intro { margin-left: 0; }
		&__jump { margin-left: 0; }
		&__steps li { grid-template-columns: 50px 1fr; gap: 1rem; padding: 2rem 0; }
		&__steps .material-symbols-outlined { display: none; }
		&__cta .container { align-items: flex-start; flex-direction: column; }
	}
}

@media (hover: none) {
	.process-page__steps li {
		&:hover {
			color: inherit;
			padding-left: 0;
			padding-right: 0;

			&::before { inset: 0 50%; }
			.process-page__number { color: @color-secondary; }
			p { color: @color-on-surface-variant; }
			h2,
			.material-symbols-outlined { transform: none; }
			.material-symbols-outlined { color: @color-secondary; }
		}
	}
}

// Contact page / Contact Form 7
.contact-page {
	background: @color-background;

	&__hero {
		position: relative;
		overflow: hidden;
		padding: clamp(6rem, 12vw, 10rem) 0;
		background: @color-primary;
		color: @color-on-primary;
	}
	&__grid {
		position: absolute;
		inset: 0;
		opacity: .12;
		background-image: linear-gradient(fade(@color-on-primary, 35%) 1px, transparent 1px), linear-gradient(90deg, fade(@color-on-primary, 35%) 1px, transparent 1px);
		background-size: 6rem 6rem;
	}
	&__hero-inner { position: relative; z-index: 1; }
	&__eyebrow,
	&__section-label {
		margin-bottom: 2rem;
		color: @color-secondary;
		font-size: .75rem;
		font-weight: 700;
		letter-spacing: .18em;
		text-transform: uppercase;
	}
	&__eyebrow::before,
	&__section-label::before { content: ""; display: inline-block; width: 2.5rem; height: 2px; margin: 0 .75rem .2rem 0; background: currentColor; }
	h1 {
		max-width: 1000px;
		font-family: @font-display;
		font-size: clamp(4rem, 9vw, 8.5rem);
		font-weight: 600;
		line-height: .9;
		letter-spacing: -.035em;
		text-transform: uppercase;
	}
	h1 em { display: block; color: @color-secondary; font-weight: 400; }
	&__intro { max-width: 590px; margin: 3rem 0 0 auto; color: fade(@color-on-primary, 75%); font-size: 1.1rem; line-height: 1.75; }

	&__main { padding: clamp(5rem, 10vw, 9rem) 0; }
	&__layout { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(420px, 1.35fr); gap: clamp(4rem, 9vw, 9rem); }
	&__details h2,
	&__form h2 { margin-bottom: 3rem; font-family: @font-display; font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1; text-transform: uppercase; }
	&__details ul { border-top: 1px solid @color-outline-variant; }
	&__details li { padding: 1.5rem 0; border-bottom: 1px solid @color-outline-variant; }
	&__details li > span { display: block; margin-bottom: .65rem; color: @color-secondary; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
	&__details a,
	&__details li p { color: @color-on-surface-variant; line-height: 1.65; }
	&__details a { transition: color .25s ease; }
	&__details a:hover { color: @color-secondary; }
	&__form { padding: clamp(2rem, 5vw, 4rem); background: @color-surface-container-lowest; }
	&__form-notice { padding: 1rem; border-left: 3px solid @color-secondary; background: @color-surface-container; line-height: 1.6; }

	.wpcf7-form {
		p { margin: 0 0 1.5rem; }
		label { display: block; color: @color-on-surface; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
		input:not([type="submit"]):not([type="checkbox"]),
		select,
		textarea {
			width: 100%;
			margin-top: .65rem;
			padding: 1rem 0;
			border: 0;
			border-bottom: 1px solid @color-outline-variant;
			border-radius: 0;
			outline: 0;
			background: transparent;
			color: @color-on-surface;
			font: 400 1rem @font-body;
			transition: border-color .25s ease;
		}
		input:focus,
		select:focus,
		textarea:focus { border-color: @color-secondary; }
		textarea { resize: vertical; min-height: 140px; }
		input[type="submit"] {
			padding: 1rem 2rem;
			border: 0;
			background: @color-secondary;
			color: @color-on-secondary;
			font-weight: 700;
			letter-spacing: .08em;
			text-transform: uppercase;
			transition: background .25s ease, transform .25s ease;
		}
		input[type="submit"]:hover { background: @color-primary; transform: translateY(-2px); }
		.wpcf7-not-valid-tip { margin-top: .45rem; color: #b42318; font-size: .75rem; text-transform: none; letter-spacing: 0; }
		.wpcf7-response-output { margin: 1.5rem 0 0; padding: 1rem; border-width: 0 0 0 3px; }
	}
}

.con-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; }

@media (max-width: 767px) {
	.contact-page {
		&__layout { grid-template-columns: 1fr; gap: 4rem; }
		&__form { padding: 2rem 1.25rem; }
	}
	.con-form__row { grid-template-columns: 1fr; }
}