/***********************************************************************************
* Moxxie responsive styles
*
* Media queries are kept separate from theme.css to keep the base stylesheet
* easier to scan. Keep breakpoint order unchanged unless there is a clear reason.
***********************************************************************************/

@media screen and (max-width: 959px) {
	.moxxie-home .home-shell {
		width: calc(100% - 40px);
	}
	
	.home-hero {
		padding: 70px 0 32px;
	}
	
	.home-hero-inner {
		min-height: 0;
		display: block;
		padding-bottom: 250px;
	}
	
	.home-hero-copy {
		width: 100%;
	}
	
	.home-hero h1 {
		font-size: 52px;
	}
	
	.home-hero-art {
		width: 92%;
		right: -30%;
		top: auto;
		bottom: -70px;
		transform: none;
	}
	
	.home-stats-inner {
		flex-wrap: wrap;
	}
	
	.home-stat {
		width: 50%;
		margin: 10px 0;
	}
	
	.home-stat:nth-child(2) {
		border-right: 0;
	}
	
	.home-projects {
		padding: 64px 0;
	}
	
	.home-project-grid {
		flex-direction: column;
	}
	
	.home-project-card {
		width: 100%;
	}
	
	.home-cta-inner {
		display: block;
	}
	
	.home-cta-inner>div:first-child,
	.home-cta-action {
		width: 100%;
	}
	
	.home-cta-action {
		margin-top: 28px;
	}
	
	.home-section-head h2,
	.home-cta h2 {
		font-size: 40px;
	}
	
	.moxxie-home main {
		width: 100%;

		margin-right: 0;
		margin-left: 0;
	}
	
	.moxxie-home main > :not(.alignfull) {
		width: calc(100% - (2 * var(--mox-gutter)));

		margin-right: auto;
		margin-left: auto;
	}
	
	.moxxie-home-hero {
		min-height: 0;
		padding: 60px 0 30px;
	}
	
	.moxxie-home-hero h1 {
		font-size: 3.125em;
	}
	
	.moxxie-featured-projects {
		margin: 64px 0;
	}
	
	
	.moxxie-featured-projects__head h2 {
		font-size: 2.8em;
	}
	
	.moxxie-testimonial-block {
		display: block;
		padding: 0;
		width: calc(100% - 40px);
		max-width: none;
		margin: 64px auto;
	}
	
	.moxxie-testimonial-block > h2 {
		margin-bottom: 26px;
		margin: 5px 0 16px;
		font-size: 15px;
	}
	
	.moxxie-testimonial-block__quote {
		display: block;
		padding-left: 36px;
	}
	
	.moxxie-testimonial-block__quote::before {
		top: -4px;
		transform: none;
		font-size: 48px;
	}
	
	.moxxie-testimonial-block__quote figcaption {
		align-items: flex-start;
		flex-direction: column;
		gap: 3px;
		text-align: left;
		margin-top: 14px;
		padding: 0;
		border-left: 0;
	}
	
	.moxxie-testimonial-block__quote figcaption span::before {
		content: "";
	}
	
	.moxxie-testimonial-block__quote blockquote {
		font-size: 14px;
		line-height: 1.5;
	}
	
	.moxxie-testimonial-block__inner {
		min-height: 0;
		display: block;
		width: auto;
		max-width: none;
		margin: 0 20px;
		padding: 42px 0;
	}
	
	.moxxie-testimonial-block__label > h2 {
		margin: 4px 0 18px;
		font-size: 14px;
	}
	
	.projects-filters-wrap.has-overflow .projects-filter-nav {
		display: flex;
	}
	
	.moxxie-title-block {
		padding-left: 0;
		padding-right: 0;
	}
	
	.mox-section-heading {
		align-items: flex-start;
		flex-direction: column;
	}
	
	.moxxie-contact-cta-inner {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.moxxie-contact-cta-action {
		width: 100%;
		margin-top: 28px;
		display: flex;
		justify-content: flex-start;
	}
	
	.moxxie-contact-cta-action .moxxie-contact-cta-button {
		width: auto;
		max-width: 100%;
	}

	/***********************************************************************************
	* Navigation
	***********************************************************************************/
	#navigation.mobile-menu-last-item-enabled .menu > li:last-child > a {
		font-weight: 600;

		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 8px;
	}

	#navigation.mobile-menu-last-item-enabled .menu > li:last-child > a::after {
		margin-left: 0;

		font-family: "FAwesome";
		font-size: .78em;

		content: "";

		transition: transform var(--mox-transition);
	}

	#navigation.mobile-menu-last-item-enabled.mobile-menu-last-item-style-color .menu > li:last-child > a {
		color: var(--mox-primary);
	}

	#navigation.mobile-menu-last-item-enabled.mobile-menu-last-item-style-color .menu > li:last-child > a:is(:hover, :focus-visible) {
		color: var(--mox-primary-hover);
	}

	#navigation.mobile-menu-last-item-enabled .menu > li:last-child > a:is(:hover, :focus-visible)::after {
		transform: translateX(3px);
	}

	#navigation.mobile-menu-last-item-enabled.mobile-menu-last-item-style-button .menu > li:last-child > a,
	#navigation.mobile-menu-last-item-enabled.mobile-menu-last-item-style-pill .menu > li:last-child > a {
		width: fit-content;

		margin: 12px 20px 0;

		padding: 10px 16px;

		font-weight: 700;
		color: var(--mox-white);

		background: var(--mox-primary);

		border-style: solid;
		border-width: 0 0 4px;
		border-color: var(--mox-button-accent);

		transform: translateY(0);

		transition: border-color var(--mox-transition), transform var(--mox-transition);
	}

	#navigation.mobile-menu-last-item-enabled.mobile-menu-last-item-style-button .menu > li:last-child > a {
		border-radius: var(--mox-radius);
	}

	#navigation.mobile-menu-last-item-enabled.mobile-menu-last-item-style-pill .menu > li:last-child > a {
		border-radius: var(--mox-radius-pill);
	}

	#navigation.mobile-menu-last-item-enabled.mobile-menu-last-item-style-button.mobile-menu-last-item-width-full .menu > li:last-child > a,
	#navigation.mobile-menu-last-item-enabled.mobile-menu-last-item-style-pill.mobile-menu-last-item-width-full .menu > li:last-child > a {
		width: calc(100% - 40px);

		justify-content: space-between;
	}

	#navigation.mobile-menu-last-item-enabled.mobile-menu-last-item-style-button .menu > li:last-child > a:is(:hover, :focus-visible),
	#navigation.mobile-menu-last-item-enabled.mobile-menu-last-item-style-pill .menu > li:last-child > a:is(:hover, :focus-visible) {
		color: var(--mox-white);

		border-color: var(--mox-primary-deep);

		transform: translateY(-2px);
	}

}

