/*
Theme Name: Outline Property Group Theme
Author: Envelope Group
Version: 1.0
Site: Graham Leggat / northwork.co.uk
Brand: 
*/

/*_______________________________________*/

/*Colours*/

/*_______________________________________*/

:root {
	--bg-colour: #d9d0c5;
	--c-green: #d8f773;
	--c-green-dark: #749113;
	--c-orange: #f7e173;
	--c-teal: #73f79b;
	--c-green-light: #ecfbbd;
	--c-brown: #7c7770;
	--c-brown-light: #c3bbb1;
	--c-text: #5a5a5a;
	--c-grey-light: #eff1eb;

	--universal-padding: 1rem;
	--universal-margin: 2rem;
	--paragraph-width: 600px;
}

.bg--colour {
	background-color: var(--bg-colour);
}

* {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-weight: 300;
}

/*_______________________________________*/

/*Global Defaults*/

/*_______________________________________*/

html {
	height: 100%;
}

img {
	pointer-events: none;
}

.inter-light {
	font-family: "Inter", serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
}

.inter-med,
.bold {
	font-family: "Inter", serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
}

body {
	margin: 0;
	color: var(--c-text);
	font-size: 16px;
	background-color: var(--bg-colour);
	font-family: "Inter", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
}

.contain {
	max-width: 2000px;
	margin: 0 auto;
	position: relative;
}

.container {
	margin: var(--universal-padding);
}

.float {
	max-width: 1500px;
	margin: 0 auto;
}

.full-bl {
	margin: 0;
	padding: 1rem;
}

img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

a {
	text-decoration: none;
	color: inherit;
}

a:hover {
}

a:after {
}

.join-top {
	margin-top: 0;
	padding-top: 0;
}

.join-btm {
	border-bottom: 0 !important;
	margin-bottom: 0;
	padding-bottom: 0;
}

/*_______________________________________*/

/*Typography Global*/

/*_______________________________________*/

p {
	font-size: 1rem;
	line-height: 1.3rem;
	margin-bottom: 1rem;
	max-width: var(--paragraph-width);
}

h1 {
	font-size: 2.4rem;
	line-height: 2.2rem;
	font-weight: 300;
	color: #000;
	margin-bottom: 1.5rem;
	text-wrap: balance;
	max-width: var(--paragraph-width);
}

h2 {
	font-size: 1.75rem;
	line-height: 110%;
	font-weight: 300;
	color: #000;
	margin-bottom: 1.25rem;
	max-width: var(--paragraph-width);
}

h3 {
	font-size: 1.5rem;
	line-height: 120%;
	font-weight: 300;
	margin-bottom: 1.25rem;
	max-width: var(--paragraph-width);
}

h4 {
	font-size: 1.25rem;
	line-height: 130%;
	font-weight: 300;
	margin-bottom: 1rem;
	max-width: var(--paragraph-width);
}

h5 {
	font-size: 1.125rem;
	line-height: 140%;
	font-weight: 300;
	margin-bottom: 1rem;
	max-width: var(--paragraph-width);
}

h6 {
	font-size: 1rem;
	line-height: 140%;
	font-weight: 300;
	margin-bottom: 1rem;
	max-width: var(--paragraph-width);
}

@media screen and (max-width: 1000px) {
	h1 {
		font-size: 1.75rem;
		line-height: 2rem;
	}
	h2 {
		font-size: 1.5rem;
		line-height: 1.8rem;
	}
	h3 {
		font-size: 1.25rem;
		line-height: 1.6rem;
	}
	h4 {
		font-size: 1.125rem;
		line-height: 1.4rem;
	}
	h5 {
		font-size: 1rem;
		line-height: 1.3rem;
	}
	h6 {
		font-size: 0.875rem;
		line-height: 1.2rem;
	}
}

@media screen and (max-width: 750px) {
	h1 {
		font-size: 1.5rem;
		line-height: 1.8rem;
	}
	h2 {
		font-size: 1.25rem;
		line-height: 1.6rem;
	}
	h3 {
		font-size: 1.125rem;
		line-height: 1.4rem;
	}
	h4 {
		font-size: 1rem;
		line-height: 1.3rem;
	}
	h5 {
		font-size: 0.875rem;
		line-height: 1.2rem;
	}
	h6 {
		font-size: 0.75rem;
		line-height: 1.1rem;
	}
}

.caps {
	text-transform: uppercase;
}

b {
	font-weight: 500;
}

i,
em {
	font-style: normal;
}

/*_______________________________________*/

