@layer views {
	main > header{
		height: 570px;
		position: relative;
		display: flex;
		align-items: flex-end;
		background-size: cover;

		.header-content{
			position: relative;
			z-index: 1;
			padding-bottom: calc(var(--spacer) * 1.888);
			pointer-events: none;

			@container content (max-width: 768px) {
				padding-block: 0;
			}

			.header-content-inner{
				position: relative;
				pointer-events: all;

				@container content (max-width: 768px) {
					.background-blue{
						padding: calc(var(--spacer) * 1.555) var(--container-padding)
					}
				}

				&:after{
					--nudge: calc(var(--spacer) / 2);
					--screen-left: min(calc((100vw - var(--root-width) + var(--container-padding) + var(--nudge)) / -2), calc(var(--container-padding) * -1));

					content: '';
					position: absolute;
					z-index: -1;
					inset: calc(var(--spacer) * -1.888) 0 calc(var(--spacer) * -1.888) var(--screen-left);
					background-color: rgba(var(--color-blue));

					@container content (max-width: 768px) {
						content: none;
					}
				}
			}
		}

		h1{
			font-size: 4.5em;
			font-weight: 700;
			margin-bottom: var(--spacer);

			@container content (max-width: 768px) {
				font-size: 2em;
			}

			span{
				font-size: .45em;
				font-weight: 300;
				display: block;
			}
		}
	}

	.map-crop{
		position: absolute;
		inset: 0;
		overflow: hidden;

		svg{
			position: absolute;
			min-width: 100%;
			min-height: 100%;
			max-width: none;
			right: 0;

			[id^="map-pin-"]{
				cursor: pointer;
				transition: fill .3s;

				&:hover,
				&.active{
					fill: rgba(var(--color-secondary)) !important;
				}
			}
		}

		.office-popup{
			font-size: .777em;
			position: absolute;
			width: 225px;
			padding: .833em .722em;
			background-color: rgba(var(--color-white));
			box-shadow: 0 4px 4px rgba(var(--color-black), .25);
			border: 1px solid rgba(var(--color-gray-25));
			border-radius: 2px;
			display: none;

			p{
				margin-bottom: 0;
			}
		}
	}

	.country-navigation{
		--color-link: var(--color-text);
		--color-link-hover: var(--color-text);
		--color-link-visited: var(--color-text);
		--column-gap: calc(var(--spacer) * 2.777);

		display: flex;
		justify-content: center;

		@container content (max-width: 768px) {
			display: none;
		}

		ul{
			padding-block: calc(var(--spacer) * 1.222) calc(var(--spacer) * .5);
			justify-content: center;
			border-bottom: 1px solid rgba(var(--color-gray-25));
		}

		a{
			text-decoration-color: transparent;
			font-weight: 600;
			display: inline-block;
			margin-block: calc(var(--spacer) * .333);

			&:hover{
				text-decoration-color: rgba(var(--color-link), .4);
			}
		}
	}

	.country-main-content{
		--row-gap: var(--spacer);

		padding-block: var(--section-padding);

		h2{
			font-family: var(--font-display);
			color: rgba(var(--color-secondary));
		}

		.main-content-copy{
			margin-bottom: calc(var(--spacer) * 2);
		}

		.callout{
			--color-link: var(--color-blue);
			--color-link-hover: var(--color-dark-blue);

			display: flex;
			flex-wrap: nowrap;

			@container content (max-width: 768px) {
				flex-direction: column;
			}

			h3{
				margin-bottom: .777em;

				a{
					text-decoration-color: rgba(var(--color-link), .4);

					&:hover{
						text-decoration-color: rgba(var(--color-link), 1);
					}
				}
			}

			> img{
				object-fit: cover;
				height: 100%;
				width: 33.333%;
				display: block;

				@container content (max-width: 768px) {
					width: 100%;
				}
			}

			p{
				margin-bottom: 0;
			}

			> div{
				width: 66.666%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				padding-inline: calc(var(--spacer) * 2);
				background-color: rgba(var(--color-white));
				padding-block: calc(var(--spacer) * 1.5);

				@container content (max-width: 768px) {
					width: 100%;
				}
			}
		}
	}

	.country-leadership{
		padding-block: var(--section-padding);

		@container content (max-width: 768px) {
			.leader{
				display: flex;
				column-gap: var(--column-gap);

				img{
					width: 133px;
					aspect-ratio: 1;
					object-fit: cover;
				}
			}

			.leader-actions{
				--row-gap: var(--spacer);

				flex-direction: column;
				row-gap: var(--row-gap);
			}
		}

		.leader-list{
			--column-gap: calc(var(--spacer) * 1.888);
			--row-gap: calc(var(--spacer) * 1.888);

			@container content (max-width: 768px) {
				--column-gap: var(--spacer);
			}

			margin-bottom: calc(var(--spacer) * 3);

			h3{
				font-size: 1em;
				font-weight: 600;
				margin-block: .5em;
			}

			h4{
				font-size: 0.889em;
				font-weight: 500;
			}
		}

		.leader{
			--flex-width: 100%;

			flex: 0 0 var(--flex-width);
			max-width: var(--flex-width);

			@container content (min-width: 600px) and (max-width: 769px){
				--flex-width: calc(1 / 2 * 100%);
			}

			@container content (min-width: 769px) {
				--flex-width: calc(1 / 3 * 100%);
			}

			@container content (min-width: 1025px) {
				--flex-width: calc(1 / 5 * 100%);
			}

			a{
				text-decoration-color: transparent;
				display: inline-block;

				&:hover{
					text-decoration-color: rgba(var(--color-link-hover), .4);
				}
			}
		}
	}

	.country-services{
		--row-gap: var(--spacer);

		padding-top: var(--section-padding);

		header{
			margin-bottom: var(--spacer);
		}

		h2{
			color: rgba(var(--color-secondary));
		}

		h3{
			font-weight: 400;
			margin-bottom: var(--spacer);
		}

		h4{
			font-family: var(--font-display);
			margin-bottom: var(--spacer);
		}

		h5{
			font-weight: 400;
			margin-bottom: var(--spacer);
		}

		.service-item{
			position: relative;

			>div{
				height: 100%;
				padding: calc(var(--spacer) * 2.75) calc(var(--spacer) * 1.75) calc(var(--spacer) * 1.75);
			}
		}

		.main-service-content{
			padding-block: var(--section-padding);
		}

		img{
			position: absolute;
			inset: 0 calc(var(--spacer) * .5);
			height: 100%;
			width: calc(100% - var(--spacer));
			object-fit: cover;
		}
	}

	.country-summary{
		padding-bottom: var(--section-padding);

		h2{
			color: rgba(var(--color-secondary));
		}

		.summary-hero{
			height: 600px;
			min-width: 100%;
			object-fit: cover;
			object-position: center;
			display: block;
			margin-bottom: var(--section-padding);

			@container content (max-width: 768px) {
				height: 325px;
			}
		}
	}

	.country-offices{
		--row-gap: var(--spacer);

		padding-block: var(--section-padding);

		h2{
			color: rgba(var(--color-secondary));
		}
	}

	.country-news{
		padding-block: var(--section-padding);

		h2{
			color: rgba(var(--color-secondary));
		}

		.post-list{
			--color-link: var(--color-text);
			--color-link-hover: var(--color-text);
			--color-link-visited: var(--color-text);
			--column-gap: calc(var(--spacer) * 2);
			--row-gap: calc(var(--spacer) * 3);

			padding-top: calc(var(--spacer) * 2.5);

			img{
				margin-bottom: var(--spacer);
			}

			h3{
				font-size: 1.25em;
				margin-bottom: calc(var(--spacer) * .5);
			}
		}
	}
}