


.menu__logo--algoma {
	background: url('img/logo-algoma.svg') center 35% / contain no-repeat;
	flex: 0 0 16rem;
	left: -0.35rem;
	position: relative;
}
@media (max-width: 1200px) {
	.menu__logo--algoma {
		background: url('img/logo-algoma.svg') center / contain no-repeat;
		height: 6rem;
		margin: 0.2rem 1rem 1rem 0.2rem;
		position: static;
	}
}



.hero--insulation {
	background-image: url('img/banner_insulation.jpg');
}

.hero__container {
	margin-top: 13.5rem;
	margin-bottom: 13.5rem;
}



.insulation {} /* based on .about section */

	@media (min-width: 1200px) {
		.insulation__container {
			/* reduce padding just for image balance */
			padding: 2.5rem 0; /* 2.5rem less than std 5rem */
				/* .icons__container has 1.5rem overflow correction */
				/* .wwd__image has 1rem horiz overflow (neg margin) */
		}
	}

	.insulation__row {
		align-items: center;
	}

	.insulation__copy {}

	.insulation__header {
		display: inline-block;
		font-size: 1.5rem;
		font-weight: bold;
		margin-block-start: 0.83rem;
		margin-block-end: 0.83rem;
		margin-inline-start: 0;
		margin-inline-end: 0;
	}

	.insulation__image {
		background: url('img/insulation.jpg') center / cover no-repeat;
		background: url('img/insulation2.jpg') 30% top / auto 100% no-repeat;
		height: 30rem;
		width: 30rem;
		border-radius: 50%;
		box-shadow: var(--shadow);
	}
	@media (max-width: 1200px) {
		.insulation__image {
			border-radius: 0;
			box-shadow: none;
			width: 100%;
			height: 22rem;
		}
	}



.icons {} /* based on .wwd section */

	.icons__container {
		background: url('img/bg2_insulation.jpg') center / cover no-repeat;
		padding: calc(var(--gap-l) + 1.5rem) 0;
			/* extra 1.5rem covers weird weighting by icon overflow */
	}
	@media (max-width: 1200px) {
		.icons__container {
			padding: var(--gap-l) 0;
		}
	}

	.icons__row { /* child of .container, parent of .column */
		align-items: center;
		display: flex;
		justify-content: center;
		margin: auto;
		width: 1200px;
		background: hsla(0deg, 0%, 100%, 1);
		border-radius: var(--radius);
		box-shadow: var(--shadow);
		padding: var(--gap-s) 0;
	}
	.icons__row:nth-child(2) {
		margin: var(--gap-l) auto;
	}
	@media (max-width: 1200px) {
		.icons__row {
			background: transparent;
			box-shadow: none;
			flex-direction: column;
			padding-left: var(--gap-s);
			padding-right: var(--gap-s);
			width: auto;
		}
		.icons__row:nth-child(2) {
			margin: auto;
		}
	}

	@media (min-width: 1200px) { /* desktop */
		/* based on .wwd__image */
		.icons__image {
			background: #fff center / 65% no-repeat;
				background-image: url('img/project1.jpg'); /* must be set inline */
			border: 0.5rem #fff solid;
			border-radius: 50%;
			box-shadow: var(--shadow-short);
			height: 14rem;
			margin: -3.5rem var(--gap-l) -3.5rem -1rem;
				/* -3.5rem causes icons to overflow 2.5rem (--gap-m) */
			transition: transform .2s;
			//transform: scale(10);
			width: 14rem;
		}
		.icons__image:hover {
			transform: scale(1.1);
		}
	}
	@media (max-width: 1200px) { /* mobile */
		.icons__image {
			background: #fff center / 65% no-repeat;
				background-image: url('img/project1.jpg'); /* must be set inline */
			border: 0.25rem #fff solid;
			border-radius: 50%;
			box-shadow: var(--shadow-short);
			height: 6rem;
			margin: auto;
			transition: transform .2s;
			width: 6rem;
		}
	}

	.icons__row:nth-child(1) .icons__image {
		/* first icon */
		background-position: center 40%;
		border-color: hsl(200deg, 65%, 35%);
	}
	.icons__row:nth-child(2) .icons__image {
		/* second icon */
		border-color: hsl(280deg, 65%, 35%);
	}
	.icons__row:nth-child(3) .icons__image {
		/* third icon */
		background-position: center 40%;
		border-color: hsl(120deg, 65%, 35%);
	}

	@media (min-width: 1200px) {
		/* modifier for right-side image in wwd section, desktop */
		.icons__image--right {
			margin-left: var(--gap-l);
			margin-right: -1rem;
		}
	}

	@media (max-width: 1200px) {
		/* modifier for right-side image in wwd section, mobile */
		.icons__image-container--right {
			order: -1;
				/* force image to appear above copy in mobile layout */
		}
	}