/*Buttons*/

/*_______________________________________*/

button {
	background: none;
	border: 0;
	white-space: nowrap;
}

button:hover {
	cursor: pointer;
}

a.button {
	display: block;
}

button.green {
	background-color: var(--c-green);
	color: var(--c-brown);
	border: 1px solid var(--c-green-light);
	padding: 1rem 1rem 1rem 4rem;
	font-size: 1rem;
	line-height: 0;
}

button.green::after {
	content: "";
	display: inline-block;
	width: 30px;
	height: 30px;
	margin-left: 0.5rem;
	vertical-align: middle;
	background-image: url("./assets/img/arrow-horz.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-color: var(--c-green-light);
}

button.grey {
	background-color: var(--c-brown-light);
	color: var(--c-text);
	border: 0;
	padding: 1rem 1rem 1rem 4rem;
	font-size: 1rem;
	line-height: 0;
}

button.grey::after {
	content: "";
	display: inline-block;
	width: 30px;
	height: 30px;
	margin-left: 0.5rem;
	vertical-align: middle;
	background-image: url("./assets/img/arrow-horz.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-color: var(--bg-colour);
}

button.nopad {
	padding: 1rem 2rem;
	border: 0;
	color: black;
	text-transform: uppercase;
}

button.nopad::after {
	background-image: url("./assets/img/arrow-up.svg");
}

button.border {
	border: 1px solid var(--c-brown);
}

/*_______________________________________*/

/*Navigation*/

/*_______________________________________*/

.header-grid {
	display: grid;
	grid-template-columns: 1fr 3fr;
	border: 1px solid var(--c-green);
}

.nav {
	width: 100%;
}

.nav-col {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}

.nav-col .nav-col--sq {
	background-color: var(--c-green);
	height: 75px;
	aspect-ratio: 1;
}

.nav .main-nav {
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 100%;
	font-size: 1.2rem;
}

.nav-menu {
	width: 100%;
}

#menu-main-menu {
	height: 100%;
	list-style: none;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	text-transform: uppercase;
}

#menu-main-menu li {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 0 2rem;
	font-size: 1rem;
	color: #000;
	white-space: nowrap;
}

#menu-main-menu li:last-child {
	background-color: var(--c-green);
	position: relative;
}

#menu-main-menu li:last-child a::after {
	content: "";
	display: inline-block;
	width: 20px;
	height: 15px;
	margin-left: 0.5rem;
	background-image: url("./assets/img/arrow-up.svg");
	background-repeat: no-repeat;
}

.burger {
	display: none;
}

@media (max-width: 1000px) {
	.nav-col {
		display: none;
	}

	.nav-container {
		display: flex;
	}

	#menu-main-menu li {
		padding: 0 1rem;
	}
}

@media (max-width: 750px) {
	.nav-container {
		display: none;
	}

	.nav {
		display: none;
	}

	.header-grid {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
	}

	.burger {
		display: block;
		cursor: pointer;
		padding: 1rem;
	}

	.burger--top,
	.burger--mid,
	.burger--bot {
		width: 30px;
		height: 3px;
		background-color: #000;
		margin: 5px 0;
		transition: all 0.3s ease;
	}
}

/* Mobile Menu Overlay */

.mobile-menu-overlay {
	display: none;
	height: 100%;
	background-color: var(--bg-colour);
	padding: 1rem;
	padding-top: 0;
}

.mobile-menu-overlay.active {
	display: block;
}

