.jax {
	--jax-blue-dark: #002d62;
	--jax-blue-mid: #00519b;
	--jax-blue-light: #009fe1;
	--jax-blue-lighter: #198bc6;

	--jax-yellow: #fceb02;
	--jax-orange: #ffa800;

	--jax-fontFamily-obviously: obviously, sans-serif;
	--jax-fontFamily-poppins: poppins, sans-serif;

	--jax-fontFamily-prime: var(--jax-fontFamily-poppins);
	--jax-fontFamily-alt: var(--jax-fontFamily-obviously);

	--page-margin: min(7px, 1.4vw);
	--content-width: min(1400px, 100vw - (var(--subsectionSpacing-width) * 2));

	h3 {
		margin-bottom: 2rem;
		text-transform: none;
	}
	h3:has(+ p) {
		margin-bottom: 0;
		text-transform: none;
	}
	h3 + p {
		margin-top: 0;
	}

	.research {
		.legacy {
			margin-bottom: calc(var(--subsectionSpacing-height) / 2);
			border-top: 1px solid #dadada;
			border-bottom: 1px solid #dadada;

			.content-group {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				align-items: stretch;
				gap: 1px;
				width: min(1400px, 100%);
				margin: 0 auto;
				background-color: #dadada;
			}
		}

		.legacy-grid {
			position: relative;
			width: 100%;
			align-self: stretch;
			background-color: white;
			padding: 2rem;

			.legacy-grid-title {
				font-family: var(--fontFamily-boldExtended);
				font-stretch: var(--fontStretch-expanded);
				font-size: clamp(1rem, 0.5rem + 1vw, 1.5rem);
				font-weight: 800;
				line-height: 1.5;
				text-align: center;
				text-transform: uppercase;
				color: #999;
			}
			.legacy-grid-images {
				display: grid;
				align-items: stretch;
				justify-items: stretch;
			}

			&:first-child {
				width: 100%;

				.legacy-grid-images {
					grid-template-columns: 0.5fr 0.5fr;
					grid-template-rows: auto auto;
					grid-template-areas:
						'img1 img2'
						'img3 img3';
					gap: max(16px, 1.111111vw);
					& img:nth-child(1) {
						grid-area: img1;
					}
					& img:nth-child(2) {
						grid-area: img2;
					}
					& img:nth-child(3) {
						grid-area: img3;
					}
				}
			}
			&:last-child {
				width: 100%;

				.legacy-grid-images {
					grid-template-columns: 0.407524fr 0.274295fr 0.26489fr;
					grid-template-rows: auto auto 1fr;
					grid-template-areas:
						'img1 img2 .'
						'img1 img3 img3'
						'img4 img4 img4';
					gap: max(16px, 1.111111vw);
					& img:nth-child(1) {
						grid-area: img1;
					}
					& img:nth-child(2) {
						grid-area: img2;
					}
					& img:nth-child(3) {
						grid-area: img3;
					}
					& img:nth-child(4) {
						grid-area: img4;
					}
				}
			}

			@media (width > 720px) {
				&:first-child {
					width: calc(42% - 1px);
				}
				&:last-child {
					width: 58%;
				}
			}
		}
	}

	.concept-development {
		.design-assets {
			color: white;

			background: linear-gradient(86deg, #009fe1 0.56%, #008bcf 17.24%, #006bb3 51.58%, #0058a1 79.06%, #00519b 98.69%);

			.design-assets-grid {
				display: grid;
				grid-template-columns: 3fr 2.5fr;
				gap: 5rem 3rem;
				align-items: center;
				text-align: center;

				.asset:nth-child(3) {
					grid-column: 1 / span 2;
					grid-row: 2 / 3;
				}

				@media (width > 800px) {
					grid-template-columns: 3fr 3.5fr 6fr;

					.asset:nth-child(3) {
						grid-column: 3 / 4;
						grid-row: 1 / 2;
					}
				}
			}
		}

		.pattern {
			color: white;

			.section-bg {
				position: relative;
				height: 500px;
				background-size: cover;
				background-position: center;
				background: linear-gradient(54deg, #014f97 1.04%, #004a8f 5.88%, #003d7b 21.38%, #00336c 39.78%, #002e64 61.09%, #002d62 97.9%);

				img {
					width: 100%;
					height: 500px;
					object-fit: cover;
					object-position: center;
					z-index: 0;
				}
			}
		}

		.colors-grid {
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: repeat(8, 1fr);
			grid-template-areas:
				'blue-mid'
				'blue-light'
				'yellow'
				'blue-lighter'
				'blue-dark'
				'orange'
				'white'
				'black';
			gap: 1rem;
			align-items: stretch;
			justify-items: stretch;

			.color-chip {
				height: auto;
				padding: 2rem 3rem;
				line-height: 1.2;
				font-size: 0.875rem;

				&.blue-mid {
					grid-area: blue-mid;
					background-color: var(--jax-blue-mid);
				}
				&.blue-light {
					grid-area: blue-light;
					background-color: var(--jax-blue-light);
				}
				&.yellow {
					grid-area: yellow;

					color: black;
					background-color: var(--jax-yellow);

					p {
						margin: 0;
						width: min(15rem, 100%);
					}
				}
				&.blue-lighter {
					grid-area: blue-lighter;
					background-color: var(--jax-blue-lighter);
				}
				&.blue-dark {
					grid-area: blue-dark;
					background-color: var(--jax-blue-dark);
				}
				&.orange {
					grid-area: orange;
					color: white;
					background-color: var(--jax-orange);
					p {
						margin: 0;
						width: min(10rem, 100%);
					}
				}
				&.white {
					grid-area: white;
					background-color: white;
					border: 1px solid black;
				}
				&.black {
					grid-area: black;
					background-color: black;
				}
			}

			@media (width > 800px) {
				grid-template-columns: 1fr 1fr;
				grid-template-rows: repeat(4, 1fr);
				grid-template-areas:
					'blue-mid blue-light'
					'yellow blue-lighter'
					'blue-dark orange'
					'white black';

				.blue-mid,
				.yellow,
				.blue-dark,
				.white {
					border-top-right-radius: 1rem;
					border-bottom-right-radius: 1rem;
				}
				.blue-light,
				.blue-lighter,
				.orange,
				.black {
					border-top-left-radius: 1rem;
					border-bottom-left-radius: 1rem;
				}
			}

			@media (width > 1024px) {
				grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
				grid-template-rows: repeat(3, 1fr);
				grid-template-areas:
					'blue-mid blue-mid blue-light blue-light yellow yellow'
					'blue-lighter blue-lighter blue-dark blue-dark orange orange'
					'white white white black black black';

				.blue-mid,
				.blue-lighter,
				.white {
					border-top-right-radius: 1rem;
					border-top-left-radius: 0;
					border-bottom-right-radius: 1rem;
					border-bottom-left-radius: 0;
				}
				.yellow,
				.orange,
				.black {
					border-top-right-radius: 0;
					border-top-left-radius: 1rem;
					border-bottom-right-radius: 0;
					border-bottom-left-radius: 1rem;
				}

				.blue-light,
				.blue-dark {
					border-radius: 1rem;
				}
			}
		}
	}

	.obviously {
		font-family: obviously, sans-serif;
	}
	.poppins {
		font-family: poppins, sans-serif;
	}
	.bold {
		font-weight: 700;
	}
	.extrabold {
		font-weight: 800;
	}

	.typography {
		container-type: inline-size;
		container-name: typography;
		margin: 0 auto;

		.content-group {
			margin-block: 0 8rem;
			&:nth-last-child {
				margin-bottom: 2rem;
			}
		}

		.typography-grid {
			width: 100%;
			container-type: inline-size;
			container-name: typography-grid;

			&.obviously {
				color: var(--jax-blue-lighter);
				font-weight: 700;
				line-height: 0.8;

				.line-1 {
					display: block;
					font-size: max(2rem, 9cqw);
				}
				.line-2 {
					display: block;
					font-size: max(3rem, 18cqw);
				}
			}
			&.poppins {
				color: var(--jax-blue-dark);
				font-weight: 400;
				line-height: 1.2;

				.line-1 {
					display: block;
					font-size: max(1.5rem, 4cqw);
				}
			}
		}

		h4 {
			color: black;
			font-size: 1.5rem;
			font-weight: 700;
			line-height: 1.2;

			.normal {
				font-weight: 400;
			}
		}
	}

	.club {
		.logos-old-new {
			border-top: 1px solid #dadada;
			border-bottom: 1px solid #dadada;

			.content-group {
				display: grid;
				gap: 1px;
				grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
				align-items: end;
				justify-items: stretch;
				background-color: #dadada;
			}

			.logo {
				margin: 0;
				padding: 0;
				background-color: white;
				display: grid;
				grid-template-columns: 1fr;
				grid-template-rows: 24rem 6rem;
				gap: 0;

				img {
					width: min(360px, 60%);
					height: auto;
					justify-self: center;
					align-self: center;
				}
				figcaption {
					font-family: var(--fontFamily-boldExtended);
					font-stretch: var(--fontStretch-expanded);
					font-size: clamp(1rem, 0.5rem + 1vw, 1.5rem);
					font-weight: 800;
					line-height: 1.5;
					text-align: center;
					text-transform: uppercase;
					color: #999;
				}
			}
		}

		.brandmark-pattern {
			.section-content {
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.brandmark {
				margin-inline: auto;
				width: min(360px, 80%);
				height: auto;
				z-index: 10;
			}

			.section-bg {
				position: relative;
				height: 600px;
				background-size: cover;
				background-position: center;
				background: linear-gradient(54deg, #014f97 1.04%, #004a8f 5.88%, #003d7b 21.38%, #00336c 39.78%, #002e64 61.09%, #002d62 97.9%);

				img {
					width: 100%;
					height: 600px;
					object-fit: cover;
					object-position: center;
					z-index: 0;
				}
			}
		}

		.digital-ads {
			.content-group {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 3rem;
			}
			@media (max-width: 480px) {
				.content-group {
					grid-template-columns: 1fr;
				}
			}
		}
	}

	.execution {
		.signage-system {
			font-family: var(--jax-fontFamily-alt);
			color: white;
			background-image: linear-gradient(86deg, #009fe1 0.56%, #008bcf 17.24%, #006bb3 51.58%, #0058a1 79.06%, #00519b 98.69%);

			.content-group {
				container-type: inline-size;

				.seg-1 {
					display: block;
					margin-block: 0.35em;
					font-size: max(2rem, 6.5cqw);
					font-weight: 400;
					line-height: 1.2;
					text-align: left;
					max-width: 15ch;
				}
				.seg-2 {
					display: block;
					margin-block: 0.35em 1em;
					margin-inline: auto 0;
					font-size: max(2.25rem, 7cqw);
					font-weight: 700;
					line-height: 1.15;
					text-align: right;
					max-width: 15ch;
				}
			}
		}

		.entry-sign-set-1 {
			container-type: inline-size;
			margin-top: -5.5rem;

			.content-group {
				display: grid;
				grid-template-columns: 1fr;
				gap: 3rem 4rem;

				& > img:nth-child(1) {
					grid-column: 1 / 2;
					grid-row: 1 / 2;
				}
				& > img:nth-child(2) {
					grid-column: 1 / 2;
					grid-row: 2 / 3;
				}
				& > img:nth-child(3) {
					grid-column: 1 / 2;
					grid-row: 3 / 4;
				}
				& > img:nth-child(4) {
					grid-column: 1 / 2;
					grid-row: 4 / 5;
				}
				& > img:nth-child(5) {
					grid-column: 1 / 2;
					grid-row: 5 / 6;
				}
			}

			@container (width > 600px) {
				.content-group {
					display: grid;
					grid-template-columns: 1fr 1.8fr;
					grid-template-rows: 0.4fr 0.25fr 0.5fr 0.15fr auto;
					gap: 3rem 4rem;

					& > img:nth-child(1) {
						grid-column: 1 / 2;
						grid-row: 1 / 3;
						align-self: start;
						justify-self: start;
					}
					& > img:nth-child(2) {
						grid-column: 1 / 2;
						grid-row: 3 / 5;
						align-self: start;
						justify-self: start;
					}
					& > img:nth-child(3) {
						grid-column: 1 / 2;
						grid-row: 5 / 6;
						align-self: start;
						justify-self: start;
					}
					& > img:nth-child(4) {
						grid-column: 2 / 3;
						grid-row: 2 / 4;
						align-self: end;
						justify-self: start;
						width: 80%;
						height: auto;
					}
					& > img:nth-child(5) {
						grid-column: 2 / 3;
						grid-row: 4 / 6;
						align-self: end;
						justify-self: start;
					}
				}
			}
		}

		.entry-sign-set-2 {
			container-type: inline-size;
			margin-top: 0rem;

			.content-group {
				display: grid;
				grid-template-columns: 2fr 5.3fr;
				grid-template-areas: 'entry-01 entry-01' 'entry-02 entry-03';
				gap: 3rem;

				& > img:nth-child(1) {
					grid-area: entry-01;
					aspect-ratio: 1/2;
					align-self: stretch;
					justify-self: stretch;
				}
				& > img:nth-child(2) {
					grid-area: entry-02;
					align-self: stretch;
					justify-self: stretch;
				}
				& > img:nth-child(3) {
					grid-area: entry-03;
					align-self: stretch;
					justify-self: stretch;
				}
			}

			@container (width > 600px) {
				.content-group {
					grid-template-columns: 6fr 2fr 5.3fr 2.7fr;
					grid-template-rows: 1fr;
					grid-template-areas: 'entry-01 entry-02 entry-03 .';
					gap: 3rem;
				}
			}
		}

		.entry-sign-set-3 {
			container-type: inline-size;

			.content-group {
				display: grid;
				grid-template-columns: 1fr;
				grid-template-areas: 'entry-01' 'entry-02';
				gap: 2rem;

				& > img.asset:nth-child(1) {
					grid-area: entry-01;
					align-self: stretch;
					justify-self: stretch;
				}
				& > img.asset:nth-child(2) {
					grid-area: entry-02;
					align-self: stretch;
					justify-self: stretch;
				}
			}

			@container (width > 640px) {
				.content-group {
					display: grid;
					grid-template-columns: 8.6fr 20fr;
					grid-template-rows: 1fr;
					grid-template-areas: 'entry-01 entry-02';
					gap: 2rem;
				}
			}
		}

		.clear-navigation {
			margin-block: 6rem;

			background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 103"><path fill="%23fceb02" d="M72.97,1.65l52.84,49.88-52.78,49.82-21.98-.04,51.58-48.68,1.16-1.09-1.16-1.09L50.93,1.65h22.03M73.57.14h-26.42l54.44,51.38-54.33,51.27,26.35.05,54.38-51.33L73.57.14h0Z"/><path fill="%23fceb02" d="M25.82,1.65l52.84,49.88-52.78,49.82-21.98-.04,51.58-48.68,1.16-1.09-1.16-1.09L3.79,1.65h22.03M26.42.14H0l54.44,51.38L.12,102.8l26.35.05,54.38-51.33L26.42.14h0Z"/></svg>');
			background-position-x: 110%;
			background-position-y: top;
			background-size: contain;
			background-repeat: no-repeat;

			.content-group {
				container-type: inline-size;
				margin-block: 0.35em;

				p {
					width: min(20ch, 100%);

					font-family: var(--jax-fontFamily-alt);
					font-size: max(2rem, 5.5cqw);
					font-weight: 400;
					line-height: 1.2;
					color: var(--jax-blue-lighter);
				}
			}

			@media (width > 1440px) {
				background-position-x: calc(50% + 460px);
			}
		}

		figure {
			margin-block: 0;
			margin-inline: auto;
		}

		.app-ads {
			display: block;
			grid-column-start: none;
			grid-column-end: none;
			grid-row-start: none;
			grid-row-end: none;

			.content-group {
				display: grid;
				grid-template-columns:
					[page-start]
					var(--subsectionSpacing-width)
					[content-start]
					1fr
					[content-end]
					var(--subsectionSpacing-width)
					[page-end];
				/*grid-template-rows: auto auto auto auto auto auto;*/
				gap: 50px 0;

				.just-washed {
					grid-column: content-start / content-end;
					grid-row: 1 / 2;
				}
				.car-called {
					grid-column: content-start / content-end;
					grid-row: 2 / 3;
				}
				.time-for-wash {
					grid-column: content-start / content-end;
					grid-row: 3 / 4;
				}
				.upgrade-to-jax {
					grid-column: content-start / content-end;
					grid-row: 4 / 5;
				}
				.pull-up-get-clean {
					grid-column: content-start / content-end;
					grid-row: 5 / 6;
				}
				.oval {
					grid-column: page-start / page-end;
					grid-row: 6 / 7;
					background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 400"><path d="M328.01,335.12c127.94-73.86,196.72-194.24,153.64-268.86-43.08-74.62-181.72-75.24-309.66-1.38C44.05,138.75-24.73,259.12,18.35,333.74c43.09,74.62,181.73,75.24,309.66,1.38Z" stroke-miterlimit="10" stroke-width="3px" stroke="%23faed4f" fill="none" vector-effect="non-scaling-stroke" /></svg>');
					background-size: contain;
					background-position: center center;
					background-repeat: no-repeat;
				}
				.easy-to-execute {
					grid-column: content-start / content-end;
					grid-row: 6 / 7;
					font-family: var(--jax-fontFamily-alt);
					font-size: max(2rem, 5.5cqw);
					font-weight: 400;
					line-height: 1.1;
					color: var(--jax-blue-dark);
					padding-block: 1.5em;
					justify-self: center;

					p {
						padding-block: 0.25em 0.35em;
						background-color: white;
						width: 14ch;
					}

					b {
						font-family: var(--jax-fontFamily-alt);
						font-weight: 700;
					}
				}

				@media (width > 800px) {
					--l-col: min(720px, 50%);
					--r-col: min(630px, 42.065%);
					--gutter: min(50px, 3.47%);

					padding-inline: 0;
					container-type: inline-size;
					display: grid;
					grid-template-columns:
						[page-start]
						var(--subsectionSpacing-width) 1fr
						[l-col-start] var(--l-col)
						[l-col-end gutter-start] var(--gutter) [gutter-end r-col-start]
						var(--r-col) [r-col-end]
						1fr var(--subsectionSpacing-width)
						[page-end];
					grid-template-rows: auto auto auto auto auto auto;
					gap: 50px 0;

					.just-washed {
						grid-column: l-col-start / l-col-end;
						grid-row: 1 / 2;
					}
					.car-called {
						grid-column: r-col-start / r-col-end;
						grid-row: 1 / 3;
					}
					.time-for-wash {
						grid-column: l-col-start / l-col-end;
						grid-row: 2 / 5;
					}
					.upgrade-to-jax {
						grid-column: r-col-start / r-col-end;
						grid-row: 3 / 4;
					}
					.pull-up-get-clean {
						grid-column: r-col-start / r-col-end;
						grid-row: 4 / 6;
					}
					.oval {
						grid-column: page-start / l-col-end;
						grid-row: 5 / 7;
						background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 400"><path d="M328.01,335.12c127.94-73.86,196.72-194.24,153.64-268.86-43.08-74.62-181.72-75.24-309.66-1.38C44.05,138.75-24.73,259.12,18.35,333.74c43.09,74.62,181.73,75.24,309.66,1.38Z" stroke-miterlimit="10" stroke-width="3px" stroke="%23faed4f" fill="none" vector-effect="non-scaling-stroke" /></svg>');
						background-size: cover;
						background-position: bottom right;
						background-repeat: no-repeat;
					}
					.easy-to-execute {
						grid-column: l-col-start / r-col-end;
						grid-row: 6 / 7;

						font-family: var(--jax-fontFamily-alt);
						font-size: max(2rem, 5.5cqw);
						font-weight: 400;
						line-height: 1.1;
						color: var(--jax-blue-dark);

						padding-block: 0.5em 0.75em;

						p {
							padding-block: 0.35em;
							background-color: white;
							width: 16.5ch;
						}

						b {
							font-family: var(--jax-fontFamily-alt);
							font-weight: 700;
						}
					}
				}
			}
		}
	}

	.summary {
		color: white;
		background-color: var(--jax-blue-dark);
	}

	.subsection:has(.section-bg) {
		display: grid;
		grid-template-columns: [section-start] var(--subsectionSpacing-width) 1fr [content-start content-left] var(--content-width) [content-right content-end] 1fr var(--subsectionSpacing-width) [section-end];
		grid-template-rows: [section-start content-start] 1fr [section-end content-end];

		.section-content {
			margin-block: calc(var(--subsectionSpacing-height) / 2);
			grid-area: content;
			justify-self: stretch;
			align-self: stretch;
			z-index: 1;
		}
	}
	.section-bg {
		grid-area: section;
		justify-self: stretch;
		align-self: stretch;
		z-index: 0;

		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;

		& > img {
			grid-column: 1/1;
			grid-row: 1/1;
			justify-self: stretch;
			align-self: stretch;
			object-fit: cover;
			object-position: center;
		}
	}
}