@charset 'UTF-8';

:root {
	--wp-admin--admin-bar--height: 0px;
	--scrollbar-width: 0px;
	--scroll-y-position: 0px;
	--vw-less-scrollbar: calc(100vw - var(--scrollbar-width));

	--main-font-family: "avenir-next-lt-pro", sans-serif;
	--secondary-font-family: "kepler-std-caption", serif;

	--dark-text-color: #484848;
	--fading-text-color: #989898;
	--lighter-text-color: #6A6A6A;
	--darker-text-color: #1E1E1E;
	--white-font-color: #FFFFFF;
	--cta-text-color: #1E1E1E;
	--cta-hover-text-color: #6A6A6A;
	--collaboration-text-color: #1E1E1E;
	--collaboration-hover-text-color: #868686;

	--divider-line-color: #DCDCDC;

	--testimonial-background-color: #484848;
	--testimonial-font-color: #FFFFFF;
	--footer-background-color: #1E1E1E;
	--footer-text-color: #FFFFFF;
	--footer-link-hover-color: #868686;

	--dark-header-background-color: #1E1E1E;
	--dark-header-font-color: #FFFFFF;
}

*, *::before, *::after {
	box-sizing: border-box;
}

html {
	overflow-x: clip;
	scroll-behavior: smooth;
}

body {
	--gutter-width: 40px;
	--standard-gap: 30px;
	--header-height: 79px;

	@media (width<480px) {
		--gutter-width: 20px;
		--standard-gap: 20px;
	}

	display: grid;
	grid-template-rows: auto 1fr auto;
	font-family: var(--main-font-family);
	margin: 0;
	min-height: calc(100svh - var(--wp-admin--admin-bar--height));
	overflow-x: clip;
	scroll-behavior: smooth;
}

/* ========================================= *\
 * ACCESSIBILITY
\* ========================================= */
.skip-to-content {
	position: absolute;
	top: -200px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(255, 255, 255, 0.4);
	text-transform: uppercase;
	backdrop-filter: blur(8px);
	color: var(--color-dark);
	padding: 0.5em;
	z-index: 9999;
	text-decoration: none;

	&:focus-visible {
		top: 1rem;
	}
}

.screen-reader-text {
	background-color: #fff;
	color: #000;
	position: absolute;
	left: -100000px;
}

@media (prefers-reduced-motion: reduce) {
	:is(img, svg, object) {
		animation-play-state: paused !important;
	}
}

/* ========================================= *\
 * Page-change transitions
\* ========================================= */
@view-transition {
	navigation: auto;
}

/* ========================================= *\
 * STRUCTURE
\* ========================================= */
main {
	display: grid;
}

section {
	margin-block-end: var(--gutter-width);
	max-width: calc(100vw - var(--scrollbar-width));
	overflow: clip; 

	> .content {
		margin-inline: var(--gutter-width);
	}

	&:is(section.home-hero:first-child) {
		margin-block-end: 0;
	}
}