@media screen and (max-width: 759px) {
	#footer .footer-links h4,
	#footer .footer-socials h4 {
		margin-bottom: 14px;
	}

	#footer .footer-social-links {
		max-width: 168px;

		display: grid;
		gap: 8px;
		grid-template-columns: repeat(auto-fit, 36px);
	}

	#footer .footer-social-links a {
		width: 36px;
		height: 36px;
	}
}

@media screen and (min-width: 760px) and (max-width: 959px) {
	.moxxie-featured-projects__grid {
		gap: 16px;
	}

	.moxxie-featured-project-card {
		width: calc((100% - 32px) / 3);
	}

	.moxxie-featured-project-card__body {
		padding: 15px 16px 17px;
	}

	.moxxie-featured-project-card__title {
		font-size: 18px;
	}


	#footer {
	padding-top: 72px;
}

	#footer .footer-bottom {
	margin-top: 58px;
	padding-top: 24px;
}


	.moxxie-scroll-top {
	right: 30px;
	bottom: 30px;
}

	#footer-wrapper {
	margin-top: 72px;
}
}

@media screen and (min-width: 768px) and (max-width: 959px) {
	.moxxie-web-benefits {
	padding: 38px 40px;
}
	
	.moxxie-web-benefits .wp-block-columns {
	display: flex;
	align-items: stretch;
}
	
	.moxxie-web-benefits .wp-block-column {
	padding: 4px 34px;

	border-right: 1px solid var(--mox-primary-dark-15);
	border-bottom: 0;

	flex: 1 1 0;
}
	
	.moxxie-web-benefits .wp-block-column:first-child {
	padding-top: 4px;
	padding-left: 0;
}
	
	.moxxie-web-benefits .wp-block-column:last-child {
	padding-right: 0;
	padding-bottom: 4px;

	border-right: 0;
}
	
	.moxxie-web-benefits .moxxie-web-benefit-number {
	font-size: 3.25rem;
}
	
	#footer .footer-bottom {
	width: 100%;

	text-align: center;

	align-items: center;
	justify-content: center;
}
	

}

