/*scaffolding
{
}*/
.projectBlock .element .innerImage
{
	background-size: cover;
	background-position: center;
}
/* ── Width variants ──────────────────────────────────────── */
.projectBlockImageAndText.is-boxed
{
	max-width: var(--maxWidth);
	padding-left: var(--LRMargin, 5%);
	padding-right: var(--LRMargin, 5%);
	box-sizing: border-box;
}
/*outer divs
{
}*/
.projectBlock
{
	display: grid;
	margin-top: calc(var(--defaultInterval)*1);
	margin-bottom: calc(var(--defaultInterval)*1);
	position: relative;
	grid-template-columns: 1fr;
	grid-gap: calc(var(--defaultInterval)*1);
	box-sizing: border-box;
	/*max-width: 100vw;*/
	max-width: 100%;
	/*max-width:var(--maxWidth);*/
	margin-left: auto;
	margin-right: auto;
}
.projectBlockImageDouble.projectBlock
{
	grid-template-columns: auto auto;
	padding: 0;
}
/* ImageDouble's two-class selector above out-specifies the mobile
   ".projectBlock { padding-left/right: ... }" rule further down (max-width:
   900px), so its blocks never pick up that padding. ImageAndText and
   VideoAndText never had an equivalent reset, so on mobile they alone were
   picking up 10px of unwanted left/right inset relative to every other
   block type on the page. */
.projectBlockImageAndText.projectBlock, .projectBlockVideoAndText.projectBlock
{
	padding: 0;
}
/*outer divs: twoElements
{
}*/
.projectBlock.elementsTwo
{
	grid-template-columns: 1fr 1fr;
}
.projectBlock.elementsTwo > div:nth-child(1)
{
	grid-template-columns: 1fr 1fr;
	justify-self: end;
}
.projectBlock.elementsTwo > div:nth-child(2)
{
	grid-template-columns: 1fr 1fr;
	justify-self: start;
}
/*outer divs: mulitipleElements
{
}*/
.projectBlock.elementsVariable .elements
{
	display: grid;
	width: 100%;
	grid-auto-flow: column;
	padding: calc(var(--defaultInterval)*.5);
	box-sizing: border-box;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: calc(var(--defaultInterval)*1);
	justify-items: center;
}
@media only screen and (max-width: 753px)
{
	.projectBlock.elementsVariable .elements
	{
		display: grid;
		grid-auto-columns: auto;
		grid-auto-flow: row;
		/*max-width:max(50vw, 100vw-500);*/
		max-width:max(80vw,100vw - var(--defaultInterval)*10);
		grid-auto-rows: auto;
		grid-template-columns: 1fr;
	}
}
/*outer divs: text and image
{
}*/
.projectBlockImageAndText.projectBlock.directionTextFirst
{
	grid-template-areas: "text image";
}
.projectBlockImageAndText.projectBlock.directionImageFirst
{
	grid-template-areas: "image text";
}
.projectBlockImageAndText.projectBlock .element.image
{
	grid-area: image;
}
.projectBlockImageAndText.directionTextFirst .element.image
{
	justify-self: start;
}
#SD .projectBlockImageAndText.directionTextFirst > .text, #SD .projectBlockVideoAndText > .text
{
	justify-self: end;
}

{
	justify-self: end;
}