header.site-header {
	--ios-hamburger-icon: url('../img/hamburger.png');
	--dark-header-font-color: #ffffff;
	--ios-color-filter: none;
	
	display: flex;
	justify-content: space-between;
	padding-inline: var(--gutter-width);

	a.logo-container {
		align-items: center;
		display: inline-grid;
		height: var(--header-height);
	}

	@media only screen and (width>=44rem) { /* 704px */
		#header-nav {
			align-items: center;
			display: flex;
			font-size: 0.9375rem;
			font-weight: 400;
			line-height: 1.37;

			.c-hamburger {
				display: none;
			}

			ul {
				list-style: none;
				margin: 0;
				padding: 0;
				white-space: nowrap;

				&.dropdown {
					align-items: center;
					display: flex;
					gap: var(--gutter-width);
					margin-inline-start: auto;
					padding-inline-end: 11px;
				}

				li {
					a {
						color: var(--dark-text-color);
						font-weight: 400;
						text-decoration: none;
						text-transform: lowercase;
						transition: font-weight 0.2s ease;

						&:is(:hover, :focus-visible) {
							font-weight: 700;
						}
					}

					&.current-menu-item {
						a {
							font-weight: 700;
						}
					}
				}
			}
		}
	}
	@media only screen and (width<44rem) {
		#header-nav {
			position: relative;
		}
		#header-nav .c-hamburger > span {
			background-color: transparent;
		}
		#header-nav .c-hamburger > span::before {
			background-color: var(--dark-text-color);
			height: 3px;
			top: -6px;
		}
		#header-nav .c-hamburger > span::after {
			background-color: var(--dark-text-color);
			height: 3px;
			bottom: -6px;
		}
		#header-nav.is-active .c-hamburger > span::before {
			background-color: #FFFFFF;
			top: 0;
		}
		#header-nav.is-active .c-hamburger > span::after {
			background-color: #FFFFFF;
			bottom: -1px;
		}
		@supports (-webkit-touch-callout: none) { /* CSS specific to iOS devices */
			#header-nav .c-hamburger > span {
				display: none;
			}
			#header-nav .c-hamburger {
				background-image: var(--ios-hamburger-icon);
				background-position: left center;
				background-repeat: no-repeat;
				background-size: auto 30px;
				filter: var(--ios-color-filter);
			}
			#header-nav.is-active .c-hamburger {
				background-position: right center;
				filter: none;
			}
		}
		html:not(.ios-device) #header-nav.is-active > .c-hamburger--htx > span {
			background-color: #FFFFFF;
		}
		#header-nav .c-hamburger {
			right: 0;
			top: 26px;
			transition: right 0.2s ease 0s
		}
		#header-nav ul {
			font-size: 2.5rem;
			list-style: none;
			margin: 10px 0;
			padding: 0;
			white-space: nowrap;
		}
		#header-nav > ul {
			align-items: start;
			background-color: var(--footer-background-color);
			display: flex;
			flex-direction: column;
			justify-content: end;
			margin: 0;
			height: calc(100svh - var(--wp-admin--admin-bar--height));
			min-width: 300px;
			opacity: 0;
			overflow-x: clip;
			overflow-y: auto;
			padding: var(--gutter-width);
			position: absolute;
			pointer-events: none;
			right: calc(0px - var(--gutter-width));
			row-gap: var(--gutter-width);
			scrollbar-width: none;
			text-align: center;
			top: 0;
			transition: transform 0.2s ease 0s, opacity 0.2s ease 0s, visibility 0s linear 0.2s;
			visibility: hidden;
			width: calc(100vw - var(--scrollbar-width));
			z-index: 1;
			
			@media (prefers-reduced-motion: no-preference) {
				transform: translateY(50px);
			}
			@media (prefers-reduced-motion: reduce) {
				transform: translateY(0);
			}

			li {
				line-height: 1.15;

				a {
					color: #FFFFFF;
					text-decoration: none;
					text-transform: lowercase;
					transition: font-weight 0.2s ease;

					&:is(:hover, :focus-visible) {
						font-weight: 800;
					}
				}

				&.current-menu-item {
					font-weight: 800;
				}
			}
		}
		#header-nav.is-active > ul {
			opacity: 1;
			pointer-events: all;
			transform: translateY(0);
			transition: transform 0.2s ease 0s, opacity 0.2s ease 0s, visibility 0s linear 0s;
			visibility: visible;
		}
	}
}

body.single-portfolio header.site-header #header-nav .c-hamburger > span::before,
body.single-portfolio header.site-header #header-nav .c-hamburger > span::after {
	background-color: var(--dark-header-font-color);
}

footer.site-footer {
	background-color: var(--footer-background-color);
	color: var(--footer-text-color);
	column-gap: 20px;
	display: grid;
	row-gap: 50px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-rows: auto auto;
	grid-template-areas: 
		"blurb empty nav links"
		"logo none none none";
	font-size: 1.375rem;
	font-weight: 400;
	line-height: 1.37;
	margin-block-start: 0;
	min-height: 200px;
	padding: var(--gutter-width);

	main:has(section.with-bg-color:last-child) + footer.site-footer {
		margin-block-start: 0;
	}

	@media (width<75rem) { /* 1200px */
		grid-template-columns:minmax(0, 4fr) minmax(0, 2fr) minmax(0, 4fr);
		grid-template-areas: 
			"blurb nav links"
			"logo none none";
	}

	@media (width<53.75rem) { /*860px */
		grid-template-columns:minmax(0, 1fr);
		grid-template-rows: auto auto auto auto;
		grid-template-areas: 
			"logo"
			"nav"
			"links"
			"blurb";
	}

	a {
		color: var(--footer-text-color);
		text-decoration: none;
		transition: color 0.2s ease;

		&:is(:hover, :focus-visible) {
			color: var(--footer-link-hover-color);
		}
	}

	ul {
		display: grid;
		gap: var(--standard-gap);
		list-style: none;
		padding: 0;

		li {
			color: var(--footer-link-hover-color);
		}
	}

	.blurb {
		grid-area: blurb;

		> * {
			font-size: 1.375rem;
			font-weight: 400;
			line-height: 1.37;
			text-transform: none;
		}
		:is(h1, h2, h3, h4, h5, h6, p, ul, ol):first-child {
			margin-block-start: 0;
		}
		:is(h1, h2, h3, h4, h5, h6, p, ul, ol):last-child {
			margin-block-end: 0;
		}

		@media (width<53.75rem) { /*860px */
			margin-block-start: var(--gutter-width);
		}
	}

	nav {
		grid-area: nav;

		:is(p, ul, ol):first-child {
			margin-block-start: 0;
		}
		:is(p, ul, ol):last-child {
			margin-block-end: 0;
		}
	}

	.links {
		grid-area: links;
		margin-block: 0;
	}

	.footer-logo {
		grid-area: logo;

		img {
			height: 28px;
		}
	}

	@media (width<53.75rem) { /*860px */
		row-gap: 20px;
	}
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 800;
	text-transform: uppercase;

	&:first-child {
		margin-block-start: 0;
	}
}