@media (hover: hover) and (pointer: fine) {
	.moxxie-scroll-top:hover {
	border-color: var(--mox-primary-deep);

	transform: translateY(-2px) scale(1);
}
}

@media (max-width: 600px) {
	.wpcf7 {
	padding: 24px 18px;

	border-radius: 14px;
}

	.moxxie-site .wpcf7 input[type="submit"] {
	width: 100%;

	margin-left: 0;
}

	.moxxie-site .wpcf7 .contact-section:has(> .wpcf7-turnstile) > .wpcf7-submit {
	width: auto;
}
}

@media screen and (max-width: 782px) {
	body.moxxie-site.admin-bar {
	--mox-admin-bar-height: 46px;
}
}

@media (prefers-reduced-motion: reduce) {
	#navigation .mobile-menu-panel,
	.moxxie-admin-bar-toggle,
	.moxxie-scroll-top,
	body.moxxie-site.admin-bar #header-wrapper,
	body.moxxie-site.admin-bar #wpadminbar {
	transition: none;
}
}

@media screen and (max-width: 560px) {
	.home-hero h1 {
	font-size: 43px;
}
	
	.home-hero-intro {
	font-size: 18px;
}
	
	.home-stat {
	padding: 10px;
}
	
	.home-stat strong {
	font-size: 32px;
}
	
	.home-stat span {
	font-size: 14px;
}
	
	.home-hero-inner {
	padding-bottom: 205px;
}
	
	.home-hero-art {
	width: 110%;

	right: -45%;
	bottom: -50px;
}
}

