.mcintosh-audio {
	overflow: clip;
	
	.eurostile {
		font-family: "EurostileLTPro";
		font-style: normal;
		font-stretch: normal;
		font-weight: 400;
	}	
	.eurostile-demi {
		font-family: "EurostileLTPro";
		font-style: normal;
		font-stretch: normal;
		font-weight: 600;
	}	
	
	.hero {
		
		.we-did {
			font-family: var(--fontFamily-boldExtended);
			font-stretch: var(--fontStretch-expanded);
			font-size: 1.125em;
		}
	}
	.case-brief {
		
	}
	.hero-introduction {
		color: white;
		background: black;
		
		.columns {
			margin-block-start: -4rem;
		}
	}
	
	.hero-image {
		margin-top: 0;
		margin-bottom: 0;
		display: grid;
		
		aspect-ratio: 28.8/19;
		
		color: white;
		background-image: url("/assets/work/mcintosh-audio/hero-bg.webp");
		background-position: top center;
		background-repeat: no-repeat;
		background-size: cover;
		
		.brand-heading {
			margin-inline: 2rem;
			font-family: "EurostileLTPro";
			font-style: normal;
			font-stretch: normal;
			font-weight: 600;
			letter-spacing: 0.15em;
			
			text-align: center;
			align-self: center;
			font-size: 4rem;
		}
	}
	
	.media-text {
		
		.text {
			padding: 4rem var(--subsectionSpacing-width) 1rem;
		}
	}
	
	@media (width > 700px)  {
		
		.media-text {
	
			display: grid;
			grid-template-columns: 1fr 1fr;
			
			.text {
				padding: none;
				
				justify-self: center;
				align-self: center;
				
				&>* {
					max-width: 45ch;
				}
			}
			.media {
				width: 100%;
				height: auto;
				vertical-align: center;
				
				img {
					position: relative;
					z-index: 1;
				}
				&::after {
					display: block;
					z-index: 2;
					content: ' ';
					position: absolute;
					width: 100%;
					height: 100%;
					inset: 0;
					background-image: linear-gradient(to right, rgba(0, 0, 0, 100) 10%, rgba(0, 0, 0, 0) 60%);
				}
			}
			
			.brand-heading {
				margin: 0;
				padding: 0;
				
				font-family: "EurostileLTPro";
				font-style: normal;
				font-stretch: normal;
				font-weight: 600;
				line-height: 1;
				letter-spacing: 0.15em;
				
				align-self: center;
				font-size: 2rem;	
			}
			
			&.media-text-right > .text {
				grid-column-start: 2;
				grid-column-end: 3;
				grid-row-start: 1;
				grid-row-end: 2;
			}
			&.media-text-right > .media {
				grid-column-start: 1;
				grid-column-end: 2;
				grid-row-start: 1;
				grid-row-end: 2;
	
				&::after {
					display: block;
					z-index: 2;
					content: ' ';
					position: absolute;
					width: 100%;
					height: 100%;
					inset: 0;
					background-image: linear-gradient(to left, rgba(0, 0, 0, 100) 5%, rgba(0, 0, 0, 0) 53%);
				}	
			}
			
		}
	}
	
	
	.strategy {

		blockquote {
			margin:  var(--subsectionSpacing-width) !important;
			padding: 0;
			font-family: "EurostileLTPro";
			font-size: 1rem;
			font-style: normal;
			font-stretch: normal;
			font-weight: 400;
			line-height: 1.5;
			text-transform: uppercase;
		
			max-width: 40ch;
			
			cite {
				margin-top: 1rem;
				display: block;
				font-style: normal;
				font-weight: 600;
			}
		}		
		
		@media (width > 700px) {

			.client-guote {
			
				.column:nth-child(1)::after {
					position: absolute;
					display: block;
					content: ' ';
					inset: 0;
					background-image: linear-gradient(to right, rgba(255,255,255,0) 50%, rgba(255,255,255,255) 100%);
				}
				.column:nth-child(2) {
					padding: var(--subsectionSpacing-width);
					display: grid;
					align-items: center;
					

				}
			}			
		}
		
		.video-storyboard {
			color: white;
			background-image: linear-gradient(to bottom, rgba(0, 0, 0, 255) 5%, rgba(0, 0, 0, 0) 110%);

			.column {
				padding: 0 var(--subsectionSpacing-width);
			}
		}

	}
	
	
	.media {
		color: white;
		background-color: black;
		
	}
	
	
	.targets-realized {
		background-image: linear-gradient(to top, rgba(255,255,255,0) 50%, rgba(255,255,255,100)), url("/assets/work/mcintosh-audio/results-bg.webp");
		background-size: cover, cover;
		background-repeat: no-repeat;
		background-position: right top;
		
		.stats {
			color: white;
			list-style: none;
			margin: 3rem 0;
			padding: 0;
			
			font-family: "EurostileLTPro";
			font-style: normal;
			font-stretch: normal;
			font-weight: 600;
			text-transform: uppercase;
			text-wrap: nowrap;
			
			@media (width > 700px) {

				.stat-item {
					display: grid;
					grid-template-columns: 1fr 2.25fr;
					padding: 1.5rem 0;
					line-height: 0.75;
					gap: 1.5rem;
					
					span {
						display: block;
						align-self: center;
						text-wrap: nowrap;
					}
				}
				.stat-item:nth-child(2) {
					padding-bottom: 2.5rem;
					border-bottom: 1px solid white;
				}
				.stat-item:nth-child(3) {
					padding-top: 3.75rem !important;
				}
				
			}
			
			.big {
				font-size: 6.5rem;
				font-family: "EurostileLTPro";
				font-style: normal;
				font-stretch: normal;
				font-weight: 600;
				align-items: center;
				
				width: fit-content;
			}
		}
		
	}
	
	.moments {
		
		.behind .content-group {
			
			&::after {
				position: absolute;
				display: block;
				content: ' ';
				inset: 0;
				background-image: linear-gradient(to top, rgba(0,0,0,255) 5%, rgba(0,0,0,0) 15%);
			}
		}
		
		.behind-collage {
			color: white;
			background-color: black;
			
			font-size: 1rem;
			font-family: "EurostileLTPro";
			font-style: normal;
			font-stretch: normal;
			font-weight: 600;
			line-height: 1.2;
			text-transform: uppercase;
			align-items: center;


			.content-group {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 1.5rem;
			}
			
			.copy-a {
				padding: var(--subsectionSpacing-width);
				height: 10rem;
				grid-column-start: 1;
				grid-column-end: 3;
				display: grid;
				justify-content: center;
				align-content: center;
				letter-spacing: 0.15em;	
			}
			.copy-b {
				padding: var(--subsectionSpacing-width);
				height: 16rem;
				grid-column-start: 1;
				grid-column-end: 3;
				display: grid;
				justify-content: center;
				align-content: center;
				letter-spacing: 0.15em;	
			}

			@media (width > 700px) {

				.content-group {
					display: grid;
					grid-template-columns: 1.3fr 0.9fr 0.8fr 0.8fr 1.2fr;
					gap: 1.5rem;
				}
			
				.copy-a {
					padding: var(--subsectionSpacing-width);
					height: 16rem;
					grid-column-start: 3;
					grid-column-end: 6;
					display: grid;
					justify-content: center;
					align-content: center;
					letter-spacing: 0.15em;
					
					&>* {
						max-width: 32ch;
					}
				}
				.copy-b {
					padding: var(--subsectionSpacing-width);
					grid-column-start: 1;
					grid-column-end: 3;
					display: grid;
					justify-content: center;
					align-content: center;
					letter-spacing: 0.15em;
			
					&>* {
						max-width: 38ch;
					}
				}
				
				* > img {
					aspect-ratio: 3/2;
					height: 100%;
					object-fit: cover;
					object-position: top left;
				}
				.image-1 {
					grid-column-start: 3;
					grid-column-end: 5;		
				}
				.image-2 {
					grid-column-start: 5;
					grid-column-end: 6;		
				}
				.image-2 img {
					aspect-ratio: 1.2/1;
				}
				.image-3 {
					grid-column-start: 1;
					grid-column-end: 2;		
				}
				.image-4 {
					grid-column-start: 2;
					grid-column-end: 4;
				}
			}
				
		}
	}
	
	.videoplayer,
	.full-video-campaign {
		line-height: 0;
		background-color: black;
		
		iframe {
			width: 100%;
			aspect-ratio: 19/11;
		}
	}
	
	
	.summary {
		color: white;
		background-color: black;
		background-image: url("/assets/work/mcintosh-audio/summary-bg.webp");
		background-size: cover;	
	}
	
	
}