.mobile-menu-container {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.mobile-nav {
	border: 1px solid var(--c-green);
}

.mobile-nav-menu {
	list-style: none;
	padding: 0;
	margin: 0;
}

.mobile-nav-menu li {
	margin: 1rem 0;
	font-size: 1.3rem;
	padding: 1rem;
}

.mobile-nav-menu li a {
	color: var(--c-text);
	text-decoration: none;
}

.mobile-nav-menu li:last-of-type {
	background-color: var(--c-green);
	padding: 1rem;
	margin-bottom: 0;
}

.mobile-nav-menu li:last-of-type a::after {
	content: "";
	display: inline-block;
	width: 20px;
	height: 15px;
	margin-left: 0.5rem;
	background-image: url("./assets/img/arrow-up.svg");
	background-repeat: no-repeat;
}

@media (max-width: 750px) {
	.burger.active .burger--top {
		transform: rotate(45deg) translate(5px, 5px);
	}

	.burger.active .burger--mid {
		opacity: 0;
	}

	.burger.active .burger--bot {
		transform: rotate(-45deg) translate(7px, -7px);
	}
}

/*_______________________________________*/

/*Header*/

/*_______________________________________*/

.page-hero {
}

.page-hero .logo {
	border-right: 1px solid var(--c-green);
	display: flex;
	padding: 1rem;
	aspect-ratio: 1;
	flex-direction: column;
	justify-content: flex-end;
}

@media (max-width: 750px) {
	.page-hero .logo {
		display: none;
	}
}

.page-hero .logo a {
	display: block;
}

.page-hero .logo img {
	max-width: 250px;
}

.page-hero .hero-section {
	padding: 1rem;
}

.page-hero .hero-section .hero-inner {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
}

.page-hero .hero-section .hero-inner * {
	margin: 0;
	padding: 0;
}

.page-hero--image {
	border: 0;
}

.page-hero--image .hero-image {
	grid-column: 2;
	border: 1px solid var(--c-green);
	border-top: 0;
	padding: 4rem;
	z-index: 9;
}

.page-join {
	display: flex;
	flex-direction: column;
	height: 30vh;
	transform: translate(0, -30vh);
	width: 100%;
	background-color: var(--c-green-light);
}

@media (max-width: 1000px) {
	.page-hero--image .hero-image {
		padding: 3rem 1rem;
	}
}

/*_______________________________________*/

/*Home Hero*/

/*_______________________________________*/

.hero {
	min-height: 80vh;
}

.hero .logo {
	border-right: 1px solid var(--c-green);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
}

.hero .logo .brick {
	height: 75px;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}

.hero .logo .brick .inner {
	background-color: var(--c-brown);
	height: 100%;
	width: 100%;
}

.hero .logo .brick .spacer {
	height: 100%;
	aspect-ratio: 1;
}

@media (max-width: 1000px) {
	.hero .logo {
		flex-direction: column-reverse;
		justify-content: flex-start;
	}

	.hero .logo .brick {
		height: 40px;
	}

	.hero .logo .brick .spacer {
		background-color: var(--c-green);
	}
}

.hero .logo img {
	height: 50vh;
	max-height: 300px;
	width: auto;
	padding: 1rem;
}

.mob-logo {
	display: none;
}

.mob-logo a {
	display: block;
}

.hero .hero-section {
	height: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.hero .hero-section .hero-inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

.hero .hero-section .hero-inner .text {
	padding: 4rem 0 4rem 4rem;
}

.hero .hero-section .hero-inner {
}

.hero .hero-section .hero-inner h1::before {
	content: "";
	height: 60px;
	width: 60px;
	display: inline-block;
	vertical-align: text-bottom;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	margin-right: 1rem;
}

.hero .hero-section .hero-inner p {
	max-width: 35ch;
	color: var(--c-brown);
	text-wrap: balance;
}

.hero .hero-section .hero-image {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
}

.hero .hero-section .hero-image img {
	transform: translate(2px, 2px);
}

@media (max-width: 1000px) {
	.hero .hero-section {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-end;
	}

	.hero .hero-section .hero-image {
		max-width: 400px;
		padding-top: 2rem;
	}

	.hero .hero-section .hero-inner .text {
		padding: 2rem;
	}
}

@media (max-width: 750px) {
	.hero .logo {
		display: none;
	}

	.mob-logo {
		display: block;
	}
	.mob-logo img {
		max-width: 150px;
		padding: 1rem;
	}
}

/*_______________________________________*/

/*CTA Cards*/

/*_______________________________________*/

.cta-repeater {
	border: 1px solid var(--c-green);
	margin-top: 4rem;
}

.cta-repeater .cta-card {
	display: grid;
	grid-template-columns: 1fr 3fr;
}

.cta-repeater .cta-card:not(:last-of-type) {
	border-bottom: 1px solid var(--c-green);
}

.cta-repeater .cta-card .cta-right {
	position: relative;
}
.cta-repeater .cta-card .cta-tab {
	border-bottom: 1px solid var(--c-green);
	border-left: 1px solid var(--c-green);
	background-color: var(--c-text);
	color: white;
	padding: 1rem 2rem;
	font-size: 1.2rem;
	display: flex;
	position: absolute;
	right: 0;
}

.cta-repeater .cta-card .cta-inner {
	height: 100%;
}

.cta-repeater .cta-card .cta-inner {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	height: 100%;
}

.cta-repeater .cta-card .cta-inner .text {
	padding: 4rem;
	padding-right: 0;
	max-width: 45ch;
	text-wrap: balance;
}

.cta-repeater .cta-card .cta-inner .text h1::before {
	content: "";
	height: 60px;
	width: 60px;
	display: inline-block;
	vertical-align: text-bottom;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	margin-right: 0.75rem;
}

.cta-repeater .cta-card .cta-inner .text :not(h1) {
	color: var(--c-text);
}

.cta-repeater .cta-card .cta-inner .meta {
	max-width: 30ch;
	padding: 1rem;
}

.cta-card .image img {
	object-fit: cover;
	height: 100%;
	width: 100%;
}

@media (max-width: 750px) {
	.cta-repeater .cta-card {
		grid-template-columns: 1fr;
	}

	.cta-repeater .cta-card .cta-right {
		order: -1;
	}

	.cta-repeater .cta-card .cta-inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.cta-repeater .cta-card .cta-inner .text {
		padding: 4rem 0 1rem 2rem;
	}

	.cta-repeater .cta-card .cta-inner .meta {
		padding: 2rem;
	}
}

/*_______________________________________*/

/*Pull CTA*/

/*_______________________________________*/

.pull-cta {
	margin: 4rem 0;
}
.pull-cta .cta-card {
	display: grid;
	grid-template-columns: 1fr 3fr;
	gap: 1rem;
	background-color: var(--c-grey-light);
}

.pull-cta .cta-card .image {
	padding: 4rem 2rem;
}

.pull-cta .cta-card .cta-inner {
	border-left: 1px solid var(--c-brown-light);
}

.pull-cta .cta-card .cta-inner {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	height: 100%;
}

.pull-cta .cta-card .cta-inner .text {
	padding: 4rem;
	max-width: 45ch;
}

.pull-cta .cta-card .cta-inner .text :not(h1) {
	color: var(--c-text);
}

.pull-cta .cta-card .image img {
	width: 100%;
	height: auto;
}

@media (max-width: 1000px) {
	.pull-cta .cta-card {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.pull-cta .cta-card .image {
		padding: 1rem;
		display: flex;
		justify-content: flex-end;
	}

	.pull-cta .cta-card .cta-inner .text {
		padding: 2rem;
		padding-top: 0;
	}
	.pull-cta .cta-card .image img {
		max-width: 300px;
	}
}

/*_______________________________________*/

/*FAQ Repeater*/

/*_______________________________________*/

.faq-repeater {
	border-bottom: 1px solid var(--c-green);
	display: grid;
	grid-template-columns: 1fr 3fr;
	gap: 1rem;
	/* margin-top: 4rem; */
}

.faq-inner .title * {
	margin: 0;
	padding: 0;
	max-width: 35ch;
	margin-bottom: 0.5rem;
}

.faq-repeater .faq-inner {
	border-left: 1px solid var(--c-green);
	display: flex;
	flex-direction: column;
	padding: 1rem;
	padding-bottom: 3rem;
}

.faq-repeater .faq-inner .dropdown {
	color: var(--c-text);
}

.faq-repeater .faq-inner .dropdown .item--title {
	border-bottom: 1px solid var(--c-brown-light);
	padding: 1rem 0;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.faq-repeater .item .item--title h3 {
	max-width: 100%;
}

.faq-repeater .faq-inner .dropdown .item--title::after {
	content: "";
	display: inline-block;
	width: 30px;
	height: 30px;
	margin-left: 0.5rem;
	vertical-align: middle;
	background-image: url("./assets/img/arrow-horz.svg");
	transform: rotate(90deg);
	background-repeat: no-repeat;
	background-position: center;
	background-color: var(--c-brown-light);
}

.faq-repeater .faq-inner .dropdown .item--content {
	max-width: 65ch;
}

@media (max-width: 750px) {
	.faq-repeater {
		grid-template-columns: 1fr;
	}
	.faq-repeater .faq-inner {
		border-left: 0;
		border-top: 1px solid var(--c-green);
		padding-top: 3rem;
	}
	.faq-repeater .faq-inner .dropdown .item--content {
		max-width: 100%;
	}
}

/*_______________________________________*/

/*Case Study Repeater*/

/*_______________________________________*/

.case-container {
	margin-top: 4rem;
	padding-bottom: 5rem;
}

.case-container .case-header {
	border-bottom: 1px solid var(--c-brown-light);
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}

.case-container .case-header .title {
	padding: 1rem;
}

.case-container .case-header .title h3 {
	line-height: 100%;
	margin: 0;
	padding: 0;
}

.case-container .case-repeater {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	margin: 5rem 0;
}

.case-container .case-repeater .case-card {
	border: 1px solid var(--c-green);
}

.case-container .case-repeater .case-card .image {
	border-bottom: 1px solid var(--c-green);
	background-color: var(--c-green-light);
	padding: 1rem;
}

.case-container .case-repeater .case-card:nth-child(even) {
	transform: translateY(10vh);
}

.case-container .case-repeater .case-card .text {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.case-container .case-repeater .case-card .text .title * {
	margin: 0;
	padding: 0;
	line-height: 140%;
}

.case-container .case-repeater .case-card .text .meta {
	max-width: 35ch;
}

@media (max-width: 750px) {
	.case-container {
		padding-bottom: 0;
	}

	.case-container .case-repeater {
		grid-template-columns: 1fr;
		margin-bottom: 0;
	}
	.case-container .case-repeater .case-card:nth-child(even) {
		transform: none;
	}
}

/*_______________________________________*/

/*Testimonial Repeater*/

/*_______________________________________*/

.testimonial {
	margin-top: 4rem;
	border: 1px solid var(--c-green);
}

.testimonial .item {
	border-bottom: 1px solid var(--c-green);
	display: grid;
	grid-template-columns: 3fr 1fr;
}

.testimonial .item:nth-of-type(even) {
	grid-template-columns: 1fr 3fr;
}

.testimonial .item:nth-of-type(even).item .image {
	border-left: 0;
	border-right: 1px solid var(--c-green);
	order: -1;
}

.testimonial .item:last-of-type {
	border-bottom: 0;
}

.testimonial .item .image {
	border-left: 1px solid var(--c-green);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-end;
}

.testimonial .item .image img {
	width: 100%;
	height: auto;
}

.testimonial .item .text {
	padding: 4rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 45ch;
	position: relative;
}

.testimonial .item .text::before {
	content: url("./assets/img/quote.svg");
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	padding: 0.5rem;
	background-color: var(--c-brown);
	border-right: 1px solid var(--c-green);
	border-bottom: 1px solid var(--c-green);
}

@media (max-width: 750px) {
	.testimonial .item {
		grid-template-columns: 1fr;
	}

	.testimonial .item:nth-of-type(even) {
		grid-template-columns: 1fr;
	}

	.testimonial .item:nth-of-type(even).item .image {
		order: 1;
	}

	.testimonial .item .text {
		padding: 1rem;
		padding-top: 3rem;
	}

	.testimonial .item .image {
		border-right: 0 !important;
	}
}

/*_______________________________________*/

/*Grid*/

/*_______________________________________*/

.grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

.grid--margin {
	margin: 1rem;
}

.grid--gap {
	gap: 1rem;
}

@media screen and (max-width: 700px) {
	.grid {
		grid-template-columns: 1fr 1fr;
	}
}

.grid--span2 {
	grid-column: span 2;
}

.grid--span3 {
	grid-column: span 3;
}

.grid--span4 {
	grid-column: span 4;
}

/* Flex Rigs */

.col-rig {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

@media screen and (max-width: 700px) {
	.col-rig {
		grid-template-columns: 1fr;
	}
}

/*_______________________________________*/

/*Page Intro*/

/*_______________________________________*/

.page-intro {
	padding-top: 30vh;
	margin-top: -30vh;
	padding-bottom: 5vh;
}

.page-intro {
	border-bottom: 1px solid var(--c-green);
}

.page-intro.has-image {
	background-color: var(--c-green-light);
}

.page-intro--inner {
	margin: 4rem;
}

.page-intro .text {
	max-width: 45ch;
}

@media (max-width: 1000px) {
	.page-intro--inner {
		margin: 2rem;
	}
}

/*_______________________________________*/

/*Quote Block*/

/*_______________________________________*/

.quote-block {
	background-color: var(--c-green);
	padding: 1rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	position: relative;
}

.quote-block h3 {
	max-width: 35ch;
	margin: 0;
	padding-top: 4rem;
}

.quote-block::before {
	content: url("./assets/img/quote.svg");
	background-color: var(--c-text);
	padding: 0.5rem;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}

/*_______________________________________*/

/*Image Block (With Quote)*/

/*_______________________________________*/

.image-block {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 5rem;
}

.image-block .quote-block {
	z-index: 9;
	margin: 150px 0 0 150px;
}

.image-block .image:nth-of-type(2) {
	transform: translate(-70px, 240px);
	z-index: 8;
}

.image-block .image:nth-of-type(3) {
	transform: translate(70px, -70px);
	z-index: 7;
}

.image-block.noquote {
	margin-bottom: 300px;
}

@media (max-width: 1000px) {
	.image-block {
		margin: 0;
	}

	.image-block .quote-block {
		margin: 0;
	}

	.image-block .image:nth-of-type(2) {
		transform: translate(-30px, 100px);
	}

	.image-block .image:nth-of-type(3) {
		transform: translate(90px, -50px);
	}

	.image-block.noquote {
		margin-bottom: 150px;
	}
}

/*_______________________________________*/

/*Steps Repeater*/

/*_______________________________________*/

.steps-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-bottom: 1px solid var(--c-brown-light);
}

.steps-container .title {
	max-width: 55ch;
}

.steps-repeater {
	margin-top: 2rem;
}

.steps-repeater .item {
	max-width: 65ch;
	display: grid;
	grid-template-columns: 1fr 4fr;
	gap: 1rem;
}

.steps-repeater .item .number {
	border-right: 1px solid var(--c-brown-light);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-end;
	padding: 1rem;
}

.steps-repeater .item .number h1 {
	margin: 0;
	padding: 0;
	font-size: 5rem;
	color: var(--c-green);
}

.steps-repeater .item .text h2,
.steps-repeater .item .text h3 {
	margin: 0;
	padding: 0;
}

.steps-repeater .item .text h5 {
	text-wrap: balance;
	padding-bottom: 5rem;
}

@media (max-width: 700px) {
	.steps-container {
		padding: 1rem;
	}
}

/*_______________________________________*/

/*Features Grid*/

/*_______________________________________*/

.features-container {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-end;
	margin: 3rem 0;
}

.features-repeater {
	/* max-width: 45ch; */
}

.features-repeater .item {
	margin-bottom: 4rem;
}

.features-repeater .item h1::before {
	content: "";
	height: 60px;
	width: 60px;
	display: inline-block;
	vertical-align: text-bottom;
	margin-right: 1rem;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

/*_______________________________________*/

/*Quote Container*/

/*_______________________________________*/

.quote-container {
	display: flex;
	flex-direction: row;
}

.quote-container.right {
	justify-content: flex-end;
}

.quote-container .quote-block {
	padding-top: 4rem;
	max-width: 45ch;
}

/*_______________________________________*/

/*Services Matrix*/

/*_______________________________________*/

.services-container {
	padding: 4rem 2rem;
	background-color: var(--c-green-light);
	margin: 4rem 0;
}

.services-container .title h3 {
	margin: 0;
	padding: 0;
}

.services-container .title .title-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-bottom: 4rem;
}

@media (max-width: 1000px) {
	.services-container .title .title-grid {
		grid-template-columns: 1fr;
	}
}

.services-matrix {
}

.services-matrix .grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
	gap: 1rem;
	margin: 0;
}

.services-matrix .grid .item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 1rem;
}

.services-matrix .grid .item.orange {
	background-color: var(--c-orange);
}

.services-matrix .grid .item.green {
	background-color: var(--c-green);
}

.services-matrix .grid .item.teal {
	background-color: var(--c-teal);
}

.services-matrix .grid .item h5,
.services-matrix .grid .item h6 {
	margin: 0;
	padding: 0;
	margin-bottom: 0.5rem;
	color: #000;
}
.services-matrix .grid .item h5 {
	font-weight: 500;
}

.services-matrix .grid .item .icon {
	padding-bottom: 4rem;
}

.services-matrix .grid .item .icon img {
	height: 50px;
	width: 50px;
}

.services-matrix .button {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding-top: 4rem;
}

.services-matrix .service-category {
	padding-bottom: 3rem;
}
/*_______________________________________*/

/*Enquire Block*/

/*_______________________________________*/

.enquire-container {
	margin: 4rem;
}

.enquire-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
}

.enquire-grid .item {
	border: 1px solid var(--c-green);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
}

.enquire-grid .item .text {
	max-width: 35ch;
	padding: 1rem;
	padding-right: 3rem;
	padding-bottom: 4rem;
}

.enquire-grid .item .text h2 {
	color: #000;
}

.enquire-grid .item .text h2 span {
	background: linear-gradient(to right, var(--c-green), var(--bg-colour));
}

.enquire-grid .item .button {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	background-color: var(--c-green);
	width: 100%;
}

.enquire-grid .item .button .inner {
	padding: 1rem;
}

.enquire-grid .item .button .inner::after {
	content: "";
	display: inline-block;
	width: 30px;
	height: 30px;
	margin-left: 0.5rem;
	vertical-align: middle;
	background-image: url("./assets/img/arrow-horz.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-color: var(--c-green-light);
}

@media (max-width: 750px) {
	.enquire-container {
		margin: 0;
	}

	.enquire-grid {
		grid-template-columns: 1fr;
	}
	.enquire-grid .item .text {
		padding: 1rem;
		padding-bottom: 2rem;
	}
}

/*_______________________________________*/

/*Footer*/

/*_______________________________________*/

.contact-cta {
	background-color: var(--c-brown-light);
	margin: 4rem 0;
	padding: 5rem 2rem;
	height: 50vh;
	min-height: 500px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.contact-cta .inner {
	border: 1px solid var(--bg-colour);
	display: grid;
	grid-template-columns: 1fr 1fr;
	height: 100%;
	flex-grow: 1;
	text-wrap: balance;
}

.contact-cta .inner .left {
	padding: 2rem;
	border-right: 1px solid var(--bg-colour);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.contact-cta .inner .right {
	display: grid;
	grid-template-rows: 1fr 1fr;
}

.contact-cta .inner .right .secondary {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid var(--bg-colour);
	padding: 1rem;
}

@media (max-width: 1000px) {
	.contact-cta .inner .right .secondary {
		flex-direction: column;
		justify-content: center;
	}
}

@media (max-width: 700px) {
	.contact-cta {
		padding: 3rem 1rem;
		height: auto;
		margin-bottom: 0;
	}

	.contact-cta .inner {
		grid-template-columns: 1fr;
		border-bottom: 0;
	}
	.contact-cta .inner .left {
		border-right: 0;
		padding: 1rem;
		border-bottom: 1px solid var(--bg-colour);
	}
	.contact-cta .inner .right {
		grid-template-rows: 1fr;
	}

	.contact-cta .inner .right .secondary {
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
	}
}

/* Footer */

.footer {
	min-height: 50vh;
	padding: 2rem;
	margin-top: 5rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.footer .logo {
	max-width: 250px;
}

.footer .section {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

.footer .section .item {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.footer .section .item h4 {
	margin: 0;
	padding: 0;
	color: var(--c-text);
}

@media screen and (max-width: 1000px) {
	.footer .section {
		grid-template-columns: 1fr 1fr;
	}
}

@media screen and (max-width: 700px) {
	.footer {
		margin-top: 1rem;
	}

	.footer .section {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.footer .logo {
		max-width: 200px;
	}
}

.footer-meta {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 0 2rem;
	color: var(--c-brown);
}

/*_______________________________________*/

/*CPT: Case Study */

/*_______________________________________*/

.case-study-container {
	background-color: var(--c-brown-light);
	padding: 4rem 0;
}

.case-study-container:nth-of-type(even) {
	background-color: var(--bg-colour);
}

.case-study {
	margin-top: 4rem;
	margin-bottom: 4rem;
	padding: 1rem;
}

.case-study .study-comparison {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
}

@media (max-width: 800px) {
	.case-study .study-comparison {
		grid-template-columns: 1fr;
	}
}

.case-study .study-comparison .study-before .image img {
	mix-blend-mode: luminosity;
}

.case-study .study-comparison .study-after {
	background-color: var(--c-green-light);
	border: 1px solid var(--c-green);
	padding: 1rem;
}

/*_______________________________________*/

/*CONTACT FORM */

/*_______________________________________*/

.contact-form-container {
	margin: 4rem;
}

.contact-container h2 {
	max-width: 700px;
	padding-bottom: 2rem;
}

@media screen and (min-width: 500px) {
	.contact--grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
		gap: 1rem;
	}
}

.contact--column p {
	margin-bottom: 2rem;
}

input {
	margin: 0;
	margin-top: 0.5rem;
	border: 0;
	padding: 1rem 0;
	width: 100%;
	font-family: inherit;
	-webkit-box-sizing: border-box;
	/* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;
	/* Firefox, other Gecko */
	box-sizing: border-box;
	/* Opera/IE 8+ */
	border-bottom: 1px solid grey;
	background-color: var(--bg-colour);
	font-size: 1.2rem;
}

input:focus,
textarea:focus {
	outline: none;
}

textarea {
	padding: 1rem 0;
	width: 100%;
	font-family: inherit;
	margin: 0;
	border: 0;
	-webkit-box-sizing: border-box;
	/* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;
	/* Firefox, other Gecko */
	box-sizing: border-box;
	/* Opera/IE 8+ */
	border-bottom: 1px solid grey;
	background-color: var(--bg-colour);
	font-size: 1.2rem;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.wpcf7-list-item {
	margin: 0 !important;
	padding: 0;
	display: block;
}

.wpcf7-list-item {
	padding: 0.5rem 0;
	padding-right: 1.5rem;
}

.wpcf7-list-item * {
	display: inline-block;
}

.wpcf7-list-item-label {
	color: darkgrey;
	font-size: 1.3rem;
	white-space: pre;
}

.wpcf7-submit {
	color: black;
	background: linear-gradient(to right, var(--c-green), var(--bg-colour));
	border-bottom: 0;
	text-align: left;
	cursor: pointer;
	font-size: 1.5rem;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 2rem;
	transition: all 0.5s ease;
}

.wpcf7-submit:hover {
	background: linear-gradient(to left, var(--c-teal), var(--c-green));
	color: black;
	transition: all 0.5s ease;
}

.wpcf7 form .wpcf7-response-output {
	width: 80%;
	margin: 0;
	padding: 0;
	font-size: 2rem;
	color: inherit;
	border: 0;
}

@media screen and (max-width: 600px) {
	.wpcf7 form .wpcf7-response-output {
		font-size: 1.2rem;
	}
}

.wpcf7-form label {
	color: black;
	padding-left: 0;
}

@media (max-width: 750px) {
	.contact-form-container {
		margin: 5rem 0;
	}
}

.wpcf7 form p {
	padding-bottom: 1rem;
	max-width: 800px;
}

/* Radio Button Styles */
.wpcf7-radio {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 1rem 0;
	width: 100%;
}

.wpcf7-radio .wpcf7-list-item {
	min-width: 150px;
}

.wpcf7-radio input[type="radio"] {
	width: auto;
	margin: 0;
	margin-right: 0.5rem;
	border: 1px solid var(--c-brown);
	appearance: none;
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	outline: none;
	cursor: pointer;
	padding: 0;
}

.wpcf7-radio input[type="radio"]:checked {
	background-color: var(--c-green);
	border: 1px solid var(--c-brown);
}

.wpcf7-radio .wpcf7-list-item-label {
	font-size: 1rem;
	color: var(--c-text);
}

.wpcf7-radio .wpcf7-list-item label {
	display: flex;
	align-items: center;
	cursor: pointer;
}

/* Checkbox Styles */
.wpcf7-checkbox {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 1rem 0;
	width: 100%;
}

.wpcf7-checkbox .wpcf7-list-item {
	min-width: 150px;
}

.wpcf7-checkbox input[type="checkbox"] {
	width: auto;
	margin: 0;
	margin-right: 0.5rem;
	border: 1px solid var(--c-brown);
	appearance: none;
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	outline: none;
	cursor: pointer;
	padding: 0;
	position: relative;
}

.wpcf7-checkbox input[type="checkbox"]:checked {
	background-color: var(--c-green);
	border: 1px solid var(--c-brown);
}

.wpcf7-checkbox input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 1px;
	width: 5px;
	height: 10px;
	border: solid var(--c-brown);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.wpcf7-checkbox .wpcf7-list-item-label {
	font-size: 1rem;
	color: var(--c-text);
}

.wpcf7-checkbox .wpcf7-list-item label {
	display: flex;
	align-items: center;
	cursor: pointer;
}
/* File Upload */

/* Hide the default file input */
input[type="file"] {
	display: none;
}

/* Style the label */
label[for="your-file"] {
	display: inline-block;
	padding: 1rem 2rem;
	background-color: var(--c-brown-light);
	color: var(--c-text);
	cursor: pointer;
	text-align: center;
	font-size: 1.2rem;
	transition: background-color 0.3s ease;
}

label[for="your-file"]:hover {
	background-color: var(--c-green);
}

label[for="your-file"]::after {
	content: "";
	display: inline-block;
	width: 30px;
	height: 30px;
	margin-left: 0.5rem;
	vertical-align: middle;
	background-image: url("./assets/img/arrow-up.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-color: var(--c-grey-light);
}

/* Styling the file list display */
#file-list {
	font-size: 1.2rem;
	padding: 1rem;
	margin: 0;
	max-width: 800px;
}

/*_______________________________________*/

/*Page Hider*/

/*_______________________________________*/

/* .page-hider {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--c-green);
	color: #000;
	font-size: 1.5rem;
	text-align: center;
	z-index: 9999;
	justify-content: center;
	align-items: center;
	padding: 2rem;
}

.page-hider p {
	margin: 0;
}

@media screen and (max-width: 1200px) {
	.page-hider {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	body {
		overflow: hidden;
	}
} */