/* ========================================= *\
 * CTAs
\* ========================================= */
.cta {
	color: var(--cta-text-color);
	display: inline-block;
	font-size: 1.375rem;
	font-weight: 500;
	transition: transform 0.3s ease;
	text-decoration: none;
	text-transform: lowercase;

	&::after {
		content: '';
		background-image: url('../img/cta-arrow.svg');
		background-position: right center;
		background-repeat: no-repeat;
		background-size: contain;
		display: inline-block;
		height: 12px;
		margin-inline-start: 0.5em;
		width: 12px;
	}

	&:is(:hover, :focus-visible) {
		color: var(--cta-hover-text-color);
		
		@media (prefers-reduced-motion: no-preference) {
			transform: translateX(10px);
		}
		@media (prefers-reduced-motion: reduce) {
			text-decoration: underline;
		}

		&::after {
			background-image: url('../img/cta-arrow-hover.svg');
		}
	}
}

.cta-container {
	display: block;
	overflow: visible;
	margin-inline-end: 15px;
}

/* ========================================= *\
 * HOME HERO
\* ========================================= */
section.home-hero {
	align-items: end;
	display: grid;
	padding-block: 40px;

	&:first-child {
		min-height: calc(100svh - var(--header-height) - var(--wp-admin--admin-bar--height));
	}

	.h1-style {
		color: var(--dark-text-color);
		font-size: clamp(2.5rem, 12vw, 4.375rem);
		font-weight: 800;
		position: relative;
		margin-block-start: 0;
		
		> span {
			color: var(--fading-text-color);
		}
	}

	.swipe {
		overflow: clip;

		.wrapper {
			border-radius: 8px;
			display: flex;
			gap: var(--standard-gap);
			height: calc((100vw - (2 * var(--gutter-width)) - var(--scrollbar-width) - (3 * var(--standard-gap))) / 4);
			max-width: calc(100vw - (2 * var(--gutter-width)) - var(--scrollbar-width));
			min-height: 300px;
			overflow-x: scroll;
			scrollbar-width: none;
			touch-action: pan-x pan-y;

			&.grabbable {
				cursor: grab;
			}
			&.grabbing {
				cursor: grabbing;
			}

			@media (width<1290px) {
				cursor: grab;
			}

			&:not(.moving) {
				scroll-snap-type: x proximity;
			}

			.slide {
				border-radius: 6px;
				flex: 1 1 0%;
				overflow: clip;
				position: relative;
				scroll-snap-align: start;
				transition: flex 0.5s ease, min-width 0.2s ease-out;
				min-height: 150px;
				min-width: 0px;
				
				@media (width<1024px) {
					min-height: initial;
					min-width: 300px;
				}

				> .aspect-ratio-fix {
					aspect-ratio: 1.7777;
					height: 100%;
					position: absolute;

					iframe {
						height: 100%;
						left: 0;
						object-fit: cover;
						object-position: center center;
						position: absolute;
						transform: translateX(-21%);
						transition: scale 0.3s ease, transform 0.3s ease;
						width: 100%;
					}

					&:hover {
						iframe {
							@media (prefers-reduced-motion: no-preference) {
								scale: 1.05;
							}
						}
					}
				}

				> :is(img, object, svg, video, iframe) {
					aspect-ratio: 1;
					display: block;
					height: 100%;
					object-fit: cover;
					object-position: center center;
					transition: scale 0.3s ease;
					width: 100%;
	
					@media (prefers-reduced-motion: reduce) {
						animation-play-state: paused; /* stop animated SVGs from playing */
					}
				}
				
				> :is(img, object, svg) {
					pointer-events: none;
				}

				&:hover {
					> :is(img, object, svg, video, iframe) {
						@media (prefers-reduced-motion: no-preference) {
							scale: 1.05;
						}
					}
				}
				
				@media (width >= 1024px) and (prefers-reduced-motion: no-preference) {
					&:nth-child(1):hover {
						flex: 1.75 1 0%;
					}
					&:nth-child(2):hover {
						flex: 1.75 1 0%;
					}
					&:nth-child(3):hover {
						flex: 1.75 1 0%;
					}
					&:nth-child(4):hover {
						flex: 1.75 1 0%;
					}
				}
			}
			
			@media (width >= 1024px) and (prefers-reduced-motion: no-preference) {
				&:has(.slide:hover) {
					.slide:not(:hover) {
						> .aspect-ratio-fix {
							iframe {
								transform: translateX(-26%);
							}
						}
					}
					.slide:hover {
						> .aspect-ratio-fix {
							iframe {
								transform: translateX(-9%);
							}
						}
					}
				}
			}
			
		}
	}
}

