:root {
	--color-accent: #0065E4;
	--color-accent-dark: #114391;
	--color-dark: #2C2A29;
	--color-neutral: #F1F3F4;

	--gradient-neutral: linear-gradient(180deg, #F1F3F4 -5.71%, #FFF 99.98%);

	--font-accent: 'Nunito Sans', sans-serif;

	--spacing-block: 32px;
	--spacing-gap: 32px;
	--spacing-inline: 20px;

	--max-width: 1240px;

	text-wrap: pretty;

	@media (min-width: 768px) {
		--spacing-block: 64px;
		--spacing-inline: 32px;
	}
}

main {
	display: flow-root;
	background-color: white;

	h1, h2, h3, .eyebrow, .heading {
		margin-bottom: 0 !important;
		padding: 0;
		text-wrap: balance;
	}
}

.eyebrow {
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-accent-dark);

	@media (min-width: 768px) {
		font-size: 18px;
	}
}

.heading {
	font-family: var(--font-accent);
	font-size: 32px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--color-accent);

	@media (min-width: 768px) {
		font-size: 48px;
	}
}

.content {
	display: grid;
	gap: 1rem;

	.copy {
		display: contents;
	}
}

details {
	overflow: hidden;
	interpolate-size: allow-keywords;

	&::details-content {
		block-size: 0%;
		opacity: 0;
		transition: .15s;
		transition-behavior: allow-discrete;
	}

	&[open] {
		summary::after {
			transform: rotateX(180deg);
		}

		&::details-content {
			block-size: auto;
			opacity: 1;
		}
	}
}

summary {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 1rem;
	cursor: pointer;

	&::after {
		content: '';
		display: block;
		transition: transform .15s;
	}
}

nav.page-nav {
	padding-block: 16px;
	background-color: var(--color-neutral);

	.section-inner {
		display: grid;
		gap: 20px;

		@media (min-width: 768px) {
			grid-auto-flow: column;
			justify-content: space-between;
			align-items: center;
		}
	}

	ul {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 20px;
		margin: 0;
		list-style: none;

		@media (min-width: 768px) {
			grid-auto-flow: column;
			grid-template-columns: auto;
			gap: 0;
		}
	}

	li {
		display: grid;
		padding: .3em 0;
		border-bottom: 1px solid var(--color-accent);

		@media (min-width: 768px) {
			padding: 0 1em;
			border-bottom: none;
			border-right: 1px solid var(--color-accent);

			&:first-child {
				padding-left: 0;
			}

			&:last-child {
				border: none;
			}
		}

		a {
			color: inherit;
			transition: .3s;

			&:focus, &:hover {
				color: var(--color-accent);
			}
		}
	}

	.button {
		display: block;
	}
}

section {
	display: grid;
	gap: var(--spacing-gap) var(--spacing-block);
	margin-block: var(--spacing-block);
	padding-inline: var(--spacing-inline);
}

.section-inner {
	display: grid;
	gap: inherit;
	width: 100%;
	max-width: var(--max-width);
	margin-inline: auto;
}

section.accordion {
	max-width: 800px;
	margin-inline: auto;

	.content {
		text-align: center;
	}

	.items {
		display: grid;
		gap: 16px;
	}

	details {
		padding: 16px 20px;
		background: var(--gradient-neutral);
		border-radius: 5px;
	}

	summary {
		&::after {
			width: 32px;
			height: 32px;
			margin-top: 13px;
			background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M23.1162 12.1768C23.2139 12.0792 23.3721 12.0791 23.4697 12.1768L23.8232 12.5303C23.9209 12.6279 23.9208 12.7861 23.8232 12.8838L16.1768 20.5303C16.0791 20.6279 15.9209 20.6279 15.8232 20.5303L8.17676 12.8838C8.07914 12.7861 8.07913 12.6279 8.17676 12.5303L8.53027 12.1768C8.62789 12.0791 8.78615 12.0791 8.88379 12.1768L16 19.293L23.1162 12.1768Z" fill="%232C2A29" stroke="%23A4A4A4"/></svg>');
		}

		h3 {
			font-size: 20px;
			font-weight: 600px;
		}
	}
}

section.awards {
	margin-block: 0;
	padding-block: var(--spacing-inline);
	background: var(--gradient-neutral);

	.section-inner {
		gap: 24px;
		padding: 24px;
		border: 1px solid var(--color-accent);
		border-radius: 20px;
	}

	h2 {
		margin-bottom: 0 !important;
		text-align: center;
		font-size: 24px;

		@media (min-width: 768px) {
			font-size: 32px;
			max-width: max-content;
			margin-top: calc(-24px - 0.65em);
			margin-inline: auto;
			padding-inline: 1ch;
			backdrop-filter: blur(100px);
		}
	}

	.images {
		display: grid;
		gap: 24px;
		justify-items: center;

		@media (min-width: 768px) {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
		}
	}

	img {
		max-width: 230px;
		height: auto;
		max-height: 160px;
		object-fit: contain;
	}
}

