: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-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;
	}
}

body:has(main .hero-form) {
	.ast-header-breadcrumb {
		display: none;
	}
}

body:has(main) {
	header {
		> :nth-child(2) {
			padding: 0 !important;
		}

		> :nth-child(3) {
			display: none;
		}

		> :nth-child(4) {
			.elementor-widget-image {
				margin: 0 !important;
			}

			.elementor-shape-square {
				display: none;
			}
		}

		> :nth-child(6) {
			margin-bottom: 1.5rem !important;
		}

		> :last-child {
			margin-top: 0 !important;
		}
	}
}

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;
		}
	}

	.button {
		width: 100%;
		background-color: var(--color-accent);

		&:focus, &:hover {
			transform: scale(1.05);
			filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.5));
			transition: .15s;
		}
	}

	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: 16px var(--spacing-inline);
		line-height: 1.4;
		background-color: var(--color-neutral);

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

			@media (min-width: 1024px) {
				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: 1024px) {
				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: 1024px) {
				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;
			line-height: inherit;
		}
	}

	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;
				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 {
				margin-top: .15em;
				font-family: var(--font-accent);
				font-size: 20px;
				font-weight: 600;
			}
		}
	}

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

		@media (min-width: 768px) {
			padding-top: calc(var(--spacing-inline) + var(--offset));
		}

		.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 - var(--offset));
				margin-inline: auto;
				padding-inline: 1ch;
				background: linear-gradient(180deg, rgb(243, 245, 245) 0%, rgb(246, 247, 248) 100%);
			}
		}

		.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;

			/* badge without whitespace */
			&:last-child {
				transform: scale(.8);
			}
		}
	}

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

		.section-inner {
			text-align: center;

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

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

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

		.button {
			display: block;

			@media (min-width: 1024px) {
				width: fit-content;
			}
		}

		.phone {
			display: flex;
			gap: 8px;
			align-items: center;
			margin-inline: auto;

			@media (min-width: 1024px) {
				margin-left: 0;
			}
		}
	}

	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;
			}

			h3 {
				font-family: var(--font-accent);
			}

			.button {
				width: 100%;
			}
		}

		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>')
			}
		}

		.button {
			@media (min-width: 1024px) {
				width: fit-content;
			}
		}

		&.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 {
			&:has(.eyebrow) {
				padding-block: var(--spacing-inline);
				background-color: var(--color-neutral);

				.content {
					text-align: center;
				}
			}

			.item {
				padding-inline: 20px;

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

		&.icon-grid,
		&.icon-list {
			.section-inner {
				.image {
					mask-image: linear-gradient(0deg, transparent 0%, black 20%);
					background-color: var(--color-accent-dark);
					border-radius: 10px 10px 0 0;

					@media (min-width: 1024px) {
						grid-row: span 3;
						mask-image: linear-gradient(0deg, black 0%);
						border-radius: 10px;
					}

					img {
						width: 100%;
						max-height: 50vh;
						object-fit: cover;
						opacity: .85;

						@media (min-width: 1024px) {
							height: 100%;
							max-height: none;
						}
					}
				}
			}

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

			.item {
				h3 {
					padding: 0;
				}

				.copy {
					font-size: 14px;
				}

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

		&.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 {
			margin-block: 0;
			padding-top: var(--spacing-inline);
			background: var(--gradient-neutral);

			.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 {
			.item {
				display: flex;
				gap: 16px;
				flex-direction: column;
				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;
				}
			}
		}

		&.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%);

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

				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: 0;
			min-height: 100%;
			margin-inline: auto;
			object-fit: cover;
			opacity: .5;

			/* @media (min-width: 768px) {
				min-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;
			display: grid;
			gap: 1rem var(--spacing-gap);
			z-index: 1;
			max-width: calc(var(--max-width) + (2 * var(--spacing-inline)));
			padding: var(--spacing-block) var(--spacing-inline);

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

		.content {
			align-self: flex-start;

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

		.form-container, .cta {
			padding: 20px;
			background-color: var(--color-accent);
			border-radius: 15px;

			h2 {
				font-size: 32px;
				color: inherit;
			}
		}

		.cta {
			p {
				margin-block: 1rem;
			}

			.button {
				display: block;
				margin-top: 2rem;
				text-align: center;
			}
		}

		.form-container {
			.form {
				margin-top: 1rem;
				padding: 16px;
				color: black;
				background: var(--gradient-neutral);
				border-radius: 10px;
			}

			button {
				&[type="button"] {
					background: unset;
				}

				&[type="submit"] {
					text-transform: uppercase;
					font-weight: bold;
				}
			}

			fieldset {
				display: grid;
				gap: .5rem;

				.ff-el-group,
				.ff-el-input--label {
					margin-bottom: 0;
				}

				label::after {
					color: inherit !important;
				}
			}
		}
	}

	.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;
			gap: 8px;

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

			* {
				border-radius: 10px;
			}

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				aspect-ratio: 1 / 1;
			}

			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;

			.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))
		);
	}
}

.page-template-oa-template {
	header {
		> section:first-of-type {
			display: none;
		}
	}

	footer {
		> section:first-of-type {
			display: none;
		}

		/* section {
			padding: 0 !important;
		} */

		a {
			color: var(--color-accent) !important;
			fill: var(--color-accent) !important;
		}
	}
}