/* ========================================= *\
 * TEXT WITH CTAs
\* ========================================= */
section.text-with-ctas {
	.content {
		color: var(--lighter-text-color);
		font-size: clamp(1rem, 2.6667vw, 1.375rem);
		line-height: 1.37;
		max-width: 66.6667%;
		padding-block: 50px;

		@media (width<40rem) {
			max-width: none;
		}

		.h2-style {
			color: var(--dark-text-color);
			font-size: clamp(1.6rem, 8.181vw, 2.5rem);
			line-height: 1.15;
		}
		
		.text.large {
			font-size: clamp(1.5rem, 8.181vw, 2.25rem);
		}

		.ctas {
			display: grid;
			gap: 15px;
		}
	}
}

/* ========================================= *\
 * TEXT HERO (see also TEXT WITH CTAs, above)
\* ========================================= */
section.text-hero {
	.content {
		max-width: min(66.6667%, 980px);
		font-size: clamp(1.5rem, 8.181vw, 2.25rem);
		line-height: 1.4;

		@media (width<40rem) {
			max-width: none;
		}

		.text {
			> :is(p,h1,h2,h3,h4,h5,h6,ul,ol) {
				font-size: clamp(1.5rem, 8.181vw, 2.25rem);
				line-height: 1.4;
			}
		}

		section.text-with-ctas:first-child & {
			padding-block-start: clamp(50px, 20vmin, 150px);
		}
	}
}

/* ========================================= *\
 * COLLABORATIONS
\* ========================================= */
section.collaborations {
	.content {

		.header {
			align-items: end;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			gap: 30px;
			margin-block-end: 2em;

			.h2-style {
				color: var(--dark-text-color);
				font-size: clamp(1.6rem, 8.181vw, 2.5rem);
				line-height: 1.15;
				margin-block-start: revert;
				margin-block-end: 0;
			}

			.cta {
				margin-block-end: 0.15em;
			}
		}

		.collaborations {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			grid-template-rows: auto;
			grid-auto-rows: auto;
			gap: var(--standard-gap);
			grid-template-areas: 
				"one one two"
				"three four four";
				
			@media (width<480px) {
				display: block;
			}

			.collaboration {
				border-radius: 6px;
				display: block;
				overflow: clip;
				position: relative;
				scroll-snap-align: start;

				@media (width<480px) {
					&:not(:first-child) {
						margin-block-start: var(--standard-gap);
					}
				}
				> .aspect-ratio-fix {
					aspect-ratio: 1.7777;
					left: 50%;
					position: absolute;
					top: 50%;
					transform: translate(-50%, -50%);

					iframe {
						height: 100%;
						inset: 0;
						object-fit: cover;
						object-position: center center;
						position: absolute;
						transition: scale 0.3s ease;
						width: 100%;

						&:hover {
							@media (prefers-reduced-motion: no-preference) {
								scale: 1.05;
							}
						}
					}
				}

				> :is(img, object, svg, video, iframe) {
					display: block;
					height: 100%;
					object-fit: cover;
					object-position: center center;
					transition: scale 0.3s ease;
					width: 100%;

					@media (prefers-reduced-motion: reduce) {
						animation-play-state: paused; /* stop animated SVGs from playing */
					}

					&:hover {
						@media (prefers-reduced-motion: no-preference) {
							scale: 1.05;
						}
					}
				}

				&:nth-child(1) {
					aspect-ratio: 2;
					grid-area: one;
					width: 100%;

					&:not(:has(> .aspect-ratio-fix)) {
						height: 100%;
					}

					> .aspect-ratio-fix {
						height: auto;
						width: 100%;
					}

					> :is(img, object, svg, video, iframe) {
						aspect-ratio: 2;
					}
				}
				&:nth-child(2) {
					aspect-ratio: 1;
					grid-area: two;
					height: 100%;
					width: 100%;

					> .aspect-ratio-fix {
						height: 100%;
						width: auto;
					}

					> :is(img, object, svg, video, iframe) {
						aspect-ratio: 1;
					}
				}
				&:nth-child(3) {
					aspect-ratio: 1;
					grid-area: three;
					height: 100%;
					width: 100%;

					> .aspect-ratio-fix {
						height: 100%;
						width: auto;
					}

					> :is(img, object, svg, video, iframe) {
						aspect-ratio: 1;
					}
				}
				&:nth-child(4) {
					aspect-ratio: 2;
					grid-area: four;
					width: 100%;

					&:not(:has(> .aspect-ratio-fix)) {
						height: 100%;
					}

					> .aspect-ratio-fix {
						height: auto;
						width: 100%;
					}

					> :is(img, object, svg, video, iframe) {
						aspect-ratio: 2;
					}
				}
			}
		}
	}
}