@media screen and (min-width: 560px) and (max-width: 959px) {
	.project-detail-meta {
		display: grid;
		gap: 0 24px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (max-width: 620px) {
	.moxxie-site .wpcf7 .contact-section:has(> .wpcf7-turnstile) {
	align-items: center;
	justify-content: flex-start;
	gap: .75em .625em;
}

	.moxxie-site .wpcf7 .contact-section:has(> .wpcf7-turnstile) > p {
	flex: 0 0 100%;
}

	.moxxie-site .wpcf7 .contact-section:has(> .wpcf7-turnstile) > .wpcf7-submit {
	width: auto;

	margin: 0;

	flex: 0 0 auto;
	align-self: center;
	order: 2;
}

	.moxxie-site .wpcf7 .contact-section:has(> .wpcf7-turnstile) > .wpcf7-spinner {
	width: 24px;
	height: 24px;

	margin: 0;

	position: absolute;
	flex: 0 0 24px;
	align-self: center;
	order: 3;

	pointer-events: none;
}

	.moxxie-site .wpcf7 .contact-section:has(> .wpcf7-turnstile) > .wpcf7-turnstile {
	width: 200px;
	max-width: 200px;
	height: 44px;

	margin: 0 0 0 auto;

	position: relative;
	flex: 0 0 200px;
	align-self: center;
	order: 4;

	overflow: visible;
}

	.moxxie-site .wpcf7 .wpcf7-turnstile > div,
	.moxxie-site .wpcf7 .wpcf7-turnstile > iframe {
	width: 200px;
	max-width: 200px;
}

	.moxxie-site .wpcf7 .wpcf7-turnstile > div {
	width: 300px;
	max-width: none;
	height: 65px;

	transform: scale(.6667);
	transform-origin: left top;
}

	.moxxie-site .wpcf7 form .wpcf7-response-output {
	margin-top: 1em;
	padding: .9em 1em;

	font-size: .9em;
}
}

@media screen and (max-width: 640px) {
	.moxxie-site .fancybox-slide--image {
	padding-inline: 58px;
}

	.moxxie-site .fancybox-container .fancybox-navigation .fancybox-button {
	width: 48px;
	height: 48px;

	padding: 7px;
}

	.moxxie-site .fancybox-container .fancybox-navigation .fancybox-button > div,
	.moxxie-site .fancybox-container .fancybox-navigation .fancybox-button svg {
	width: 34px;
	height: 34px;
}

	.moxxie-site .fancybox-container .fancybox-navigation .fancybox-button--arrow_left {
	left: 7px;
}

	.moxxie-site .fancybox-container .fancybox-navigation .fancybox-button--arrow_right {
	right: 7px;
}
}

@media screen and (max-width: 760px) {
	.moxxie-featured-projects__grid {
		flex-direction: column;
	}

	.moxxie-featured-project-card {
		width: 100%;
	}

	.wpcf7 {
	margin-top: 35px;
}
	
	.wpcf7 form {
	padding-top: 28px;

	gap: 14px;
}
	
	.wpcf7 textarea {
	min-height: 200px;
}
	
	.wpcf7 input[type="submit"] {
	width: 100%;
}
	
	#quick-contact {
	margin-top: 30px;
}
	
	#quick-contact a {
	min-height: 68px;

	padding-left: 68px;
}
	
	#quick-contact a::before {
	width: 38px;
	height: 38px;

	left: 16px;
}
}

@media screen and (max-width: 520px) {
    .moxxie-404-actions {
	flex-direction: column;
}

    .moxxie-404-action {
	width: 100%;
}

    .moxxie-404-art {
	gap: 14px;
}
}

@media screen and (min-width: 540px) and (max-width: 679px) {
	.projects-grid {
		gap: 48px 16px;
	}

	.projects-grid .project-card {
		width: calc((100% - 16px) / 2);

		flex: 0 0 calc((100% - 16px) / 2);
	}

	.project-detail-related-card {
		width: calc((100% - 16px) / 2);
	}
}

@media screen and (min-width: 680px) and (max-width: 959px) {
	.projects-grid {
		gap: 52px 16px;
	}

	.projects-grid .project-card {
		width: calc((100% - 32px) / 3);

		flex: 0 0 calc((100% - 32px) / 3);
	}

	.project-detail-gallery-item {
		width: calc((100% - 20px) / 3);
	}

	.project-detail-related-card {
		width: calc((100% - 48px) / 4);
	}
}