section.content-callout {
	margin-block: 0;
	padding-block: var(--spacing-inline);

	.section-inner {
		@media (min-width: 768px) {
			grid-template-columns: 1fr 1fr;
		}
	}

	img {
		width: 100%;
		height: 300px;
		border-radius: 10px;
		object-fit: cover;

		@media (min-width: 768px) {
			order: 1;
		}
	}

	.button {
		display: block;
		width: fit-content;
	}

	.phone {
		display: flex;
		gap: 8px;
		align-items: center;
	}
}

section.content-images {
	.section-inner {
		@media (min-width: 1024px) {
			grid-template-columns: 1fr 2fr;
		}
	}

	.images {
		display: flex;
		gap: 8px;
	}

	img {
		flex: 1;
		width: 0;
		height: 100%;
		border-radius: 5px;
		object-fit: cover;

		&:nth-child(3) {
			display: none;

			@media (min-width: 768px) {
				display: block;
			}
		}
	}
}

section.content-list {
	.icon {
		display: grid;
		place-items: center;
		width: 64px;
		height: 64px;
		border-radius: 14px;

		img {
			width: 32px;
			height: 32px;
			object-fit: contain;
		}
	}

	.items {
		container-type: inline-size;
	}

	.item {
		display: grid;

		.inner, .copy {
			display: contents;
		}
	}

	ul {
		display: grid;
		gap: 8px 16px;
		margin: 0;
		list-style: none;
	}

	li {
		position: relative;
		padding-left: 1.5em;

		&::before {
			content: '';
			display: block;
			position: absolute;
			left: 0;
			top: .4em;
			width: 16px;
			height: 16px;
			background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><g clip-path="url(%23clip0_5016_1285)"><path d="M7.99992 14.6668C11.6818 14.6668 14.6666 11.6821 14.6666 8.00016C14.6666 4.31826 11.6818 1.3335 7.99992 1.3335C4.31802 1.3335 1.33325 4.31826 1.33325 8.00016C1.33325 11.6821 4.31802 14.6668 7.99992 14.6668Z" stroke="%230065E4" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 7.99984L7.33333 9.33317L10 6.6665" stroke="%230065E4" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_5016_1285"><rect width="16" height="16" fill="white"/></clipPath></defs></svg>')
		}
	}

	&.icon-card,
	&.icon-grid,
	&.icon-list {
		.item {
			gap: 20px;
			align-content: flex-start;
		}
	}

	&.icon-card,
	&.image-card {
		.items {
			display: flex;
			flex-wrap: wrap;
			gap: 8px;
			justify-content: center;

			&:has(.item:nth-child(2)) {
				.item {
					@container (width >= 600px) {
						width: calc(50% - 4px);
					}
				}
			}

			&:has(.item:nth-child(3)) {
				.item {
					@container (width >= 900px) {
						width: calc((100% - 16px) / 3);
					}
				}
			}

			&:has(.item:nth-child(4)) {
				.item {
					@container (width >= 900px) {
						width: calc(50% - 4px);
					}

					@container (width >= 1200px) {
						width: calc((100% - 24px) / 4);
					}
				}
			}

			&:has(.item:nth-child(5)) {
				.item {
					@container (width >= 900px) {
						width: calc((100% - 16px) / 3);
					}

					@container (width >= 1200px) {
						width: calc((100% - 24px) / 4);
					}
				}
			}
		}

		.item {
			width: 100%;
			padding-block: 20px;
			box-sizing: border-box;
			background: linear-gradient(135deg, #F1F3F4 0%, #FFF 100%);
			border: 1px solid #E5E7EB;
			border-radius: 5px;

			h3 {
				padding: 0;
				font-size: 20px;
				font-weight: 600;
			}
		}

		.button {
			margin-inline: auto;
		}
	}

	&.icon-card {
		.item {
			padding-inline: 20px;

			.icon {
				background-color: #DCE6FF;
			}
		}
	}

	&.icon-grid,
	&.icon-list {
		.section-inner {
			> img {
				width: 100%;
				max-height: 50vh;
				border-radius: 10px;
				object-fit: cover;
				/* mask-image: linear-gradient(0deg, transparent 0%, black 20%); */

				@media (min-width: 1024px) {
					grid-row: span 3;
					height: 100%;
					max-height: none;
					/* mask-image: none; */
				}
			}
		}

		.items {
			display: grid;
			gap: 24px;
		}

		.item {
			h3 {
				padding: 0;
			}

			.copy {
				font-size: 14px;
			}

			.icon {
				background-color: var(--color-accent);
			}
		}

		.button {
			max-width: max-content;
		}
	}

	&.icon-grid {
		.section-inner {
			@media (min-width: 1024px) {
				grid-template-columns: 400px 1fr;
			}
		}

		.items {
			grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		}

		.item {
			h3 {
				font-size: 20px;
				font-weight: 600;
			}
		}
	}

	&.icon-list {
		.section-inner {
			@media (min-width: 1024px) {
				grid-template-columns: 1fr 1fr;
			}

			> img {
				@media (min-width: 1024px) {
					grid-column: 2;
				}
			}
		}

		.content {
			@media (min-width: 1024px) {
				grid-column: 1;
				grid-row: 1;
			}
		}

		.item {
			display: grid;
			grid-template-columns: auto 1fr;
			gap: 24px;

			.inner {
				display: grid;
				gap: .5rem;
			}

			h3 {
				font-size: inherit;
				font-weight: inherit;
			}
		}
	}

	&.image-card,
	&.image-row {
		.item {
			gap: 16px;
		}
	}

	&.image-card {
		.item {
			padding-inline: 8px;
			text-align: center;

			h3 {
				color: var(--color-accent-dark);
			}

			.copy {
				font-size: 14px;
			}

			.image {
				margin-top: auto;
			}

			img {
				width: 100%;
				height: auto;
				border-radius: 10px;
				aspect-ratio: 89 / 59;
				object-fit: cover;
			}

			.button {
				width: 100%;
			}
		}
	}

	&.image-row {
		.items {
			display: grid;
			gap: 16px;
		}

		.item {
			border-radius: 5px;
			contain: paint;

			@container (min-width: 1000px) {
				grid-template-columns: 300px 1fr;
				gap: 8px;
			}

			&:nth-child(odd) {
				@container (min-width: 1000px) {
					grid-template-columns: 1fr 300px;

					.image {
						order: 1;
					}
				}
			}

			.inner {
				display: grid;
				gap: 1rem;
				align-content: flex-start;
				padding: 20px;
				background: linear-gradient(135deg, #F1F3F4 0%, #FFF 100%);
				border-radius: 5px;

				@container (min-width: 1000px) {
					padding: 40px;
				}
			}

			h3 {
				font-size: 24px;
				color: var(--color-accent);

				@media (min-width: 768px) {
					font-size: 32px;
				}
			}

			ul {
				@container (min-width: 700px) {
					grid-template-columns: 1fr 1fr;
				}
			}

			img {
				width: 100%;
				height: 340px;
				object-fit: cover;

				@container (min-width: 1000px) {
					height: 100%;
					border-radius: 5px;
				}
			}
		}
	}
}

section.copy {
	margin-block: 0;
	padding-block: var(--spacing-inline);
	text-align: center;

	.content {
		max-width: 900px;
		margin-inline: auto;
	}
}

section.testimonials {
	margin-block: 0;
	padding-block: var(--spacing-inline);
	text-align: center;
	background-color: var(--color-neutral);

	.widget {
		@media (min-width: 1024px) {
			margin-inline: -15px;
		}
	}
}

.hero-form {
	display: grid;
	color: white;
	background-color: black;

	> img {
		--max-width: 1920px;
		grid-column: 1;
		grid-row: 1 / span 2;
		width: 100%;
		max-width: var(--max-width);
		height: 100%;
		margin-inline: auto;
		object-fit: cover;
		opacity: .5;

		@media (min-width: 768px) {
			height: 600px;
		}

		@media (min-width: 1920px) {
			mask-image: linear-gradient(
				90deg,
				transparent 0,
				black 10%,
				black 90%,
				transparent 100%
			);
		}
	}

	.section-inner {
		grid-area: 1 / 1;
		z-index: 1;
		padding: var(--spacing-block) var(--spacing-inline);
		box-sizing: content-box;

		@media (min-width: 768px) {
			display: grid;
			grid-template-columns: 1fr 1fr;
		}
	}

	.content {
		.eyebrow, .heading {
			color: inherit;
		}
	}
}

.hero-quote {
	margin-block: var(--spacing-block);
	padding-inline: var(--spacing-inline);

	.section-inner {
		display: grid;
		gap: 1rem;

		@media (min-width: 768px) {
			grid-template-columns: 1fr 1fr;
			gap: var(--spacing-inline);
		}

		@media (min-width: 1024px) {
			grid-template-columns: 1fr 2fr;
		}
	}

	.images {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr auto;

		@media (min-width: 768px) {
			order: 1;
		}

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		figure {
			grid-column: span 2;
			padding: var(--spacing-inline);

			blockquote {
				margin: 0;
				padding: 0;
				font-size: 20px;
				font-weight: 600;
				font-style: normal;
				line-height: 1.4;
				color: inherit;
				border: none;
			}

			figcaption {
				margin-top: 1rem;
			}
		}
	}

	.content {
		grid-template-rows: auto 1fr auto auto;

		.heading {
			margin-bottom: auto !important;
		}
	}
}

.colours-accent {
	color: white;
	background-color: var(--color-accent);

	.eyebrow,
	.heading {
		color: inherit;
	}

	a:not(.button) {
		color: inherit;

		&:focus, &:hover {
			text-decoration: underline;
		}
	}

	.button {
		color: var(--color-accent);
		background-color: white;
	}
}

.max-width-mask {
	mask-image: linear-gradient(
		90deg,
		transparent calc((100% - var(--max-width)) / 2),
		black calc((100% - var(--max-width)) / 2 + var(--spacing-inline)),
		black calc((100% - var(--max-width)) / 2 + var(--max-width) - var(--spacing-inline)),
		transparent calc((100% - var(--max-width)) / 2 + var(--max-width))
	);
}