/* ========================================= *\
 * FULL COLLABORATIONS
\* ========================================= */
section.full-collaborations {
	.content {
		.collaborations {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			grid-template-rows: auto;
			grid-auto-rows: auto;
			gap: var(--standard-gap);
			grid-template-areas: 
				"one two two";

			@media (width<480px) {
				display: block;
				grid-template-areas: 
					"one"
					"two";
			}

			+ .collaborations {
				margin-block-start: var(--standard-gap);
			}

			&:has(.collaboration:nth-child(3)) {
				grid-template-areas: 
					"one two two"
					"three four five";

				@media (width<480px) {
					grid-template-areas: 
						"one"
						"two"
						"three"
						"four"
						"five";
				}
			}

			&:has(.collaboration:nth-child(6)) {
				grid-template-areas: 
					"one two two"
					"three four five"
					"six six seven";

				@media (width<480px) {
					grid-template-areas: 
						"one"
						"two"
						"three"
						"four"
						"five"
						"six"
						"seven";
				}
			}

			&:has(.collaboration:nth-child(8)) {
				grid-template-areas: 
					"one two two"
					"three four five"
					"six six seven"
					"eight nine ten";

				@media (width<480px) {
					grid-template-areas: 
						"one"
						"two"
						"three"
						"four"
						"five"
						"six"
						"seven"
						"eight"
						"nine"
						"ten";
				}
			}
			
			.collaboration {
				color: var(--collaboration-text-color);
				display: block;
				font-size: 1.375rem;
				font-weight: 500;
				overflow: clip;
				position: relative;
				scroll-snap-align: start;
				text-decoration: none;
				text-transform: none;

				@media (width<480px) {
					&:not(:first-child) {
						margin-block-start: var(--standard-gap);
					}
				}

				.zoomer {
					border-radius: 6px;
					overflow: clip;

					> .aspect-ratio-fix {
						aspect-ratio: 1.7777;
						left: 50%;
						position: absolute;
						top: 50%;
						transform: translate(-50%, -50%);

						iframe {
							height: 100%;
							inset: 0;
							object-fit: cover;
							object-position: center center;
							position: absolute;
							transition: scale 0.3s ease;
							width: 100%;

							&:hover {
								@media (prefers-reduced-motion: no-preference) {
									scale: 1.05;
								}
							}
						}
					}

					> :is(img, object, svg, video, iframe) {
						display: block;
						height: auto;
						object-fit: cover;
						object-position: center center;
						transition: scale 0.3s ease;
						width: 100%;

						@media (prefers-reduced-motion: reduce) {
							animation-play-state: paused; /* stop animated SVGs from playing */
						}

						&:hover {
							@media (prefers-reduced-motion: no-preference) {
								scale: 1.05;
							}
						}
					}
				}

				&:nth-child(1) {
					grid-area: one;
					width: 100%;

					.zoomer > .aspect-ratio-fix {
						height: auto;
						width: 100%;
					}

					.zoomer > :is(img, object, svg, video, iframe) {
						aspect-ratio: 1;
					}
				}
				&:nth-child(2) {
					grid-area: two;
					height: 100%;
					width: 100%;

					.zoomer > .aspect-ratio-fix {
						height: 100%;
						width: auto;
					}

					.zoomer > :is(img, object, svg, video, iframe) {
						aspect-ratio: 3 / 2;
					}
				}
				&:is(:nth-child(3), :nth-child(4), :nth-child(5)) {
					height: 100%;
					width: 100%;

					.zoomer > .aspect-ratio-fix {
						height: 100%;
						width: auto;
					}

					.zoomer > :is(img, object, svg, video, iframe) {
						aspect-ratio: 1;
					}
				}
				&:nth-child(3) {
					grid-area: three;
				}
				&:nth-child(4) {
					grid-area: four;
				}
				&:nth-child(5) {
					grid-area: five;
				}
				&:nth-child(6) {
					grid-area: six;
					height: 100%;
					width: 100%;

					.zoomer > .aspect-ratio-fix {
						height: 100%;
						width: auto;
					}

					.zoomer > :is(img, object, svg, video, iframe) {
						aspect-ratio: 3 / 2;
					}
				}
				&:nth-child(7) {
					grid-area: seven;
					width: 100%;

					&:not(:has(> .aspect-ratio-fix)) {
						height: 100%;
					}

					.zoomer > .aspect-ratio-fix {
						height: auto;
						width: 100%;
					}

					.zoomer > :is(img, object, svg, video, iframe) {
						aspect-ratio: 1;
					}
				}
				&:is(:nth-child(8), :nth-child(9), :nth-child(10)) {
					height: 100%;
					width: 100%;

					.zoomer > .aspect-ratio-fix {
						height: 100%;
						width: auto;
					}

					.zoomer > :is(img, object, svg, video, iframe) {
						aspect-ratio: 1;
					}
				}
				&:nth-child(8) {
					grid-area: eight;
				}
				&:nth-child(9) {
					grid-area: nine;
				}
				&:nth-child(10) {
					grid-area: ten;
				}

				> .client-name {
					font-size: 1.375rem;
					font-weight: 500;
					margin-block: 0.5em;
					text-decoration: none;
					text-transform: none;

					@media (width>=480px) and (width<42.5rem) { /* 680px */
						font-size: clamp(1rem, 2.6667vw, 1.375rem);
					}
				}

				.blurb {
					color: var(--collaboration-hover-text-color);
					font-size: 1.375rem;
					font-weight: 500;
					margin-block: 0.5em 0;
					padding-block-end: 0.0625rem;
					text-decoration: none;
					text-transform: none;
					transition: opacity 0.3s ease, visibility 0s linear 0.3s;
					
					@media (hover: hover) and (prefers-reduced-motion: no-preference) {
						opacity: 0;
						visibility: hidden;
					}

					@media (width>=480px) and (width<42.5rem) { /* 680px */
						font-size: clamp(1rem, 2.6667vw, 1.375rem);
					}
				}

				&:is(:hover, :focus-visible) {
					.blurb {
						opacity: 1;
						transition: opacity 0.3s ease, visibility 0s linear 0s;
						visibility: visible;
					}
				}
			}
		}
	}
}