@media screen and (min-width: 960px) {
	/***********************************************************************************
	* Shell / header
	***********************************************************************************/
	#content-wrapper {
		padding-top: 180px;
	}

	#header-wrapper .inner {
		max-width: var(--mox-container);

		display: flex;
		align-items: center;
		justify-content: center;
		gap: 16px;
	}

	#header-wrapper .logo {
		width: 140px;
		height: 120px;

		margin-left: 0;
	}
	
	#header-wrapper.scrolling #navigation .mobile-menu-panel {
		padding-top: 0px;
	}

	#header-wrapper.scrolling .logo {
		height: 60px;
	}

	.social-contacts {
		top: auto;
		right: 0;
		bottom: -40px;
		display: flex;
		gap: 10px;
	}

	.social-contacts a {
		width: 30px;
		height: 30px;
		font-size: 1em;
	}

	/***********************************************************************************
	* Navigation
	***********************************************************************************/
	#navigation {
		width: auto;
		min-width: 0;
		max-width: 100%;
		height: auto;

		padding: 0;

		background: transparent;

		position: relative;
		flex: 1 1 auto;

		z-index: 13;
		overflow: visible;
	}

	#navigation[class*="mobile-menu-animation-"] .mobile-menu-panel {
		width: 100%;
		min-width: 0;
		max-width: 100%;
		height: 100%;
		max-height: none;

		padding: 0;

		background: transparent;

		position: static;

		box-shadow: none;

		z-index: auto;
		overflow: visible;
		opacity: 1;
		transform: none;
		clip-path: none;
		visibility: visible;
		pointer-events: auto;

		transition: none;
	}

	#navigation .hamburger,
	#navigation .menu-logo {
		display: none;
	}

	#navigation .mobile-menu-panel > div {
		width: 100%;
		min-width: 0;
		max-width: 100%;
		height: 100%;
	}

	#navigation .menu {
		width: 100%;
		min-width: 0;
		height: 100%;

		margin: 0;

		text-align: left;

		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	#navigation .menu > li {
		position: relative;
		height: 100%;
		border: 0;
	}

	#navigation .menu > li > a {
		width: 100%;
		height: 100%;

		padding: 10px 18px;

		font-size: 1em;
		font-weight: 600;
		white-space: nowrap;
		color: var(--mox-dark);

		display: flex;
		position: relative;
		align-items: center;
		justify-content: center;
	}

	#navigation .menu > li > a::before {
		content: "";
		position: absolute;
		bottom: 3px;
		left: 50%;
		width: 0;
		height: 2px;
		border-radius: 3px;
		background: var(--mox-primary);
		transform: translateX(-50%);
		transition: width var(--mox-transition);
	}

	#navigation .menu > li:hover > a::before,
	#navigation .menu > li:focus-within > a::before,
	#navigation .menu > li.current-menu-item > a::before,
	#navigation .menu > li.current_page_parent > a::before {
		width: 30%;
	}

	#navigation .menu > li.menu-item-has-children > a {
		padding-right: 22px;
	}

	#navigation .menu > li.menu-item-has-children::before {
		height: 100%;

		font-family: "FAwesome";
		font-size: .5em;

		display: flex;
		position: absolute;
		top: 0;
		right: 6px;
		align-items: center;

		pointer-events: none;

		content: '\f078';
	}

	#navigation .menu > li.menu-item-has-children::after {
		content: "";
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		height: 14px;
	}

	#navigation .menu li > .sub-menu {
		position: absolute;
		top: calc(100% + 14px);
		left: 50%;
		display: none;
		min-width: 190px;
		padding: 12px;
		border: 1px solid var(--mox-primary-dark-10);
		border-radius: 18px;
		background: var(--mox-warm-white);
		transform: translateX(-50%);
	}

	#navigation .menu li:hover > .sub-menu,
	#navigation .menu li:focus-within > .sub-menu {
		display: block;
	}

	#navigation .menu .sub-menu::before {
		content: "";
		position: absolute;
		top: -8px;
		left: 50%;
		border-right: 8px solid transparent;
		border-bottom: 8px solid var(--mox-warm-white);
		border-left: 8px solid transparent;
		transform: translateX(-50%);
	}

	#navigation .menu .sub-menu li::before {
		display: none;
	}

	#navigation .menu .sub-menu a {
		padding: 10px 15px;
		font-size: .8em;
		white-space: nowrap;
	}

	#navigation .menu > li:last-child > a {
		font-weight: 600;
		color: var(--mox-primary);

		display: flex;
		align-items: center;
		gap: 6px;
	}

	#navigation .menu > li:last-child > a::before {
		display: none;
	}

	#navigation .menu > li:last-child > a::after {
		margin-left: 0;

		font-family: "FAwesome";
		font-size: .72em;

		content: "";

		transition: transform var(--mox-transition);
	}

	#navigation .menu > li:last-child > a:is(:hover, :focus-visible) {
		color: var(--mox-primary-hover);
	}

	#navigation .menu > li:last-child > a:is(:hover, :focus-visible)::after {
		transform: translateX(3px);
	}

	/***********************************************************************************
	* Classic content / sidebar
	***********************************************************************************/
	#page {
		padding-block: 20px;
	}

	.has-sidebar #page {
		display: flex;
	}

	.has-sidebar #sidebar {
		display: block;
		width: 30%;
		padding-right: 25px;
	}

	.has-sidebar .float-right {
		width: 70%;
		padding-top: 42px;
	}

	#sidebar h2 {
		margin-top: 15px;
		font-size: 1em;
		text-align: left;
	}

	#sidebar .client-comment {
		font-style: italic;
	}

	#sidebar .client-name {
		text-align: right;
	}

	#sidebar .client-name span {
		display: block;
		color: var(--mox-primary);
	}

	#page .mox-children li,
	ul.projects-container li {
		flex-basis: calc(25% - 10px);
	}

	.slick-arrow {
		position: absolute;
		top: 50%;
		left: 100%;
		display: block;
		width: 50px;
		height: 100px;
		margin: -50px 0 0 5px;
		font-size: 0;
		line-height: 0;
		background: var(--mox-black-10) url('../assets/images/right.png') center / 50% no-repeat;
		cursor: pointer;
		transition: background-color var(--mox-transition), background-position var(--mox-transition);
	}

	.slick-arrow:hover {
		background-color: var(--mox-black-20);
		background-position: 70% center;
	}

	.slick-prev {
		left: -55px;
		margin-left: 0;
		background-image: url('../assets/images/left.png');
	}

	.slick-prev:hover {
		background-position: 30% center;
	}

	/***********************************************************************************
	* Home scroll hero
	***********************************************************************************/
	.moxxie-home-hero.moxxie-scroll-hero {
		--moxxie-hero-progress: 0;
		height: auto;
		min-height: 0;
		margin: 0;
		padding: 34px 0 24px;
		overflow: visible;
	}

	.moxxie-home-hero.moxxie-scroll-hero > .wp-block-columns {
		position: relative;
		display: flex;
		align-items: flex-start;
		min-height: 0;
		margin: 0;
		padding: 0;
		overflow: visible;
		isolation: isolate;
	}

	.moxxie-home-hero.moxxie-scroll-hero > .wp-block-columns::after {
		content: "";
		position: absolute;
		z-index: 3;
		bottom: 8px;
		left: 0;
		width: 6.3125em;
		height: 3px;
		background: var(--mox-primary);
		transform: scaleX(calc(.35 + (var(--moxxie-hero-progress) * .65)));
		transform-origin: left center;
		pointer-events: none;
	}

	.moxxie-home-hero.moxxie-scroll-hero > .wp-block-columns > .wp-block-column:first-child {
		position: relative;
		z-index: 2;
		align-self: flex-start;
		flex: 0 0 58%;
		width: 58%;
		padding: 12px 0 18px;
		transform: translate3d(0, calc(var(--moxxie-hero-progress) * -34px), 0);
		opacity: calc(1 - (var(--moxxie-hero-progress) * .18));
		will-change: transform, opacity;
	}

	.moxxie-home-hero.moxxie-scroll-hero > .wp-block-columns > .wp-block-column:last-child {
		position: relative;
		z-index: 1;
		align-self: flex-start;
		flex: 0 0 51%;
		width: 51%;
		max-width: 51%;
		margin: 0 -2vw -64px auto;
		overflow: visible;
		transform: translate3d(calc(var(--moxxie-hero-progress) * -70px), calc(var(--moxxie-hero-progress) * 54px), 0)
			rotate(calc(-5deg + (var(--moxxie-hero-progress) * 13deg)))
			scale(calc(.88 + (var(--moxxie-hero-progress) * .08)));
		transform-origin: 55% 50%;
		will-change: transform;
	}

	.moxxie-home-hero.moxxie-scroll-hero .wp-block-image,
	.moxxie-home-hero.moxxie-scroll-hero .wp-block-image figure {
		width: 118%;
		max-width: none;
		margin: 0 0 0 -9%;
		overflow: visible;
	}

	.moxxie-home-hero.moxxie-scroll-hero .wp-block-image img {
		display: block;
		width: 100%;
		max-width: none;
		height: auto;
		max-height: 500px;
		object-fit: contain;
	}

	.moxxie-home-hero.moxxie-scroll-hero h1 {
		max-width: 720px;
		margin-top: 0;
		line-height: .88;
		letter-spacing: -.06em;
	}

	.moxxie-home-hero.moxxie-scroll-hero .moxxie-home-eyebrow {
		margin: 0 0 18px;
	}

	/***********************************************************************************
	* Projects
	***********************************************************************************/
	.moxxie-projects-block {
		padding: 30px 20px 110px;
	}

	.projects-filters-wrap {
		margin-bottom: 45px;
	}

	.projects-filters {
		gap: 35px;

		overflow: visible;
	}

	.projects-grid {
		gap: 55px 20px;
	}

	.projects-grid .project-card {
		width: calc((100% - 60px) / 4);

		flex: 0 0 calc((100% - 60px) / 4);
	}

	.project-card-image {
		height: auto;
		aspect-ratio: 1 / 1;
	}

	/***********************************************************************************
	* Project detail
	***********************************************************************************/
	.project-detail-hero {
		padding: 45px 40px 70px;
	}

	.project-detail-hero-inner {
		flex-direction: row;
		align-items: stretch;
		gap: 55px;
	}

	.project-detail-visual {
		width: 64%;
		aspect-ratio: 16 / 10;
		padding: 0;
	}

	.project-detail-summary {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 36%;
		padding: 15px 0;
	}

	.project-detail-summary h1 {
		font-size: 2.8em;
	}

	.project-detail-story {
		flex-direction: row;
		align-items: flex-start;
		gap: 70px;
		padding: 70px 0px;
	}

	.project-detail-story-main {
		width: 64%;
	}

	.project-detail-gallery,
	.project-detail-related {
		padding-left: 0px;
		padding-right: 0px;
	}

	.project-detail-section-heading {
		width: 42%;
	}

	.project-detail-copy {
		width: 58%;
		max-width: 720px;
	}

	.project-detail-story-main .project-detail-section-heading,
	.project-detail-story-main .project-detail-copy {
		width: 100%;
		max-width: 760px;
	}

	.project-detail-story-main .project-detail-copy {
		margin-top: 28px;
	}

	.project-detail-highlights {
		width: 36%;
		max-width: 390px;
		padding: 34px;
	}

	.project-detail-story--full .project-detail-story-main,
	.project-detail-story--full .project-detail-story-main .project-detail-section-heading,
	.project-detail-story--full .project-detail-story-main .project-detail-copy {
		width: 100%;
		max-width: none;
	}

	.project-detail-gallery-heading,
	.project-detail-related-heading {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}

	.project-detail-gallery-list {
		gap: 12px;
	}

	.project-detail-gallery-item {
		width: calc((100% - 48px) / 5);
		aspect-ratio: 4 / 3;
	}

	.project-detail-related-wrap {
		margin-top: 70px;
		padding: 0px;
	}

	.project-detail-related-card {
		width: calc((100% - 48px) / 4);
	}

	.project-detail-cta.moxxie-contact-cta {
		margin-top: 110px;
	}

	/***********************************************************************************
	* Contact / services
	***********************************************************************************/
	.wpcf7 .contact-section > p > .wpcf7-spinner {
		margin-left: auto;
	}

	#quick-contact {
		flex-direction: row;
	}

	#quick-contact a {
		padding: 20px 20px 20px 75px;
		background-position: 20px center;
		background-size: auto 50%;
	}


	.moxxie-web-benefits {
		padding: 38px 40px;
	}

	.moxxie-web-benefits .wp-block-columns {
		display: flex;
		align-items: stretch;
	}

	.moxxie-site .moxxie-web-benefits .wp-block-column {
		flex: 1 1 0;
		padding: 4px 34px;
		border-right: 1px solid var(--mox-primary-dark-15);
		border-bottom: 0;
	}

	.moxxie-site .moxxie-web-benefits .wp-block-column:first-child {
		padding-left: 0;
	}

	.moxxie-site .moxxie-web-benefits .wp-block-column:last-child {
		padding-right: 0;
		border-right: 0;
	}

	.moxxie-web-benefits .moxxie-web-benefit-number {
		font-size: 3.25rem;
	}

	/***********************************************************************************
	* Contact CTA
	***********************************************************************************/
	.moxxie-contact-cta {
		margin-top: 110px;
	}

	.moxxie-contact-cta-inner {
		justify-content: space-between;
		gap: 5.5em;
		padding-block: 62px;
	}

	.moxxie-contact-cta-content {
		width: 66%;
		max-width: 650px;
	}

	.moxxie-contact-cta h2 {
		max-width: 650px;
		font-size: 3.525em;
		line-height: 1.05;
	}

	.moxxie-contact-cta-description {
		max-width: 570px;
	}

	.moxxie-contact-cta-action {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 34%;
		margin-top: 0;
	}

	/***********************************************************************************
	* Theme blocks
	***********************************************************************************/
	.moxxie-title-block {
		padding: 0 0 70px;
	}

	.moxxie-title-block-content {
		width: 65%;
		max-width: 760px;
		margin-left: 0;
	}

	.moxxie-title-block h1 {
		font-size: 4.9em;
	}

	.moxxie-title-tagline {
		font-size: 1.35em;
	}

	.moxxie-title-description {
		font-size: 1.05em;
	}

	.moxxie-title-twist {
		position: absolute;
		top: 40px;
		right: 20px;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 34%;
		height: calc(100% - 80px);
	}

	.moxxie-title-twist img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: center right;
	}

	.wp-block-columns:has(> .wp-block-column > .wp-block-moxxie-counter) {
		gap: 0;
	}

	.moxxie-site .wp-block-columns > .wp-block-column > .wp-block-moxxie-counter {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 132px;
		padding: 18px 28px;
		border-bottom: 0;
	}

	.moxxie-site .wp-block-columns > .wp-block-column + .wp-block-column > .wp-block-moxxie-counter {
		border-left: 1px solid var(--mox-primary-dark-15);
	}

	.moxxie-site .wp-block-moxxie-counter .moxxie-counter__number {
		font-size: 3.75em;
	}

	/***********************************************************************************
	* Footer
	***********************************************************************************/
	#footer .footer-main {
		grid-template-columns: 180px minmax(0, 1.4fr) minmax(120px, .8fr) auto;
		align-items: flex-start;
		gap: 42px;
	}

	#footer .footer-main::before {
		display: none;
	}

	#footer .footer-main.footer-main--no-socials {
		grid-template-columns: 180px minmax(0, 1.4fr) minmax(120px, .8fr);
	}

	#footer .footer-brand-column,
	#footer .footer-contact,
	#footer .footer-links,
	#footer .footer-socials,
	#footer .footer-main.footer-main--no-socials .footer-links {
		grid-column: auto;
		grid-row: auto;
	}


	/***********************************************************************************
	* 404
	***********************************************************************************/
	.moxxie-404-shell {
		min-height: 650px;
		padding: 70px 0 90px;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 70px;
	}

	.moxxie-404-copy {
		width: 54%;
	}

	.moxxie-404 h1 {
		font-size: 4.15em;
	}

	.moxxie-404-art {
		width: 42%;
		margin: 0;
	}
}