{
	grid-area: text;
}
.projectBlockImageAndText.projectBlock.directionImageFirst .element.alignmentRight
{
	padding-right: calc(var(--defaultInterval)*1);
}
.projectBlockImageAndText.projectBlock.directionTextFirst .text.element
{
	padding-left: 0;
	margin-left: calc(var(--defaultInterval)*1);
}
.projectBlockImageAndText.projectBlock.directionTextFirst .element.text.alignmentleft
{
	padding-left: calc(var(--defaultInterval)*1);
}
/*outer divs: video  and video
{
}*/
.projectBlockVideoAndText.projectBlock.directionTextFirst
{
	grid-template-areas: "text video";
}
.projectBlockVideoAndText.projectBlock.directionVideoFirst
{
	grid-template-areas: "video text";
}
/*.projectBlockVideoAndText .element.text
{
	grid-area: text;
}*/
/*.projectBlockVideoAndText .element.video
{
}*/
/*DIV.videoWrapper
{
	position: relative;
	display: ;
	min-height: 200px;
	position: ;
	height: 100%;
	width: 100%;
}*/
div.videoWrapper
{
	width: auto !important;
	min-width: auto !important;
}
div.videoWrapper *
{
	background-color: white;
}
iframe
{
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	/*min-height: 100px;*/
	/*min-width: 100px;*/
}
#SD iframe *
{
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	/*min-height: 100px;*/
	/*min-width: 100px;*/
}
/*outer divs: video  and video
{
}*/
.projectBlockVideoAndText .element.text
{
	grid-area: text;
}
body .html5-video-player
{
	background-color: #FFF !important;
}
.projectBlockVideoAndText .element.video
{
	grid-area: video;
}
/*outer divs: video  and video
{
}*/
.projectBlockVideoAndText.projectBlock.directionTextFirst
{
	grid-template-areas: "text video";
}
.projectBlockVideoAndText .element.text
{
	grid-area: text;
	/*border: 20px solid black !important;*/
	justify-self: end;
	/*width: 100%;*/
	/*position: relative !important;*/
	/*display: ;*/
	/*display: flex !important;*/
}
.projectBlockVideoAndText .element.video
{
	grid-area: video;
	width: 100%;
}
/*outer divs: overview
{
}*/
.projectBlockOverview.projectBlock
{
	margin-left:min((var(--defaultInterval)* -1), 9px - 50vw + var(--contentWidth)*.5);
	margin-left:min((var(--defaultInterval)* -1), -50vw + var(--contentWidth)*.5);
	width: 100vw;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	position: relative;
}
.projectBlockOverview.projectBlock .element.text
{
	max-width:var(--contentWidth);
	text-align: center;
	width: 90vw;
}
.projectBlockOverview .backgroundImage
{
	background-size: cover;
	height: 100%;
	width: 100%;
	position: absolute;
	box-sizing: border-box;
	background-position: center;
	filter: blur( 8 px);
}
/*outer divs: video and image
{
}*/
/*outer divs: video  and video
{
}*/
/*outerdiv: color
{
}*/
/*.projectBlockColor.projectBlock
{
	background-color: white;
	padding: calc(var(--defaultInterval)*2) calc(var(--defaultInterval)*.5);
}*/
/*.projectBlockColor.projectBlock .palettes
{
	display: flex;
	justify-content: center;
}*/
/*.projectBlockColor.projectBlock .palettes .palette
{
	height: 20vw;
}*/
/*.projectBlockColor.projectBlock .palettes > DIV .label
{
	padding: 0 calc(var(--defaultInterval)*.5);
	margin-top: calc(var(--defaultInterval)*.5);
	margin-bottom: 0px;
}*/
/*.projectBlockColor.projectBlock .palettes .primary .palette
{
	display: grid;
	flex-wrap: wrap;
	grid-template-rows: auto;
	grid-auto-flow: column;
}*/
/*.projectBlockColor.projectBlock .palettes .primary.secondaryPaletteFalse .label
{
	text-align: center;
}*/
/*.projectBlockColor.projectBlock .palettes .primary.secondaryPaletteTrue .label
{
	text-align: right;
	border-right: 4px solid grey;
	margin-right: -2px;
}*/
/*.projectBlockColor.projectBlock .palettes .secondary .palette
{
	display: grid;
	grid-template-rows: auto auto;
	grid-auto-flow: column;
}*/
/*.projectBlockColor.projectBlock .palettes .color
{
	padding-top: 100%;
	width: 100%;
}*/
/*.projectBlockColor.projectBlock .palettes .primary .color
{
	(*min-width: 50px;*)
	(*max-width: 300px;*)
	width: 20vw;
}*/
/*.projectBlockColor.projectBlock .palettes .secondary .color
{
	(*min-width: 25px;*)
	(*max-width: 150px;*)
	(*width:max(10vw,100%);*)
	width: 10vw;
}*/
/*@media only screen and (max-width: 800px)
{
	(*outerdiv: testimonial
	{
	}*)
	.projectBlockColor.projectBlock .palettes
	{
		flex-direction: column;
	}
	.projectBlockColor.projectBlock .palettes > DIV
	{
		display: flex;
		justify-content: center;
		flex-direction: column;
	}
	#SD .projectBlockColor.projectBlock .palettes > DIV > *
	{
		justify-content: center;
		text-align: center;
		margin-top: calc(var(--defaultInterval)*1);
	}
	.projectBlockColor.projectBlock .palettes .primary.secondaryPaletteTrue .label
	{
		border-right: none;
	}
	(*.projectBlockColor.projectBlock .palettes > DIV > .palette
	{
		display: flex !important;
		background-color: #A73D3D !important;
		height: 200px !important;
		flex-direction: row;
	}*)
}*/
/*outerdiv: testimonial
{
}*/
.projectBlocktestimonial.projectBlock
{
	padding: 0 calc(var(--defaultInterval)*1);
	background-color:var(--colLiteGrey);
	margin-top: calc(var(--defaultInterval)*3);
	margin-bottom: calc(var(--defaultInterval)*3);
}
.projectBlocktestimonial.projectBlock .testimonial
{
	padding: calc(var(--defaultInterval)*1);
	display: grid;
	/*grid-template-areas: "quote quote" "photo bio";*/
	grid-template-areas: "quote" "photo" "bio";
	grid-gap: calc(var(--defaultInterval)*1);
	margin-bottom: calc(var(--defaultInterval)*1);
	margin-left: auto;
	margin-right: auto;
	colLiteGrey:;
	box-sizing: border-box;
	max-width:var(--maxWidth);
	text-align: center;
}
.projectBlocktestimonial.projectBlock .quote p:last-of-type
{
	margin-bottom: 0px;
}
.projectBlocktestimonial.projectBlock .quote p
{
	font-size: 32px;
	font-size:var(--testimonialQuoteSize);
	/*font-size:var(--titleSize);*/
}
.projectBlocktestimonial.projectBlock .bio p
{
	margin-bottom: 0px;
	font-size: ;
	line-height: 1;
}
.projectBlocktestimonial.projectBlock .bio
{
	grid-area: bio;
	line-height: ;
}
.projectBlocktestimonial.projectBlock .bio *
{
	font-size:var(--testimonialSourceSize);
	text-align: center;
}
.projectBlocktestimonial.projectBlock .bio .name
{
	grid-area: bio;
	margin-bottom: 1px;
	font-weight: bold;
}
.projectBlocktestimonial.projectBlock .quote
{
	grid-area: quote;
}
.projectBlocktestimonial.projectBlock .photo
{
	width: calc(var(--defaultInterval)*4);
	height: calc(var(--defaultInterval)*4);
	border-radius: 100%;
	background-size: contain;
	align-self: center;
	background-color: ;
	justify-content: center;
	display: flex;
	width: calc(var(--defaultInterval)*10);
	height: calc(var(--defaultInterval)*10);
	grid-area: photo;
	align-items: center;
	margin-left: auto;
	margin-right: auto;
}
/*outer divs : alignments
{
}*/
/*outerdriv: website features
{
}*/
.projectBlockwebsiteFeatures.projectBlock
{
	margin-left: calc(var(--defaultInterval)*1);
	margin-right: calc(var(--defaultInterval)*1);
}
/* ── Website features headline — subhead design token ────────────────────────── */
#SD .projectBlockwebsiteFeatures.projectBlock > h2
{
	margin-bottom: calc(var(--defaultInterval) * .5);
	font-family: var(--subhead-font);
	font-weight: var(--subhead-weight);
	text-transform: var(--subhead-transform);
	letter-spacing: var(--subhead-tracking);
	font-size: var(--subhead-size);
	color: var(--subhead-color);
	text-align: center;
}
.projectBlockwebsiteFeatures.projectBlock .features > div
{
	max-width:var(--maxWidth);
	margin-left: 0;
	margin-left: auto;
	margin-right: auto;
}
.projectBlockwebsiteFeatures.projectBlock .features .core
{
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-flow: row;
	/*grid-gap: 0 calc(var(--defaultInterval)*1);*/
	-moz-border-radius: var(--wf-border-radius, var(--defaultBorderRadius));
	-webkit-border-radius: var(--wf-border-radius, var(--defaultBorderRadius));
	-khtml-border-radius: var(--wf-border-radius, var(--defaultBorderRadius));
	border-radius:var(--wf-border-radius, var(--defaultBorderRadius));
	overflow: hidden;
}
.projectBlockwebsiteFeatures.projectBlock .features .special
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-flow: row;
	-moz-border-radius: var(--wf-border-radius, var(--defaultBorderRadius));
	-webkit-border-radius: var(--wf-border-radius, var(--defaultBorderRadius));
	-khtml-border-radius: var(--wf-border-radius, var(--defaultBorderRadius));
	border-radius:var(--wf-border-radius, var(--defaultBorderRadius));
	margin-bottom: calc(var(--defaultInterval)*1);
	overflow: hidden;
}
.projectBlockwebsiteFeatures.projectBlock .features .special .feature
{
	display: grid;
	display: grid;
	grid-template-columns:min(160px, 15vw) auto;
	grid-template-areas: "icon header" "icon body";
	/*padding-right: calc(var(--defaultInterval)*1);*/
	grid-template-rows: auto;
	grid-template-rows: auto 1fr;
	align-items: safe start;
	/*min-height: 100px;*/
	min-height:min(100px, 100vw);
	background-color:var(--wf-bg-a, var(--colH));
	width: 100%;
	box-sizing: border-box;
	padding: calc(var(--defaultInterval)*.5);
}
.projectBlockwebsiteFeatures.projectBlock .features .special .feature:nth-child(4n), .projectBlockwebsiteFeatures.projectBlock .features .special .feature:nth-child(4n+1)
{
	background-color:var(--wf-bg-b, var(--colI));
}
.projectBlockwebsiteFeatures.projectBlock .features .special .feature:nth-child(4n) .icon .background, .projectBlockwebsiteFeatures.projectBlock .features .special .feature:nth-child(4n+1) .icon .background
{
	fill:var(--wf-circle-b, var(--wf-bg-a, var(--colH)));
}
.projectBlockwebsiteFeatures.projectBlock .features .special .feature:nth-child(4n) .icon .foreground, .projectBlockwebsiteFeatures.projectBlock .features .special .feature:nth-child(4n+1) .icon .foreground
{
	fill:var(--wf-icon-b, inherit);
}
.projectBlockwebsiteFeatures.projectBlock .features .core .feature
{
	display: grid;
	grid-template-columns:min(80px, 15vw) auto;
	/*padding-top: calc(var(--defaultInterval)*.5);*/
	/*padding-bottom: calc(var(--defaultInterval)*.5);*/
	grid-template-areas: "icon header" "icon body";
	/*padding-right: calc(var(--defaultInterval)*1);*/
	grid-template-rows: auto;
	grid-template-rows: auto 1fr;
	align-items: safe start;
	/*min-height: 100px;*/
	min-height:min(100px, 100vw);
	background-color:var(--wf-bg-a, var(--colH));
	width: 100%;
	box-sizing: border-box;
	padding: calc(var(--defaultInterval)*.5);
}
.projectBlockwebsiteFeatures.projectBlock .features .core .feature:nth-child(4n), .projectBlockwebsiteFeatures.projectBlock .features .core .feature:nth-child(4n+1)
{
	background-color:var(--wf-bg-b, var(--colI));
}
/*.projectBlockwebsiteFeatures.projectBlock .features .core .feature:nth-child(3n), .projectBlockwebsiteFeatures.projectBlock .features .core .feature:nth-child(2)
{
	background-color:var(--colI);
}*/
.projectBlockwebsiteFeatures.projectBlock .features .feature .header
{
	grid-area: header;
	margin-bottom: var(--wf-header-body-gap, 0px);
	font-family: var(--wf-header-family, inherit);
	font-weight: var(--wf-header-weight, bold);
	font-size: var(--wf-header-size, inherit);
	line-height: var(--wf-header-line-height, inherit);
	letter-spacing: var(--wf-header-letter-spacing, normal);
	text-transform: var(--wf-header-text-transform, none);
	color: var(--wf-header-color, inherit);
}
.projectBlockwebsiteFeatures.projectBlock .features .feature .icon > *
{
	width: 100%;
	height: 100%;
}
.projectBlockwebsiteFeatures.projectBlock .features .feature .icon .background
{
	fill:var(--wf-circle-a, var(--wf-bg-b, var(--colI)));
}
.projectBlockwebsiteFeatures.projectBlock .features .feature .icon .foreground
{
	fill:var(--wf-icon-a, inherit);
}
.projectBlockwebsiteFeatures.projectBlock .features .core .feature:nth-child(4n) .icon .background, .projectBlockwebsiteFeatures.projectBlock .features .core .feature:nth-child(4n+1) .icon .background
{
	fill:var(--wf-circle-b, var(--wf-bg-a, var(--colH)));
}
.projectBlockwebsiteFeatures.projectBlock .features .core .feature:nth-child(4n) .icon .foreground, .projectBlockwebsiteFeatures.projectBlock .features .core .feature:nth-child(4n+1) .icon .foreground
{
	fill:var(--wf-icon-b, inherit);
}
.projectBlockwebsiteFeatures.projectBlock .features .feature .icon
{
	grid-area: icon;
	margin-right: calc(var(--defaultInterval)*1);
	display: flex;
	top: 0px;
	background-size: ;
}
.projectBlockwebsiteFeatures.projectBlock .feature .icon.raster
{
	background-size: contain;
	background-position: center;
	height: 100%;
	background-repeat: no-repeat;
	padding: 0;
	overflow: hidden;
}
.projectBlockwebsiteFeatures.projectBlock .features .feature .body
{
	grd-area:body;
	height: 100%;
	font-family: var(--wf-body-family, inherit);
	font-weight: var(--wf-body-weight, inherit);
	font-size: var(--wf-body-size, inherit);
	line-height: var(--wf-body-line-height, inherit);
	letter-spacing: var(--wf-body-letter-spacing, normal);
	text-transform: var(--wf-body-text-transform, none);
	color: var(--wf-body-color, inherit);
}
.projectBlockwebsiteFeatures.projectBlock .features .feature p
{
	margin-bottom: calc(var(--defaultInterval)*.5);
}
.projectBlockwebsiteFeatures.projectBlock .features .feature p:last-of-type
{
	margin-bottom: 0px;
}
@media only screen and (max-width: 753px)
{
	.projectBlockwebsiteFeatures.projectBlock .features .core,
	.projectBlockwebsiteFeatures.projectBlock .features .special
	{
		grid-template-columns: 1fr;
	}
	/* This block carries no horizontal-align class, so its heading inherited
	   the same centered/shrink-wrapped treatment as the other case-study
	   rows -- left-align it to match. */
	#SD .projectBlockwebsiteFeatures.projectBlock > h2
	{
		text-align: left;
	}
	#SD .projectBlockImageAndText.directionTextFirst > .text, #SD .projectBlockVideoAndText > .text
	{
		justify-self: center;
	}
	.projectBlockImageAndText.projectBlock.directionTextFirst .text.element
	{
		margin-left: 0;
	}
}
/*outerdriv: website4 link
{
}*/
.projectBlockwebsiteLink.projectBlock
{
	padding: calc(var(--defaultInterval)*2);
	display: flex;
	justify-content: center;
}
#SD #main #primary .entry-content .projectBlockwebsiteLink.projectBlock .button
{
	margin: 0px;
	list-style: none;
}
@media only screen and (max-width: 753px)
{
	.projectBlockwebsiteLink.projectBlock
	{
		padding: 0;
		display: flex;
		justify-content: center;
	}
	.projectBlockwebsiteFeatures.projectBlock .features .core .feature:nth-child(even),
	.projectBlockwebsiteFeatures.projectBlock .features .special .feature:nth-child(even)
	{
		background-color:var(--wf-bg-a, var(--colH));
	}
	.projectBlockwebsiteFeatures.projectBlock .features .core .feature:nth-child(odd),
	.projectBlockwebsiteFeatures.projectBlock .features .special .feature:nth-child(odd)
	{
		background-color:var(--wf-bg-b, var(--colI));
	}
}
/*.projectBlock
{
	display: grid;
	margin-top: calc(var(--defaultInterval)*1);
	margin-bottom: calc(var(--defaultInterval)*1);
}*/
/*outerdriv: website thanks
{
}*/
.projectBlockthanks.projectBlock
{
	margin-top: calc(var(--defaultInterval)*2);
	margin-bottom: calc(var(--defaultInterval)*2);
}
/*#SD.project-template-default .projectBlockVideoSingle
{
	(*height: 267px;*)
	min-height: 100px;
}*/
.projectBlock.horizontalAlignCentered
{
	justify-items: center;
	justify-content: center;
}
.projectBlock.horizontalAlignLeft
{
	justify-items: left;
	justify-content: start;
}
.projectBlock.horizontalAlignRight
{
	/*align-content: center;*/
	justify-items: right;
	justify-content: end;
	/*align-items: center;*/
}
.projectBlock.verticalAlignCentered
{
	align-content: center;
	align-items: center;
}
.projectBlock.verticalAlignCentered
{
	align-content: center;
	align-items: center;
}
.projectBlock.verticalAlignBottom
{
	align-content: end;
	align-items: end;
}
@media only screen and (max-width: 753px)
{
	.projectBlock.elementsTwo
	{
		grid-template-columns: 1fr;
	}
	#SD .projectBlock.elementsTwo > div
	{
		width: 100%;
		max-width: 80vw;
		justify-self: center;
	}
	.projectBlockImageAndText.projectBlock.directionTextFirst, .projectBlockImageAndText.projectBlock.directionImageFirst
	{
		grid-template-areas: "image" "text";
	}
	/* Desktop's image|text two-column gap padding (.element.alignmentRight,
	   line ~115) is never relevant once mobile stacks image above text --
	   left unreset it added a stray 10px inset only on this block type. */
	.projectBlockImageAndText.projectBlock.directionImageFirst .element.alignmentRight
	{
		padding-right: 0;
	}
	/* Blocks with no horizontal-align class (e.g. websiteFeatures) fell back
	   to centered, shrink-wrapped headings/text here -- same left-margin
	   drift as the explicitly-centered rows handled below, just with no
	   alignment class to target. */
	.projectBlock
	{
		justify-items: start;
	}

	{
		grid-template-areas: "image text";
	}
	/* Case-study rows below the hero each carry their own desktop
	   horizontal-align choice (centered/right/left), which on a narrow
	   single-column mobile layout just makes every row's left edge land
	   somewhere different depending on that row's text length — instead
	   of the one consistent left margin the hero and page content use.
	   Mobile flattens all rows to that same left edge regardless of the
	   desktop alignment setting. */
	#SD .projectBlock.horizontalAlignCentered,
	#SD .projectBlock.horizontalAlignRight
	{
		justify-items: start;
		justify-content: start;
	}
}
/*elements
{
}*/
.projectBlock .element
{
	width: 100%;
	position: relative;
	min-height: 20px;
	min-width: 20px;
	width: 100%;
}
/*element  text 
{
}*/
.projectBlock .element.text p:last-of-type
{
	margin-bottom: 0px;
}
/* ── Element text headline — subhead design token ────────────────────────────── */
#SD .projectBlock .element.text h3
{
	margin-bottom: calc(var(--defaultInterval) * .5);
	font-family: var(--subhead-font);
	font-weight: var(--subhead-weight);
	text-transform: var(--subhead-transform);
	letter-spacing: var(--subhead-tracking);
	font-size: var(--subhead-size);
	color: var(--subhead-color);
}
.projectBlock .element.text.alignmentRight > *
{
	text-align: right;
}
.projectBlock .element.text.alignmentLeft > *
{
	text-align: left;
}
.projectBlock .element.text.alignmentCentered > *
{
	text-align: center;
}
@media only screen and (max-width: 753px)
{
	#SD .projectBlock .element.text h3
	{
		text-align: left;
	}
	.projectBlock .element.text .text p
	{
		text-align: left;
	}
	.projectBlock .element.text.sizeLarge,
	.projectBlock .element.text.sizeMedium,
	.projectBlock .element.text.sizeSmall
	{
		width: 100%;
		max-width: 100%;
	}
}
/*element text sizes
{
}*/
.projectBlock .element.text.sizeLarge
{
	width:min(var(--contentWidth)*.5, 50vw);
	padding: 0;
	max-width: 80vw;
}
.projectBlock .element.text.sizeMedium
{
	width:min(var(--contentWidth)*.35, 35vw);
	max-width: 60vw;
}
.projectBlock .element.text.sizeSmall
{
	width:min(var(--contentWidth)*.25, 25vw);
	max-width: 50vw;
}
/*element icon
{
}*/
.element .icon
{
	/*max-width:min(15vw, 150px);*/
	width: 100%;
	max-width:max(150px, 10vw);
	/*max-width: 50px;*/
	position: relative;
}
.element .icon *
{
	/*max-width:min(15vw, 150px);*/
	transition-duration:var(--defaultTransitionDuration);
	transition-delay:var(--transitionDelay);
	overflow: visible;
}
.element.unobserved .icon .foreground
{
	opacity: 0;
	transform: translateY(-50%);
}
.element.unobserved .icon .background
{
	opacity: 0;
	/*transition-delay: calc( var(--transitionDelay) + 1000ms);*/
	transition-delay:var(--transitionDelay);
}
.element .icon > *
{
	/*max-width:min(15vw, 150px);*/
	width: 100%;
	box-sizing: border-box;
	height: auto;
}
.projectBlockrowOfIcons .element
{
	transition-delay:var(--transitionDelay);
	display: flex;
	max-width:max(80vw,100vw - var(--defaultInterval)*10);
	width: 100%;
}
.projectBlock .elements .element .body
{
	transition-duration:var(--defaultTransitionDuration);
	transition-delay: calc(var(--transitionDelay) + 750ms);
}
.projectBlock .elements .element h4
{
	transition-delay: calc(var(--transitionDelay) + 500ms);
	margin-bottom: 0px;
}
.projectBlock .elements .element.unobserved h4
{
	opacity: 0;
	padding-left: 0;
}
.projectBlock .elements .element.unobserved .body
{
	opacity: 0;
}
.projectBlock .elements .element
{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.projectBlock .elements .element > *
{
	text-align: center;
	position: ;
}
.projectBlockrowOfIcons .elements .element .icon .background
{
	fill:var(--colI);
}
/*element text sizes
{
}*/
.projectBlock .element .innerImage
{
	/*min-height: 50px;*/
	min-width: 50%;
	background-repeat: no-repeat;
}
.projectBlock .element.sizeMedium.proportions_three_two
{
	/*max-width:min(900px, 80%);*/
	width:min(var(--contentWidth)*.7, 50vw, 600px);
}
.projectBlock .element.sizeMedium.proportions_two_three
{
	width:min(var(--contentWidth)*.50, 50vw, 500px);
}
.projectBlock .element.sizeMedium.proportions_one_one
{
	/*max-width:min(600px, 50%);*/
	/*width: 100vw;*/
	width:min(var(--contentWidth)*.4, 40vw, 500px);
}
.projectBlock .element.sizeSmall.proportions_three_two
{
	width:min(var(--contentWidth)*.4, 40vw, 375px);
}
.projectBlock .element.sizeSmall.proportions_two_three
{
	width:min(var(--contentWidth)*.40, 40vw, 250px);
}
.projectBlock .element.sizeSmall.proportions_one_one
{
	width:min(var(--contentWidth)*.3, 30vw, 400px);
}
.projectBlock .element.sizeLarge.proportions_three_two
{
	width:min(var(--contentWidth), 100vw, 1800px);
	width: 100vw;
	/*width:min(var(--contentWidth), 100vw);*/
}
.projectBlock .element.sizeLarge.proportions_two_three
{
	width:min(var(--contentWidth), 80vw, 750px);
	/*max-width:min(var(--contentWidth), 80vw, 750px);*/
}
.projectBlock .element.sizeLarge.proportions_one_one
{
	width:min(var(--contentWidth)*.7, 70vw, 700px);
}
/* elementsTwo places two size-variant elements side by side in a 2-col
   grid, but the vw-based widths above are each computed independently
   off the full viewport -- two 50vw elements plus grid-gap add up to
   more than the viewport, overflowing it at tablet widths. Let the
   grid column (1fr) size the element instead. */
.projectBlock.elementsTwo .element[class*="size"]
{
	width: 100%;
	max-width: 100%;
}
/*inner image sizes
{
}*/
video.element.sizeSmall
{
	width:min(var(--contentWidth)*.50, 40vw, 450px);
}
video.element.sizeMedium
{
	width:min(var(--contentWidth)*.7, 50vw, 750px);
}
video.element.sizeLarge
{
	width:min(var(--contentWidth), 100vw, 1500px);
}
video.element.sizeLarge
{
	width:min(var(--contentWidth), 100vw, 1500px);
}
#SD .projectBlockVideoSingle .videoWrapper.sizeFull iframe
{
	height: 80vh;
	width: 100vw;
	max-height: 70vw;
}
#SD .projectBlockVideoSingle .videoWrapper.sizeLarge iframe
{
	height: 80vh;
	width: 80vw;
	max-height: 50vw;
}
#SD .projectBlockVideoSingle .videoWrapper.sizeMedium iframe
{
	height: 50vh;
	width: 50vw;
}
#SD .projectBlockVideoSingle .videoWrapper.sizeSmall iframe
{
	height: 30vh;
	width: 40vw;
	max-height: 30vw;
}
video.element.sizeFull
{
	width: 100%;
}
@media only screen and (max-width: 753px)
{
	#SD .element.sizeSmall:not(.text)
	{
		width: 70vw;
	}
	#SD .element.sizeMedium:not(.text)
	{
		width: 80vw;
	}
	#SD .element.sizeLarge:not(.text)
	{
		width: 80vw;
	}
	/* elementsTwo (image+text rows like "stewardship guide") stack to a
	   single grid column at this breakpoint. The vw-based widths above
	   are sized off the viewport, not this block's own (margin-inset)
	   box, so they blow out the 1fr grid track past the block's actual
	   edges and end up overflowing the left/right margins entirely
	   instead of sitting flush with them like the hero image does. Same
	   blowout happens on single-element rows (e.g. a standalone full-width
	   photo between text rows), so elementsOne gets the same reset. */
	#SD .projectBlock.elementsTwo .element,
	#SD .projectBlock.elementsOne .element
	{
		width: 100%;
		max-width: 100%;
		min-width: 0;
		justify-self: start;
	}
}
/*inner image proporitons
{
}*/
.projectBlock .element.proportions_three_two .innerImage
{
	padding-top: 66%;
}
.projectBlock .element.proportions_two_three .innerImage
{
	padding-top: 150%;
}
.projectBlock .element.proportions_one_one .innerImage
{
	padding-top: 100%;
}
@media only screen and (max-width: 753px)
{
	.projectBlock .element.text.alignmentRight > *
	{
		text-align: center;
	}
}
@media only screen and (max-width: 1000px)
{
	/* DISABLED 2026-10-05. This query's header had a stray backtick
	   ("max-`width") until today, so the browser dropped the whole block
	   and none of these rules ever ran. Fixing the typo to bring back the
	   testimonial sizes below would have switched these on too:
	   image-and-text rows stacking at 754-1000px, and every .element
	   centered and padded on phones. Kept here, inactive, so the
	   live layout doesn't change unless that's chosen on purpose.

	#SD .projectBlockImageAndText.projectBlock[class*="direction"]
	{
		grid-template-columns: 1fr;
		grid-template-areas: "text" "image";
	}
	#SD .projectBlock .element.text
	{
		padding: calc(var(--defaultInterval)*1);
		box-sizing: border-box;
	}
	#SD .projectBlock .element
	{
		width: 100%;
		max-width: none;
	}
	#SD .projectBlock .element *
	{
		text-align: center;
		max-width: none;
	}
	*/
	.projectBlocktestimonial.projectBlock .quote p
	{
		font-size:var(--h5Size);
	}
	.projectBlocktestimonial.projectBlock .testimonial .bio *
	{
		font-size:var(--h4Size);
	}
	/* Full width on a Width: Wide page. --wideWidth (min(70vw, …),
	   page-width-control.css) plus this block's own padding and the inner
	   .testimonial padding stacked up to ~100px per side on phones,
	   squeezing the quote into a ~215px column. One gutter instead.
	   Outranks the width-tier rule (1 id + 4 classes) by one class. */
	#SD .entry-content > .projectBlocktestimonial.projectBlock:not(.alignfull):not(.SDblock)
	{
		box-sizing: border-box;
		width: 100%;
		max-width: none;
		padding-left: var(--defaultInterval);
		padding-right: var(--defaultInterval);
	}
	.projectBlocktestimonial.projectBlock .testimonial
	{
		padding-left: 0;
		padding-right: 0;
	}
}
/* Long quotes centered over many lines are hard to read on phones --
   every line starts somewhere different. Left-align the whole stack. */
@media only screen and (max-width: 753px)
{
	.projectBlocktestimonial.projectBlock .testimonial,
	.projectBlocktestimonial.projectBlock .bio *
	{
		text-align: left;
	}
	.projectBlocktestimonial.projectBlock .photo
	{
		margin-left: 0;
	}
}
/* ── Mobile content margins (900px) — aligns left/right edge with logo ─────── */
@media only screen and (max-width: 900px)
{
	.projectBlock
	{
		padding-left: calc(var(--defaultInterval)*.5);
		padding-right: calc(var(--defaultInterval)*.5);
		box-sizing: border-box;
	}
	/* Overview block uses a negative-margin breakout to go full-bleed — reset */
	.projectBlockOverview.projectBlock
	{
		padding-left: 0;
		padding-right: 0;
	}
	/* Single text/image rows (e.g. "creating awareness about recycling")
	   should align with the rest of the page's content edge, not the extra
	   logo-aligned inset every other .projectBlock gets above. */
	.projectBlocktext.projectBlock,
	.projectBlockImageSingle.projectBlock,
	.projectBlockVideoSingle.projectBlock
	{
		padding-left: 0;
		padding-right: 0;
	}
	/* Website features has its own desktop block margins — reset to avoid double indent */
	.projectBlockwebsiteFeatures.projectBlock
	{
		margin-left: 0;
		margin-right: 0;
	}
	/* sizeLarge 3:2 images were hardcoded 100vw; constrain to padded container */
	.projectBlock .element.sizeLarge.proportions_three_two
	{
		width: 100%;
	}
	/* Full-bleed video iframe */
	#SD .projectBlockVideoSingle .videoWrapper.sizeFull iframe
	{
		width: 100%;
	}
}