/* ========================================= *\
 * ACCORDION (see also TEXT WITH CTAs, above)
\* ========================================= */
section.accordion {
	.content {
		max-width: none;

		details {
			appearance: none;
			border-top: 1px solid var(--divider-line-color);

			&:last-child {
				border-bottom: 1px solid var(--divider-line-color);
			}

			summary {
				background-position: right 0.3125rem center;
				background-repeat: no-repeat;
				background-size: 1.5625rem 1.5625rem;
				color: var(--dark-text-color);
				cursor: pointer;
				display: flex;
				font-size: 2rem;
				font-weight: 400;
				justify-content: space-between;
				padding-block: 0.5em;

				@media (width<42.5rem) { /* 680px */
					font-size: clamp(1rem, 5.7143vw, 2rem);
				}

				&::marker {
					content: '';
				}
				
				> :is(h1,h2,h3,h4,h5,h6) {
					font-size: 2rem;
					font-weight: 400;
					margin-block: 0;
				}

				details[open] & {
					background-image: url('../img/minus.svg');
				}
				details[open] &:is(:hover, :focus-visible) {
					background-image: url('../img/minus-hover.svg');
				}
				details:not([open]) & {
					background-image: url('../img/plus.svg');

				}
				details:not([open]) &:is(:hover, :focus-visible) {
					background-image: url('../img/plus-hover.svg');
				}
			}

			.accordion-section-content {
				color: var(--lighter-text-color);
				display: grid;
				font-size: 1.125rem;
				column-gap: 1rem;
				line-height: 1.45;
				grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
				grid-template-areas:
					"blurb points";
				row-gap: 1rem;
				
				@media (width<56.25rem) { /* 900px */
					grid-template-columns: 1fr;
					grid-template-areas:
						"blurb"
						"points";
				}

				.blurb {
					font-weight: 500;
					grid-area: blurb;
					max-width: min(80%, 360px);

					@media (width<900px) {
						max-width: none;
					}
				}

				.accordion-section-details {
					font-weight: 400;
					grid-area: points;
					padding-block-end: 50px;

					> :is(p, ul, ol):first-child {
						margin-block-start: 0;
					}

					ul {
						columns: 2;
						list-style: none;
						padding: 0;
						
						@media (width<30rem) { /* 480px */
							columns: initial;
						}
						
						li {
							text-indent: -1em;
							margin-inline-start: 1em;
						}
					}

					ol {
						columns: 2;

						@media (width<30rem) { /* 480px */
							columns: initial;
						}
					}
				}
			}
		}
	}
}

