/*== MINIFIED NORMALIZE.CSS AND FONTS ========================================*/

html{-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type='button'],[type='reset'],[type='submit']{-webkit-appearance:button}button::-moz-focus-inner,[type='button']::-moz-focus-inner,[type='reset']::-moz-focus-inner,[type='submit']::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type='button']:-moz-focusring,[type='reset']:-moz-focusring,[type='submit']:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type='checkbox'],[type='radio']{box-sizing:border-box;padding:0}[type='number']::-webkit-inner-spin-button,[type='number']::-webkit-outer-spin-button{height:auto}[type='search']{-webkit-appearance:textfield;outline-offset:-2px}[type='search']::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

@font-face{font-family:'Work Sans';font-style:normal;font-weight:400;font-display:swap;src:url('misc/worksans-v4-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:'Work Sans';font-style:normal;font-weight:400;font-display:swap;src:url('misc/worksans-v4-latin-ext.woff2') format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}



/*== PERSONALLY PREFERRED ADDITIONS FOR NORMALIZATION ========================*/

/* scroll-behavior seems to be broken on chromium at the moment */
:root {scroll-behavior: smooth !important;}
html {scroll-behavior: smooth !important;}
body {scroll-behavior: smooth !important;}

html {
	font-family: 'Work Sans', sans-serif;
		/* use open sans if it can be independently x-scaled */
	font-size: 12pt; /* 1em @ 12pt = 16px */
	line-height: 1.5;
/*	overflow-y: scroll; */
	scroll-behavior: smooth;
/* VARIABLES/CUSTOM PROPERTIES */
	--white: hsl(27.2, 100%, 95%);
	--blue: hsl(200, 90%, 45%); /* #0b95da */
	--grey: hsl(200, 25%, 85%);
	--red: hsl(0, 90%, 45%); /* #da0b0b, WARNING COLOR */
	/*--yellow: hsl(50, 90%, 45%); /* #dab80b */
	/*--orange: hsl(27.2, 100%, 50%); /* #ff7400; gradient orange */
	/*--pink: hsl(328.2, 100%, 50%); /* #ff0087; gradient pink */
	--yellow: hsl(50, 90%, 55%); /* brighter for better contrast against neon bg */
	--grad-light: linear-gradient(
		120deg,
		hsl(27.2, 100%, 90%),
		hsl(200, 100%, 95%)
	);
	--grad-dark: linear-gradient(							/* TBD */
		/* should feel like foreground, not background; make it pop more */
		/* used on .copyright */
		120deg,
		hsl(27.2, 100%, 90%),
		hsl(200, 100%, 95%)
	);
	--shadow: 0 .3rem .5rem rgba(0, 0, 0, .25);
		/* sectional shadows */
	--shadow-short-OLD:
		.15rem .2rem .15rem rgba(0, 0, 0, .3),
		-.15rem .2rem .15rem rgba(0, 0, 0, .3);
	--shadow-short:
		/* short drop shadow for text */
		.5px 1.5px 3px rgba(0, 0, 0, .5),
		-.5px 1.5px 3px rgba(0, 0, 0, .5);
	--shadow-line: 0 2px 3px rgba(0, 0, 0, .5);
	--gap-s: 1rem;
	--gap-m: 2.5rem;
	--gap-l: 5rem;
	--radius: .3rem;
	--border: 3px;
	--border-inverse: -3px;
	/* small and subtle */
}
/*@media (max-width: 1200px) {
	html {
		--shadow: none; /* kill shadows for performance * /
			aborted shadows kill; needed for contrast on hero section (false stroke)
		--shadow-short: none;
	}
}*/

/*
		z-index directory
		.--lower -10 !! WARNING; PUTS ELEMENT BEHIND BODY
		.--upper 10
		.services__expanded 20
		.menu 20
		.copyright 30 !! TEMPORARILY REMOVED
		.modal 40
*/

*, *::after, *::before {
	box-sizing: border-box;
/*	outline: none; find alternative solution; needed for accessibility */
}

:focus {
	outline-width: var(--border);
	outline-color: hsl(30, 100%, 55%);
	outline-style: dotted;
	outline-offset: var(--border);
}

/**::placeholder {color: var(--grey-light);} */

a,
a:visited {
	color: var(--blue);
}

img {
	max-width: 100%;
}

label {
	cursor: text;
}

summary {
	cursor: pointer;
}



/*==== BEGIN PROJECT STYLES ==================================================*/

/* typical css framework major classes: container > row > column */

.container { /* sectional spacing with white background */
	background: #fff;
	padding: var(--gap-l) 0;
}

	.container--alt { /* alternate, darker container */
		background: var(--grad-light);
		padding: var(--gap-l) 0;
	}

	.--upper {
		/* extra class to "pop" a .container (or w/e element i guess) */
		box-shadow: var(--shadow);
		position: relative;
		z-index: 10;
	}

	.--lower {
		/* complimentary extra class to "drop" a .container */
		box-shadow: var(--shadow);
		position: relative;
		z-index: -10;
	}

.row { /* child of .container, parent of .column */
	display: flex;
	justify-content: center;
	margin: auto;
	width: 1200px;
}
@media (max-width: 1200px) {
	.row {
		flex-direction: column;
		padding-left: var(--gap-s);
		padding-right: var(--gap-s);
		width: auto;
	}
}

	.row__gap {
		height: var(--gap-m);
	}
	@media (max-width: 1200px) {
		.row__gap {
			height: var(--gap-s);
		}
	}



.column { /* standard content block; has specific fixed width */
	flex: 0 0 auto;
	width: 36rem; /* 720px when rem == 15pt */
	/* 36rem gives ideal line length for readability; */
	/* not all containers need this but columns ideally do */
}
@media (max-width: 1200px) {
	.column {
		width: 100%;
	}
}

	.column--auto {
		flex: 0 0 auto;
		width: auto;
	}
	@media (max-width: 1200px) {
		.column--auto {
			width: 100%;
		}
	}

	.column--double { /* generally avoid; way beyond optimal line length */
		flex: 0 0 auto;
		width: 1200px;
	}
	@media (max-width: 1200px) {
		.column--double {
			width: 100%;
		}
	}

	.column--center { /* match .column--double max width */
		flex: 0 0 auto;
		text-align: center;
		width: 1200px;
	}
	@media (max-width: 1200px) {
		.column--center {
			width: 100%;
		}
	}

	.column__gap {
		/* inflexible spacing element; use between column elements */
		flex: 0 0 var(--gap-m);
	}
	@media (max-width: 1200px) {
		.column__gap {
			flex: 0 0 var(--gap-s);
		}
	}

	.column__flex {
		flex: 1 1 auto;
	}



.modal {
	background: hsla(0deg, 0%, 5%, .95);
	display: none;
	font-size: 150%;
	height: 100vh;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 40;
}

	.modal__container {
		background: #fff;
		border-radius: var(--radius);
		display: none;
		margin: auto;
	}

	.modal__close-container {
		text-align: right;
		height: var(--gap-l);
			/* match .modal__content padding-bottom */
		padding: 0 var(--gap-s);
	}

	.modal__close {
		font-size: 2rem;
		font-weight: bold;
		text-decoration: none;
	}

	.modal__content {
		padding: 0 var(--gap-l) var(--gap-l);
	}

		/* styling for different states on store hours */
		[data-open-status='open'] {color: hsl(0deg, 75%, 75%);}
		[data-open-status='closed'] {color: hsl(0deg, 75%, 75%);}
		[data-open-status='warning'] {color: hsl(35deg, 75%, 75%);}

	.modal__header {
		display: block;
		font-weight: bold;
		font-size: 115%;
		margin-bottom: var(--gap-s);
	}

	.modal__icon {
		/* modified from .footer__icon */
		height: 2rem;
		margin-right: .75rem;
		position: relative;
		top: .5rem;
		width: 2rem;
	}



.copyright { /* one of these as the very first and very last block */
	background: var(--grad-dark);
	font-size: 80%;
/*	position: relative; */
/*	z-index: 30; */
}



.menu {
	background: #fff;
	box-shadow: var(--shadow);
	position: relative;
	z-index: 20;
}
@media (max-width: 1200px) {
	.menu {
		overflow: hidden;
	}
}

	.menu__row {
		display: flex;
		justify-content: center;
		margin: auto;
		width: 1200px;
	}
	@media (max-width: 1200px) {
		.menu__row {
			display: block;
			width: 100%;
		}
	}

	.menu__logo {
		background: var(--blue) url('img/logo.svg') center/contain no-repeat;
	/*	background: transparent url('img/logo-orig.svg') center left/80% no-repeat;*/
		flex: 0 0 10rem;
	}
	@media (max-width: 1200px) {
		.menu__logo {
			height: 6rem;
		}
	}

	.menu__li {
		list-style-type: none;
	/*	display: none;		LEAVE-OFF POINT */
	}

	.menu__ul {
		margin: 0;
		padding: 0;
	}

	.menu__ul--main {
		display: flex;
	}
	@media (max-width: 1200px) {
		.menu__ul--main {
			display: none;
		}
	}

	.menu__link {
		color: #000;
		display: block;
		font-size: 80%;
		outline-offset: var(--border-inverse);
		padding: 2.5rem 2rem;
		text-decoration: none;
		white-space: nowrap;
	}

		.menu__link:hover,
		.menu__link--submenu:hover {
			background: var(--blue);
			color: #fff;
		}

	.menu__header--2:hover + .menu__dropdown--2,
	.menu__header--3:hover + .menu__dropdown--3,
	.menu__header--2:focus + .menu__dropdown--2,
	.menu__header--3:focus + .menu__dropdown--3,
	.menu__dropdown--2:hover,
	.menu__dropdown--3:hover {
		display: block !important;
		/* needs to be important-ed to override inline style applied by js */
	}



.alert { /* top-of-page warning dialogue */
	background: #fff;
	border-radius: var(--radius);
	border-top: .5rem solid var(--yellow);
	box-shadow: var(--shadow);
	display: flex;
	font-size: 80%;
	margin-top: var(--gap-m);
	/* margin-bottom: -2.5rem; */
	/* reduce hero__row's top-margin when alert is displayed */
	/* --gap-l (5rem) - 2.5rem = --gap-m (2.5rem) */
	padding: var(--gap-s) var(--gap-m);
}
@media (max-width: 1200px) {
	.alert {
		flex-direction: column;
		padding-left: var(--gap-s);
		padding-right: var(--gap-s);
		width: auto;
	}
}

	.alert--red { /* additional modifier class for red coloured border-top */
		border-top: .5rem solid var(--red);
		/* add thin white outline above border-top for contrast */
		/* primary shadow is the standard var(--shadow) */
		box-shadow:
			0 .3rem .5rem rgba(0, 0, 0, .25),
			0 -1px 0 hsla(0deg, 0%, 100%, .5);
	}

	.alert__iconframe {
		display: flex;
		justify-content: center;
		align-items: center;
		flex: 0 0 auto;
	}

	.alert__icon {
		height: 5rem;
		width: 5rem;
	}



.hero {
	background: var(--white) url('img/banner2.jpg') center / cover no-repeat;
	/*min-height: 30rem;*/
	overflow: hidden; /* hide offscreen .hero__sliders */
		/* working as long as .hero__slider container isn't set to position:absolute */
}

	/* there was once a .hero__container here; was made redundant */

	.hero__slider {
		/* section.hero carousel frame; originally used .row class */
		display: flex;
		justify-content: start;
		flex-direction: row;
		/* overflow-x: hidden; */
			/* hidden overflow prevents elements being rendered */
			/* hide overflow on parent element instead */
		position: relative;
		transition: left 0.65s;
		height: 36rem; /* 574px naturally (based on slide 1); ie 35.875rem */
		grid-column: 1 / *;
		grid-row: 1 / *;
	}
		/* shift entire slider based on data-slide attribute */
		/* requires a 100vw frame offscreen to the left */
		.hero__slider[data-slide='1'] {left: -100vw}
		.hero__slider[data-slide='2'] {left: -200vw}
		.hero__slider[data-slide='3'] {left: -300vw}
		.hero__slider[data-slide='4'] {left: -400vw}
		/* futureproof with extra values */
		.hero__slider[data-slide='5'] {left: -500vw}
		.hero__slider[data-slide='6'] {left: -600vw}
		.hero__slider[data-slide='7'] {left: -700vw}
		.hero__slider[data-slide='8'] {left: -800vw}
		.hero__slider[data-slide='9'] {left: -900vw}
		.hero__slider[data-slide='nudge-left'] {left: 50vw}
		.hero__slider[data-slide='nudge-right'] {left: -250vw}

	/* the following is copied from .row: */
	.hero__slider-column { /* child of .container, parent of .column */
		display: flex;
		justify-content: center;
		width: 50vw;
		margin: 10rem 25vw;
		flex: 0 0 auto;
	}
	@media (max-width: 1200px) {
		.hero__slider-column {
			flex-direction: column;
			padding-left: var(--gap-s);
			padding-right: var(--gap-s);
			margin: 0;
			width: 100vw;
			flex: 0 0 auto;
		}
	}

	.slider__controls {
		/* controls are displaced with css positioning */
		width: 100%;
		display: grid;
		grid-template-columns: 8rem 4rem 1fr 4rem 8rem;
		grid-template-rows: 16rem 4rem 12rem 1.5rem 2.3rem 0.2rem;
			/* 36rem total height to match .hero__slider */
	}
	@media (max-width: 1200px) {
		.slider__controls {
			grid-template-columns: 0.5rem 4rem 1fr 4rem 0.5rem;
			grid-template-rows: 16rem 4rem 12rem 1.5rem 2.3rem 0.2rem;
				/* 36rem total height to match .hero__slider */
		}
	}
	@media (max-width: 400px) {
		.slider__controls {
			grid-template-columns: 1px 2rem 1fr 2rem 1px;
			grid-template-rows: 12rem 12rem 8rem 1.5rem 2.3rem 0.2rem;
				/* 36rem total height to match .hero__slider */
		}
	}

		.slider__button {
			background: hsla(0deg, 0%, 100%, 0.25);
			border: none;
			border-radius: 50%;
			color: var(--black);
			transition: background-color 0.1s, color 0.1s;
			margin: 2px; /* spacing on the smaller bottom ones */
			padding: 4px;
			position: relative;
			z-index: 10;
		}
		.slider__button:hover {
			background: #fff;
			color: #000;
		}
		.slider__button:active {
			background: var(--blue);
			color: #fff;
		}
		@media (max-width: 400px) {
			.slider__button--left {
				border-radius: 0 0.5rem 0.5rem 0;
				margin-left: -1px;
			}
			.slider__button--right {
				border-radius: 0.5rem 0 0 0.5rem;
				margin-right: -1px;
			}
		}

		.slider__button--selected {
			background: var(--blue);
			border-radius: 50%;
			width: 100%;
			height: 100%;
		}

		.slider__tracker-frame {
			display: flex;
			flex-direction: row;
			justify-content: center;
		}

		.slider__tracker {
			width: 1.25rem;
			position: relative;
			z-index: 10;
		}

		.slider__timer {
			background: var(--blue);
			grid-column: 1 / span 9;
			grid-row: 6;
			width: 0%;
			position: relative;
			z-index: 10;
		}

			/* single-use variant classes for grid placement */
			.slider__button--left {
				grid-column: 2;
				grid-row: 2;
			}
			.slider__button--right {
				grid-column: 4;
				grid-row: 2;
			}
			.slider__tracker-frame {
				grid-column: 3;
				grid-row: 4;
			}

	.hero__header {
		color: #fff;
		display: inline-block;
		font-size: 2.5rem;
		font-weight: 700;
		text-shadow: var(--shadow-short);
	}

	.hero__copy {
		color: #fff;
		font-size: 1.25rem;
		text-shadow: var(--shadow-short);
		width: 40rem;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}

		.hero__copy a,
		.hero__copy a:visited {
			color: hsl(210deg, 85%, 85%) !important;
		}



.about {}

	.about__image {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-right: var(--gap-m);
	}
	@media (max-width: 1200px) {
		.about__image {
			padding: 0;
		}
	}







.wwd {}

/*	shadow variable reference:
--shadow: 0 .3rem .5rem rgba(0, 0, 0, .1);
--shadow-short:
	.15rem .2rem .15rem rgba(0, 0, 0, .3),
	-.15rem .2rem .15rem rgba(0, 0, 0, .3);
*/

	.wwd__container {
		background:
			url('img/hero2.jpg')
			center /
			cover
			no-repeat;
		color: #fff;
		padding: var(--gap-l) 0;
		text-shadow: var(--shadow-short);
	}

	.wwd__row { /* child of .container, parent of .column */
		align-items: center;
		display: flex;
		justify-content: center;
		margin: auto;
		width: 1200px;
	}
	@media (max-width: 1200px) {
		.wwd__row {
			flex-direction: column;
			padding-left: var(--gap-s);
			padding-right: var(--gap-s);
			width: auto;
		}
	}

	@media (min-width: 1200px) { /* desktop */
		.wwd__image {
			background: #fff center / cover no-repeat;
				//background-image: url('img/project1.jpg'); /* must be set inline */
			border: var(--border) #fff solid;
			border-radius: 50%;
			box-shadow: var(--shadow-short);
			height: 24rem;
			margin: 0 var(--gap-l) 0 -1rem;
				/* negative margin on outside edge gives more apparent weight */
				/* experimented a lot; -1rem seems just subtle enough */
			transition: transform .2s;
			width: 24rem;
		}
		.wwd__image:hover {
			transform: scale(1.1);
		}
	}
	@media (max-width: 1200px) { /* mobile */
		.wwd__image {
			background: #fff center / cover no-repeat;
				//background-image: url('img/project1.jpg');
			height: 20rem;
			margin: 0;
			width: 100%;
		}
	}

	@media (min-width: 1200px) {
		/* modifier for right-side image in wwd section, desktop */
		.wwd__image--right {
			margin: 0 -1rem 0 var(--gap-l);
		}
	}

	@media (max-width: 1200px) {
		/* modifier for right-side image in wwd section, mobile */
		.wwd__image-container--right {
			order: -1;
				/* force image to appear above copy in mobile layout */
		}
	}

	@media (min-width: 1200px) { /* desktop */
		.wwd__image--placeholder {
			height: 24rem;
			margin: 0 var(--gap-l) 0 -1rem;
			width: 24rem;
		}
	}
	@media (max-width: 1200px) { /* mobile */
		.wwd__image--placeholder {
			display: none;
		}
	}






.services__grid { /* grid container for services boxes */
	display: grid;
	grid-template: auto / 1fr 373px 374px 373px 1fr;
		/* 1200px target width for middle */
		/* 16px x 2.5 = 40px grid-gaps (var--gap-m) */
		/* 1200 - (40 x 2) = 1120; 1120 / 3 = 373.3333px */
	gap: 0 var(--gap-m);
}
@media (max-width: 1200px) {
	.services__grid {
		grid-template: auto / var(--gap-s) 1fr 1fr var(--gap-s);
		gap: var(--gap-s);
	}
}
@media (max-width: 600px) {
	.services__grid {
		display: block;
	}
}

	.services__box {
		background: #fff;
		box-shadow: none;
		box-shadow: var(--shadow);
		border: 1px solid #fff;
		border-radius: var(--radius);
		cursor: pointer;
		display: flex;
		flex-direction: column;
		flex: 1 1 0;
		padding: var(--gap-m);
		transition:
			border .1s,
			opacity .1s,
			transform .1s;
	}
	@media (max-width: 1200px) {
		.services__box {
			display: block;
			margin: var(--gap-s) var(--gap-s) 0;
			margin: 0;
			text-align: center;
		}
	}
	@media (max-width: 600px) {
		.services__box {
			margin: 1rem;
		}
	}

	/* manually set (pseudo-) vertical grid gap */

	@media (min-width: 1201px) {
		.services__box--4,
		.services__box--5,
		.services__box--6 {
			margin-top: var(--gap-m);
		}
	}

	.services__box:hover {
	/*	border: 1px solid var(--blue);*/
	/*	transform: translateY(-1rem);*/
		transform: scale(1.07);
	}
	@media (max-width: 1200px) {
		.services__box:hover {
			transform: none;
		}
	}

	.services__box:hover[data-checked='1'] {
		transform: none;
	}

	.services__box[data-checked='1'] {
		border: var(--border) solid var(--blue);
	}

	.services__box[data-checked='0'] {
		/* fade all other services__box elements when one is selected */
	}

	.services__icon {
		align-self: center;
		height: 6rem;
		width: auto;
	}

	.services__content {
		text-align: center;
	}

	.services__arrow {
		height: var(--gap-m);
		margin: auto;
		position: relative;
		top: 1.5rem;
		transform: rotate(45deg) scale(2.5);
		width: var(--gap-m);
	}
	@media (max-width: 1200px) {
		.services__arrow {
			height: var(--gap-s);
			transform: rotate(45deg) scale(4);
			width: var(--gap-s);
		}
	}

	.services__expanded {
		color: #fff;
		overflow: hidden;
		padding-bottom: var(--gap-l);
			/* ::before element will simulate padding-top */
		z-index: 20;
	}
	@media (max-width: 1200px) {
		.services__expanded {
			margin-bottom: var(--gap-s);
		}
	}

	.services__close-expanded {
		color: #fff;
		height: var(--gap-l);
		margin: auto;
		width: 1200px;

		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
	}
	@media (max-width: 1200px) {
		.services__close-expanded {
			align-items: center;
			margin: 0 var(--gap-s) 0 0;
			width: auto;
		}
	}

	.services__close-button {
		color: #fff;
		display: block;
		font-size: 200%;
		text-decoration: none;
	}

	.services__expanded-grid {
		display: grid;
		grid-template: auto / 1fr 1fr;
		gap: var(--gap-m);
	}
	@media (max-width: 1200px) {
		.services__expanded-grid {
			gap: var(--gap-s);
		}
	}
	@media (max-width: 600px) {
		.services__expanded-grid {
			grid-template: auto / auto;
		}
	}

	.services__expanded-grid-image {
		background: #999 center/cover;
		/* requires inline background-image property */
		border: var(--border) solid #fff;
		border-radius: var(--radius);
		height: 20rem;
	}
	@media (max-width: 1200px) {
		.services__expanded-grid-image {
			height: 18rem;
				/* ~11.8rem height maintains native/desktop aspect ratio */
				/* assuming iphone 6/7/8; 375 css px device-width */
				/* too shallow; looks really bad in mobile landscape */
				/* 18rem height looks good in landscape, nearly square in portrait (also ok) */
		}
	}

	.services__expanded-grid-caption { /* below-image captions */
		font-style: italic;
		margin-top: 1rem;
	}

	.services__expanded-grid-writeup { /* likely soon-to-be deprecated */
		margin-top: 1rem;
		/*background: #afa;*/
		grid-column: 1 / span 2;
		text-align: left;
	}

	.services__radio {
		/* these are hidden elements meant to interact with scripts */
		visibility: hidden;
	}

	/* arrangement classes; exclusively for grid placement */

	.services__box--1 {
		grid-column: 2;
		grid-row: 1;
	}
	.services__box--2 {
		grid-column: 3;
		grid-row: 1;
	}
	.services__box--3 {
		grid-column: 4;
		grid-row: 1;
	}
	.services__box--4 {
		grid-column: 2;
		grid-row: 6;
	}
	.services__box--5 {
		grid-column: 3;
		grid-row: 6;
	}
	.services__box--6 {
		grid-column: 4;
		grid-row: 6;
	}
	@media (max-width: 1200px) {
		.services__box--1 {
			grid-column: 2;
			grid-row: 1;
		}
		.services__box--2 {
			grid-column: 3;
			grid-row: 1;
		}
		.services__box--3 {
			grid-column: 2;
			grid-row: 2;
		}
		.services__box--4 {
			grid-column: 3;
			grid-row: 2;
		}
		.services__box--5 {
			grid-column: 2;
			grid-row: 3;
		}
		.services__box--6 {
			grid-column: 3;
			grid-row: 3;
		}
	}
	.services__expanded--1 {
		grid-column: 1 / 6;
		grid-row: 3;
	}
	.services__expanded--2 {
		grid-column: 1 / 6;
		grid-row: 4;
	}
	.services__expanded--3 {
		grid-column: 1 / 6;
		grid-row: 5;
	}
	.services__expanded--4 {
		grid-column: 1 / 6;
		grid-row: 8;
	}
	.services__expanded--5 {
		grid-column: 1 / 6;
		grid-row: 9;
	}
	.services__expanded--6 {
		grid-column: 1 / 6;
		grid-row: 10;
	}
	.services__arrow--1 {
		grid-column: 2;
		grid-row: 2;
	}
	.services__arrow--2 {
		grid-column: 3;
		grid-row: 2;
	}
	.services__arrow--3 {
		grid-column: 4;
		grid-row: 2;
	}
	.services__arrow--4 {
		grid-column: 2;
		grid-row: 7;
	}
	.services__arrow--5 {
		grid-column: 3;
		grid-row: 7;
	}
	.services__arrow--6 {
		grid-column: 4;
		grid-row: 7;
	}

	/* individual background colours for .services__expanded-- and .services__arrow-- classes */
	/* midpoints were calculated as the natural 20% increments on a pure gradient using: */
	/* https://www.rapidtables.com/convert/color/index.html as a colour converter and */
	/* https://cssgradient.io/ for the gradient breakpoints */
	/* hues are the same as any other gradient on the site, but much darker and desaturated here */

	.services__arrow--1,
	.services__expanded--1 {
		background: hsl(27.2deg, 15%, 10%);
	}

	.services__arrow--2,
	.services__expanded--2 {
		background: #1e1c19;
	}

	.services__arrow--3,
	.services__expanded--3 {
		background: #1f1f1e;
	}

	.services__arrow--4,
	.services__expanded--4 {
		background: #1f2222;
	}

	.services__arrow--5,
	.services__expanded--5 {
		background: #202527;
	}

	.services__arrow--6,
	.services__expanded--6 {
		background: hsl(200deg, 15%, 15%);
	}



.install {} /* entire section copied from .wwd */

/*	shadow variable reference:
--shadow: 0 .3rem .5rem rgba(0, 0, 0, .1);
--shadow-short:
	.15rem .2rem .15rem rgba(0, 0, 0, .3),
	-.15rem .2rem .15rem rgba(0, 0, 0, .3);
*/

		.install__container {
			background:
				url('img/hero2.jpg')
				center /
				cover
				no-repeat;
			color: #fff;
			padding: var(--gap-l) 0;
			text-shadow: var(--shadow-short);
		//	max-width: 100%;
		//	overflow-x: hidden;
		}

		.install__row { /* child of .container, parent of .column */
			align-items: center;
			display: flex;
		/*	justify-content: center; */
		/*	margin: auto; */
		/*	width: 1200px; */
		}
		.install__row--margins {
			margin: var(--gap-m) 0;
		}
		@media (max-width: 1200px) {
			.public_static_void_new_class {
				content: '&nbsp';
				position: absolute;
			}
			.install__row {
				flex-direction: column;
				padding-left: var(--gap-s);
				padding-right: var(--gap-s);
				width: auto;
			}
		}

		.install__column--1 {
			flex: 0 0 auto;
			transform: translateX(0rem);
			width: 1200px;
		}
		.install__column--2 {
			flex: 0 0 auto;
			transform: translateX(4rem);
			width: calc(1200px - 8rem);
		}
		.install__column--3 {
			flex: 0 0 auto;
			transform: translateX(8rem);
			width: calc(1200px - 16rem);
		}
		@media (max-width: 1200px) {
			[class^='install__column--'] {
				transform: none;
				width: 100%;
			}
		}

		.column__flex--1px {
			flex: 1 1 1px;
		}
		@media (max-width: 1200px) {
			.column__flex--1px {
				flex: 0 0 auto;
					/* override default 1px flex-basis to force auto height */
				width: 100%;
					/* flex container .install__row will force 0-width because of align-items prop */
			}
		}

		.install__clip {
			/* this element is purely for the shape-outside effect on the text */
			float: left;
			height: 24rem;
			width: 24rem;
			shape-outside: polygon(27% 0%, 100% 0%, 73% 100%, 0% 100%);
				/* trial and error for shape */
		}
		@media (max-width: 1200px) {
			.install__clip {
				display: none;
			}
		}

		@media (min-width: 1200px) { /* desktop */
			.install__image {
				background: #fff center / cover no-repeat;
					background-image: url('img/project1.jpg'); /* must be set inline */
				clip-path: polygon(0 0, calc(100% - 1px) 0, calc(100% - 8rem + 1px) 100%, 0 100%);
					/* clip-path will cut off borders; thus the parent "border" div */
				flex: 1 1 auto;
				height: 24rem;
			}
			[class^='install__image-border--'] { /* all three .install__image-border-- classes */
				background: #fff;
				box-shadow: var(--shadow-short);
				clip-path: polygon(0 0, 100% 0, calc(100% - 8rem) 100%, 0 100%);
				padding: var(--border);
			}
			.install__image-border--1 {margin: 0 -18.25rem 0 -4rem;}
			.install__image-border--2 {margin: 0 -22.25rem 0 -4rem;}
			.install__image-border--3 {margin: 0 -26.25rem 0 -4rem;}
		}
		@media (max-width: 1200px) { /* mobile */
			.install__image {
				background: #fff center / cover no-repeat;
					background-image: url('img/project1.jpg');
				border: var(--border) solid #fff;
				height: 20rem;
				margin: calc(0px - var(--border));
					/* weighting fix */
				width: 100%;
			}
		}

		.install__subtitle {
			margin-top: 6rem;
				/* not truly vertically centered, but close enough */
		}
		@media (max-width: 1200px) {
			.install__subtitle {
				margin-top: var(--gap-m);
			}
		}



.stats {}

	.stats__numbercontainer {
		display: flex;
		justify-content: space-between;
		overflow-x: hidden;
	}
	@media (max-width: 1200px) {
		.stats__numbercontainer {
			display: block;
		}
	}

	.stats__numberflex {
		flex: 0 0 auto;
		font-size: 1rem;
		text-align: left;
	}
	@media (max-width: 1200px) {
		.stats__numberflex {
			text-align: center;
		}
	}

	.stats__number {
		border-bottom: 3px solid var(--blue);
		color: var(--blue);
		display: block;
		font-size: 2.5rem;
		font-weight: 800; /* extra-bold 800 */
		margin-bottom: 0.5rem;
	}
	@media (max-width: 1200px) {
		.stats__number {
			border: none;
			margin-bottom: 0;
		}
		.stats__number:not(.stats__number--first) {
			margin-top: var(--gap-s);
		}
	}



.brands {}

	.brands__logocontainer {
		align-items: center;
		display: grid;
		gap: var(--gap-m);
		grid-template: auto/1fr 1fr 1fr 1fr 1fr;
	}
	@media (max-width: 1200px) {
		.brands__logocontainer {
			grid-template: auto/1fr 1fr 1fr 1fr;
		}
	}
	@media (max-width: 700px) {
		.brands__logocontainer {
			grid-template: auto/1fr 1fr 1fr;
		}
	}
	@media (max-width: 500px) {
		.brands__logocontainer {
			grid-template: auto/1fr 1fr;
		}
	}
	/* logos are a bit small at 320px device-width, but still preferable to giant single column */
	@media (max-width: 250px) {
		/* 320 css px is generally the narrowest phone width,
	 		but this will support oddballs/relics
			(maybe someone's browsing on their apple iToaster) */
		.brands__logocontainer {
			grid-template: auto/1fr;
		}
	}

	.brands__logocontainer:hover > .brands__logo {
		filter: grayscale(1);
		opacity: .5;
	}
	.brands__logo {
		/*border: 1px solid #aaa;*/
		width: 100%;
		transition:
			transform .1s,
			filter .2s,
			opacity .2s;
	}
	.brands__logo:hover {
		transform: scale(1.2);
		filter: none !important;
		opacity: 1 !important;
	}



.projects {}

	.projects__row { /* child of .container, parent of .column */
		/* duplicate of .row with altered breakpoints */
		display: flex;
		justify-content: center;
		margin: auto;
		width: 1200px;
	}
	@media (max-width: 1200px) {
		.projects__row {
			padding-left: var(--gap-s);
			padding-right: var(--gap-s);
			width: auto;
		}
	}
	@media (max-width: 800px) {
		/* reasonable breakpoint; looks a little goofy in either direction around this value */
		.projects__row {
			flex-direction: column;
		}
	}

	.projects__box {
		background: #fff;
		box-shadow: var(--shadow);
		border-radius: var(--radius);
		display: flex;
		flex-direction: column;
		flex: 1 1 0;
		transition: transform .1s;
	}
	/* not sure what the point of this was
	@media (max-width: 1200px) {
		.projects__box {
			display: block;
			text-align: center;
		}
	}*/

	.projects__box:hover {
		transform: scale(1.05);
	}

	.projects__image {
		align-self: center;
		background: center/cover;
		/*
		**	background-image MUST BE SET INLINE; otherwise just displays #fff
		**	image res on desktop is 580x288px
		**	at this time, high end phones are 1440x2960 (360x740 css) px
		**	these images display @ 328x288 css px
				w 2x ratio; 656x576; 0.38MP
				w 4x ratio; 1312x1152; 1.51MP
		*/
		border-radius: var(--radius) var(--radius) 0 0;
		height: 18rem;
		width: 100%;
	}

	.projects__content {
		padding: 0 var(--gap-m) var(--gap-m);
		text-align: center;
	}

	.projects__header {
		margin-top: 2rem;
		margin-bottom: 0rem;
	}

	.projects__subheader {
		color: hsl(0, 0%, 50%);
		font-size: 80%;
		font-style: italic;
	}

	.projects__description {
		display: none; /* TBD; hide until i have time to do writeups */
		text-align: left;
	}



.footer {}

	.footer__row { /* child of .container, parent of .column */
		display: flex;
		justify-content: center;
		margin: auto;
		width: 1200px;
	}
	@media (max-width: 1200px) {
		.footer__row {
			flex-direction: column;
			padding-left: var(--gap-s);
			width: auto;
			align-items: center;
		}
	}

	.footer__column--first {
		flex: 6 6 auto; /* semi-arbitrary values that roughly center .footer__column--middle content */
	}
	@media (max-width: 1200px) {
		.footer__column--first {
			width: 13.8rem;
		}
	}

	.footer__column--middle {
		flex: 7 7 auto;
		padding-top: 3.095rem; /* match vertical spacing of header on .footer__column--first */
	}
	@media (max-width: 1200px) {
		.footer__column--middle {
			padding-top: 0;
			width: 13.8rem;
		}
	}

	.footer__column--last {
		flex: 0 0 auto;
		padding-top: 3.095rem;
	}
	@media (max-width: 1200px) {
		.footer__column--last {
			padding-top: 0;
			width: 13.8rem;
		}
	}

	.footer__phone {}

	.footer__email {}

	.footer__location {}

	.footer__icon { /* roughly matched to text line-height */
		height: .5rem;
		margin-right: .9rem;
		position: relative;
		transform: scale(2.3);
		top: -1.5px;
		width: .5rem;
	}



.single {} /* use .container--alt */

	.single__row {
		display: flex;
		justify-content: center;
		margin: auto;
		width: 1200px;
		background: #fff;
		box-shadow: var(--shadow);
		border-radius: var(--radius);
		padding: var(--gap-m);
	}
	@media (max-width: 1200px) {
		.single__row {
			flex-direction: column;
			padding-left: var(--gap-s);
			padding-right: var(--gap-s);
			width: auto;
		}
	}



/*==== PAGE-SPECIFIC CLASSES ============================== ==================*/

/* .put-stuff-here {} */



/*==== SIMPLE GLOBAL CLASSES; PUSHED TO END FOR SPECIFICITY ==================*/

.linkbutton__row {
	display: flex;
	margin-top: var(--gap-m);
	justify-content: center;
}
@media (max-width: 1200px) {
	.linkbutton__row {
		flex-direction: column;
	}
}

	.linkbutton__row--right {
		display: flex;
		margin-top: var(--gap-m);
		justify-content: flex-end;
	}
	@media (max-width: 1200px) {
		.linkbutton__row--right {
			flex-direction: column;
		}
	}

	.linkbutton { /* primary colorscheme; for primary cta */
		background: var(--blue);
		border: 2px solid var(--blue);
		border-radius: var(--radius);
		box-shadow: var(--shadow);
		color: #fff;
		font-weight: bold;
		padding: var(--gap-s) var(--gap-m);
		text-decoration: none;
		transition:
			background-color .1s,
			color .1s,
			transform .1s,
			border .1s,
			box-shadow .1s;
	}
	.linkbutton:focus {
		background: #fff;
		border-color: #fff;
		color: var(--blue);
	}
	.linkbutton:hover {
		background: #fff;
		border-color: #fff;
		color: var(--blue);
		transform: scale(1.05);
	}
	.linkbutton:active {
		transform: scale(.95);
		box-shadow: none;
	}

	.linkbutton--border { /* primary colorscheme, with border (for white bgs) */
		background: var(--blue);
		border: 2px solid var(--blue);
		border-radius: var(--radius);
		box-shadow: var(--shadow);
		color: #fff;
		font-weight: bold;
		padding: var(--gap-s) var(--gap-m);
		text-decoration: none;
		transition:
			background-color .1s,
			color .1s,
			transform .1s,
			box-shadow .1s;
	}
	.linkbutton--border:focus {
		background: #fff;
		color: var(--blue);
	}
	.linkbutton--border:hover {
		background: #fff;
		color: var(--blue);
		transform: scale(1.05);
	}
	.linkbutton--border:active {
		transform: scale(.95);
		box-shadow: none;
	}

	.linkbutton--secondary { /* ghost button for deemphasized actions */
		background: transparent;
		border: 2px solid #fff;
		border-radius: var(--radius);
		box-shadow: var(--shadow);
		color: #fff;
		font-weight: bold;
		padding: var(--gap-s) var(--gap-m);
		text-decoration: none;
		transition:
			background-color .1s,
			color .1s,
			transform .1s,
			box-shadow .1s;
	}
	.linkbutton--secondary:focus {
		background: #fff;
		color: var(--blue);
	}
	.linkbutton--secondary:hover {
		background: #fff;
		color: var(--blue);
		transform: scale(1.05);
	}
	.linkbutton--secondary:active {
		transform: scale(.95);
		box-shadow: none;
	}

	.linkbutton--inverse { /* ghost button for white bgs */
		background: transparent;
		border: 2px solid var(--blue);
		border-radius: var(--radius);
		box-shadow: var(--shadow);
		color: var(--blue);
		font-weight: bold;
		margin-right: var(--gap-s);
		padding: var(--gap-s) var(--gap-m);
		text-decoration: none;
		transition:
			background-color .1s,
			color .1s,
			transform .1s,
			box-shadow .1s;
	}
	.linkbutton--inverse:hover {
		transform: scale(1.05);
	}
	.linkbutton--inverse:active {
		transform: scale(.95);
		box-shadow: none;
	}

	/* hero linkbuttons need stronger contrast against complicated bg */

	.linkbutton--hero { /* primary colorscheme; for primary cta */
		background: var(--blue);
		border-radius: var(--radius);
		box-shadow: var(--shadow);
		color: #fff;
		font-weight: bold;
		padding: var(--gap-s) var(--gap-m);
		text-decoration: none;
		transition:
			background-color .1s,
			color .1s,
			transform .1s,
			box-shadow .1s;
	}
	.linkbutton--hero:focus {
		background: #fff;
		color: var(--blue);
	}
	.linkbutton--hero:hover {
		background: #fff;
		color: var(--blue);
		transform: scale(1.1);
	}
	.linkbutton--hero:active {
		transform: scale(1);
		box-shadow: none;
	}

	.linkbutton--herosecondary { /* .linkbutton--secondary, modified for hero */
		background: hsla(0, 0%, 100%, .25);
		border-radius: var(--radius);
		box-shadow: var(--shadow);
		text-shadow:;
		color: #fff;
		font-weight: bold;
		margin-right: var(--gap-s);
		padding: var(--gap-s) var(--gap-m);
		text-decoration: none;
		transition:
			background-color .1s,
			color .1s,
			transform .1s,
			box-shadow .1s;
	}
	.linkbutton--herosecondary:focus {
		background: #fff;
		color: var(--blue);
	}
	.linkbutton--herosecondary:hover {
		background: #fff;
		color: var(--blue);
		transform: scale(1.1);
	}
	.linkbutton--herosecondary:active {
		transform: scale(1);
		box-shadow: none;
	}
	@media (max-width: 1200px) {
		.linkbutton--herosecondary {
			margin-right: 0;
			margin-bottom: var(--gap-s);
		}
	}



.caption {
	font-size: 80%;
	font-style: italic;
	text-align: center;
}

.input {}

.input__flexcontainer {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: var(--gap-m);
}
@media (max-width: 1200px) {
	.inup__flexcontainer {
		flex-direction: column;
	}
}

.text {
	border: 1px solid var(--blue);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	flex: 0 0 75%;
	margin: var(--gap-s) 0;
	padding: .5rem;
}

.text[disabled] {
	background: hsl(0, 0%, 90%);
	border: 1px solid hsl(0, 0%, 50%);
	color: hsl(0, 0%, 50%);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	flex: 0 0 75%;
	margin: var(--gap-s) 0;
	padding: .5rem;
}

.textarea {
	border: 1px solid var(--blue);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	flex: 0 0 75%;
	height: 8rem;
	margin: var(--gap-s) 0;
	padding: .5rem;
}

.label {
	display: inline-block;
	flex: 1 1 20%
}

[hidden] {
	display: none !important;
		/* default 'hidden' attribute is superseded by any set 'display' property */
}