/* ========================================= *\
 * TEAM (see also TEXT WITH CTAs, above)
\* ========================================= */
section.team {
	.content {
		max-width: none;

		.h2-style {
			margin-block-end: 2em;
		}

		.team-members {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
			gap: var(--standard-gap);

			@media (width<900px) {
				grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
			}

			.team-member {
				overflow: clip;

				.text-content {
					.h3-style {
						color: var(--dark-text-color);
						font-size: clamp(1rem, 5.7143vw, 2rem);
						font-weight: 500;
						line-height: 1.45;
						margin-block: 0.5em;
						text-transform: none;

						.title {
							color: var(--lighter-text-color);
							font-size: clamp(0.5625rem, 3.7143vw, 1.125rem);
						}

					}

					a.linkedin {
						display: inline-block;
						height: 32px;
						position: relative;
						width: 32px;

						&::before {
							background-image: url('../img/linkedin.svg');
							background-position: center center;
							background-repeat: no-repeat;
							background-size: 32px 32px;
							content: '';
							inset: 0;
							opacity: 1;
							position: absolute;
							transition: opacity 0.3s ease;
						}
						&::after {
							background-image: url('../img/linkedin-hover.svg');
							background-position: center center;
							background-repeat: no-repeat;
							background-size: 32px 32px;
							content: '';
							inset: 0;
							opacity: 0;
							position: absolute;
							transition: opacity 0.3s ease;
						}

						&:is(:hover, :focus-visible)::before {
							opacity: 0;
						}
						&:is(:hover, :focus-visible)::after {
							opacity: 1;
						}
					}
				}

				.photos {
					border-radius: 8px;
					display: grid;
					position: relative;
					overflow: clip;

					:is(img, object, svg) {
						aspect-ratio: 1;
						height: auto;
						max-width: 100%;
						object-fit: cover;
						object-position: center center;
						transition: opacity 0.3s ease, scale 0.3s ease, visibility 0s linear 0s;
						visibility: visible;
						width: 100%;
					}
					:is(img, object, svg).on-hover {
						opacity: 0;
						visibility: hidden;
						position: absolute;
						transition: opacity 0.3s ease, scale 0.3s ease, visibility 0s linear 0.3s;
						inset: 0;
					}

				}

				&:hover {
					:is(img, object, svg) {
						@media (prefers-reduced-motion: no-preference) {
							scale: 1.05;
						}
					}
				}

				&:has(:is(img, object, svg).on-hover):hover {
					:is(img, object, svg).primary {
						opacity: 0;
						transition: opacity 0.3s ease, scale 0.3s ease, visibility 0s linear 0.3s;
						visibility: hidden;
					}
					:is(img, object, svg).on-hover {
						opacity: 1;
						transition: opacity 0.3s ease, scale 0.3s ease, visibility 0s linear 0s;
						visibility: visible;
					}
				}

			}
		}
	}
}

/* =============================================== *\
 * IMAGE TYPE : FREEFORM / FULL-WIDTH / TWO-COLUMN
\* =============================================== */
section.image-type {
	padding-block: var(--gutter-width) calc(2 * var(--gutter-width));

	&:has(+ section.image-type) {
		margin-block-end: 0;
	}

	.content {
		display: grid;

		:is(img, object, svg) {
			display: block;
			width: 100%;
		}
	}
}

section.full-width-image {
	padding-block-end: var(--gutter-width);

	section:is(.with-bg-color, .full-width-image, .full-width-video) + & {
		padding-block-start: 0;
	}

	&:has(+ section.with-bg-color, + section.full-width-image, + section.full-width-video) {
		padding-block-end: 0;
		margin-block-end: 0;
	}

	.content {
		margin-inline: 0;

		&:has(img.vertical, object.vertical) {
			@media (width>=640px) or (aspect-ratio>=1) {
				:is(img, object, svg).vertical {
					display: none;
				}
				:is(img, object, svg).standard {
					display: block;
				}
			}

			@media (width<640px) and (aspect-ratio<1) {
				:is(img, object, svg).vertical {
					display: block;
				}
				:is(img, object, svg).standard {
					display: none;
				}
			}
		}
	}
}

section.two-column-image {
	.content {
		gap: 30px;
		grid-template-columns: repeat(2, minmax(0, 1fr));

		@media (width<640px) {
			grid-template-columns: 1fr;
		}
	}
}

/* =============================================== *\
 * FULL-WIDTH VIDEO
\* =============================================== */
section.full-width-video {
	padding-block-end: 0;
	
	&:not(section:is(.image-type, .with-bg-color) + section.full-width-video) {
		padding-block-end: var(--gutter-width);
	}

	section:is(.with-bg-color, .full-width-image, .full-width-video) + & {
		padding-block-start: 0;
	}

	&:has(+ section.with-bg-color, + section.full-width-image, + section.full-width-video) {
		padding-block-end: 0;
		margin-block-end: 0;
	}

	.content {
		margin-inline: 0;

		&:has(> .vertical) {
			@media (width>=640px) or (aspect-ratio>=1) {
				> .vertical {
					display: none;
				}
				> .standard {
					display: block;
				}
			}

			@media (width<640px) and (aspect-ratio<1) {
				> .vertical {
					display: block;
				}
				> .standard {
					display: none;
				}
			}
		}

		> * {
			width: 100%;
		}
	}
}

/* ========================================= *\
 * BACKGROUND COLOR configurable
\* ========================================= */
section.with-bg-color {
	margin-block-end: 0;
	padding-block: calc(2 * var(--gutter-width));

	section.with-bg-color + &.with-bg-color.has-same-bg-as-prev-sibling {
		padding-block-start: 0;
	}
}

/* ========================================= *\
 * TESTIMONIAL
\* ========================================= */
section.testimonial {
	background-color: var(--testimonial-background-color);
	padding-block: calc(2 * var(--gutter-width));

	.content {
		color: var(--testimonial-font-color);
		max-width: calc(690px + (2 * var(--gutter-width)));
		margin-inline: auto;
		padding-inline: var(--gutter-width);

		:is(img, object, svg){
			max-width: 100%;

			&.is-2x {
				height: var(--image-half-height);
			}
		}

		.text {
			font-family: var(--secondary-font-family);
			font-style: italic;
			font-size: 1.875rem;
			line-height: 1.27;
		}

		.attribution {

			.name {
				font-size: 1.375rem;
				font-weight: 500;
				margin-block-end: 0;

				.title {
					font-size: 1.125rem;
					font-weight: 400;
					line-height: 1.45;
				}
			}
		}
	}
}

/* ========================================= *\
 * PAGE: SINGLE PORTFOLIO
\* ========================================= */
body.single-portfolio {
	header.site-header {
		background-color: transparent;
		position: absolute;
		width: 100%;
		z-index: 1;

		@media only screen and (width>=44rem) { /* 704px */
			#header-nav {
				ul {
					li {
						a {
							color: var(--dark-header-font-color);
						}
					}
				}
			}
		}
	}
	
	section:is(.image-type, .with-bg-color):last-child {
		margin-block-end: 0;
	}
	
	section.portfolio-hero {
		--bg-image-fit: cover;
		--bg-image-anchor: center center;
		
		background-color: var(--dark-header-background-color);
		color: var(--dark-header-font-color);
		position: relative;

		.background {
			aspect-ratio: 1;
			height: 100%;
			inset: 0;
			object-fit: var(--bg-image-fit);
			object-position: var(--bg-image-anchor);
			position: absolute;
			width: 100%;
			
			@media (prefers-reduced-motion: no-preference) {
				top: calc(var(--scroll-y-position) * 0.8);
				transition: top 0.02s linear;
			}
		}

		&:has(.background.vertical) {
			@media (width>=640px) or (aspect-ratio>=1) {
				.background.vertical {
					display: none;
				}
				.background.standard {
					display: block;
				}
			}

			@media (width<640px) and (aspect-ratio<1) {
				.background.vertical {
					display: block;
				}
				.background.standard {
					display: none;
				}
			}
		}

		.content {
			position: relative;
			min-height: calc(100svh - var(--wp-admin--admin-bar--height));

			.hero-text {
				bottom: var(--gutter-width);
				left: 0;
				max-width: 100%;
				position: absolute;
				width: 500px;

				.client {
					font-size: 1.375rem;
					font-weight: 500;
					text-transform: none;
				}

				.statement {
					font-size: 2.5rem;
					font-weight: 800;
					line-height: 1.15;
					
					@media (width<480px) {
						font-size: clamp(1.6rem, 8.181vw, 2.5rem);
					}
				}

				.hero-points {
					font-size: 1.125rem;
					font-weight: 400;
					line-height: 1.45;
				}

				> :last-child {
					margin-block-end: 0;
				}
			}
		}
	}

	section.portfolio-intro {
		.content {
			display: grid;
			gap: 30px;
			grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
			padding-block: 60px;

			@media (width<50rem) { /* 800px */
				grid-template-columns: 1fr;
			}

			.left {
				color: var(--lighter-text-color);
				font-size: 1.375rem;
				line-height: 1.37;
				max-width: 980px;

				> :is(p, ul, ol):first-child {
					margin-block-start: 0;
				}
			}

			.right {
				color: var(--lighter-text-color);
				font-size: 1.125rem;
				line-height: 1.45;
				margin-inline: auto;
				max-width: 250px;

				@media (width<50rem) { /* 800px */
					margin-inline: 0px;
					max-width: none;
				}

				h2 {
					color: var(--lighter-text-color);
					font-size: 1.125rem;
					font-weight: 400;
					line-height: 1.45;
					margin-block-end: 2em;
					text-transform: none;

					.client-name {
						color: var(--darker-text-color);
						font-size: 1.375rem;
						font-weight: 500;
						margin-block-start: 0.5em;
					}
				}

				.points {
					ul {
						list-style: none;
						padding: 0;
					}

					> :is(p, ul, ol):last-child {
						margin-block-end: 0;
					}
				}
			}
		}
	}
}