/*!
Theme Name: Cadguys
Theme URI: http://underscores.me/
Author: Dalma Lipcsei
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: cadguys
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Cadguys is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Small only */
@media screen and (max-width: 39.9375em) {}

/* Medium and up */
@media screen and (min-width: 40em) {}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {}

/* Large and up */
@media screen and (min-width: 64em) {}

/*** COLORS ***/
:root{
	--white: #FAFAFC;
	--black: #12151A;
	--red: #FF5369;
	--grey: #eaeaea;
	--transition: all .48s cubic-bezier(.65,0,.35,1);
	--hoverTransition: 150ms cubic-bezier(0.215,0.61,0.355,1);
}

/*** fonts ***/
/*

  font-family: "Funnel Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;

*/

/*********** GENERAL ***********/
.screen-reader-text {
	display: none;
}
.skip-link {
	display: none !important;
}
* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
			box-sizing: border-box;
}
body {
	font-family: 'Inter', sans-serif;
	color: var(--black);
	background: var(--white);
	overflow-x: hidden;
	transition: background-color 1s ease;
}
::-moz-selection { 
background-color: var(--red); 
color: #ffffff;
}

::selection {
background-color: var(--red);
color: #ffffff;
}

.full-width-img img,
.full-width-img video {
	width: 100%;
	object-fit: cover;
	border-radius: 8px;
}
/* adjust full width img WxH */
/* small and medium */
@media screen and (max-width: 63.9375em) {
	.full-width-img img,
	.full-width-img video {
		width: 100%;
		object-fit: cover;
	}
}
/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
	.full-width-img img,
	.full-width-img video {
		height: 350px;
	}
}
/* Small only */
@media screen and (max-width: 39.9375em) {
	.full-width-img img,
	.full-width-img video {
		height: 216px;
	}
}
/* Large and up */
@media screen and (min-width: 64em) {
	.full-width-img img,
	.full-width-img video {
		width: 100%;
		height: 476px;
		object-fit: cover;
		margin-bottom: 3rem;
	}
}

section {
	padding: 10vw 0;
}
section.no-padding-top {
	padding-top: 0;
}
.no-padding-top {
	padding-top: 0 !important;
}
.no-padding-bottom {
	padding-bottom: 0 !important;
}
.p-right-align {
	max-width: 475px;
	margin-left: auto !important;
}
.limit-paragraph-width {
	max-width: 690px;
}
.limit-paragraph-width.center {
	margin-right: auto;
	margin-left: auto;
}
.muted {
	color: #8a8a8a;
}

.no-min-height,
.wp-block-cover.no-min-height {
	min-height: unset;
}

.background-gradient {
	background: radial-gradient(circle at 92% 105%, rgba(39, 139, 209, 0.72) 0%, rgba(39, 139, 209, 0.28) 26%, transparent 54%), linear-gradient(145deg, #050607 0%, #0c1118 58%, #142234 100%);
	background-image: radial-gradient(circle at 92% 105%, rgba(39, 139, 209, 0.72) 0%, rgba(39, 139, 209, 0.28) 26%, transparent 54%), linear-gradient(145deg, rgb(5, 6, 7) 0%, rgb(12, 17, 24) 58%, rgb(20, 34, 52) 100%);
	background-position-x: initial, initial;
	background-position-y: initial, initial;
	background-size: initial, initial;
	background-repeat: initial, initial;
	background-attachment: initial, initial;
	background-origin: initial, initial;

}


/** responsive typography **/
body {
  /* No px! */
  --font-size-min: 15.14; 
  --font-size-max: 17;
  --font-view-min: 576;
  --font-view-max: 1280;

  /* The magic part */
  font-size: clamp(calc(var(--font-size-min) * 1px), calc((var(--font-size-min) * 1px) + (var(--font-size-max) - var(--font-size-min)) * ((100vw - (var(--font-view-min) * 1px)) / var(--font-view-max))), calc(var(--font-size-max) * 1px) ); 
  
  line-height: 1.6em;
  font-weight: 400;
}

mark {
	padding-right: 7px;
	padding-left: 7px;
}

.justify-center {
	justify-content: center !important; 
}

/** typography ***/
h1, .h1, h2, .h2 {
	margin: 0 0 2.5rem;
}

h3, .h3, h4, .h4, h6, .h6 {
	margin: 0 0 1.5rem;
}

h5, .h5 {
	margin: 0 0 1rem;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
	font-weight: 400;
	line-height: 1.2em;
	letter-spacing: -0.02em;
}

h1, .h1 {
	/* No px! */
	  --font-size-min: 45; 
	  --font-size-max: 95;
	  --font-view-min: 576;
	  --font-view-max: 1280;
	
	  /* The magic part */
	  font-size: clamp(calc(var(--font-size-min) * 1px), calc((var(--font-size-min) * 1px) + (var(--font-size-max) - var(--font-size-min)) * ((100vw - (var(--font-view-min) * 1px)) / var(--font-view-max))), calc(var(--font-size-max) * 1px) );
	  
}
h2, .h2 {
	/* No px! */
	  --font-size-min: 33; 
	  --font-size-max: 63;
	  --font-view-min: 576;
	  --font-view-max: 1280;
	
	  /* The magic part */
	  font-size: clamp(calc(var(--font-size-min) * 1px), calc((var(--font-size-min) * 1px) + (var(--font-size-max) - var(--font-size-min)) * ((100vw - (var(--font-view-min) * 1px)) / var(--font-view-max))), calc(var(--font-size-max) * 1px) );
	
}
h3, .h3 {
	/* No px! */
	  --font-size-min: 24; 
	  --font-size-max: 53;
	  --font-view-min: 576;
	  --font-view-max: 1280;
	
	  /* The magic part */
	  font-size: clamp(calc(var(--font-size-min) * 1px), calc((var(--font-size-min) * 1px) + (var(--font-size-max) - var(--font-size-min)) * ((100vw - (var(--font-view-min) * 1px)) / var(--font-view-max))), calc(var(--font-size-max) * 1px) );
	  
}
h4, .h4 {
	/* No px! */
	  --font-size-min: 20; 
	  --font-size-max: 43;
	  --font-view-min: 576;
	  --font-view-max: 1280;
	
	  /* The magic part */
	  font-size: clamp(calc(var(--font-size-min) * 1px), calc((var(--font-size-min) * 1px) + (var(--font-size-max) - var(--font-size-min)) * ((100vw - (var(--font-view-min) * 1px)) / var(--font-view-max))), calc(var(--font-size-max) * 1px) );
	
	font-weight: 500;
}
h5, .h5 {
	/* No px! */
	  --font-size-min: 18; 
	  --font-size-max: 30;
	  --font-view-min: 576;
	  --font-view-max: 1280;
	
	  /* The magic part */
	  font-size: clamp(calc(var(--font-size-min) * 1px), calc((var(--font-size-min) * 1px) + (var(--font-size-max) - var(--font-size-min)) * ((100vw - (var(--font-view-min) * 1px)) / var(--font-view-max))), calc(var(--font-size-max) * 1px) );
}
h6, .h6 {
	/* No px! */
	  --font-size-min: 16; 
	  --font-size-max: 24;
	  --font-view-min: 576;
	  --font-view-max: 1280;
	
	  /* The magic part */
	  font-size: clamp(calc(var(--font-size-min) * 1px), calc((var(--font-size-min) * 1px) + (var(--font-size-max) - var(--font-size-min)) * ((100vw - (var(--font-view-min) * 1px)) / var(--font-view-max))), calc(var(--font-size-max) * 1px) );
	  line-height: 1.5;
}
.font-weight-500,
.font-weight-500 * {
	font-weight: 400 !important;
}

/* reveal text */
.reveal-text {
	visibility: hidden;
}

.reveal-text .line {
	display: block;
	overflow: hidden;
}

.reveal-text .line-inner {
	display: block;
	will-change: transform;
}


img {
	max-width: 100%;
	max-height: 100%;
}

/** link styling **/
/** regular **/
a {
	color: var(--black);
	text-decoration: none;
}
a:hover {
	color: var(--black);
}

/** --------------------------------------------------
 * Animated underline links
 * -------------------------------------------------- */
 
 /* Shared styles for all animated links */
 a.underline,
 a.underline-hover,
 p a,
 .article-content li a,
 h2 a,
 .site-footer__menu a {
	 --underline-height: 1px;
 
	 padding-bottom: 4px;
 
	 color: inherit;
	 text-decoration: none;
 
	 transition:
		 background-size 350ms ease,
		 color 350ms ease;
 }
 
 /** --------------------------------------------------
  * Underline visible by default
  *
  * Applies automatically to:
  * - links inside paragraphs
  * - links inside article-content lists
  * - links inside h2 headings
  * - links with the .underline class
  * -------------------------------------------------- */
 
 a.underline,
 p a:not(.underline-hover),
 .article-content li a:not(.underline-hover),
 h2 a:not(.underline-hover) {
	 background:
		 linear-gradient(0deg, var(--red), var(--red))
		 no-repeat right bottom / 100% var(--underline-height);
 }
 
 a.underline:where(:hover, :focus-visible),
 p a:not(.underline-hover):where(:hover, :focus-visible),
 .article-content li a:not(.underline-hover):where(:hover, :focus-visible),
 h2 a:not(.underline-hover):where(:hover, :focus-visible) {
	 background-size: 0% var(--underline-height);
	 color: var(--red);
 }
 
 /** --------------------------------------------------
  * Underline appears only on hover
  * -------------------------------------------------- */
 
 a.underline-hover,
 .site-footer__menu a {
	 background:
		 linear-gradient(0deg, var(--red), var(--red))
		 no-repeat left bottom / 0% var(--underline-height);
 }
 
 a.underline-hover:where(:hover, :focus-visible),
 .site-footer__menu a:where(:hover, :focus-visible) {
	 background-size: 100% var(--underline-height);
	 color: var(--red);
 }

/** --------------------------------------------------
 * Gutenberg buttons
 * Primary: white button with black sliding fill
 * Secondary: black button with white sliding fill
 * -------------------------------------------------- */

/** Base button */
.wp-element-button {
	position: relative;
	isolation: isolate;
	overflow: hidden;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;

	padding: 8px 20px;
	border-radius: 999px;

	color: var(--black);
	background: transparent;
	text-decoration: none;
	line-height: 1.12;
	cursor: pointer;

	transition: color 0.45s ease;
	
	border: 1px solid var(--white);
}

/** Static background layer */
.wp-element-button::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;

	border-radius: inherit;
	background: var(--white);
}

/** Sliding hover layer */
.wp-element-button::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;

	border-radius: inherit;
	background: var(--black);

	transform: scaleX(0);
	transform-origin: left center;

	transition: transform 0.55s cubic-bezier(0.76, 0, 0.24, 1);
	will-change: transform;
}

/** Primary button hover */
.wp-element-button:hover,
.wp-element-button:focus-visible {
	color: var(--white);
}

.wp-element-button:hover::after,
.wp-element-button:focus-visible::after {
	transform: scaleX(1);
}

.wp-block-buttons {
	gap: 0.95vw
}

/** --------------------------------------------------
 * Secondary / dark button
 * Either:
 * - the second Gutenberg button
 * - or any button with the class dark-button
 * -------------------------------------------------- */

.wp-block-buttons .wp-block-button:nth-of-type(2) .wp-element-button,
.wp-block-buttons .wp-block-button.dark-button .wp-element-button {
	color: var(--white);
}

.wp-block-buttons .wp-block-button:nth-of-type(2) .wp-element-button::before,
.wp-block-buttons .wp-block-button.dark-button .wp-element-button::before {
	background: var(--black);
}

.wp-block-buttons .wp-block-button:nth-of-type(2) .wp-element-button::after,
.wp-block-buttons .wp-block-button.dark-button .wp-element-button::after {
	background: var(--white);
}

.wp-block-buttons .wp-block-button:nth-of-type(2) .wp-element-button:hover,
.wp-block-buttons .wp-block-button:nth-of-type(2) .wp-element-button:focus-visible,
.wp-block-buttons .wp-block-button.dark-button .wp-element-button:hover,
.wp-block-buttons .wp-block-button.dark-button .wp-element-button:focus-visible {
	color: var(--black);
}

/** --------------------------------------------------
 * Button arrow
 * -------------------------------------------------- */

.button-icon {
	width: 28px;
	height: 28px;
	border-radius: 50%;

	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;

	background: var(--black);

	transition:
		transform 0.45s cubic-bezier(0.76, 0, 0.24, 1),
		background-color 0.45s ease;
}

.button-icon svg {
	width: 15px;
	height: 15px;
	color: var(--white);

	transition: color 0.45s ease;
}

/** Secondary button arrow colours */
.wp-block-buttons .wp-block-button:nth-of-type(2) .button-icon,
.wp-block-buttons .wp-block-button.dark-button .button-icon {
	background: var(--white);
}

.wp-block-buttons .wp-block-button:nth-of-type(2) .button-icon svg,
.wp-block-buttons .wp-block-button.dark-button .button-icon svg {
	color: var(--black);
}

/** Arrow movement */
.wp-element-button:hover .button-icon,
.wp-element-button:focus-visible .button-icon {
	transform: translateX(4px);
}

/** Optional keyboard focus styling */
.wp-element-button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/** Reduced-motion accessibility */
@media (prefers-reduced-motion: reduce) {
	.wp-element-button,
	.wp-element-button::after,
	.button-icon,
	.button-icon svg {
		transition: none;
	}

	.wp-element-button:hover .button-icon,
	.wp-element-button:focus-visible .button-icon {
		transform: none;
	}
}

/** ==================================================
 * CADGUYS NAVIGATION
 *
 * Desktop:
 * [ Full logo ] [ Animated pill navigation ] [ CTA ]
 *
 * Drawings:
 * Custom full-width mega menu
 *
 * Mobile:
 * Existing fullscreen menu + normal WP submenu
 * ================================================== */


/** ==================================================
 * LOGO COLOUR
 * ================================================== */

/* Default logo = black */

.desktop-nav-brand img {
	filter: none;

	transition:
		filter .45s ease,
		opacity .45s ease;
}


/* Selected pages begin with white logo */

.nav-logo-light
.desktop-nav-brand img {
	filter: invert(1);
}


/* Once navigation enters scrolled state */

.nav-logo-light
.site-header.is-scrolled
.desktop-nav-brand img {
	filter: invert(0);
}


/** ==================================================
 * SLIDING NAVIGATION ITEM COLOURS
 * ================================================== */

.main-navigation-container.desktop
#primary-menu
> .menu-item
> a {
	position: relative;
	z-index: 2;

	color: var(--black);

	transition:
		color .3s ease;
}


/* Text over black slider */

.main-navigation-container.desktop
#primary-menu
> .menu-item.is-slider-active
> a {
	color: var(--white);
}


/** --------------------------------------------------
 * Small Home logo
 * -------------------------------------------------- */

/* White PNG becomes black normally */

.main-navigation-container.desktop
#primary-menu
> .menu-item-home
img {
	filter: invert(1);

	transition:
		filter .3s ease;
}


/* Slider underneath it = return to white */

.main-navigation-container.desktop
#primary-menu
> .menu-item-home.is-slider-active
img {
	filter: invert(0);
}


/** ==================================================
 * BASE HEADER
 * ================================================== */

header.site-header {
	position: fixed;

	top: 16px;
	left: 0;
	right: 0;

	z-index: 999;

	width: 100%;

	padding-inline: 24px;

	/*
	 * Prevent the invisible full-width header wrapper
	 * blocking page interaction.
	 */
	pointer-events: none;

	user-select: none;
}


/** Desktop hidden by default */

.main-navigation-container.desktop {
	display: none;
}


/** --------------------------------------------------
 * Shared reset
 * -------------------------------------------------- */

#primary-menu {
	position: relative;

	margin: 0;
	padding: 0;

	list-style: none;

	pointer-events: auto;
}


.menu-item {
	list-style: none;
}


/** ==================================================
 * MOBILE / TABLET HEADER
 * ================================================== */

.main-navigation-container.mobile {
	position: relative;
	z-index: 60;

	display: flex;
	align-items: center;
	justify-content: space-between;

	width: calc(100% - 28px);
	height: 58px;

	margin:
		0
		14px;

	padding:
		4px
		6px
		4px
		18px;

	background:
		var(--white);

	border:
		1px solid
		var(--black);

	border-radius:
		999px;

	pointer-events:
		auto;

	transition:
		background-color .4s ease,
		border-color .4s ease;
}


/** --------------------------------------------------
 * Mobile logo
 * -------------------------------------------------- */

.site-logo-mobile {
	display: flex;
	align-items: center;
	justify-content: center;

	height: 100%;
}


.site-logo-mobile a {
	display: flex;
	align-items: center;
	justify-content: center;

	padding: 0;
}


.site-logo-mobile img {
	display: block;

	width: 30px;
	height: 30px;

	/*
	 * Source logo is white.
	 * Closed header is white, so make it black.
	 */
	filter: invert(1);

	transition:
		filter .35s ease;
}


/** --------------------------------------------------
 * Hamburger button
 * -------------------------------------------------- */

.hamburger-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	flex:
		0
		0
		auto;

	width: 48px;
	height: 48px;

	border-radius:
		50%;

	cursor: pointer;

	-webkit-tap-highlight-color:
		transparent;
}


.ham {
	display: block;

	width: 46px;
	height: 46px;

	cursor: pointer;

	-webkit-tap-highlight-color:
		transparent;

	transition:
		transform 400ms;

	user-select: none;
}


/*
 * IMPORTANT:
 * Closed header is white.
 * Therefore hamburger must start BLACK.
 */
.ham-line {
	fill: none;

	stroke:
		var(--black);

	stroke-width: 3.5;
	stroke-linecap: round;

	transition:
		stroke .3s ease,
		stroke-dasharray 400ms,
		stroke-dashoffset 400ms;
}


.ham .top {
	stroke-dasharray:
		40 139;
}


.ham .bottom {
	stroke-dasharray:
		40 180;
}


.hamRotate.hamburger-active {
	transform:
		rotate(45deg);
}


.ham.hamburger-active .top {
	stroke-dashoffset:
		-98px;
}


.ham.hamburger-active .bottom {
	stroke-dashoffset:
		-138px;
}


/** --------------------------------------------------
 * Open header state
 * -------------------------------------------------- */

.main-navigation-container.mobile.is-menu-open {
	background:
		var(--black);

	border-color:
		var(--white);
}


.main-navigation-container.mobile.is-menu-open
.site-logo-mobile img {
	filter:
		invert(0);
}


.main-navigation-container.mobile.is-menu-open
.ham-line {
	stroke:
		var(--white);
}


/*
 * Normal WP nav inside the small header
 * is intentionally hidden.
 */

.main-navigation-container.mobile
.main-navigation {
	display: none;
}

.hamburger {
	display: none;
}


/** ==================================================
 * MOBILE FULLSCREEN NAVIGATION
 * ================================================== */

@media screen and (max-width: 63.9375em) {

	.hamburger {
		
		display: block;
		
		position: fixed;

		inset: 0;

		z-index: 50;

		width: 100%;
		height: 100dvh;

		overflow: hidden;

		background:
			#12151A;

		-webkit-clip-path:
			circle(0% at 100% 0);

		clip-path:
			circle(0% at 100% 0);

		pointer-events:
			none;
	}


	.hamburger.is-menu-open {
		pointer-events:
			auto;
	}


	/** --------------------------------------------------
	 * Two-view shell
	 * -------------------------------------------------- */

	.mobile-menu-shell {
		position: relative;

		width: 200%;
		height: 100%;

		display: flex;

		transform:
			translateX(0);

		transition:
			transform .65s
			cubic-bezier(.16,1,.3,1);
	}


	.hamburger.is-drawings-view
	.mobile-menu-shell {
		transform:
			translateX(-50%);
	}


	.mobile-menu-view {
		flex:
			0
			0
			50%;

		width: 50%;
		height: 100%;

		overflow-y: auto;

		-webkit-overflow-scrolling:
			touch;
	}


	.mobile-menu-view__inner {
		min-height:
			100%;

		padding:
			112px
			24px
			40px;
	}


	/** ==================================================
	 * MAIN MOBILE NAV
	 * ================================================== */

	.main-navigation-mobile
	.menu-menu-1-container {
		width: 100%;

		background:
			transparent;
	}


	.main-navigation-mobile
	#primary-menu-mobile {
		width: 100%;

		margin: 0;
		padding: 0;

		list-style: none;
	}


	.main-navigation-mobile
	#primary-menu-mobile
	> .menu-item {
		position: relative;

		margin: 0;

		border-bottom:
			1px solid
			rgba(255,255,255,.18);
	}


	.main-navigation-mobile
	#primary-menu-mobile
	> .menu-item
	> a {
		display: flex;
		align-items: center;
		justify-content: space-between;

		width: 100%;

		padding:
			21px
			0;

		color:
			#fff;

		font-size:
			clamp(
				1.75rem,
				8vw,
				2.35rem
			);

		font-weight:
			400;

		line-height:
			1;

		letter-spacing:
			-.035em;

		text-decoration:
			none;
	}


	/** --------------------------------------------------
	 * Drawings trigger arrow
	 * -------------------------------------------------- */

	.main-navigation-mobile
	.menu-item-drawings
	> a::after {
		content:
			"→";

		display: inline-flex;
		align-items: center;
		justify-content: center;

		width: 36px;
		height: 36px;

		border:
			1px solid
			rgba(255,255,255,.22);

		border-radius:
			50%;

		font-size:
			17px;

		transition:
			transform .35s
			cubic-bezier(.16,1,.3,1);
	}


	.main-navigation-mobile
	.menu-item-drawings
	> a:hover::after {
		transform:
			translateX(4px);
	}


	/** --------------------------------------------------
	 * Contact
	 * -------------------------------------------------- */

	.main-navigation-mobile
	#primary-menu-mobile
	> .menu-item:last-child {
		border-bottom:
			0;
	}


	.main-navigation-mobile
	#primary-menu-mobile
	> .menu-item:last-child
	> a {
		margin-top:
			24px;

		padding:
			15px
			20px;

		justify-content:
			center;

		color:
			var(--black);

		background:
			#fff;

		border-radius:
			999px;

		font-size:
			1rem;

		font-weight:
			500;

		letter-spacing:
			0;
	}


	/** --------------------------------------------------
	 * Main menu footer
	 * -------------------------------------------------- */

	.mobile-menu-footer {
		margin-top:
			42px;

		max-width:
			290px;
	}


	.mobile-menu-footer p {
		margin: 0;

		color:
			rgba(255,255,255,.38);

		font-size:
			12px;

		line-height:
			1.55;
	}


	/** ==================================================
	 * DRAWINGS VIEW
	 * ================================================== */

	.mobile-menu-view--drawings {
		background:
			#f6f6f3;

		color:
			var(--black);
	}


	.mobile-menu-view--drawings
	.mobile-menu-view__inner {
		padding-top:
			88px;
	}


	/** --------------------------------------------------
	 * Back/header
	 * -------------------------------------------------- */

	.mobile-drawings-header {
		display: flex;
		align-items: center;
		justify-content: space-between;

		margin-bottom:
			22px;
	}


	.mobile-drawings-back {
		display: inline-flex;
		align-items: center;

		gap: 10px;

		padding: 0;

		color:
			var(--black);

		background:
			none;

		border:
			0;

		font: inherit;

		font-size:
			13px;

		cursor:
			pointer;
	}


	.mobile-drawings-back span {
		display: inline-flex;
		align-items: center;
		justify-content: center;

		width: 31px;
		height: 31px;

		border:
			1px solid
			rgba(17,23,29,.13);

		border-radius:
			50%;
	}


	.mobile-drawings-header__label {
		color:
			rgba(17,23,29,.42);

		font-size:
			10px;

		font-weight:
			600;

		letter-spacing:
			.12em;

		text-transform:
			uppercase;
	}


	/** --------------------------------------------------
	 * Intro
	 * -------------------------------------------------- */

	.mobile-drawings-intro {
		margin-bottom:
			22px;
	}


	.mobile-drawings-eyebrow {
		margin:
			0
			0
			8px;

		color:
			rgba(17,23,29,.42);

		font-size:
			10px;

		font-weight:
			600;

		letter-spacing:
			.12em;

		text-transform:
			uppercase;
	}


	.mobile-drawings-intro h2 {
		margin: 0;

		max-width:
			360px;

		font-size: clamp(2rem, 9vw, 2.55rem);

		font-weight:
			400;

		line-height:
			.98;

		letter-spacing:
			-.045em;
	}


	/** ==================================================
	 * DRAWING CARDS
	 * ================================================== */

	.mobile-drawings-projects {
		display: grid;

		gap:
			10px;
	}


	.mobile-drawing-card {
		position: relative;

		display: grid;

		grid-template-columns:
			54px
			minmax(0,1fr)
			30px;

		align-items: center;

		gap:
			14px;

		padding:
			14px;

		color:
			var(--black);

		background:
			#fff;

		border:
			1px solid
			rgba(17,23,29,.07);

		border-radius:
			16px;

		text-decoration:
			none;

		transition:
			transform .35s
			cubic-bezier(.16,1,.3,1),
			background-color .25s ease;
			

		column-gap:14px;

	}


	.mobile-drawing-card:active {
		transform:
			scale(.985);

		background:
			#f0f0ed;
	}


	.mobile-drawing-card__icon {
		display: flex;
		align-items: center;
		justify-content: center;

		width: 54px;
		height: 54px;

		background:
			#eeece8;

		border-radius:
			12px;
	}


	.mobile-drawing-card__icon svg {
		width: 31px;
		height: 31px;
	}


	.mobile-drawing-card__content {
		min-width: 0;
	}


	.mobile-drawing-card h3 {
		margin:
			0
			0
			4px;

		font-size:
			1rem;

		font-weight:
			600;

		line-height:
			1.15;
	}


	.mobile-drawing-card p {
		margin: 0;

		color:
			rgba(17,23,29,.52);

		font-size:
			11px;

		line-height:
			1.4;
	}


	.mobile-drawing-card__arrow {
		display: inline-flex;
		align-items: center;
		justify-content: center;

		width: 30px;
		height: 30px;

		border:
			1px solid
			rgba(17,23,29,.12);

		border-radius:
			50%;

		font-size:
			13px;
	}


	/** ==================================================
	 * ALSO AVAILABLE
	 * ================================================== */

	.mobile-drawings-secondary {
		margin-top:
			30px;

		padding-top:
			22px;

		border-top:
			1px solid
			rgba(17,23,29,.10);
	}


	.mobile-drawings-secondary__label {
		margin:
			0
			0
			12px;

		color:
			rgba(17,23,29,.42);

		font-size:
			10px;

		font-weight:
			600;

		letter-spacing:
			.12em;

		text-transform:
			uppercase;
	}


	.mobile-drawings-secondary__links {
		display: flex;
		flex-wrap: wrap;

		align-items: center;

		row-gap:
			12px;
	}


	.mobile-drawings-secondary__links a {
		display: inline-flex;
		align-items: center;

		color:
			rgba(17,23,29,.68);

		font-size:
			12px;

		text-decoration:
			none;
			
		line-height: 1.5;
	}


	.mobile-drawings-secondary__links a::after {
		content:
			"•";

		margin-inline:
			12px;

		color:
			rgba(17,23,29,.20);

		font-size:
			.7em;
	}


	.mobile-drawings-secondary__links
	a:last-child::after {
		display: none;
	}


	/** ==================================================
	 * CTA
	 * ================================================== */

	.mobile-drawings-cta {
		margin-top:
			28px;

		padding:
			18px;

		color:
			#fff;

		background:
			#12171d;

		border-radius:
			17px;
	}


	.mobile-drawings-cta strong {
		display: block;

		margin-bottom:
			4px;

		font-size:
			14px;

		font-weight:
			500;
	}


	.mobile-drawings-cta p {
		margin:
			0
			0
			16px;

		color:
			rgba(255,255,255,.52);

		font-size:
			11px;

		line-height:
			1.45;
	}


	.mobile-drawings-cta > a {
		display: flex;
		align-items: center;
		justify-content: space-between;

		width: 100%;

		padding:
			11px
			12px
			11px
			16px;

		color:
			var(--black);

		background:
			#fff;

		border-radius:
			999px;

		font-size:
			12px;

		font-weight:
			500;

		text-decoration:
			none;
	}


	.mobile-drawings-all {
		display: flex;
		align-items: center;
		justify-content: space-between;

		margin-top:
			18px;

		padding-bottom:
			4px;

		color:
			var(--black);

		border-bottom:
			1px solid
			rgba(17,23,29,.18);

		font-size:
			12px;

		font-weight:
			500;

		text-decoration:
			none;
	}

}

/** ==================================================
 * MOBILE DRAWINGS — FINAL POLISH
 * ================================================== */

@media screen and (max-width: 63.9375em) {


	/** --------------------------------------------------
	 * Top mobile control pill
	 * -------------------------------------------------- */

	.main-navigation-container.mobile {
		width:
			calc(100% - 44px);

		height:
			52px;

		margin-inline:
			22px;

		padding:
			3px
			5px
			3px
			16px;
	}


	.main-navigation-container.mobile
	.hamburger-icon {
		width:
			44px;

		height:
			44px;
	}


	.main-navigation-container.mobile
	.ham {
		width:
			42px;

		height:
			42px;
	}


	.main-navigation-container.mobile
	.site-logo-mobile img {
		width:
			27px;

		height:
			27px;
	}



	/** --------------------------------------------------
	 * Back / Drawings row
	 * -------------------------------------------------- */

	.mobile-drawings-header {
		margin-bottom:
			18px;
	}


	.mobile-drawings-intro {
		margin-bottom:
			22px;
	}


	.mobile-drawings-eyebrow {
		margin-bottom:
			7px;
	}



	/** --------------------------------------------------
	 * Main heading
	 * -------------------------------------------------- */

	.mobile-drawings-intro h2 {
		max-width:
			310px;

		font-size:
			clamp(
				2rem,
				9vw,
				2.35rem
			);

		line-height:
			1;

		letter-spacing:
			-.04em;
	}



	/** --------------------------------------------------
	 * Project cards
	 * -------------------------------------------------- */

	.mobile-drawings-projects {
		gap:
			10px;
	}


	.mobile-drawing-card {
		min-height:
			82px;

		padding:
			13px;
	}


	.mobile-drawing-card__content p {
		max-width:
			220px;

		line-height:
			1.35;
	}


	.mobile-drawing-card h3 {
		margin-bottom:
			3px;
	}



	/** --------------------------------------------------
	 * Also available
	 * -------------------------------------------------- */

	.mobile-drawings-secondary {
		margin-top:
			28px;

		padding-top:
			20px;
	}


	.mobile-drawings-secondary__links {
		row-gap:
			12px;
	}


	.mobile-drawings-secondary__links a {
		line-height:
			1.5;
	}


	.mobile-drawings-secondary__links a::after {
		margin-inline:
			11px;
	}



	/** --------------------------------------------------
	 * Consultation CTA
	 * -------------------------------------------------- */

	.mobile-drawings-cta {
		margin-top:
			30px;

		margin-bottom:
			18px;
	}


	.mobile-drawings-all {
		margin-bottom:
			34px;
	}


	/*
	 * Generous safe space at the bottom,
	 * especially on iPhones with a home indicator.
	 */

	.mobile-menu-view--drawings
	.mobile-menu-view__inner {
		padding-bottom:
			calc(
				46px +
				env(safe-area-inset-bottom)
			);
	}

}




/** ==================================================
 * DESKTOP
 * ================================================== */

@media screen and (min-width: 64em) {


	/** ------------------------------------------------
	 * Header
	 * ------------------------------------------------ */

	header.site-header {
		position: fixed;

		top: 16px;
		left: 0;
		right: 0;

		width: 100%;

		padding:
			0
			24px;

		pointer-events: none;
		
		/* new */
		transition:
		top .35s ease,
		padding .35s ease,
		background-color .35s ease,
		box-shadow .35s ease,
		border-color .35s ease,
		backdrop-filter .35s ease;
	}
	
	header.site-header.is-scrolled {
		top: 0;
	
		padding-top: 5px;
		padding-bottom: 5px;
	
		background: rgba(255, 255, 255, 0.92);
	
		border-bottom: 1px solid rgba(17, 21, 27, 0.08);
	
		box-shadow:
			0 8px 30px rgba(17, 21, 27, 0.045);
	
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
	}



	/** Hide mobile header */

	.main-navigation-container.mobile {
		display: none;
	}


	/** ------------------------------------------------
	 * Complete desktop navigation row
	 * ------------------------------------------------ */

	.main-navigation-container.desktop {
		position: relative;

		display: grid;

		grid-template-columns:
			1fr
			auto
			1fr;

		align-items: center;

		width: 100%;
		max-width: 1800px;

		margin:
			0
			auto;

		padding-inline: 40px;

		pointer-events: auto;
	}


	.desktop-nav-brand {
		justify-self: start;
	}


	.main-navigation-container.desktop
	.main-navigation {
		justify-self: center;
	}


	.desktop-nav-cta {
		justify-self: end;

		opacity: 0;

		pointer-events: none;
	}
	
	.desktop-nav-cta .wp-element-button {
		border-color: var(--black);
	}


	/** ------------------------------------------------
	 * Full Cadguys logo
	 * ------------------------------------------------ */

	.desktop-nav-brand {
		display: flex;
		align-items: center;
		justify-content: center;

		flex:
			0
			0
			auto;

		height: 58px;
	}


	.desktop-nav-brand img {
		display: block;

		width: auto;
		height: 40px;

		max-width: 150px;

		object-fit: contain;
	}


	/** ------------------------------------------------
	 * Centre pill navigation
	 * ------------------------------------------------ */

	.main-navigation-container.desktop
	.main-navigation {
		position: relative;

		display: block;

		flex:
			0
			0
			auto;

		background:
			var(--white);

		border:
			1px solid
			var(--black);

		border-radius:
			100px;

		overflow:
			visible;
	}


	.main-navigation-container.desktop
	#primary-menu {
		position: relative;

		display: flex;

		margin: 0;
		padding: 0;

		border-radius:
			100px;
	}


	/** ------------------------------------------------
	 * Moving menu slider
	 * ------------------------------------------------ */

	.main-navigation-container.desktop
	.menuSlider {
		position: absolute;

		top: 0;
		left: 0;

		z-index: 1;

		opacity: 0;

		background:
			var(--black);

		border-radius:
			100px;

		transition:
			all .7s
			cubic-bezier(.77,.2,.05,1);

		pointer-events:
			none;
	}


	/** ------------------------------------------------
	 * Main menu items
	 * ------------------------------------------------ */

	.main-navigation-container.desktop
	#primary-menu
	> .menu-item {
		position: relative;

		z-index: 2;

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


	.main-navigation-container.desktop
	#primary-menu
	> .menu-item
	> a {
		display: flex;
		align-items: center;
		justify-content: center;

		padding:
			10px
			14px;

		white-space:
			nowrap;
	}


	.main-navigation-container.desktop
	#primary-menu
	> .menu-item.logo-menu
	> a {
		padding:
			10px
			23px;
	}


	/** Small Home logo */

	.main-navigation-container.desktop
	.menu-item.menu-logo
	img {
		display: block;

		width: auto;
		height: 25px;
	}


	/** =================================================
	 * DRAWINGS MENU ITEM
	 * ================================================= */


	/**
	 * Drawings still has the WordPress submenu because
	 * mobile uses it.
	 *
	 * On desktop we hide that ordinary submenu and use
	 * our custom mega menu instead.
	 */

	.main-navigation-container.desktop
	.menu-item-drawings
	> .sub-menu {
		display:
			none !important;
	}


	/**
	 * The old dropdown setup used pointer-events:none
	 * on parent links.
	 *
	 * Drawings needs to remain a real clickable link
	 * to /drawings/.
	 */

	.main-navigation-container.desktop
	.menu-item-drawings
	> a {
		pointer-events:
			auto;
	}
	
	/**
	 * END DESKTOP HEADER
	 */
	}


	/** ==================================================
	 * DRAWINGS MEGA MENU
	 * ================================================== */
	
	@media screen and (min-width: 64em) {
	
		.drawings-mega-menu {
			--mega-ease:
				cubic-bezier(.16,1,.3,1);
	
			position: fixed;
	
			top: 82px;
			left: 0;
	
			z-index: 998;
	
			width: 100%;
	
			padding:
				10px
				clamp(24px,3vw,48px);
	
			opacity: 0;
			visibility: hidden;
	
			transform:
				translateY(-8px);
	
			pointer-events: none;
	
			transition:
				opacity .22s ease,
				visibility .22s ease,
				transform .38s var(--mega-ease);
		}
	
	
		.drawings-mega-menu.is-open {
			opacity: 1;
			visibility: visible;
	
			transform:
				translateY(0);
	
			pointer-events: auto;
		}
	
	
		/** --------------------------------------------------
		 * Main panel
		 * -------------------------------------------------- */
	
		.drawings-mega-menu__panel {
			width: min(
				1440px,
				calc(100vw - 48px)
			);
	
			margin-inline: auto;
	
			padding:
				22px
				34px
				24px;
	
			background:
				rgba(249,249,247,.985);
	
			border:
				1px solid
				rgba(17,23,29,.08);
	
			border-radius:
				24px;
	
			box-shadow:
				0 22px 60px
				rgba(17,23,29,.11);
	
			-webkit-backdrop-filter:
				blur(14px);
	
			backdrop-filter:
				blur(14px);
		}
	
	
		/** ==================================================
		 * Header
		 * ================================================== */
	
		.drawings-mega-menu__header {
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
	
			gap: 40px;
	
			margin-bottom:
				20px;
		}
	
	
		.drawings-mega-menu__eyebrow {
			margin:
				0
				0
				7px;
	
			color:
				rgba(17,23,29,.46);
	
			font-size: 10px;
	
			font-weight: 600;
	
			letter-spacing:
				.12em;
	
			text-transform:
				uppercase;
		}
	
	
		.drawings-mega-menu__title {
			margin: 0;
	
			color:
				var(--black);
	
			font-size:
				clamp(
					1.75rem,
					2vw,
					2.35rem
				);
	
			font-weight: 400;
	
			line-height: 1.05;
	
			letter-spacing:
				-.035em;
		}
	
	
		.drawings-mega-menu__all {
			display: inline-flex;
			align-items: center;
	
			gap: 10px;
	
			flex:
				0
				0
				auto;
	
			padding-bottom: 3px;
	
			color:
				var(--black);
	
			border-bottom:
				1px solid
				rgba(17,23,29,.22);
	
			font-size: 13px;
	
			font-weight: 500;
	
			text-decoration: none;
	
			transition:
				gap .35s var(--mega-ease),
				border-color .3s ease;
		}
	
	
		.drawings-mega-menu__all:hover {
			gap: 14px;
	
			color:
				var(--black);
	
			border-color:
				var(--black);
		}
	
	
		/** ==================================================
		 * Project grid
		 * ================================================== */
	
		.drawings-mega-menu__projects {
			display: grid;
	
			grid-template-columns:
				repeat(
					4,
					minmax(0,1fr)
				);
	
			gap:
				clamp(12px,1.4vw,18px);
		}
	
	
		/** --------------------------------------------------
		 * Project card
		 * -------------------------------------------------- */
	
		.mega-project-card {
			position: relative;
	
			display: grid;
	
			grid-template-columns:
				1fr;
	
			align-items: start;
	
			gap: 16px;
	
			min-width: 0;
	
			padding:
				18px
				42px
				16px
				18px;
	
			color:
				var(--black);
	
			background:
				#fff;
	
			border:
				1px solid
				rgba(17,23,29,.08);
	
			border-radius:
				17px;
	
			text-decoration: none;
	
			transition:
				transform .4s var(--mega-ease),
				background-color .3s ease,
				border-color .3s ease,
				box-shadow .4s var(--mega-ease);
				
			box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04),  0 18px 40px rgba(0, 0, 0, 0.08);
		}
	
	
		.mega-project-card:hover {
			color:
				var(--black);
	
	
			border-color:
				rgba(17,23,29,.13);
	
			transform:
				translateY(-4px);
	
			box-shadow: 0 10px 22px rgba(0, 0, 0, 0.06),  0 26px 55px rgba(0, 0, 0, 0.11);
		}
	
	
		/** --------------------------------------------------
		 * Icon
		 * -------------------------------------------------- */
	
		.mega-project-card__icon {
			display: flex;
			align-items: center;
			justify-content: center;
	
			width: 80px;
			height: 80px;
	
			color:
				var(--black);
	
			background:
				#ECEAE6;
	
			border-radius:
				12px;
	
			transition:
				background-color .3s ease,
				transform .4s var(--mega-ease);
		}
	
	
		.mega-project-card:hover
		.mega-project-card__icon {
			background:
				#fff;
	
			transform:
				scale(1.03);
		}
	
	
		.mega-project-card__icon svg,
		.mega-project-card__icon img {
			display: block;
	
			width: 100%;
			height: 100%;
			object-fit: cover;
			
			border-radius: 12px;
		}
	
	
		/** --------------------------------------------------
		 * Content
		 * -------------------------------------------------- */
	
		.mega-project-card__content {
			min-width: 0;
		}
	
	
		.mega-project-card__title {
			margin:
				2px
				0
				6px;
	
			color:
				var(--black);
	
			font-size:
				clamp(
					1rem,
					1.1vw,
					1.18rem
				);
	
			font-weight: 600;
	
			line-height: 1.15;
	
			letter-spacing:
				-.02em;
		}
	
	
		.mega-project-card__description {
			margin: 0;
	
			color:
				rgba(17,23,29,.58);
	
			font-size: 12px;
	
			line-height: 1.45;
		}
	
	
		/** Small informational line */
	
		.mega-project-card__meta {
			margin:
				8px
				0
				0;
	
			color:
				rgba(17,23,29,.42);
	
			font-size: 10px;
	
			font-weight: 500;
	
			line-height: 1.35;
		}
	
	
		/** --------------------------------------------------
		 * Arrow
		 * -------------------------------------------------- */
	
		.mega-project-card__arrow {
			position: absolute;
	
			top: 18px;
			right: 17px;
	
			display: inline-flex;
			align-items: center;
			justify-content: center;
	
			width: 27px;
			height: 27px;
	
			color:
				var(--black);
	
			background:
				transparent;
	
			border:
				1px solid
				rgba(17,23,29,.12);
	
			border-radius:
				50%;
	
			font-size: 13px;
	
			line-height: 1;
	
			transform:
				rotate(-20deg);
	
			transition:
				transform .4s var(--mega-ease),
				background-color .3s ease;
		}
	
	
		.mega-project-card:hover
		.mega-project-card__arrow {
			background:
				#fff;
	
			transform:
				rotate(0);
		}
	
	
		/** ==================================================
		 * Footer
		 * ================================================== */
	
		.drawings-mega-menu__footer {
			display: grid;
	
			grid-template-columns:
				minmax(0,1fr)
				auto;
	
			align-items: center;
	
			gap:
				clamp(30px,4vw,70px);
	
			margin-top:
				20px;
	
			padding-top:
				18px;
	
			border-top:
				1px solid
				rgba(17,23,29,.09);
		}
	
	
		/** --------------------------------------------------
		 * Also available
		 * -------------------------------------------------- */
	
		.drawings-mega-menu__secondary {
			display: flex;
			align-items: center;
	
			gap:
				clamp(18px,2.5vw,38px);
	
			min-width: 0;
		}
	
	
		.drawings-mega-menu__secondary-label {
			flex:
				0
				0
				auto;
	
			margin: 0;
	
			color:
				rgba(17,23,29,.42);
	
			font-size: 10px;
	
			font-weight: 600;
	
			letter-spacing:
				.1em;
	
			text-transform:
				uppercase;
		}
	
	
		.drawings-mega-menu__secondary-links {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
	
			gap:
				0;
		}
	
	
		.drawings-mega-menu__secondary-links a {
			display: inline-flex;
			align-items: center;
		
			color:
				rgba(17,23,29,.68);
		
			font-size: 12px;
			font-weight: 500;
		
			text-decoration: none;
		
			transition:
				color .3s ease;
		}
		
		.drawings-mega-menu__secondary-links a::after {
			content: "•";
		
			margin-inline:
				18px;
		
			color:
				rgba(17,23,29,.22);
		
			font-size: .75em;
		
			pointer-events: none;
		}
		
		.drawings-mega-menu__secondary-links a:last-child::after {
			display: none;
		}
	
	
		.drawings-mega-menu__secondary-links a:hover {
			color:
				var(--black);
		}
	
	
		/** ==================================================
		 * Compact help CTA
		 * ================================================== */
	
		.drawings-mega-menu__help {
			display: flex;
			align-items: center;
	
			gap:
				clamp(22px,2.4vw,34px);
	
			flex:
				0
				0
				auto;
	
			padding:
				12px
				14px
				12px
				18px;
	
			color:
				#fff;
	
			background: radial-gradient(circle at 92% 105%, rgba(39, 139, 209, 0.72) 0%, rgba(39, 139, 209, 0.28) 26%, transparent 54%), linear-gradient(145deg, #050607 0%, #0c1118 58%, #142234 100%);
			background-image: radial-gradient(circle at 92% 105%, rgba(39, 139, 209, 0.72) 0%, rgba(39, 139, 209, 0.28) 26%, transparent 54%), linear-gradient(145deg, rgb(5, 6, 7) 0%, rgb(12, 17, 24) 58%, rgb(20, 34, 52) 100%);
			background-position-x: initial, initial;
			background-position-y: initial, initial;
			background-size: initial, initial;
			background-repeat: initial, initial;
			background-attachment: initial, initial;
			background-origin: initial, initial;
			background-clip: initial, initial;

	
			border-radius:
				14px;
		}
	
	
		.drawings-mega-menu__help-eyebrow {
			margin:
				0
				0
				2px;
	
			color:
				#fff;
	
			font-size: 12px;
	
			font-weight: 500;
	
			line-height: 1.3;
		}
	
	
		.drawings-mega-menu__help-text {
			margin: 0;
	
			max-width: 280px;
	
			color:
				rgba(255,255,255,.56);
	
			font-size: 10px;
	
			line-height: 1.4;
		}
	
	
		.drawings-mega-menu__help-link {
			display: inline-flex;
			align-items: center;
	
			gap: 12px;
	
			flex:
				0
				0
				auto;
	
			min-height: 38px;
	
			padding:
				7px
				9px
				7px
				15px;
	
			color:
				var(--black);
	
			background:
				#fff;
	
			border-radius:
				999px;
	
			font-size: 11px;
	
			font-weight: 500;
	
			white-space:
				nowrap;
	
			text-decoration: none;
	
			transition:
				gap .35s var(--mega-ease);
		}
	
	
		.drawings-mega-menu__help-link:hover {
			gap: 16px;
	
			color:
				var(--black);
		}
	
	}
	
	
	/** ==================================================
	 * SMALLER DESKTOP
	 * ================================================== */
	
	@media screen
		and (min-width: 64em)
		and (max-width: 1250px) {
	
		.drawings-mega-menu__projects {
			grid-template-columns:
				repeat(
					2,
					minmax(0,1fr)
				);
		}
	
	
		.drawings-mega-menu__footer {
			grid-template-columns:
				1fr;
		}
	
	
		.drawings-mega-menu__help {
			justify-content:
				space-between;
		}
	
	
		.drawings-mega-menu__help-text {
			max-width:
				420px;
		}
	
	}
	
	
	/** ==================================================
	 * MOBILE
	 * ================================================== */
	
	@media screen and (max-width: 63.9375em) {
	
		.drawings-mega-menu {
			display: none;
		}
	
	}
	
	
	/** ==================================================
	 * REDUCED MOTION
	 * ================================================== */
	
	@media (prefers-reduced-motion: reduce) {
	
		.drawings-mega-menu,
	
		.mega-project-card,
	
		.mega-project-card__icon,
	
		.mega-project-card__arrow,
	
		.drawings-mega-menu__all,
	
		.drawings-mega-menu__help-link {
			transition:
				none !important;
		}
	
	}


/** ==================================================
 * SMALLER DESKTOP / LAPTOP
 * ================================================== */

@media screen
	and (min-width: 64em)
	and (max-width: 1320px) {

	.main-navigation-container.desktop {
		gap: 9px;

		padding-inline:
			20px;
	}


	.desktop-nav-brand {
		height: 54px;

		padding-inline:
			10px;
	}


	.desktop-nav-brand img {
		height: 21px;

		max-width: 110px;
	}


	.main-navigation-container.desktop
	#primary-menu
	> .menu-item
	> a {
		padding:
			10px
			12px;

		font-size:
			14px;
	}


	.main-navigation-container.desktop
	.menu-item.menu-logo
	img {
		height: 23px;
	}


}





/** ==================================================
 * REDUCED MOTION
 * ================================================== */

@media (prefers-reduced-motion: reduce) {

	.menuSlider,

	.desktop-nav-brand,

	.desktop-nav-cta,

	.ham,

	.ham-line {
		transition:
			none !important;
	}

}


/* FEATURED SECTION */
/** --------------------------------------------------
 * Featured homepage hero with background video
 * -------------------------------------------------- */

.featured-section .wp-block-cover {
	position: relative;
	isolation: isolate;
	overflow: hidden;

	display: flex;
	min-height: clamp(620px, 71vh, 820px);

	background: var(--black);
	border-radius: 20px;
}

/** Hide the old Cover background image */
.featured-section .wp-block-cover__image-background {
	display: none;
}

/** Cover overlay: above video, below content */
.featured-section .wp-block-cover__background {
	position: absolute;
	inset: 0;
	z-index: 2;
}

/** --------------------------------------------------
 * Gutenberg inner container
 * -------------------------------------------------- */

.featured-section .wp-block-cover__inner-container {
	/*
	 * Important:
	 * position: static lets the absolute video use the
	 * entire Cover block rather than this 80rem container.
	 *
	 * No z-index here, otherwise the video would sit in
	 * the same stacking context above the Cover overlay.
	 */
	position: static;
	z-index: auto;

	display: grid;
	grid-template-rows: 1fr auto 1fr;

	width: 100%;
	min-height: clamp(620px, 71vh, 820px);
}

/** --------------------------------------------------
 * Background video
 * -------------------------------------------------- */

.featured-section .homepage-hero__video {
	position: absolute;
	inset: 0;
	z-index: 1;

	width: 100%;
	height: 100%;
	margin: 0;

	border-radius: inherit;
	overflow: hidden;
	pointer-events: none;
}

.featured-section .homepage-hero__video video {
	display: block;

	width: 100%;
	height: 100%;

	border-radius: inherit;
	object-fit: cover;
	object-position: center;

	background: var(--black);
}

/** Fade the deferred video in once ready */
.featured-section
	.homepage-hero__video:not(.is-video-loaded)
	video {
	opacity: 0;
}

.featured-section
	.homepage-hero__video.is-video-loaded
	video {
	opacity: 1;
	transition: opacity 700ms ease;
}

/** --------------------------------------------------
 * Existing content positioning
 *
 * Use first-of-type rather than first-child because
 * the Video figure now comes before the Groups.
 * -------------------------------------------------- */

.featured-section
	.wp-block-cover__inner-container
	> .wp-block-group:first-of-type {
	position: relative;
	z-index: 3;

	grid-row: 2;
	align-self: center;
}

.featured-section
	.wp-block-cover__inner-container
	> .wp-block-group:last-of-type {
	position: relative;
	z-index: 3;

	grid-row: 3;
	align-self: end;

	margin-bottom: 2.25rem;
}

/** Existing content widths */
.featured-section .cover-container {
	max-width: 720px;
}
.featured-section .cover-container h1 {
	white-space: nowrap;
}

.featured-section .cover-container:last-of-type {
	max-width: 460px;
	margin-left: auto;
}

/** --------------------------------------------------
 * Mobile
 * -------------------------------------------------- */

@media screen and (max-width: 39.9375em) {

	.featured-section .homepage-hero__video video {
		object-position: 62% center;
	}

	.featured-section
		.wp-block-cover__inner-container
		> .wp-block-group:last-of-type {
		margin-bottom: 2rem;
	}
}

/** --------------------------------------------------
 * Reduced motion
 * -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.featured-section .homepage-hero__video video {
		transition: none;
	}
}

/* Gutenberg styling */
.wp-block-columns {
	gap: 1.5rem;
}
.wp-block-cover {
	border-radius: 20px;
}
.is-layout-flex {
	display: flex;
}
.wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-100 {
	background-color: var(--black);
}
.has-medium-font-size {
	font-size: clamp(1rem, 1.15vw, 1.18rem);
}


/** 
START OF SECTIONS
 **/

/** --------------------------------------------------
  * Services card grid
  * Gutenberg Columns > Column > Cover
  * -------------------------------------------------- */
 
 .services-grid {
	 --service-card-duration: 0.85s;
	 --service-card-ease: cubic-bezier(0.16, 1, 0.3, 1);
 
	 align-items: stretch;
 }
 
 .services-grid > .wp-block-column {
	 display: flex;
	 min-width: 0;
 }
 
 /** --------------------------------------------------
  * Card / Gutenberg Cover block
  * -------------------------------------------------- */
 
 .service-card.wp-block-cover {
	 position: relative;
	 isolation: isolate;
	 overflow: hidden;
 
	 display: flex;
	 align-items: flex-end;
 
	 width: 100%;
	 min-height: 475px;
	 padding: 28px;
 
	 color: var(--white);
	 background: var(--black);
	 cursor: pointer;
 }
 
 /**
  * Gutenberg sometimes gives the inner container
  * its own width rules, so make it fill the card.
  */
 .service-card > .wp-block-cover__inner-container {
	 position: relative;
	 z-index: 3;
 
	 display: flex;
	 flex-direction: column;
	 justify-content: flex-end;
 
	 width: 100%;
	 height: 100%;
 }
 
 /** Background image */
 .service-card .wp-block-cover__image-background {
	 transform: scale(1.03);
	 transform-origin: center;
 
	 transition:
		 transform calc(var(--service-card-duration) * 1.25)
		 var(--service-card-ease);
 
	 will-change: transform;
 }
 
 /**
  * Gutenberg's standard colour overlay.
  * Keep it beneath our custom gradient.
  */
 .service-card .wp-block-cover__background {
	 z-index: 1;
 
	 transition:
		 opacity var(--service-card-duration)
		 var(--service-card-ease);
 }
 
 /**
  * Readability gradient:
  * darker over the sky at the top,
  * light through the centre,
  * darker again at the bottom.
  */
 /** Base readability gradient */
 .service-card::before {
	 content: "";
	 position: absolute;
	 inset: 0;
	 z-index: 2;
	 pointer-events: none;
 
	 background: linear-gradient(
		 to bottom,
		 rgba(0,0,0,.45) 0%,
		 rgba(0,0,0,.22) 22%,
		 rgba(0,0,0,.08) 42%,
		 rgba(0,0,0,.18) 60%,
		 rgba(0,0,0,.40) 78%,
		 rgba(0,0,0,.62) 100%
	 );
 }
 
 .service-card > .wp-block-cover__inner-container {
	 position: relative;
	 z-index: 3;
 }
 .service-card .wp-block-cover__image-background {
	 z-index: 0;
 }
 
 .service-card__link .wp-element-button {
	 position: relative;
	 z-index: 1;
	 isolation: isolate;
 }
 
 /** --------------------------------------------------
  * Title area at the top
  * -------------------------------------------------- */
 
 .service-card__top {
	 position: absolute;
	 top: 19px;
	 left: 0px;
	 z-index: 3;
 
	 width: auto;
	 margin: 0;
 
	 pointer-events: none;
 }
 
 .service-card__title {
	 width: 100%;
	 margin: 0;
	 color: inherit;
 }
 
 /** --------------------------------------------------
  * Lower card content
  * -------------------------------------------------- */
 
 .service-card__content {
	 position: relative;
	 z-index: 3;
	 
	 --font-size-min: 15.14; 
	   --font-size-max: 16;
	   --font-view-min: 576;
	   --font-view-max: 1280;
	 
	   /* The magic part */
	   font-size: clamp(calc(var(--font-size-min) * 1px), calc((var(--font-size-min) * 1px) + (var(--font-size-max) - var(--font-size-min)) * ((100vw - (var(--font-view-min) * 1px)) / var(--font-view-max))), calc(var(--font-size-max) * 1px) ); 
 
	 display: flex;
	 flex-direction: column;
	 align-items: flex-start;
 
	 width: 100%;
	 margin: 0;
 
	 /*
	  * Leaves the short intro visible near the bottom.
	  * Details and button remain below the visible area
	  * until the card is hovered.
	  */
	 transform: translateY(calc(100% - 72px));
 
	 transition:
		 transform var(--service-card-duration)
		 var(--service-card-ease);
 
	 will-change: transform;
 }
 
 .service-card__content > * {
	 margin-top: 0;
 }
 
 /** Short text which stays visible */
 .service-card__intro {
	 width: 100%;
	 margin: 0;
	 color: inherit;
 }
 
 /** Extra text revealed on hover */
 .service-card__details {
	 width: 100%;
	 margin: 1rem 0 1.5rem;
	 color: inherit;
 
	 opacity: 0;
	 transform: translateY(20px);
 
	 max-height: 0;
	 overflow: hidden;
 
	 transition:
		 opacity 0.65s ease,
		 transform 0.85s var(--service-card-ease),
		 max-height var(--service-card-duration)
		 var(--service-card-ease);
 }
 
 /** Button wrapper */
 .service-card__link {
	 display: inline-flex;
	 align-items: center;
	 gap: 10px;
 
	 width: auto;
	 margin-top: 1.5rem;
 
	 color: inherit;
	 text-decoration: none;
 
	 opacity: 0;
	 transform: translateY(20px);
 
	 transition:
		 opacity 0.65s ease,
		 transform 0.85s var(--service-card-ease);
 }
 
 .service-card__link .wp-element-button {
	 font-size: 14px;
	 padding: 5px 15px;
 }
 
 /** --------------------------------------------------
  * Desktop hover / keyboard focus
  * -------------------------------------------------- */
 
 @media (hover: hover) and (pointer: fine) {
 
	 .service-card:hover .wp-block-cover__image-background,
	 .service-card:focus-within .wp-block-cover__image-background {
		 transform: scale(1.09) translateY(-1.5%);
	 }
 
	 .service-card:hover .service-card__content,
	 .service-card:focus-within .service-card__content {
		 transform: translateY(0);
	 }
 
	 /** Details fade in */
	 .service-card:hover .service-card__details,
	 .service-card:focus-within .service-card__details {
		 opacity: 1;
		 transform: translateY(0);
		 max-height: 220px;
 
		 transition-delay:
			 0.08s,
			 0.08s,
			 0s;
	 }
 
	 /** Button fades in slightly after details */
	 .service-card:hover .service-card__link,
	 .service-card:focus-within .service-card__link {
		 opacity: 1;
		 transform: translateY(0);
 
		 transition-delay: 0.14s;
	 }
 
	 /** Dark hover overlay */
	 .service-card::after {
		 content: "";
		 position: absolute;
		 inset: 0;
		 z-index: 2;
		 pointer-events: none;
 
		 background: linear-gradient(
			 to bottom,
			 rgba(0,0,0,.70) 0%,
			 rgba(0,0,0,.58) 22%,
			 rgba(0,0,0,.45) 42%,
			 rgba(0,0,0,.55) 60%,
			 rgba(0,0,0,.72) 78%,
			 rgba(0,0,0,.86) 100%
		 );
 
		 opacity: 0;
 
		 transition:
			 opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1);
	 }
 
	 .service-card:hover::after,
	 .service-card:focus-within::after {
		 opacity: 1;
	 }
 }
 
 /** --------------------------------------------------
  * Touch devices and smaller screens
  *
  * There is no dependable hover on phones,
  * so all card content remains visible.
  * -------------------------------------------------- */
 
 @media (hover: none), (max-width: 781px) {
 
	 .service-card.wp-block-cover {
		 min-height: 380px;
		 padding: 24px;
	 }
 
	 .service-card__top {
		 top: 24px;
		 left: 24px;
		 right: 24px;
	 }
 
	 .service-card__content {
		 transform: none;
	 }
 
	 .service-card__details {
		 opacity: 1;
		 transform: none;
		 max-height: none;
		 overflow: visible;
	 }
 
	 .service-card__link {
		 opacity: 1;
		 transform: none;
	 }
 }
 
 /** Four columns become two before Gutenberg stacks them */
 @media (min-width: 782px) and (max-width: 1100px) {
 
	 .services-grid.wp-block-columns {
		 flex-wrap: wrap !important;
	 }
 
	 .services-grid > .wp-block-column {
		 flex-basis: calc(50% - 8px) !important;
	 }
 }
 
 /** --------------------------------------------------
  * Reduced-motion accessibility
  * -------------------------------------------------- */
 
 @media (prefers-reduced-motion: reduce) {
 
	 .service-card,
	 .service-card::after,
	 .service-card .wp-block-cover__image-background,
	 .service-card .wp-block-cover__background,
	 .service-card__content,
	 .service-card__details,
	 .service-card__link {
		 transition: none;
	 }
 
	 .service-card__content,
	 .service-card__details,
	 .service-card__link {
		 opacity: 1;
		 transform: none;
		 max-height: none;
	 }
 
	 .service-card__details {
		 overflow: visible;
	 }
 }
 
 /** addition to make services section look more editorial **/
 
 /** --------------------------------------------------
  * Services grid — editorial layout
  *
  * Keeps the service-card interaction, but brings the
  * overall composition closer to the Case Studies
  * section without making the two sections identical.
  * -------------------------------------------------- */
 
 .services-grid.wp-block-columns {
	 display: grid;
	 grid-template-columns: repeat(12, minmax(0, 1fr));
 
	 gap: clamp(18px, 2vw, 28px);
 
	 align-items: start;
 }
 
 
 /**
  * Gutenberg Columns normally has flex rules.
  * Reset those now that the parent is CSS Grid.
  */
 .services-grid > .wp-block-column {
	 display: block;
 
	 min-width: 0;
	 width: auto;
 
	 flex: none !important;
 }
 
 
 /** --------------------------------------------------
  * Individual service positions
  *
  * Slight stagger, but deliberately less dramatic
  * than the Case Studies section.
  * -------------------------------------------------- */
 
 .services-grid > .wp-block-column:nth-child(1) {
	 grid-column: 1 / span 3;
 
	 margin-top: 45px;
 
	 aspect-ratio: 0.80;
 }
 
 .services-grid > .wp-block-column:nth-child(2) {
	 grid-column: 4 / span 3;
 
	 margin-top: 0;
 
	 aspect-ratio: 0.76;
 }
 
 .services-grid > .wp-block-column:nth-child(3) {
	 grid-column: 7 / span 3;
 
	 margin-top: 60px;
 
	 aspect-ratio: 0.80;
 }
 
 .services-grid > .wp-block-column:nth-child(4) {
	 grid-column: 10 / span 3;
 
	 margin-top: 20px;
 
	 aspect-ratio: 0.76;
 }
 
 
 /** --------------------------------------------------
  * Cards fill their grid cells
  * -------------------------------------------------- */
 
 .services-grid .service-card.wp-block-cover {
	 width: 100%;
	 height: 100%;
 
	 min-height: 0;
 
	 border-radius: 20px;
 }
 
 
 /** --------------------------------------------------
  * Slightly more editorial service titles
  * -------------------------------------------------- */
 
 .services-grid .service-card__top {
	 top: 26px;
	 left: 26px;
	 right: 26px;
 }
 
 .services-grid .service-card__title {
	 font-size: clamp(1.65rem, 2.1vw, 2.25rem);
	 line-height: 1.05;
	 letter-spacing: -0.035em;
 }
 
 
 /** --------------------------------------------------
  * Bottom spacing
  *
  * Keeps the service cards visually similar to the
  * project cards while retaining the service reveal.
  * -------------------------------------------------- */
 
 .services-grid .service-card__content {
	 transform: translateY(calc(100% - 82px));
 }
 
 
 /** --------------------------------------------------
  * Softer base gradient
  *
  * Case studies are darker/more cinematic.
  * Services remain slightly cleaner and lighter so
  * the two components are related but not identical.
  * -------------------------------------------------- */
 
 .services-grid .service-card::before {
	 background:
		 linear-gradient(
			 to bottom,
			 rgba(0, 0, 0, 0.38) 0%,
			 rgba(0, 0, 0, 0.16) 25%,
			 rgba(0, 0, 0, 0.05) 46%,
			 rgba(0, 0, 0, 0.20) 67%,
			 rgba(0, 0, 0, 0.66) 100%
		 );
 }
 
 
 /** --------------------------------------------------
  * Hover
  * -------------------------------------------------- */
 
 @media (hover: hover) and (pointer: fine) {
 
	 .services-grid .service-card:hover::after,
	 .services-grid .service-card:focus-within::after {
		 opacity: 1;
	 }
 
	 .services-grid .service-card:hover .service-card__content,
	 .services-grid .service-card:focus-within .service-card__content {
		 transform: translateY(0);
	 }
 }
 
 
 /** --------------------------------------------------
  * Tablet
  * -------------------------------------------------- */
 
 @media screen and (min-width: 782px) and (max-width: 1100px) {
 
	 .services-grid.wp-block-columns {
		 display: grid;
		 grid-template-columns: repeat(2, minmax(0, 1fr));
 
		 gap: 20px;
	 }
 
	 .services-grid > .wp-block-column:nth-child(1),
	 .services-grid > .wp-block-column:nth-child(2),
	 .services-grid > .wp-block-column:nth-child(3),
	 .services-grid > .wp-block-column:nth-child(4) {
		 grid-column: auto;
 
		 aspect-ratio: 0.82;
	 }
 
	 .services-grid > .wp-block-column:nth-child(1) {
		 margin-top: 25px;
	 }
 
	 .services-grid > .wp-block-column:nth-child(2) {
		 margin-top: 0;
	 }
 
	 .services-grid > .wp-block-column:nth-child(3) {
		 margin-top: 0;
	 }
 
	 .services-grid > .wp-block-column:nth-child(4) {
		 margin-top: 25px;
	 }
 }
 
 
 /** --------------------------------------------------
  * Mobile
  * -------------------------------------------------- */
 
 @media screen and (max-width: 781px) {
 
	 .services-grid.wp-block-columns {
		 display: grid;
		 grid-template-columns: 1fr;
 
		 gap: 18px;
	 }
 
	 .services-grid > .wp-block-column:nth-child(1),
	 .services-grid > .wp-block-column:nth-child(2),
	 .services-grid > .wp-block-column:nth-child(3),
	 .services-grid > .wp-block-column:nth-child(4) {
		 grid-column: auto;
 
		 width: 100%;
		 margin-top: 0;
 
		 aspect-ratio: 1 / 1.05;
	 }
 
	 .services-grid .service-card.wp-block-cover {
		 min-height: 0;
	 }
 
	 .services-grid .service-card__top {
		 top: 22px;
		 left: 22px;
		 right: 22px;
	 }
 }
 
 /** --------------------------------------------------
  * FAQ section
  * Gutenberg Columns > Details blocks
  * -------------------------------------------------- */


 
 .faq-layout > .wp-block-column:first-child {
	 position: sticky;
	 top: 120px;
 }
 
 .faq-layout > .wp-block-column:last-child {
	 min-width: 0;
 }
 
 /** FAQ heading */
 .faq-section__heading {
	 margin: 0;
 
	 font-size: clamp(3rem, 5.5vw, 6.5rem);
	 font-weight: 400;
	 line-height: 0.98;
	 letter-spacing: -0.045em;
 }
 
 .faq-section__heading em {
	 display: block;
	 font-weight: inherit;
 }
 
 /** FAQ list */
 .faq-list {
	 margin: 0;
 }
 
 /** Individual Gutenberg Details block */
 .faq-item {
	 --faq-duration: 650ms;
	 --faq-ease: cubic-bezier(0.16, 1, 0.3, 1);
 
	 margin: 0;
	 padding: 0;
 
	 border: 0;
	 border-bottom: 1px solid rgba(17, 17, 17, 0.2);
 }
 
 /**
  * Gutenberg outputs the question as <summary>.
  */
 .faq-item > summary {
	 position: relative;
 
	 display: grid;
	 grid-template-columns: 42px minmax(0, 1fr);
	 align-items: start;
	 column-gap: 12px;
 
	 padding: 28px 0;
 
	 color: inherit;
	 cursor: pointer;
	 list-style: none;
 
	 font-size: clamp(1.5rem, 2vw, 2.7rem);
	 font-weight: 400;
	 line-height: 1.14;
	 letter-spacing: -0.025em;
 
	 transition: color 350ms ease;
 }
 
 /** Remove browser disclosure marker */
 .faq-item > summary::-webkit-details-marker {
	 display: none;
 }
 
 .faq-item > summary::marker {
	 content: "";
 }
 
 /** Custom [+] / [−] */
 .faq-item > summary::before {
	 content: "[+]";
 
	 grid-column: 1;
	 grid-row: 1;
 
	 font-variant-numeric: tabular-nums;
	 white-space: nowrap;
 
	 transition:
		 transform 500ms var(--faq-ease),
		 color 350ms ease;
 }
 
 .faq-item[open] > summary::before {
	 content: "[−]";
 }
 
 /** Question text */
 .faq-item > summary > * {
	 grid-column: 2;
 }
 
 /** Some WordPress versions leave the summary text directly as a text node */
 .faq-item > summary {
	 text-wrap: balance;
 }
 
 .faq-item > summary:hover,
 .faq-item > summary:focus-visible {
	 color: var(--red);
 }
 
 .faq-item > summary:focus-visible {
	 outline: 2px solid currentColor;
	 outline-offset: 6px;
 }
 
 /** Answer animation wrapper added by JavaScript */
 .faq-item__content {
	 overflow: hidden;
	 height: 0;
	 opacity: 0;
 }
 
 /** Inner answer area */
 .faq-item__inner {
	 padding: 0 0 32px 54px;
 
	 color: rgba(17, 17, 17, 0.72);
	 font-size: clamp(1rem, 1.25vw, 1.2rem);
	 line-height: 1.55;
 
	 opacity: 0;
	 transform: translateY(-12px);
 
	 will-change: transform, opacity;
 }
 
 .faq-item__inner > :first-child {
	 margin-top: 0;
 }
 
 .faq-item__inner > :last-child {
	 margin-bottom: 0;
 }
 
 /** Open state before JS initialises / no-JS fallback */
 .faq-item[open] > :not(summary) {
	 display: block;
 }
 
 /** Tablet/mobile */
 @media screen and (max-width: 63.9375em) {
 
 
	 .faq-layout > .wp-block-column:first-child {
		 position: static;
	 }
 
	 .faq-item > summary {
		 grid-template-columns: 36px minmax(0, 1fr);
		 padding: 24px 0;
	 }
 
	 .faq-item__inner {
		 padding-left: 48px;
	 }
 }
 
 @media screen and (max-width: 39.9375em) {
 
	 .faq-section {
		 padding-top: 64px;
		 padding-bottom: 64px;
	 }
 
	 .faq-item > summary {
		 grid-template-columns: 30px minmax(0, 1fr);
		 column-gap: 8px;
 
		 font-size: 1.45rem;
	 }
 
	 .faq-item__inner {
		 padding-left: 38px;
		 padding-bottom: 26px;
	 }
 }
 
 @media (prefers-reduced-motion: reduce) {
 
	 .faq-item > summary,
	 .faq-item > summary::before,
	 .faq-item__content {
		 transition: none;
	 }
 }
 
 /** --------------------------------------------------
  * Working with Cadguys – Gutenberg wrapper support
  * -------------------------------------------------- */
 
 .working-with-grid {
	 --trust-gap: clamp(20px, 2.4vw, 40px);
	 --trust-radius: 20px;
	 --trust-border: rgba(17, 17, 17, 0.28);
 
	 width: 100%;
 }
 
 /**
  * Gutenberg inserts an inner-container wrapper.
  * This is the actual three-column grid.
  */
 .working-with-grid > .wp-block-group__inner-container {
	 display: grid;
	 grid-template-columns:
		 minmax(220px, 0.9fr)
		 minmax(360px, 1.45fr)
		 minmax(220px, 0.9fr);
	 align-items: stretch;
	 gap: var(--trust-gap);
 
	 width: 100%;
	 max-width: none;
 }
 
 /** Left and right card stacks */
 .trust-stack {
	 margin: 0;
 }
 
 .trust-stack > .wp-block-group__inner-container {
	 display: grid;
	 grid-template-rows: repeat(2, minmax(0, 1fr));
	 gap: var(--trust-gap);
 
	 width: 100%;
	 height: 100%;
	 max-width: none;
 }
 
 /** Individual cards */
 .trust-card {
	 height: 100%;
	 margin: 0;
 }
 
 .trust-card > .wp-block-group__inner-container {
	 display: flex;
	 flex-direction: column;
	 align-items: flex-start;
	 justify-content: center;
 
	 box-sizing: border-box;
	 width: 100%;
	 height: 100%;
	 max-width: none;
	 min-height: 245px;
	 padding: clamp(24px, 2.4vw, 31px);
 
	 border: 1px solid var(--trust-border);
	 border-radius: var(--trust-radius);
	 background: var(--white);
 
	 transition:
		 transform 700ms cubic-bezier(0.16, 1, 0.3, 1),
		 border-color 500ms ease,
		 box-shadow 700ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .trust-card:hover > .wp-block-group__inner-container {
	 transform: translateY(-6px);
	 border-color: rgba(17, 17, 17, 0.48);
	 box-shadow: 0 18px 50px rgba(17, 17, 17, 0.07);
 }
 
 /** Centre video column */
 .trust-media {
	 position: relative;
	 isolation: isolate;
	 overflow: hidden;
 
	 min-width: 0;
	 min-height: 100%;
	 margin: 0;
 
	 border-radius: var(--trust-radius);
	 background: #e6e3df;
 }
 
 .trust-media > .wp-block-group__inner-container {
	 position: relative;
 
	 width: 100%;
	 height: 100%;
	 min-height: 100%;
	 max-width: none;
 }
 
 .trust-media .wp-block-video {
	 position: absolute;
	 inset: 0;
 
	 width: 100%;
	 height: 100%;
	 margin: 0;
 }
 
 .trust-media video {
	 display: block;
 
	 width: 100%;
	 height: 100%;
 
	 object-fit: cover;
	 object-position: center;
 
	 transition:
		 transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
		 opacity 500ms ease;
 }
 
 .trust-media:hover video {
	 transform: scale(1.035);
 }
 
 /** Logo */
 .trust-card__logo {
	 width: 48px;
	 margin: 0 0 26px;
 }
 
 .trust-card__logo img {
	 display: block;
	 width: 48px;
	 height: 48px;
	 object-fit: contain;
 }
 
 /** Card typography */
 .trust-card__title {
	 margin: 0 0 16px;
	 font-size: clamp(1.25rem, 1.5vw, 1.65rem);
	 font-weight: 400;
	 line-height: 1.2;
 }
 
 .trust-card p {
	 margin: 0;
 }
 
 
 /** --------------------------------------------------
  * Homeowners hero
  * Gutenberg Cover > Group > Columns
  * -------------------------------------------------- */
 
 .homeowners-hero {
	 --hero-radius: 24px;
	 --hero-gap: clamp(36px, 5vw, 88px);
	 --hero-background: #eaeaea;
 
	 position: relative;
	 min-height: auto;
 
	 background: var(--white);
	 padding: 0;
 }
 
 .homeowners-hero > .wp-block-cover__background {
	 display: none;
 }
 
 .homeowners-hero > .wp-block-cover__inner-container {
	 width: 100%;
	 max-width: none;
 }
 
 /** Main rounded panel */
 
 .homeowners-hero__panel {
	 overflow: hidden;
	 padding-block:
		 clamp(48px, 10vw, 140px)
		 clamp(28px, 3.5vw, 54px);
 
	 background: var(--hero-background);
	 border-radius: var(--hero-radius);
 }
 
 
 .homeowners-hero__inner { 
	 width: 100%;
 
 }
 
 .homeowners-hero__inner > .wp-block-group__inner-container {
	 width: 100%;
	 max-width: none;
 }
 
 /** --------------------------------------------------
  * Main two-column layout
  * -------------------------------------------------- */
 
 .homeowners-hero__columns {
	 display: grid !important;
	 grid-template-columns:
		 minmax(0, 0.82fr)
		 minmax(420px, 1.18fr);
	 align-items: center;
 
	 gap: var(--hero-gap);
 
	 margin: 0;
 }
 
 /** ==================================================
  * PROJECT PAGE HERO
  * 50 / 50 layout
  * ================================================== */
 
 .project-hero .homeowners-hero__columns {
	 grid-template-columns:
		 minmax(0, 1fr)
		 minmax(0, 1fr);
 }
 .project-hero .homeowners-hero__columns {
	 grid-template-columns:
		 minmax(0, 1fr)
		 minmax(0, 1fr);
 
	 gap: clamp(2.5rem, 4vw, 5rem);
 }
 
 .project-hero .homeowners-hero__visual,
 .project-hero .homeowners-hero__image {
	 width: 100%;
 }
 
 .homeowners-hero__columns > .wp-block-column {
	 min-width: 0;
	 margin: 0;
 }
 
 /** Gutenberg may add width values to columns */
 .homeowners-hero__columns > .wp-block-column {
	 flex-basis: auto !important;
 }
 
 /** --------------------------------------------------
  * Copy column
  * -------------------------------------------------- */
 
 .homeowners-hero__copy {
	 display: flex;
	 flex-direction: column;
	 align-items: flex-start;
 }
 
 .eyebrow {
	 margin: 0 0 24px;
	 font-size: 0.78rem;
	 font-weight: 500;
	 line-height: 1;
	 letter-spacing: 0.18em;
	 text-transform: uppercase;
	 opacity: .7;
 }
 
 .homeowners-hero__title {
	 --font-size-max: 62;
 }
 
 .homeowners-hero__title em {
	 font-weight: inherit;
 }

 
 .homeowners-hero__actions {
	 margin-top: clamp(28px, 3vw, 42px);
 }
 
 /**
  * Keep your existing button styling.
  * This only adjusts hero sizing.
  */
 
 /** Optional reassurance beneath button */
 .homeowners-hero__reassurance{
	 display:flex;
	 align-items:center;
	 gap:10px;
 
	 margin-top:10px;
	 margin-left: 10px;
 
	 font-size:.95rem;
	 color:#6f6f6f;
	 font-weight:500;
 }
 
 .homeowners-hero__reassurance svg{
	 width:16px;
	 height:16px;
 }
 
 /** --------------------------------------------------
  * Media column
  * -------------------------------------------------- */
 
 .homeowners-hero__media {
	 min-width: 0;
 }
 
 .homeowners-hero__media > .wp-block-column__content,
 .homeowners-hero__media > .wp-block-group__inner-container {
	 width: 100%;
	 max-width: none;
 }
 
 .homeowners-hero__video,
 .homeowners-hero__image {
	 position: relative;
	 isolation: isolate;
	 overflow: hidden;
 
	 width: 100%;
	 aspect-ratio: 16 / 10;
	 margin: 0;
 
	 border-radius: 22px;
	 background: #d9d7d2;
 }
 
 .homeowners-hero__video video,
 .homeowners-hero__image img {
	 display: block;
 
	 width: 100%;
	 height: 100%;
 
	 object-fit: cover;
	 object-position: center;
 
	 transition:
		 transform 1.4s cubic-bezier(0.16, 1, 0.3, 1),
		 opacity 500ms ease;
 }
 
 .homeowners-hero__video:hover video {
	 transform: scale(1.025);
 }
 
 /** Poster remains visible while video is deferred */
 .homeowners-hero__video:not(.is-video-loaded) video {
	 opacity: 0;
 }
 
 .homeowners-hero__video.is-video-loaded video {
	 opacity: 1;
 }
 
 /** --------------------------------------------------
  * Homeowners hero ratings
  * -------------------------------------------------- */
 
 .homeowners-hero__ratings {
	 display: flex;
	 align-items: center;
	 justify-content: space-between;
	 flex-wrap: wrap;
 
	 gap: 14px 32px;
	 width: 100%;
	 margin-top: 14px;
 }
 
 .homeowners-hero__rating {
	 display: inline-flex;
	 align-items: center;
	 gap: 6px;
 
	 min-width: 0;
	 margin: 0;
 
	 font-size: clamp(0.95rem, 1.1vw, 1.15rem);
	 line-height: 1;
	 white-space: nowrap;
 }
 
 .homeowners-hero__stars {
	 color: #f5bd3d;
	 font-size: 1.25em;
	 letter-spacing: -0.08em;
	 line-height: 1;
 }
 
 .homeowners-hero__score,
 .homeowners-hero__separator {
	 color: var(--black);
 }
 
 .homeowners-hero__rating-logo {
	 display: block;
	 width: auto;
	 max-width: none;
	 object-fit: contain;
 }
 
 /* Adjust individually because the logos have different proportions */
 .homeowners-hero__rating-logo--google {
	 height: 24px;
 }
 
 .homeowners-hero__rating-logo--checkatrade {
	 height: 21px;
 }
 
 @media screen and (max-width: 39.9375em) {
	 .homeowners-hero__ratings {
		 align-items: flex-start;
		 flex-direction: column;
		 gap: 12px;
	 }
 
	 .homeowners-hero__rating {
		 font-size: 0.95rem;
	 }
 
	 .homeowners-hero__rating-logo--google {
		 height: 21px;
	 }
 
	 .homeowners-hero__rating-logo--checkatrade {
		 height: 19px;
	 }
 }
 
 /** --------------------------------------------------
  * Benefits strip
  * -------------------------------------------------- */
 
 .homeowners-hero__benefits {
	 margin-top: clamp(42px, 5vw, 60px);
 }
 
 .homeowners-hero__benefits > .wp-block-group__inner-container {
	 display: grid;
	 grid-template-columns: repeat(4, minmax(0, 1fr));
	 align-items: start;
 
	 gap: 20px 34px;
 
	 width: 100%;
	 max-width: none;
 }
 
 .homeowners-hero__benefit {
	 position: relative;
 
	 margin: 0;
	 padding-left: 28px;
 
	 font-size: clamp(0.95rem, 1.1vw, 1.15rem);
	 line-height: 1.35;
 }
 
 .homeowners-hero__benefit::before {
	 content: "✓";
	 position: absolute;
	 top: 0;
	 left: 0;
 
	 font-weight: 500;
 }
 
 /** --------------------------------------------------
  * Tablet
  * -------------------------------------------------- */
 
 @media screen and (max-width: 63.9375em) {
 
	 .homeowners-hero__columns {
		 grid-template-columns: 1fr;
	 }
 
	 .homeowners-hero__copy {
		 max-width: 760px;
	 }
 
	 .homeowners-hero__media {
		 width: 100%;
	 }
 
	 .homeowners-hero__benefits > .wp-block-group__inner-container {
		 grid-template-columns: repeat(2, minmax(0, 1fr));
	 }
 }
 
 /** --------------------------------------------------
  * Mobile
  * -------------------------------------------------- */
 
 @media screen and (max-width: 39.9375em) {
 
 
	 .homeowners-hero__inner {
		 padding: 42px 20px 24px;
		 border-radius: 18px;
	 }
 
	 .homeowners-hero__columns {
		 gap: 42px;
	 }
 
	 .eyebrow {
		 margin-bottom: 18px;
	 }
 
	 .homeowners-hero__description {
		 margin-top: 24px;
	 }
 
	 .homeowners-hero__actions {
		 width: 100%;
	 }
 
	 .homeowners-hero__actions .wp-block-button,
	 .homeowners-hero__actions .wp-element-button {
		 width: 100%;
	 }
 
	 .homeowners-hero__video,
	 .homeowners-hero__image {
		 aspect-ratio: 4 / 3;
		 border-radius: 16px;
	 }
 
	 .homeowners-hero__benefits {
		 margin-top: 42px;
	 }
 
	 .homeowners-hero__benefits > .wp-block-group__inner-container {
		 grid-template-columns: 1fr;
		 gap: 15px;
	 }
 }
 
 /** --------------------------------------------------
  * Reduced motion
  * -------------------------------------------------- */
 
 @media (prefers-reduced-motion: reduce) {
 
	 .homeowners-hero__video video {
		 transition: none;
	 }
 
	 .homeowners-hero__video:hover video {
		 transform: none;
	 }
 }
 
 /** --------------------------------------------------
  * Reviews section
  * -------------------------------------------------- */
 
 .reviews-section {
	 --review-radius: 22px;
	 --review-background: #e8ebed;
	 --review-duration: 700ms;
	 --review-ease: cubic-bezier(0.16, 1, 0.3, 1);
 
	 overflow: hidden;
 
	 padding-top: clamp(80px, 9vw, 150px);
	 padding-bottom: clamp(80px, 9vw, 150px);
 }
 
 
 
 /** --------------------------------------------------
  * Swiper layout
  * -------------------------------------------------- */
 
 .reviews-slider {
	 position: relative;
	 width: 100%;
 }
 
 .reviews-slider .swiper {
	 overflow: visible;
	 width: 100%;
 }
 
 .reviews-slider > .wp-block-group__inner-container {
	 width: 100%;
	 max-width: none;
 }
 
 .reviews-slider .swiper-wrapper {
	 align-items: stretch;
 }
 
 .reviews-slider .swiper-slide {
	 height: auto;
 }
 
 /** --------------------------------------------------
  * Review cards
  * -------------------------------------------------- */
 
 .review-card {
	 overflow: hidden;
	 height: auto;
	 margin: 0;
 
	 border-radius: var(--review-radius);
	 background: var(--review-background);
 
	 transition:
		 transform var(--review-duration) var(--review-ease),
		 box-shadow var(--review-duration) var(--review-ease);
 }
 
 .review-card > .wp-block-group__inner-container {
	 display: flex;
	 flex-direction: column;
 
	 box-sizing: border-box;
	 min-height: 520px;
	 height: 100%;
	 max-width: none;
	 padding: clamp(28px, 3vw, 46px);
 }
 
 .review-card:hover {
	 transform: translateY(-6px);
	 box-shadow: 0 22px 60px rgba(17, 17, 17, 0.08);
 }
 
 /** Rating */
 
 .review-card__rating {
	 margin: 0;
 }
 .review-card__rating p {
	 margin-bottom: 0.25rem;
	 font-weight: 700;
 }
 
 .review-card__rating > .wp-block-group__inner-container {
	 display: flex;
	 align-items: center;
	 gap: 10px;
 
	 max-width: none;
 }
 
 .review-card__stars {
	 margin: 0;
	 color: var(--red);
	 letter-spacing: 0.04em;
 }
 
 .review-card__score {
	 margin: 0;
 }
 
 /** Quote */
 
 .review-card__quote {
	 margin-top: auto;
	 margin-bottom: clamp(42px, 5vw, 74px);
 }
 
 /** Author details */
 
 .review-card__author {
	 margin: 0;
 }
 
 .review-card__author > .wp-block-group__inner-container {
	 max-width: none;
 }
 
 .review-card__name {
	 margin: 0 0 4px;
	 font-weight: 500;
 }
 
 .review-card__project,
 .review-card__location {
	 margin: 0;
 
	 color: rgba(17, 17, 17, 0.65);
	 font-size: 0.9rem;
 }
 
 /** --------------------------------------------------
  * Dark platform card
  * -------------------------------------------------- */
 
 .review-card--platform {
	 color: var(--white);
	 background:
		 radial-gradient(
			 circle at 100% 100%,
			 rgba(51, 145, 255, 0.5),
			 transparent 45%
		 ),
		 var(--black);
 }
 
 .review-card--platform > .wp-block-group__inner-container {
	 align-items: center;
	 justify-content: center;
	 text-align: center;
 }
 
 .review-card--platform .review-card__quote {
	 margin: 24px 0;
 }
 
 .review-card--platform .review-card__project,
 .review-card--platform .review-card__location {
	 color: rgba(255, 255, 255, 0.7);
 }
 
 /** --------------------------------------------------
  * Image-led review
  * -------------------------------------------------- */
 
 .review-card--image {
	 position: relative;
	 isolation: isolate;
 
	 color: var(--white);
	 background: var(--black);
 }
 
 .review-card--image .wp-block-cover,
 .review-card--image > .wp-block-group__inner-container {
	 height: 100%;
	 min-height: 520px;
 }
 
 .review-card--image .wp-block-cover__image-background {
	 transition:
		 transform 1.2s var(--review-ease);
 }
 
 .review-card--image:hover .wp-block-cover__image-background {
	 transform: scale(1.04);
 }
 
 /** --------------------------------------------------
  * Reviews slider controls
  * Gutenberg Group wrapper support
  * -------------------------------------------------- */
 
 .reviews-slider__navigation {
	 width: 100%;
	 margin-top: 34px;
 }
 
 /**
  * This is the actual wrapper containing the buttons
  * when reviews-slider__navigation is a Gutenberg Group.
  */
 .reviews-slider__navigation > .wp-block-group__inner-container {
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 gap: 18px;
 
	 width: auto;
	 max-width: none;
	 margin: 0 auto;
 }
 
 /**
  * Also support the controls if they are placed in one
  * Custom HTML block without a Gutenberg inner wrapper.
  */
 .reviews-slider__navigation:not(
	 :has(> .wp-block-group__inner-container)
 ) {
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 gap: 18px;
 }
 
 /** Navigation buttons */
 .reviews-slider__prev,
 .reviews-slider__next {
	 position: static !important;
	 inset: auto !important;
 
	 display: inline-flex;
	 flex: 0 0 46px;
	 align-items: center;
	 justify-content: center;
 
	 width: 46px;
	 height: 46px;
	 margin: 0 !important;
	 padding: 0;
 
	 color: var(--white);
	 background: var(--black);
	 border: 0;
	 border-radius: 50%;
 
	 cursor: pointer;
 
	 transform: none;
	 transition:
		 transform 400ms var(--review-ease),
		 opacity 300ms ease;
 }
 
 /** Remove any Swiper-generated arrow icons */
 .reviews-slider__prev::after,
 .reviews-slider__next::after {
	 content: none !important;
 }
 
 .reviews-slider__prev:hover,
 .reviews-slider__next:hover {
	 transform: scale(1.07);
 }
 
 .reviews-slider__prev.swiper-button-disabled,
 .reviews-slider__next.swiper-button-disabled {
	 opacity: 0.3;
	 cursor: default;
	 transform: none;
 }
 
 /** Pagination */
 .reviews-slider__pagination {
	 position: static !important;
	 inset: auto !important;
 
	 display: flex;
	 flex: 0 0 auto;
	 align-items: center;
	 justify-content: center;
 
	 width: auto !important;
	 margin: 0;
	 transform: none !important;
 }
 
 .reviews-slider__pagination .swiper-pagination-bullet {
	 flex: 0 0 auto;
 
	 width: 7px;
	 height: 7px;
	 margin: 0 5px !important;
 
	 background: var(--black);
	 opacity: 0.25;
 
	 transition:
		 width 400ms var(--review-ease),
		 opacity 300ms ease;
 }
 
 .reviews-slider__pagination
	 .swiper-pagination-bullet-active {
	 width: 24px;
	 border-radius: 999px;
	 opacity: 1;
 }
 
 /** --------------------------------------------------
  * Mobile
  * -------------------------------------------------- */
 
 @media screen and (max-width: 39.9375em) {
 
	 .review-card > .wp-block-group__inner-container {
		 min-height: 440px;
		 padding: 28px;
	 }
 
	 .review-card__quote {
		 font-size: 1.5rem;
	 }
 }
 
 /** --------------------------------------------------
  * Reduced motion
  * -------------------------------------------------- */
 
 @media (prefers-reduced-motion: reduce) {
 
	 .review-card,
	 .review-card--image .wp-block-cover__image-background,
	 .reviews-slider__prev,
	 .reviews-slider__next,
	 .reviews-slider__pagination .swiper-pagination-bullet {
		 transition: none;
	 }
 
	 .review-card:hover,
	 .review-card--image:hover
		 .wp-block-cover__image-background {
		 transform: none;
	 }
 }
 
 /** --------------------------------------------------
  * Checkatrade platform review card
  * -------------------------------------------------- */
 
 .review-card--platform {
	 position: relative;
	 isolation: isolate;
	 overflow: hidden;
 
	 color: var(--white);
	 background:
		 radial-gradient(
			 circle at 92% 105%,
			 rgba(39, 139, 209, 0.72) 0%,
			 rgba(39, 139, 209, 0.28) 26%,
			 transparent 54%
		 ),
		 linear-gradient(
			 145deg,
			 #050607 0%,
			 #0c1118 58%,
			 #142234 100%
		 );
 }
 
 /** Very subtle texture/light bloom */
 .review-card--platform::before {
	 content: "";
	 position: absolute;
	 inset: 0;
	 z-index: -1;
	 pointer-events: none;
 
	 background:
		 radial-gradient(
			 circle at 18% 12%,
			 rgba(255, 255, 255, 0.04),
			 transparent 34%
		 );
 
	 opacity: 0.9;
 }
 
 .review-card--platform > .wp-block-group__inner-container {
	 display: grid;
	 grid-template-rows: 1fr auto;
	 align-items: stretch;
 
	 min-height: 620px;
	 height: 100%;
	 padding: clamp(34px, 3vw, 52px);
 
	 text-align: center;
 }
 
 /** --------------------------------------------------
  * Main centred area
  * -------------------------------------------------- */
 
 .review-platform__main {
	 margin: 0;
 }
 
 .review-platform__main > .wp-block-group__inner-container {
	 display: flex;
	 flex-direction: column;
	 align-items: center;
	 justify-content: center;
 
	 height: 100%;
	 max-width: none;
 }
 
 /** Large Checkatrade logo */
 .review-platform__logo {
	 margin: 0 0 30px;
 }
 .review-platform__logo {
	 width: 243px;
	 max-width: 80%;
	 margin-inline: auto;
 }
 
 .review-platform__logo img {
	 display: block;
	 width: 100%;
	 height: auto;
	 object-fit: contain;
 }
 
 /** Rating line */
 .review-platform__stars {
	 margin: 0 0 42px;
 }
 
 .review-platform__stars > .wp-block-group__inner-container {
	 display: flex;
	 flex-direction: column;
	 align-items: center;
	 gap: 12px;
 
	 max-width: none;
 }
 
 .review-platform__stars p {
	 margin: 0;
 }
 
 .review-platform__stars p:first-child {
	 color: #ffda3f;
	 font-size: clamp(2rem, 3vw, 3.2rem);
	 line-height: 1;
	 letter-spacing: 0.02em;
 }
 
 .review-platform__stars p:last-child {
	 font-size: 2.5rem;
	 opacity: 0.9;
 }
 
 /** CTA */
 .review-platform__button {
	 margin: 0;
 }
 
 .review-platform__button .wp-element-button {
	 min-width: 190px;
	 padding: 11px 24px;
 
	 color: var(--black);
	 background: var(--white);
	 border-radius: 999px;
 
	 font-size: 0.95rem;
 }
 
 .review-platform__button .wp-element-button:hover,
 .review-platform__button .wp-element-button:focus-visible {
	 color: var(--white);
	 background: #ef4f3f;
 }
 
 /** --------------------------------------------------
  * Bottom trust row
  * -------------------------------------------------- */
 
 .review-platform__footer {
	 margin: 0;
 }
 
 .review-platform__footer > .wp-block-group__inner-container {
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 gap: 7px;
 
	 max-width: none;
 }
 
 .review-platform__mark {
	 width: 42px;
	 margin: 0;
 }
 
 .review-platform__mark img {
	 display: block;
	 width: 100%;
	 height: auto;
	 object-fit: contain;
 }
 
 .review-platform__count {
	 margin: 0;
 
	 color: rgba(255, 255, 255, 0.88);
	 font-size: 0.95rem;
	 font-weight: 700;
 }
 
 /** Keep platform-card links clean */
 .review-card--platform a {
	 color: inherit;
 }
 
 /** Mobile */
 @media screen and (max-width: 39.9375em) {
 
	 .review-card--platform > .wp-block-group__inner-container {
		 min-height: 520px;
		 padding: 30px;
	 }
 
	 .review-platform__logo {
		 width: min(190px, 76%);
	 }
 
	 .review-platform__stars {
		 margin-bottom: 34px;
	 }
 }
 
 /** --------------------------------------------------
  * Standard testimonial card
  * Unikorns-inspired editorial layout
  * -------------------------------------------------- */
 
 .review-card:not(.review-card--platform):not(.review-card--image) {
	 --review-card-bg: #e9edef;
	 --review-card-text: #11151b;
	 --review-card-muted: rgba(17, 21, 27, 0.62);
 
	 color: var(--review-card-text);
	 background: var(--review-card-bg);
 }
 
 /**
  * This inner Gutenberg wrapper controls the complete
  * vertical layout of the card.
  */
 .review-card:not(.review-card--platform):not(.review-card--image)
	 > .wp-block-group__inner-container {
	 display: grid;
	 grid-template-rows: auto 1fr auto;
 
	 box-sizing: border-box;
	 width: 100%;
	 height: 100%;
	 min-height: 620px;
	 max-width: none;
 
	 padding:
		 clamp(34px, 3vw, 48px)
		 clamp(30px, 3vw, 46px)
		 clamp(34px, 3vw, 46px);
 
	 border-radius: var(--review-radius);
 }
 
 /** --------------------------------------------------
  * Rating row
  * -------------------------------------------------- */
 
 .review-card__rating {
	 align-self: start;
	 margin: 0;
 }
 
 .review-card__rating > .wp-block-group__inner-container {
	 display: flex;
	 align-items: center;
	 flex-wrap: nowrap;
	 gap: 10px;
 
	 width: 100%;
	 max-width: none;
 }
 
 /** Platform icon */
 .review-card__platform-logo {
	 flex: 0 0 auto;
 
	 width: 30px;
	 margin: 0;
 }
 
 .review-card__platform-logo img {
	 display: block;
	 width: 30px;
	 height: 30px;
	 object-fit: contain;
 }
 
 /** Stars */
 .review-card__stars {
	 margin: 0;
 
	 color: #ef4f3f;
	 font-size: clamp(1.15rem, 1.45vw, 1.45rem);
	 line-height: 1;
	 letter-spacing: -0.04em;
	 white-space: nowrap;
 }
 
 /** Score */
 .review-card__score {
	 margin: 0 0 0 2px;
 
	 font-size: 0.95rem;
	 font-weight: 500;
	 line-height: 1;
	 white-space: nowrap;
 }
 
 /** --------------------------------------------------
  * Quote
  * -------------------------------------------------- */
 
 .review-card__quote {
	 align-self: end;
 
	 max-width: 92%;
	 margin:
		 clamp(90px, 9vw, 120px)
		 0
		 clamp(42px, 5vw, 72px);
 }

 
 /** --------------------------------------------------
  * Author details
  * -------------------------------------------------- */
 
 .review-card__author {
	 align-self: end;
	 margin: 0;
 }
 
 .review-card__author > .wp-block-group__inner-container {
	 display: flex;
	 flex-direction: column;
	 align-items: flex-start;
	 gap: 3px;
 
	 width: 100%;
	 max-width: none;
 }
 
 .review-card__name {
	 margin: 0 0 3px;
 
	 font-size: 1rem;
	 font-weight: 600;
	 line-height: 1.25;
 }
 
 .review-card__project,
 .review-card__location {
	 margin: 0;
 
	 color: var(--review-card-muted);
	 font-size: 0.88rem;
	 line-height: 1.4;
 }
 
 /**
  * If project and location are both short, you can put
  * them on one line by giving their parent this class:
  *
  * review-card__meta
  */
 .review-card__meta > .wp-block-group__inner-container {
	 display: flex;
	 flex-wrap: wrap;
	 gap: 4px 10px;
 }
 
 .review-card__meta p + p::before {
	 content: "•";
	 margin-right: 10px;
	 color: rgba(17, 21, 27, 0.35);
 }
 
 /** --------------------------------------------------
  * Hover
  * -------------------------------------------------- */
 
 .review-card:not(.review-card--platform):not(.review-card--image):hover {
	 transform: translateY(-5px);
	 box-shadow: 0 20px 50px rgba(17, 21, 27, 0.07);
 }
 
 /** --------------------------------------------------
  * Mobile
  * -------------------------------------------------- */
 
 @media screen and (max-width: 39.9375em) {
 
	 .review-card:not(.review-card--platform):not(.review-card--image)
		 > .wp-block-group__inner-container {
		 min-height: 520px;
		 padding: 28px;
	 }
 
	 .review-card__quote {
		 max-width: 100%;
		 margin-top: 72px;
		 margin-bottom: 42px;
 
		 font-size: 1.65rem;
	 }
 
	 .review-card__quote::before {
		 margin-bottom: 28px;
	 }
 }
 
 
/** --------------------------------------------------
  * PROCESS TIMELINE
  *
  * Shared component for:
  * - Homeowners page
  * - Professionals page
  *
  * Gutenberg structure:
  *
  * .homeowner-process
  * ├── .homeowner-process__header
  * └── .homeowner-process__timeline
  *     └── repeated .process-step Columns
  *
  * -------------------------------------------------- */
 
 
 /** --------------------------------------------------
  * Section
  * -------------------------------------------------- */
 
 .homeowner-process {
	 --process-background: #eaeaea;
	 --process-text: var(--black);
 
	 --process-muted: rgba(17, 23, 29, 0.65);
 
	 --process-line: rgba(17, 23, 29, 0.13);
	 --process-progress: rgba(17, 23, 29, 0.82);
 
	 --process-accent: var(--red);
 
	 --process-gap: clamp(42px, 8vw, 135px);
	 --process-radius: 20px;
 
	 position: relative;
	 overflow: hidden;
 
	 margin: 0 1em;
 
	 color: var(--process-text);
	 background: var(--process-background);
 
	 border-radius: var(--process-radius);
 }
 
 
 /** --------------------------------------------------
  * Remove Gutenberg's default vertical block margins
  * inside the component.
  * -------------------------------------------------- */
 
 .homeowner-process :where(
	 .wp-block-group,
	 .wp-block-columns,
	 .wp-block-column,
	 .wp-block-image,
	 .wp-block-cover
 ) {
	 margin-block-start: 0;
 }
 
 
 /** --------------------------------------------------
  * Header
  * -------------------------------------------------- */
 
 .homeowner-process__header
	 > .wp-block-group__inner-container {
	 width: 100%;
	 max-width: none;
 }
 
 
 .homeowner-process__header h2 {
	 color: inherit;
 }
 
 
 .homeowner-process__header p {
	 max-width: 620px;
 
 }
 
 
 /** --------------------------------------------------
  * Timeline wrapper
  * -------------------------------------------------- */
 
 .homeowner-process__timeline
	 > .wp-block-group__inner-container {
	 position: relative;
 
	 width: 100%;
	 max-width: none;
 }
 
 
 /** --------------------------------------------------
  * STATIC TIMELINE
  *
  * This is the faint line behind the animated line.
  * -------------------------------------------------- */
 
 .homeowner-process__timeline
	 > .wp-block-group__inner-container::before {
	 content: "";
 
	 position: absolute;
 
	 top: 0;
	 bottom: 0;
	 left: 50%;
	 z-index: 0;
 
	 width: 1px;
 
	 background: var(--process-line);
 
	 transform: translateX(-50%);
 
	 pointer-events: none;
 }
 
 
 /**
  * IMPORTANT:
  *
  * We deliberately do NOT use ::after for the
  * progress line anymore.
  *
  * JavaScript creates:
  *
  * .process-timeline__progress
  *
  * so there is only one moving line.
  */
 
 
 /** --------------------------------------------------
  * ANIMATED PROGRESS LINE
  * -------------------------------------------------- */
 
 .process-timeline__progress {
	 position: absolute;
 
	 top: 0;
	 bottom: 0;
	 left: 50%;
	 z-index: 2;
 
	 display: block;
 
	 width: 1px;
 
	 background: var(--process-progress);
 
	 transform:
		 translateX(-50%)
		 scaleY(0);
 
	 transform-origin: top center;
 
	 pointer-events: none;
 
	 will-change: transform;
 }
 
 
 /** --------------------------------------------------
  * Individual process step
  * -------------------------------------------------- */
 
 .process-step.wp-block-columns {
	 position: relative;
	 z-index: 1;
 
	 display: grid !important;
 
	 grid-template-columns:
		 repeat(2, minmax(0, 1fr));
 
	 align-items: center;
 
	 column-gap: var(--process-gap);
 
	 margin-top: 4rem;
	 margin-bottom: 4rem;
 
	 overflow: visible;
 }
 
 
 /**
  * Gutenberg may add flex-basis inline.
  * Grid controls these widths instead.
  */
 
 .process-step
	 > .wp-block-column {
	 min-width: 0;
 
	 flex-basis: auto !important;
 
	 margin: 0;
 }
 
 
 /** --------------------------------------------------
  * Alternating layout
  * -------------------------------------------------- */
 
 .process-step--reverse
	 .process-step__visual {
	 grid-column: 2;
	 grid-row: 1;
 }
 
 
 .process-step--reverse
	 .process-step__content {
	 grid-column: 1;
	 grid-row: 1;
 }
 
 
 /** --------------------------------------------------
  * TIMELINE NODE
  *
  * ::before = permanent red centre dot
  * ::after  = animated pulse ring
  * -------------------------------------------------- */
 
 
 /** Permanent centre dot */
 .process-step::before {
	 content: "";
 
	 position: absolute;
	 top: 50%;
	 left: 50%;
	 z-index: 5;
 
	 width: 11px;
	 height: 11px;
 
	 background: var(--process-accent);
 
	 border: 0;
	 border-radius: 50%;
 
	 box-shadow:
		 0 0 0 5px var(--process-background),
		 0 0 0 6px rgba(255, 82, 104, 0.35);
 
	 transform:
		 translate(-50%, -50%);
 
	 pointer-events: none;
 }
 
 
 /** Main pulse ring */
 .process-step::after {
	 content: "";
 
	 position: absolute;
	 top: 50%;
	 left: 50%;
	 z-index: 4;
 
	 width: 14px;
	 height: 14px;
 
	 border: 1px solid rgba(255,82,104,.28);
	 border-radius: 50%;
 
	 opacity: 0;
 
	 transform:
		 translate(-50%, -50%)
		 scale(0.8);
 
	 pointer-events: none;
 }
 
 
 /** Active pulse */
 .process-step.is-active::after {
	 animation:
		 process-timeline-pulse
		 2.4s
		 cubic-bezier(0.16, 1, 0.3, 1)
		 infinite;
 }
 
 
 @keyframes process-timeline-pulse {
 
	 0% {
		 opacity: 0.75;
 
		 transform:
			 translate(-50%, -50%)
			 scale(0.8);
	 }
 
	 35% {
		 opacity: 0.5;
	 }
 
	 75% {
		 opacity: 0.12;
 
		 transform:
			 translate(-50%, -50%)
			 scale(2.8);
	 }
 
	 100% {
		 opacity: 0;
 
		 transform:
			 translate(-50%, -50%)
			 scale(1.9);
	 }
 }
 
 
 
 /** --------------------------------------------------
  * Visual column
  * -------------------------------------------------- */
 
 .process-step__visual {
	 position: relative;
 
	 display: flex;
	 align-items: center;
 
	 overflow: hidden;
 
	 border-radius: var(--process-radius);
 }
 
 
 /**
  * Leave breathing room between the image
  * and centre timeline.
  */
 
 .process-step:not(.process-step--reverse)
	 .process-step__visual {
	 padding-right:
		 clamp(12px, 2vw, 36px);
 }
 
 
 .process-step--reverse
	 .process-step__visual {
	 padding-left:
		 clamp(12px, 2vw, 36px);
 }
 
 
 .process-step__visual
	 > * {
	 width: 100%;
 }
 
 
 /** --------------------------------------------------
  * Gutenberg Image block
  * -------------------------------------------------- */
 
 .process-step__image.wp-block-image {
	 position: relative;
	 overflow: hidden;
 
	 width: 100%;
	 margin: 0;
 
	 border-radius: var(--process-radius);
 
	 background: #e9ecee;
 }
 
 
 .process-step__image.wp-block-image img {
	 display: block;
 
	 width: 100%;
	 height: auto;
 
	 aspect-ratio: 3 / 2;
 
	 object-fit: cover;
	 object-position: center;
 
	 transform-origin: center;
 
	 will-change: transform;
 }
 
 
 /** --------------------------------------------------
  * Gutenberg Cover block
  *
  * Allows you to use either Image or Cover for
  * individual process visuals.
  * -------------------------------------------------- */
 
 .process-step__image.wp-block-cover {
	 position: relative;
	 overflow: hidden;
 
	 width: 100%;
 
	 min-height: 0;
	 aspect-ratio: 4 / 3;
 
	 padding: 0;
 
	 border-radius: var(--process-radius);
 
	 background: #e9ecee;
 }
 
 
 .process-step__image.wp-block-cover
	 .wp-block-cover__image-background {
	 transform-origin: center;
 
	 will-change: transform;
 }
 
 
 /** --------------------------------------------------
  * Content column
  * -------------------------------------------------- */
 
 .process-step__content {
	 display: flex;
	 flex-direction: column;
 
	 align-items: flex-start;
	 justify-content: center;
 
	 min-width: 0;
 }
 
 
 .process-step__content
	 > .wp-block-group__inner-container {
	 width: 100%;
	 max-width: none;
 }
 
 
 /** --------------------------------------------------
  * Step number
  *
  * IMPORTANT:
  * This is intentionally STATIC.
  *
  * .is-active does not affect this element.
  * -------------------------------------------------- */
 
 .process-step__number {
	 display: inline-flex;
 
	 align-items: center;
	 justify-content: center;
 
	 min-width: 46px;
	 height: 30px;
 
	 margin:
		 0
		 0
		 clamp(20px, 3vw, 24px);
 
	 padding: 0 13px;
 
	 color: #fff;
 
	 background: var(--process-accent);
 
	 border-radius: 999px;
 
	 font-size: 0.78rem;
	 font-weight: 600;
	 line-height: 1;
	 letter-spacing: 0.08em;
 
	 /*
	  * Deliberately:
	  *
	  * no transition
	  * no transform
	  * no is-active styling
	  */
 }
 
 
 /** --------------------------------------------------
  * Step typography
  * -------------------------------------------------- */
 
 .process-step__content h3 {
	 max-width: 520px;
 
	 color: inherit;
 }
 
 
 .process-step__content
	 > p:not(.process-step__number) {
	 max-width: 520px;
 
	 margin-bottom: 0.75rem;
 
	 font-size:
		 clamp(
			 1rem,
			 1.15vw,
			 1.18rem
		 );
 
	 line-height: 1.6;
 }
 
 
 /** --------------------------------------------------
  * Tablet
  * -------------------------------------------------- */
 
 @media screen and (max-width: 63.9375em) {
 
	 .process-step.wp-block-columns {
		 min-height: 560px;
 
		 column-gap: 56px;
	 }
 
 
	 .process-step__image.wp-block-image img,
	 .process-step__image.wp-block-cover {
		 aspect-ratio: 1 / 1;
	 }
 
 
	 .process-step__content h3 {
		 font-size:
			 clamp(
				 1.8rem,
				 4vw,
				 2.7rem
			 );
	 }
 
 }
 
 
 /** --------------------------------------------------
  * Mobile
  * -------------------------------------------------- */
 
 @media screen and (max-width: 47.9375em) {
 
	 .homeowner-process {
		 margin-inline: 8px;
 
		 padding-block: 72px;
	 }
 
 
	 .homeowner-process__header {
		 margin-bottom: 64px;
	 }
 
 
	 .homeowner-process__timeline
		 > .wp-block-group__inner-container {
		 padding-left: 28px;
	 }
 
 
	 /** ----------------------------------------------
	  * Move timeline to left
	  * ---------------------------------------------- */
 
	 .homeowner-process__timeline
		 > .wp-block-group__inner-container::before {
		 left: 8px;
 
		 transform: none;
	 }
 
 
	 .process-timeline__progress {
		 left: 8px;
 
		 /*
		  * On mobile there is no translateX because
		  * the timeline is intentionally positioned
		  * directly at 8px.
		  */
		 transform: scaleY(0);
	 }
 
 
	 /** ----------------------------------------------
	  * Stack steps
	  * ---------------------------------------------- */
 
	 .process-step.wp-block-columns {
		 display: flex !important;
 
		 flex-direction: column;
 
		 min-height: 0;
 
		 margin-top: 0;
		 margin-bottom: 88px;
 
		 gap: 32px;
	 }
 
 
	 .process-step.wp-block-columns:last-child {
		 margin-bottom: 0;
	 }
 
 
	 /**
	  * Reset desktop reversing.
	  *
	  * Mobile always reads:
	  *
	  * image
	  * ↓
	  * content
	  */
 
	 .process-step--reverse
		 .process-step__visual,
	 .process-step--reverse
		 .process-step__content {
		 grid-column: auto;
		 grid-row: auto;
	 }
 
 
	 /** ----------------------------------------------
	  * Mobile node position
	  * ---------------------------------------------- */
 
	 .process-step::before,
	 .process-step::after {
		 top: 28px;
		 left: -20px;
 
		 transform:
			 translate(-50%, -50%);
	 }
 
 
	 /** ----------------------------------------------
	  * Visual
	  * ---------------------------------------------- */
 
	 .process-step__visual,
	 .process-step:not(.process-step--reverse)
		 .process-step__visual,
	 .process-step--reverse
		 .process-step__visual {
		 order: 1;
 
		 width: 100%;
 
		 padding: 0;
	 }
 
 
	 .process-step__content {
		 order: 2;
 
		 width: 100%;
 
		 padding: 0;
	 }
 
 
	 .process-step__image,
	 .process-step--one
		 .process-step__image,
	 .process-step--two
		 .process-step__image,
	 .process-step--three
		 .process-step__image,
	 .process-step--four
		 .process-step__image {
		 max-width: none;
 
		 margin: 0;
	 }
 
 
	 .process-step__image.wp-block-image img,
	 .process-step__image.wp-block-cover {
		 aspect-ratio: 4 / 3;
	 }
 
 
	 .process-step__number {
		 margin-bottom: 22px;
	 }
 
 
	 .process-step__content h3 {
		 margin-bottom: 14px;
 
		 font-size:
			 clamp(
				 2rem,
				 9vw,
				 3rem
			 );
	 }
 
 }
 
 
 /** --------------------------------------------------
  * Reduced motion
  * -------------------------------------------------- */
 
 @media (prefers-reduced-motion: reduce) {
 
	 /**
	  * No pulse.
	  */
 
	 .process-step.is-active::after {
		 animation: none;
 
		 opacity: 0;
	 }
 
 
	 /**
	  * Ensure visuals remain visible even though
	  * JavaScript animation has been disabled.
	  */
 
	 .process-step__visual {
		 clip-path: none !important;
	 }
 
 
	 .process-step__image img,
	 .process-step__image.wp-block-cover
		 .wp-block-cover__image-background {
		 transform: none !important;
		 transition: none;
	 }
 
 }
 
 
 
 
 
 /** --------------------------------------------------
  * Professional hero
  * -------------------------------------------------- */
 
 .professional-hero {
	 border-radius: 0;
 }
 
 .professional-hero h1 {
	 --font-size-max: 72;
	 line-height: 1.14em;
	 margin-bottom: 1.25rem;
 }
 
 .professional-hero-shell {
	 margin: 0;
 }
 .professional-hero-wrap {
	 padding: 0;
 }
 
 .professional-hero.wp-block-cover {
	 position: relative;
	 isolation: isolate;
	 overflow: hidden;
 
	 display: block;
 
	 min-height: 0;
	 height: auto;
	 padding: 0;
 
	 color: var(--black);
	 background: #ebe7df;

 }
 
 /** --------------------------------------------------
  * Gutenberg Cover inner container
  *
  * The image stays in normal flow and therefore
  * determines the natural height of the entire hero.
  * -------------------------------------------------- */
 
 .professional-hero > .wp-block-cover__inner-container {
	 position: relative;
	 z-index: 1;
 
	 width: 100%;
	 max-width: none;
 
	 margin: 0;
	 padding: 0;
 }
 
 /** --------------------------------------------------
  * Architectural image
  *
  * IMPORTANT:
  * This remains in normal document flow.
  * It determines the hero's height, so the entire
  * image/reflection remains visible.
  * -------------------------------------------------- */
 
 .professional-hero__image {
	 position: relative;
	 z-index: 0;
 
	 display: block;
 
	 width: 100%;
	 max-width: none;
	 margin: 0;
	 
 }
 
 .professional-hero {
	 overflow: hidden;
 }
 
 .professional-hero__image {
	 overflow: hidden;
 }
 
 .professional-hero__image img {
	 display: block;
 
	 width: 100%;
	 height: auto;
 
	 transform-origin: center center;
	 will-change: transform;
 }
 
 .professional-hero__image img {
	 display: block;
 
	 width: 100%;
	 height: auto;
	 max-width: none;
 
	 object-fit: contain;
 }
 
 /** parallax foreground **/
 .professional-hero__foreground {
	 position: absolute;
	 left: -8%;
	 right: -8%;
	 bottom: -8%;
	 z-index: 2;
 
	 width: 116%;
	 max-width: none;
	 margin: 0;
 
	 opacity: 0.08;
 
	 pointer-events: none;
	 will-change: transform, opacity;
 }
 
 .professional-hero__foreground img {
	 display: block;
 
	 width: 100%;
	 height: auto;
 
	 opacity: .78;
 }
 
 /**
  * Remove Gutenberg Image block spacing.
  */
 .professional-hero__image figure,
 .professional-hero__image img {
	 margin: 0;
 }
 
 /** --------------------------------------------------
  * Hero content
  *
  * This is the only part positioned absolutely.
  * It floats on top of the architectural image.
  * -------------------------------------------------- */
 
 .professional-hero__content {
	 position: absolute;
	 top: clamp(90px, 10vw, 160px);
	 left: 50%;
	 z-index: 3;
 
	 width: min(1150px, calc(100% - 80px));
	 max-width: none;
 
	 margin: 0;
 
	 transform: translateX(-50%);
 
	 text-align: center;
 }
 
 .professional-hero__content
	 > .wp-block-group__inner-container {
	 display: flex;
	 flex-direction: column;
	 align-items: center;
 
	 width: 100%;
	 max-width: none;
 
	 margin: 0;
 }
 
 
 /** --------------------------------------------------
  * Heading
  * -------------------------------------------------- */
 
 .professional-hero__title {
	 max-width: 1050px;
	 margin: 0 auto;
 
	 color: var(--black);
 
	 font-size: clamp(3.6rem, 5.8vw, 6.7rem);
	 font-weight: 400;
	 line-height: 0.94;
	 letter-spacing: -0.055em;
 
	 text-align: center;
	 text-wrap: balance;
 }
 
 .professional-hero__title em {
	 font-weight: inherit;
 }
 
 /** --------------------------------------------------
  * Intro
  * -------------------------------------------------- */
 
 
 .professional-hero__intro
	 > .wp-block-group__inner-container {
	 width: 100%;
	 max-width: none;
 }
 
 .professional-hero__intro p {
	 max-width: 560px;
	 margin: 0 auto;
 
	 color: rgba(17, 17, 17, 0.68);
 
 
	 text-align: center;
	 text-wrap: balance;
 }
 
 /** --------------------------------------------------
  * Optional very subtle bottom haze
  *
  * Your image already contains the reflection/mist,
  * so keep this extremely subtle.
  * -------------------------------------------------- */
 
 .professional-hero::after {
	 content: "";
 
	 position: absolute;
	 left: -5%;
	 right: -5%;
	 bottom: -3%;
	 z-index: 2;
 
	 height: 14%;
 
	 pointer-events: none;
 
	 background:
		 radial-gradient(
			 ellipse at 50% 100%,
			 rgba(255, 255, 255, 0.5) 0%,
			 rgba(255, 255, 255, 0.2) 40%,
			 rgba(255, 255, 255, 0) 75%
		 );
 
	 filter: blur(14px);
 }
 
 /** --------------------------------------------------
  * Tablet
  * -------------------------------------------------- */
 
 @media screen and (max-width: 63.9375em) {
 
	 .professional-hero__content {
		 top: 75px;
 
		 width: min(
			 900px,
			 calc(100% - 50px)
		 );
	 }
 
	 .professional-hero__title {
		 font-size: clamp(
			 3.4rem,
			 7vw,
			 5.5rem
		 );
	 }
 }
 
 /** --------------------------------------------------
  * Mobile
  * -------------------------------------------------- */
 
 @media screen and (max-width: 47.9375em) {
 
 
	 .professional-hero.wp-block-cover {
		 border-radius: 14px;
	 }
 
	 .professional-hero__content {
		 top: 48px;
 
		 width: calc(100% - 30px);
	 }
 
	 .professional-hero__ratings {
		 gap: 8px;
		 margin-bottom: 22px;
	 }
 
	 .professional-hero__title {
		 max-width: 95%;
 
		 font-size: clamp(
			 2.7rem,
			 11vw,
			 4.4rem
		 );
 
		 line-height: 0.97;
		 letter-spacing: -0.045em;
	 }
 
	 .professional-hero__intro {
		 margin-top: 18px;
	 }
 
	 .professional-hero__intro p {
		 max-width: 90%;
		 font-size: 0.95rem;
	 }
 }
 
 /** --------------------------------------------------
  * Reduced motion
  * -------------------------------------------------- */
 
 @media (prefers-reduced-motion: reduce) {
 
	 .professional-hero__image {
		 transform: none;
	 }
 }
 
 
 
 /** Contact form styling **/
 
 /** ==================================================
  * CADGUYS FORM SYSTEM
  *
  * Shared between:
  * - Professional enquiries
  * - Homeowner enquiries
  * - General contact forms
  * ================================================== */
 
 .cadguys-form {
	 --form-border: rgba(17, 23, 29, .16);
	 --form-border-focus: rgba(17, 23, 29, .55);
 
	 --form-background: rgba(255,255,255,.72);
	 --form-background-focus: #fff;
 
	 --form-text: var(--black);
	 --form-muted: rgba(17,23,29,.52);
 
	 --form-radius: 14px;
 
	 --form-ease:
		 cubic-bezier(.16, 1, .3, 1);
 
	 width: 100%;
 }
 
 
 /** --------------------------------------------------
  * Rows
  * -------------------------------------------------- */
 
 .cadguys-form__row {
	 display: grid;
 
	 grid-template-columns:
		 repeat(2, minmax(0, 1fr));
 
	 gap: 18px;
 
	 margin-bottom: 18px;
 }
 
 
 /** --------------------------------------------------
  * Field
  * -------------------------------------------------- */
 
 .cadguys-form__field {
	 position: relative;
 
	 width: 100%;
 }
 
 
 .cadguys-form__field--full {
	 width: 100%;
 
	 margin-bottom: 25px;
 }
 
 
 /** --------------------------------------------------
  * Labels
  * -------------------------------------------------- */
 
 .cadguys-form__field label {
	 display: block;
 
	 margin:
		 0
		 0
		 9px;
 
	 color:
		 var(--form-text);
 
	 font-size: 14px;
	 font-weight: 500;
	 line-height: 1;
 
	 letter-spacing: .02em;
 }
 
 
 /**
  * Required marker.
  *
  * I'd actually give these their own class in the
  * markup rather than styling every span in a label.
  */
 
 .cadguys-form__required {
	 color: #ff5268;
 }
 
 
 /** ==================================================
  * INPUTS
  * ================================================== */
 
 .cadguys-form
	 input[type="text"],
 
 .cadguys-form
	 input[type="email"],
 
 .cadguys-form
	 input[type="tel"],
 
 .cadguys-form
	 input[type="number"],
 
 .cadguys-form
	 input[type="url"],
 
 .cadguys-form
	 select,
 
 .cadguys-form
	 textarea {
 
	 display: block;
 
	 width: 100%;
 
	 margin: 0;
 
	 padding:
		 11px
		 12px;
 
	 color:
		 var(--form-text);
 
	 background:
		 var(--form-background);
 
	 border:
		 1px solid
		 var(--form-border);
 
	 border-radius:
		 var(--form-radius);
 
	 outline: none;
 
	 font-family: inherit;
	 font-size: 16px;
	 font-weight: 400;
	 line-height: 1.4;
 
	 transition:
		 background-color .3s ease,
		 border-color .3s ease,
		 box-shadow .3s ease;
 }
 
 
 /** Textarea */
 
 .cadguys-form
	 textarea {
 
	 min-height: 170px;
 
	 resize: vertical;
 }
 
 
 /** Placeholder */
 
 .cadguys-form
	 ::placeholder {
 
	 color:
		 rgba(17,23,29,.35);
 }
 
 
 /** Focus */
 
 .cadguys-form
	 input[type="text"]:focus,
 
 .cadguys-form
	 input[type="email"]:focus,
 
 .cadguys-form
	 input[type="tel"]:focus,
 
 .cadguys-form
	 input[type="number"]:focus,
 
 .cadguys-form
	 input[type="url"]:focus,
 
 .cadguys-form
	 select:focus,
 
 .cadguys-form
	 textarea:focus {
 
	 background:
		 var(--form-background-focus);
 
	 border-color:
		 var(--form-border-focus);
 
	 box-shadow:
		 0 0 0 3px
		 rgba(17,23,29,.045);
 }
 
 
 /** ==================================================
  * SELECT
  * ================================================== */
 
 .cadguys-form
	 select {
 
	 appearance: none;
	 -webkit-appearance: none;
 
	 cursor: pointer;
 
	 padding-right: 48px;
 
	 background-image:
		 linear-gradient(
			 45deg,
			 transparent 50%,
			 var(--black) 50%
		 ),
		 linear-gradient(
			 135deg,
			 var(--black) 50%,
			 transparent 50%
		 );
 
	 background-position:
		 calc(100% - 21px) 50%,
		 calc(100% - 16px) 50%;
 
	 background-size:
		 5px 5px,
		 5px 5px;
 
	 background-repeat:
		 no-repeat;
 }
 
 
 /** ==================================================
  * CHECKBOX / RADIO OPTIONS
  * ================================================== */
 
 .cadguys-form__choice-group {
	 display: flex;
	 flex-wrap: wrap;
 
	 gap: 10px;
 
	 margin-top: 10px;
 }
 
 
 /**
  * CF7 produces .wpcf7-list-item wrappers.
  */
 
 .cadguys-form
	 .wpcf7-list-item {
 
	 margin: 0;
 }
 
 
 .cadguys-form
	 .wpcf7-list-item
	 label {
 
	 position: relative;
 
	 display: block;
 
	 margin: 0;
 
	 cursor: pointer;
 }
 
 
 .cadguys-form
	 input[type="checkbox"],
 
 .cadguys-form
	 input[type="radio"] {
 
	 position: absolute;
 
	 opacity: 0;
 
	 pointer-events: none;
 }
 
 
 .cadguys-form
	 .wpcf7-list-item-label {
 
	 display: inline-flex;
	 align-items: center;
	 justify-content: center;
 
	 min-height: 42px;
 
	 padding:
		 8px
		 16px;
 
	 color:
		 var(--black);
 
	 background:
		 rgba(255,255,255,.6);
 
	 border:
		 1px solid
		 var(--form-border);
 
	 border-radius:
		 999px;
 
	 font-size: 14px;
	 line-height: 1;
 
	 cursor: pointer;
 
	 transition:
		 color .3s ease,
		 background-color .3s ease,
		 border-color .3s ease,
		 transform .35s
		 var(--form-ease);
 }
 
 
 .cadguys-form
	 input[type="checkbox"]:checked
	 + .wpcf7-list-item-label,
 
 .cadguys-form
	 input[type="radio"]:checked
	 + .wpcf7-list-item-label {
 
	 color: #fff;
 
	 background:
		 var(--black);
 
	 border-color:
		 var(--black);
 }
 
 
 .cadguys-form
	 .wpcf7-list-item-label:hover {
 
	 transform:
		 translateY(-1px);
 }
 
 
 /** ==================================================
  * FILE UPLOAD
  * ================================================== */
 
 .cadguys-form__upload {
	 display: flex;
	 align-items: center;
	 justify-content: space-between;
 
	 gap: 30px;
 
	 width: 100%;
 
	 margin-top: 4px;
 
	 padding:
		 22px
		 24px;
 
	 background:
		 rgba(255,255,255,.5);
 
	 border:
		 1px dashed
		 rgba(17,23,29,.24);
 
	 border-radius:
		 16px;
 
	 transition:
		 background-color .3s ease,
		 border-color .3s ease;
 }
 
 
 .cadguys-form__upload:hover {
	 background:
		 rgba(255,255,255,.72);
 
	 border-color:
		 rgba(17,23,29,.4);
 }
 
 
 .cadguys-form__upload-copy {
	 display: flex;
	 flex-direction: column;
 
	 gap: 6px;
 }
 
 
 .cadguys-form__upload-copy strong {
	 color:
		 var(--form-text);
 
	 font-size: 15px;
	 font-weight: 500;
 }
 
 
 .cadguys-form__upload-copy span {
	 color:
		 var(--form-muted);
 
	 font-size: 13px;
	 line-height: 1.4;
 }
 
 
 .cadguys-form
	 input[type="file"] {
 
	 max-width: 340px;
 
	 color:
		 var(--form-muted);
 
	 font-family: inherit;
	 font-size: 13px;
 }
 
 
 /** ==================================================
  * FORM FOOTER
  * ================================================== */
 
 .cadguys-form__footer {
	 display: flex;
	 align-items: center;
	 justify-content: space-between;
 
	 gap: 30px;
 
	 margin-top: 28px;
 }
 
 
 .cadguys-form__privacy {
	 max-width: 440px;
 
	 margin: 0;
 
	 color:
		 var(--form-muted);
 
	 font-size: 12px;
	 line-height: 1.5;
 }
 
 
 /** ==================================================
  * SUBMIT
  * ================================================== */
 
 .cadguys-form__submit {
	 flex: 0 0 auto;
 }
 
 
 .cadguys-form
	 input[type="submit"] {
 
	 min-width: 170px;
 
	 margin: 0;
 
	 padding:
		 15px
		 25px;
 
	 color: #fff;
	 background:
		 var(--black);
 
	 border: 0;
	 border-radius: 999px;
 
	 font-family: inherit;
	 font-size: 15px;
	 font-weight: 400;
	 line-height: 1;
 
	 cursor: pointer;
 
	 transition:
		 transform .45s
		 var(--form-ease),
		 opacity .3s ease;
 }
 
 
 .cadguys-form
	 input[type="submit"]:hover {
 
	 transform:
		 translateY(-2px);
 }
 
 
 /** Disabled / sending */
 
 .cadguys-form
	 input[type="submit"]:disabled {
 
	 opacity: .45;
 
	 cursor: wait;
 }
 
 
 /** ==================================================
  * CONTACT FORM 7
  * ================================================== */
 
 
 /** Validation */
 
 .cadguys-form
	 .wpcf7-not-valid {
 
	 border-color:
		 rgba(216,60,82,.6);
 }
 
 
 .cadguys-form
	 .wpcf7-not-valid-tip {
 
	 display: block;
 
	 margin-top: 7px;
 
	 color:
		 #d83c52;
 
	 font-size: 12px;
	 line-height: 1.35;
 }
 
 
 /** Response */
 
 .cadguys-form
	 .wpcf7-response-output {
 
	 margin:
		 22px
		 0
		 0 !important;
 
	 padding:
		 14px
		 18px !important;
 
	 border:
		 1px solid
		 var(--form-border) !important;
 
	 border-radius:
		 12px;
 
	 font-size: 14px;
	 line-height: 1.45;
 }
 
 
 /** Spinner */
 
 .cadguys-form
	 .wpcf7-spinner {
 
	 margin:
		 0
		 0
		 0
		 12px;
 
	 vertical-align: middle;
 }
 
 
 /** ==================================================
  * PROFESSIONAL FORM MODIFIER
  *
  * Keep this minimal.
  * Only differences specific to that form belong here.
  * ================================================== */
 
 .cadguys-form--professional {
 
	 /*
	  * Currently nothing is actually required here,
	  * which is ideal.
	  */
 }
 
 
 /** ==================================================
  * HOMEOWNER FORM MODIFIER
  * ================================================== */
 
 .cadguys-form--homeowner {
 
	 /*
	  * Again, most styling remains shared.
	  *
	  * Any future homeowner-specific visual changes
	  * can live here without affecting professionals.
	  */
 }
 
 
 /** ==================================================
  * MOBILE
  * ================================================== */
 
 @media screen and (max-width: 47.9375em) {
 
	 .cadguys-form__row {
		 grid-template-columns:
			 1fr;
 
		 gap: 18px;
	 }
 
 
	 .cadguys-form__upload {
		 flex-direction:
			 column;
 
		 align-items:
			 flex-start;
 
		 gap: 16px;
	 }
 
 
	 .cadguys-form
		 input[type="file"] {
 
		 width: 100%;
		 max-width: 100%;
	 }
 
 
	 .cadguys-form__footer {
		 flex-direction:
			 column;
 
		 align-items:
			 stretch;
 
		 gap: 20px;
	 }
 
 
	 .cadguys-form
		 input[type="submit"] {
 
		 width: 100%;
	 }
 
 
	 .cadguys-form__choice-group {
		 gap: 8px;
	 }
 
 }
 
 
 /** ==================================================
  * REDUCED MOTION
  * ================================================== */
 
 @media (prefers-reduced-motion: reduce) {
 
	 .cadguys-form
		 input,
 
	 .cadguys-form
		 select,
 
	 .cadguys-form
		 textarea,
 
	 .cadguys-form__upload,
 
	 .cadguys-form
		 .wpcf7-list-item-label {
 
		 transition: none;
	 }
 
 }
 
 
 /** ==================================================
  * CONTACT HERO / FORM SECTION
  * ================================================== */
 
 .contact-hero.wp-block-cover {
	 position: relative;
 
	 display: flex;
	 align-items: center;
	 justify-content: center;
 
	 min-height: 900px;

 
	 overflow: hidden;
 }
 
 
 /** Background image */
 
 .contact-hero
	 .wp-block-cover__image-background {
 
	 object-fit: cover;
 
	 transform: scale(1.02);
 }
 
 
 /** Optional very subtle wash */
 
 .contact-hero
	 .wp-block-cover__background {
 
	 opacity: .08;
 }
 
 
 /** ==================================================
  * WHITE CONTACT PANEL
  * ================================================== */
 
 .contact-hero__panel {
	 position: relative;
	 z-index: 2;
 
	 width: min(100%, 980px);
 
	 margin-inline: auto;
 
	 padding:
		 clamp(42px, 5vw, 72px);
 
	 background: rgba(255,255,255,.96);
 
	 border-radius:
		 clamp(24px, 2.5vw, 34px);
 
	 box-shadow:
		 0 30px 80px
		 rgba(0,0,0,.10);
 }
 
 
 /**
  * Gutenberg inner container sometimes constrains width.
  */
 
 .contact-hero__panel
	 > .wp-block-group__inner-container {
 
	 width: 100%;
 }
 
 
 /** ==================================================
  * INTRO
  * ================================================== */
 
 .contact-hero__intro {
	 max-width: 550px;
 
	 margin:
		 0
		 auto;
 
	 text-align: center;
 }
 
 
 
 .contact-hero__intro
	 p:last-child {
 
	 max-width: 550px;
 
	 color:
		 rgba(17,23,29,.60);

 }
 .contact-hero
	 .cadguys-form {
 
	 width: 100%;
	 max-width: none;
 }
 .cadguys-form__row {
	 display: grid;
	 grid-template-columns:
		 repeat(2, minmax(0, 1fr));
 
	 gap: 18px;
 
	 margin-bottom: 25px;
 }
 
 .contact-hero
	 .cadguys-form {
 
	 --form-background:
		 #f5f5f3;
 
	 --form-background-focus:
		 #fff;
 
	 --form-border:
		 rgba(17,23,29,.09);
 
	 --form-border-focus:
		 rgba(17,23,29,.35);
 }
 
 .contact-hero
	 .cadguys-form
	 input[type="text"],
 
 .contact-hero
	 .cadguys-form
	 input[type="email"],
 
 .contact-hero
	 .cadguys-form
	 input[type="tel"],
 
 .contact-hero
	 .cadguys-form
	 select {
 
	 min-height: 40px;
 }
 
 .contact-hero
	 .cadguys-form__footer {
 
	 flex-direction: column;
	 align-items: center;
 
	 gap: 16px;
 
	 text-align: center;
 }
 
 
 .contact-hero
	 .cadguys-form__privacy {
 
	 max-width: 500px;
 
	 text-align: center;
 }
 
 
 .contact-hero
	 .cadguys-form__submit {
 
	 display: flex;
	 justify-content: center;
 
	 width: 100%;
 }
 
 @media screen and (max-width: 47.9375em) {
 
	 .contact-hero.wp-block-cover {
		 min-height: auto;
 
		 padding:
			 80px
			 16px;
	 }
 
 
	 .contact-hero__panel {
		 padding:
			 36px
			 20px;
 
		 border-radius:
			 24px;
	 }
 
 
	 .contact-hero__intro {
		 margin-bottom:
			 34px;
	 }
 
 
	 .cadguys-form__row {
		 grid-template-columns:
			 1fr;
	 }
 
 }
 
 
 /**  Drawings Page **/
 
/** ==================================================
  * DRAWINGS PAGE
  * PROJECT TYPE EXPLORER
  * ================================================== */
 
 
 /** ==================================================
  * SECTION
  * ================================================== */
 
 .drawings-project-types {
 
	 background:
		 var(--white);
 }
 
 
 .drawings-project-types__inner {
	 width: 100%;
 }
 
 
 .drawings-project-types__inner
 > .wp-block-group__inner-container {
	 width: 100%;
	 max-width: none;
 }
 
 
 /** ==================================================
  * SECTION INTRO
  * ================================================== */

 
 
 .drawings-project-types h2 {
	 max-width: 560px;
	
	
 }
 
 
 
 .drawings-project-types__intro {
	 max-width: 480px;
	
	 

 }
 
 
 /** ==================================================
  * PROJECT EXPLORER
  * ================================================== */
 
 .drawings-project-explorer {
	 margin-top: 0;
 }
 
 
 .drawings-project-explorer
 > .wp-block-group__inner-container {
	 display: grid;
 
	 grid-template-columns:
		 minmax(320px, .82fr)
		 minmax(560px, 1.18fr);
 
	 align-items: start;
 
	 gap:
		 clamp(70px, 8vw, 120px);
 
	 width: 100%;
	 max-width: none;
 }
 
 /** ==================================================
  * LEFT COLUMN
  * ================================================== */
 
 .drawings-project-left {
	 width: 100%;
 }
 
 
 .drawings-project-left
 > .wp-block-group__inner-container {
	 width: 100%;
	 max-width: none;
 }
 
 
 /** ==================================================
  * LEFT PROJECT NAVIGATION
  * ================================================== */
 
 .drawings-project-nav {
	 width:
		 100%;
		 
		 
	margin-top:
		clamp(50px, 5vw, 75px);
 }
 
 
 .drawings-project-nav
 > .wp-block-group__inner-container {
	 width:
		 100%;
 
	 max-width:
		 none;
 }
 
 
 /** --------------------------------------------------
  * Trigger
  * -------------------------------------------------- */
 
 .drawings-project-trigger {
	 --project-ease:
		 cubic-bezier(.16,1,.3,1);
 
	 position:
		 relative;
 
	 width:
		 100%;
 
	 border-bottom:
		 1px solid
		 rgba(17,23,29,.13);
 
	 cursor:
		 pointer;
 
	 transition:
		 opacity .3s ease;
 }
 
 
 .drawings-project-trigger:first-child {
	 border-top:
		 1px solid
		 rgba(17,23,29,.13);
 }
 
 
 .drawings-project-trigger
 > .wp-block-group__inner-container {
	 display:
		 grid;
 
	 grid-template-columns:
		 40px
		 minmax(0,1fr)
		 38px;
 
	 align-items:
		 center;
 
	 gap:
		 14px;
 
	 width:
		 100%;
 
	 max-width:
		 none;
 
	 padding:
		 24px
		 0;
 
	 transition:
		 padding-left .45s
		 var(--project-ease);
 }
 
 
 /** Number */
 
 .drawings-project-trigger__number {
	 margin:
		 0;

 
	 font-size:
		 9px;
 
	 font-weight:
		 500;
 
	 line-height:
		 1;
 
	 letter-spacing:
		 .08em;
 
	 transition:
		 color .3s ease;
 }
 
 
 /** Title */
 
 .drawings-project-trigger__title {
	 margin:
		 0;
 
	 color:
		 rgba(17,23,29,.43);
 
	 font-size:
		 clamp(1.5rem, 1.75vw, 1.95rem);
 
	 font-weight:
		 400;
 
	 line-height:
		 1.05;
 
	 letter-spacing:
		 -.04em;
 
	 transition:
		 color .35s ease,
		 transform .45s
		 var(--project-ease);
 }
 
 
 /** Arrow */
 
 .drawings-project-trigger__arrow {
	 display:
		 inline-flex;
 
	 align-items:
		 center;
 
	 justify-content:
		 center;
 
	 width:
		 34px;
 
	 height:
		 34px;
 
	 color:
		 rgba(17,23,29,.4);
 
	 border:
		 1px solid
		 rgba(17,23,29,.12);
 
	 border-radius:
		 50%;
 
	 font-size:
		 13px;
 
	 line-height:
		 1;
 
	 transition:
		 color .35s ease,
		 background-color .35s ease,
		 border-color .35s ease,
		 transform .45s
		 var(--project-ease);
 }
 
 
 /** --------------------------------------------------
  * Active trigger
  * -------------------------------------------------- */
 
 .drawings-project-trigger.is-active
 > .wp-block-group__inner-container {
	 padding-left:
		 8px;
 }
 
 
 .drawings-project-trigger.is-active
 .drawings-project-trigger__number {
	 color:
		 var(--black);
 }
 
 
 .drawings-project-trigger.is-active
 .drawings-project-trigger__title {
	 color:
		 var(--black);
 
	 transform:
		 translateX(4px);
 }
 
 
 .drawings-project-trigger.is-active
 .drawings-project-trigger__arrow {
	 color:
		 #fff;
 
	 background:
		 var(--black);
 
	 border-color:
		 var(--black);
 
	 transform:
		 rotate(45deg);
 }

 
 
 .drawings-project-nav:hover
 .drawings-project-trigger:not(:hover):not(.is-active) {
	 opacity:
		 .62;
 }
 
 
 /** ==================================================
  * RIGHT PANELS
  * ================================================== */
 
 .drawings-project-panels {
	 position:
		 sticky;
 
	 top:
		 115px;
 
	 min-height:
		 0;
 }
 
 
 .drawings-project-panels
 > .wp-block-group__inner-container {
	 position:
		 relative;
 
	 width:
		 100%;
 
	 max-width:
		 none;
 }
 
 
 .drawings-project-panel {
	 display:
		 none;
 
	 width:
		 100%;
 
	 overflow:
		 visible;

	 
	 background: var(--white);
	 border: 1px solid #ECE8E1;
	 border-radius: 20px;
	 padding: 2rem;
	 
	 box-shadow:
	 0 6px 16px rgba(0, 0, 0, 0.04),  0 18px 40px rgba(0, 0, 0, 0.08);
 }
 
 
 .drawings-project-panel.is-active {
	 display:
		 block;
 
	 animation:
		 drawingsProjectPanelIn
		 .5s
		 cubic-bezier(.16,1,.3,1)
		 both;
 }
 
 
 @keyframes drawingsProjectPanelIn {
 
	 from {
		 opacity: 0;
 
		 transform:
			 translateY(8px);
	 }
 
	 to {
		 opacity: 1;
 
		 transform:
			 translateY(0);
	 }
 
 }
 
 
 .drawings-project-panel
 > .wp-block-group__inner-container {
	 width:
		 100%;
 
	 max-width:
		 none;
 }
 
 
 /** ==================================================
  * PANEL MAIN CONTENT
  * ================================================== */
 
 .drawings-project-row__main {
	 width:
		 100%;
 }
 
 
 .drawings-project-row__main
 > .wp-block-group__inner-container {
	 width:
		 100%;
 
	 max-width:
		 none;
 }
 
 
 /** ==================================================
  * PROJECT VISUAL
  * ================================================== */
 
 .drawings-project-panel__visual {
	 position:
		 relative;
 
	 width:
		 100%;
 
	 height:
		 clamp(250px, 21vw, 340px);
 
	 margin:
		 0
		 0
		 26px;
 
	 overflow:
		 hidden;
 
	 background:
		 #ecebe7;
 
	 border-radius:
		 20px;
 }
 
 
 .drawings-project-panel__visual
 > .wp-block-group__inner-container {
	 position:
		 relative;
 
	 width:
		 100%;
 
	 height:
		 100%;
 
	 max-width:
		 none;
 }
 
 
 /** Gutenberg image */
 
 .drawings-project-panel__visual
 .wp-block-image {
	 width:
		 100%;
 
	 height:
		 100%;
 
	 margin:
		 0;
 }
 
 
 .drawings-project-panel__visual
 figure {
	 width:
		 100%;
 
	 height:
		 100%;
 
	 margin:
		 0;
 }
 
 
 .drawings-project-panel__visual
 img {
	 display:
		 block;
 
	 width:
		 100%;
 
	 height:
		 100%;
 
	 object-fit:
		 cover;
 
	 object-position:
		 center;
 
	 transition:
		 transform .85s
		 cubic-bezier(.16,1,.3,1);
 }
 
 
 .drawings-project-panel:hover
 .drawings-project-panel__visual
 img {
	 transform:
		 scale(1.018);
 }
 
 
 /** Subtle inner border */
 
 .drawings-project-panel__visual::after {
	 content:
		 "";
 
	 position:
		 absolute;
 
	 inset:
		 0;
 
	 z-index:
		 2;
 
	 pointer-events:
		 none;
 
	 border:
		 1px solid
		 rgba(17,23,29,.055);
 
	 border-radius:
		 inherit;
 }
 
 
 /** ==================================================
  * PROJECT COPY
  * ================================================== */
 
 .drawings-project-panel h3 {
	 max-width:
		 650px;

 }
 
 
 .drawings-project-panel
 .drawings-project-row__description {
	 max-width:
		 680px;
	 
	 margin:
		 0
		 0
		 14px;
	 
	 color:
		 rgba(17,23,29,.68);
	 
	 font-size:
		 clamp(1rem, 1.15vw, 1.15rem);
	 
	 font-weight:
		 400;
	 
	 line-height:
		 1.5;
 }
 
 
 .drawings-project-panel
 .drawings-project-row__capabilities {
	 margin:
		 0
		 0
		 34px;
	 
	 color:
		 rgba(17,23,29,.42);
	 
	 font-size:
		 11px;
	 
	 font-weight:
		 500;
	 
	 line-height:
		 1.5;
 }
 
 
 /** ==================================================
  * POPULAR PROJECTS
  * ================================================== */
 
 .drawings-project-panel
 .drawings-project-row__details {
	 max-height:
		 none;
 
	 margin:
		 0;
 
	 padding:
		 0;
 
	 overflow:
		 visible;
 
	 opacity:
		 1;
 
	 transform:
		 none;
 }
 
 
 .drawings-project-row__details
 > .wp-block-group__inner-container {
	 width:
		 100%;
 
	 max-width:
		 none;
 }
 
 
 .drawings-project-panel
 .drawings-project-row__details-label {
	 margin:
		 0
		 0
		 10px;
	 
	 color:
		 rgba(17,23,29,.42);
	 
	 font-size:
		 9px;
	 
	 font-weight:
		 600;
	 
	 letter-spacing:
		 .15em;
	 
	 text-transform:
		 uppercase;
		 
	 display: flex;
	 align-items: center;
	 gap: 8px;
 }
 
 .drawings-project-row__details-label::before {
	 content: "";
	 width: 18px;
	 height: 2px;
	 background: var(--black);
	 border-radius: 999px;
 }
 
 
 .drawings-project-panel
 .drawings-project-row__searches {
	 max-width:
		 720px;
	 
	 margin:
		 0
		 0
		 26px;
	 
	 color:
		 rgba(17,23,29,.62);
	 
	 font-size:
		 13px;
	 
	 line-height:
		 1.6;
 }
 
 .drawings-project-panel
 .drawings-project-row__details {
	 padding-top: 4px;
 }
 
 
 /** ==================================================
  * PROJECT CTA
  * ================================================== */
 
 .drawings-project-row__link {
	 margin: 0;
 }
 
 
 /**
  * .drawings-project-row__link is itself
  * the Gutenberg .wp-block-button wrapper.
  */
 
 .drawings-project-row__link.wp-block-button
 > .wp-element-button {
	 display: inline-flex;
 
	 align-items: center;
	 justify-content: space-between;
 
	 gap: 10px;
 
	 width: auto;
 
 
	 font-size: 12px;
 
	 text-decoration: none;
 }
 
 
 /** Smaller arrow inside project CTA */
 
 .drawings-project-row__link
 .button-icon {
	 width: 26px;
	 height: 26px;
 }
 
 
 .drawings-project-row__link
 .button-icon svg {
	 width: 13px;
	 height: 13px;
 }
 
 
 /** ==================================================
  * DRAWINGS — ALSO AVAILABLE
  * ================================================== */
 
 .drawings-project-other {
	 margin-top: 42px;
	 padding: 0;
	 border: 0;
 }
 
 
 /** Label */
 
 .drawings-project-other__label {
	 margin: 0 0 14px;
 
	 color: rgba(17, 23, 29, .35);
 
	 font-size: 9px;
	 font-weight: 600;
	 line-height: 1;
 
	 letter-spacing: .14em;
	 text-transform: uppercase;
 }
 
 
 /** ==================================================
  * WRAPPERS
  * ================================================== */
 
 .drawings-project-other__links {
	 width: 100%;
	 max-width: none;
 }
 
 
 .drawings-project-other__links
 > .wp-block-group__inner-container {
	 width: 100%;
	 max-width: none;
 }
 
 
 /** ==================================================
  * BUTTON ROW
  * ================================================== */
 
 .drawings-project-other__links
 > .wp-block-group__inner-container
 > .wp-block-buttons {
	 display: flex !important;
 
	 flex-direction: row !important;
	 flex-wrap: wrap !important;
 
	 align-items: center !important;
	 justify-content: flex-start !important;
 
	 gap: 8px !important;
 
	 width: 100% !important;
	 max-width: 100% !important;
 
	 margin: 0 !important;
 }
 
 
 /** ==================================================
  * INDIVIDUAL BUTTON WRAPPER
  * ================================================== */
 
 .drawings-project-other__links
 > .wp-block-group__inner-container
 > .wp-block-buttons
 > .wp-block-button {
	 display: block !important;
 
	 flex: 0 0 auto !important;
 
	 width: auto !important;
	 min-width: 0 !important;
	 max-width: none !important;
 
	 margin: 0 !important;
 }
 
 
 /** ==================================================
  * ACTUAL BUTTON
  * ================================================== */
 
 .drawings-project-other__links
 > .wp-block-group__inner-container
 > .wp-block-buttons
 > .wp-block-button
 > .wp-element-button {
	 display: inline-flex !important;
 
	 flex: 0 0 auto !important;
 
	 align-items: center !important;
	 justify-content: space-between !important;
 
	 gap: 9px !important;
 
	 width: auto !important;
	 min-width: 0 !important;
	 max-width: none !important;
 
	 height: auto !important;
	 min-height: 0 !important;
 
	 padding:
		 7px
		 9px
		 7px
		 13px !important;
 
	 white-space: nowrap !important;
 
	 word-break: normal !important;
	 overflow-wrap: normal !important;
	 hyphens: none !important;
 
 
	 font-size: 13px;
	 line-height: 1 !important;
 
	 border:
		 1px solid
		 rgba(17, 23, 29, .16);
 
	 border-radius:
		 999px;
 }
 
 
 /** ==================================================
  * CANCEL GLOBAL "SECOND BUTTON IS DARK"
  * ================================================== */
 
 .drawings-project-other__links
 .wp-block-buttons
 .wp-block-button:nth-of-type(2)
 .wp-element-button {
	 color: var(--black) !important;
 }
 
 
 .drawings-project-other__links
 .wp-block-buttons
 .wp-block-button:nth-of-type(2)
 .wp-element-button::before {
	 background: var(--white) !important;
 }
 
 
 .drawings-project-other__links
 .wp-block-buttons
 .wp-block-button:nth-of-type(2)
 .wp-element-button::after {
	 background: var(--black) !important;
 }
 
 
 .drawings-project-other__links
 .wp-block-buttons
 .wp-block-button:nth-of-type(2)
 .button-icon {
	 background: var(--black) !important;
 }
 
 
 .drawings-project-other__links
 .wp-block-buttons
 .wp-block-button:nth-of-type(2)
 .button-icon svg {
	 color: var(--white) !important;
 }
 
 
 /** ==================================================
  * SMALL ARROWS
  * ================================================== */
 
 .drawings-project-other__links
 .button-icon {
	 width: 24px;
	 height: 24px;
 
	 flex: 0 0 24px;
 }
 
 
 .drawings-project-other__links
 .button-icon svg {
	 width: 12px;
	 height: 12px;
 }
 
 
 /** ==================================================
  * MOBILE
  * ================================================== */
 
 @media screen and (max-width: 47.9375em) {
 
	 /** Section */

 
 
	 .drawings-project-types h2 {
		 max-width:
			 350px;

	 }
	 
	 .drawings-project-panel h3 {
		 display: none;
	 }
 
 
	 .drawings-project-types__intro {
		 max-width:
			 340px;

 

	 }
 
 
	 /** Explorer */
 
	 .drawings-project-explorer {
		 margin-top:
			 42px;
	 }
 
 
	 .drawings-project-explorer
	 > .wp-block-group__inner-container {
		 display:
			 block;
	 }
 
 
	 /** Trigger */
 
	 .drawings-project-trigger
	 > .wp-block-group__inner-container {
		 grid-template-columns:
			 28px
			 minmax(0,1fr)
			 30px;
 
		 gap:
			 9px;
 
		 padding:
			 17px
			 0;
	 }
 
 
	 .drawings-project-trigger.is-active
	 > .wp-block-group__inner-container {
		 padding-left:
			 0;
	 }
 
 
	 .drawings-project-trigger__number {
		 font-size:
			 8px;
	 }
 
 
	 .drawings-project-trigger__title {
		 color:
			 var(--black);
 
		 font-size:
			 clamp(1.35rem, 6.7vw, 1.85rem);
	 }
 
 
	 .drawings-project-trigger.is-active
	 .drawings-project-trigger__title {
		 transform:
			 none;
	 }
 
 
	 .drawings-project-trigger__arrow {
		 width:
			 30px;
 
		 height:
			 30px;
 
		 font-size:
			 11px;
	 }
 
 
	 .drawings-project-nav:hover
	 .drawings-project-trigger:not(:hover):not(.is-active) {
		 opacity:
			 1;
	 }
 
 
	 /** Panel container */
 
	 .drawings-project-panels {
		 position:
			 static;
 
		 top:
			 auto;
 
		 min-height:
			 0;
	 }
 
 
	 /** Accordion panel */
 
	 .drawings-project-panel {
		 display:
			 none;
 
		 width:
			 100%;
 
		 margin:
			 10px
			 0
			 18px;
 
		 padding:
			 13px;
 
		 background:
			 #efefec;
 
		 border:
			 1px solid
			 rgba(17,23,29,.055);
 
		 border-radius:
			 16px;
	 }
 
 
	 .drawings-project-panel.is-active {
		 display:
			 block;
 
		 animation:
			 drawingsMobilePanelIn
			 .4s
			 cubic-bezier(.16,1,.3,1)
			 both;
	 }
 
 
	 @keyframes drawingsMobilePanelIn {
 
		 from {
			 opacity:
				 0;
 
			 transform:
				 translateY(6px);
		 }
 
		 to {
			 opacity:
				 1;
 
			 transform:
				 translateY(0);
		 }
 
	 }
 
 
	 /** Image */
 
	 .drawings-project-panel__visual {
		 height:
			 190px;
 
		 margin-bottom:
			 18px;
 
		 border-radius:
			 13px;
	 }
 
 
	 /** Copy */

 
 
	 .drawings-project-panel
	 .drawings-project-row__description {
		 margin-bottom:
			 9px;
 
		 font-size:
			 12px;
 
		 line-height:
			 1.45;
	 }
 
 
	 .drawings-project-panel
	 .drawings-project-row__capabilities {
		 margin-bottom:
			 17px;
 
		 font-size:
			 8px;
	 }
 
 
	 .drawings-project-panel
	 .drawings-project-row__details-label {
		 font-size:
			 7px;
	 }
 
 
	 .drawings-project-panel
	 .drawings-project-row__searches {
		 margin-bottom:
			 16px;
 
		 font-size:
			 10px;
 
		 line-height:
			 1.55;
	 }
 
 
	 .drawings-project-row__link
	 .wp-element-button {
		 padding:
			 8px
			 10px
			 8px
			 13px;
 
		 font-size:
			 10px;
	 }
 
 
	 /** Also available */
 
	 .drawings-project-other {
		 margin-top:
			 48px;
 
		 padding-top:
			 22px;
	 }
 
 
	 .drawings-project-other
	 > .wp-block-group__inner-container {
		 display:
			 block;
	 }
 
 
	 .drawings-project-other__label {
		 margin:
			 0
			 0
			 13px;
	 }
 
 
	 .drawings-project-other__links
	 .wp-block-group
	 .wp-block-buttons {
		 gap:
			 6px;
	 }
 
 
	 .drawings-project-other__links
	 .wp-block-group
	 .wp-block-button__link {
		 padding:
			 8px
			 11px;
 
		 font-size:
			 9px;
	 }
 
 }
 
 
 /** ==================================================
  * REDUCED MOTION
  * ================================================== */
 
 @media (prefers-reduced-motion: reduce) {
 
	 .drawings-project-trigger
	 > .wp-block-group__inner-container,
 
	 .drawings-project-trigger__title,
 
	 .drawings-project-trigger__arrow,
 
	 .drawings-project-panel,
 
	 .drawings-project-panel__visual img,
 
	 .drawings-project-row__link
	 .wp-element-button {
		 transition:
			 none;
 
		 animation:
			 none;
	 }
 
 }
 
 
 /** ==================================================
  * REDUCED MOTION
  * ================================================== */
 
 @media (prefers-reduced-motion: reduce) {
 
	 .drawings-project-trigger
	 > .wp-block-group__inner-container,
 
	 .drawings-project-trigger__title,
 
	 .drawings-project-trigger__arrow,
 
	 .drawings-project-panel,
 
	 .drawings-project-panel__icon svg,
 
	 .drawings-project-row__link
	 .wp-element-button {
		 transition:
			 none;
 
		 animation:
			 none;
	 }
 
 }
 
 
 /** ==================================================
  * DRAWING SERVICES LIST
  * ================================================== */
 
 .drawings-need {
	 gap: clamp(70px, 8vw, 120px);
 }
 
 .drawing-services-list {
	 width: 100%;
 }
 
 
 .drawing-services-list
 > .wp-block-group__inner-container {
	 width: 100%;
	 max-width: none;
 }
 
 
 /** ==================================================
  * SERVICE ROW
  * ================================================== */
 
 .drawing-service-row {
	 position: relative;
 
	 width: 100%;
 
	 border-bottom:
		 1px solid rgba(17, 23, 29, .12);
 
	 transition:
		 background-color .35s ease;
 }
 
 
 .drawing-service-row:first-child {
	 border-top:
		 1px solid rgba(17, 23, 29, .12);
 }
 
 
 /**
  * Important:
  * this targets the Gutenberg inner wrapper,
  * which becomes our actual grid.
  */
 
 .drawing-service-row
 > .wp-block-group__inner-container {
	 display: grid;
 
	 grid-template-columns:
		 48px
		 150px
		 minmax(0, 1fr);
 
	 align-items: center;
 
	 gap:
		 28px;
 
	 width: 100%;
	 max-width: none;
 
	 padding:
		 18px 10px
		 18px 0;
 }
 
 
 /** ==================================================
  * NUMBER
  * ================================================== */
 
 .drawing-service-row__number {
	 align-self: start;
 
	 margin:
		 10px 0 0;
 
	 color:
		 var(--black);
 
	 font-size:
		 1.35rem;
 
	 font-weight:
		 400;
 
	 line-height:
		 1;
 
	 letter-spacing:
		 -.03em;
 }
 
 
 /** ==================================================
  * IMAGE
  * ================================================== */
 
 .drawing-service-row__image {
	 width: 150px;
	 height: 112px;
 
	 margin: 0 !important;
 
	 overflow: hidden;
 
	 background:
		 #f1f1ef;
 
	 border-radius:
		 12px;
 }
 
 
 .drawing-service-row__image img {
	 display: block;
 
	 width: 100%;
	 height: 100%;
 
	 object-fit: cover;
 
	 transition:
		 transform .7s
		 cubic-bezier(.16, 1, .3, 1);
 }
 
 
 .drawing-service-row:hover
 .drawing-service-row__image img {
	 transform:
		 scale(1.035);
 }
 
 
 /** ==================================================
  * CONTENT
  * ================================================== */
 
 .drawing-service-row__content {
	 position: relative;
 
	 width: 100%;
 
	 padding-right:
		 58px;
 }
 
 
 .drawing-service-row__content
 > .wp-block-group__inner-container {
	 width: 100%;
	 max-width: none;
 }
 
 
 /** Title */
 
 .drawing-service-row__title {
	 margin:
		 0
		 0
		 8px;
 
	 color:
		 var(--black);
 
	 font-size:
		 clamp(1.15rem, 1.4vw, 1.45rem);
 
	 font-weight:
		 500;
 
	 line-height:
		 1.15;
 
	 letter-spacing:
		 -.025em;
 }
 
 
 .drawing-service-row__title a {
	 color: inherit;
 
	 text-decoration: none;
 }
 
 
 /** Description */
 
 .drawing-service-row__description {
	 max-width:
		 520px;
 
	 margin:
		 0
		 0
		 8px;
 
	 color: rgba(17, 23, 29, .7);
 
	 font-size:
		 13px;
 
	 line-height:
		 1.45;
 }
 
 
 /** Best for */
 
 .drawing-service-row__best {
	 margin:
		 0;
 
	 color: rgba(17, 23, 29, .48);
 
	 font-size:
		 11px;
 
	 line-height:
		 1.45;
 }
 
 
 .drawing-service-row__best strong {
	 color:
		 var(--black);
 
	 font-weight:
		 500;
 }
 
 
 /** ==================================================
  * ARROW
  * ================================================== */
 
 .drawing-service-row__arrow {
	 position: absolute;
 
	 top: 50%;
	 right: 0;
 
	 display: inline-flex;
 
	 align-items: center;
	 justify-content: center;
 
	 width: 38px;
	 height: 38px;
 
	 color:
		 var(--black);
 
	 border:
		 1px solid
		 rgba(17, 23, 29, .22);
 
	 border-radius:
		 50%;
 
	 font-size:
		 17px;
 
	 line-height:
		 1;
 
	 transform:
		 translateY(-50%);
 
	 transition:
		 color .35s ease,
		 background-color .35s ease,
		 border-color .35s ease,
		 transform .45s
		 cubic-bezier(.16, 1, .3, 1);
 }
 
 
 /** ==================================================
  * ROW HOVER
  * ================================================== */
 
 .drawing-service-row:hover
 .drawing-service-row__arrow {
	 color:
		 #fff;
 
	 background:
		 var(--black);
 
	 border-color:
		 var(--black);
 
	 transform:
		 translate(3px, -50%);
 }
 
 
 .drawing-service-row:hover
 .drawing-service-row__title {
	 color:
		 var(--black);
 }
 
 
 /** ==================================================
  * OPTIONAL CLICK FEEL
  * ================================================== */
 
 .drawing-service-row:has(.drawing-service-row__title a) {
	 cursor: pointer;
 }
 
 
 /** ==================================================
  * TABLET
  * ================================================== */
 
 @media screen and (max-width: 74.9375em) {
 
	 .drawing-service-row
	 > .wp-block-group__inner-container {
		 grid-template-columns:
			 38px
			 120px
			 minmax(0, 1fr);
 
		 gap:
			 20px;
	 }
 
 
	 .drawing-service-row__image {
		 width:
			 120px;
 
		 height:
			 94px;
	 }
 
 }
 
 
 /** ==================================================
  * MOBILE
  * ================================================== */
 
 @media screen and (max-width: 47.9375em) {
 
	 .drawing-service-row
	 > .wp-block-group__inner-container {
		 grid-template-columns:
			 28px
			 88px
			 minmax(0, 1fr);
 
		 align-items:
			 start;
 
		 gap:
			 12px;
 
		 padding:
			 16px
			 0;
	 }
 
 
	 .drawing-service-row__number {
		 margin-top:
			 5px;
 
		 font-size:
			 12px;
	 }
 
 
	 .drawing-service-row__image {
		 width:
			 88px;
 
		 height:
			 74px;
 
		 border-radius:
			 9px;
	 }
 
 
	 .drawing-service-row__content {
		 padding-right:
			 0;
	 }
 
 
	 .drawing-service-row__title {
		 padding-right:
			 34px;
 
		 margin-bottom:
			 6px;
 
		 font-size:
			 1.05rem;
	 }
 
 
	 .drawing-service-row__description {
		 margin-bottom:
			 6px;
 
		 font-size:
			 11px;
 
		 line-height:
			 1.4;
	 }
 
 
	 .drawing-service-row__best {
		 font-size:
			 9px;
	 }
 
 
	 .drawing-service-row__arrow {
		 top:
			 0;
 
		 right:
			 0;
 
		 width:
			 28px;
 
		 height:
			 28px;
 
		 font-size:
			 12px;
 
		 transform:
			 none;
	 }
 
 
	 .drawing-service-row:hover
	 .drawing-service-row__arrow {
		 transform:
			 translateX(2px);
	 }
 
 }
 
 
 /** ==================================================
  * REDUCED MOTION
  * ================================================== */
 
 @media (prefers-reduced-motion: reduce) {
 
	 .drawing-service-row__image img,
	 .drawing-service-row__arrow {
		 transition:
			 none;
	 }
 
 }
 
 
 /** ==================================================
  * DRAWING HELP PANEL
  * ================================================== */
 
 .drawing-help-panel {
	 min-height: 0 !important;
 
	 padding: 0;
 
	 border-radius: 28px;
 
	 overflow: hidden;
 }
 
 
 /** Gutenberg inner wrapper */
 
 .drawing-help-panel
 > .wp-block-cover__inner-container {
	 display: flex;
 
	 flex-direction: column;
 
	 align-items: flex-start;
 
	 width: 100%;
	 max-width: none;
 
	 padding:
		 2.25rem;
 
	 min-height:
		 360px;
 }
 
 
 /** ==================================================
  * TITLE
  * ================================================== */
 
 .drawing-help-panel
 .wp-block-heading {
 
	 color:
		 var(--white);

 }

 
 
 /** ==================================================
  * COPY
  * ================================================== */
 
 .drawing-help-panel
 .wp-block-paragraph {

 
	 color:
		 rgba(255,255,255,.68);
 
 }
 
 
 
 
 /** ==================================================
  * MOBILE
  * ================================================== */
 
 @media screen and (max-width: 47.9375em) {
 
	 .drawing-help-panel {
		 border-radius:
			 22px;
	 }
 
 
	 .drawing-help-panel
	 > .wp-block-cover__inner-container {
		 min-height:
			 0;
 
		 padding:
			 1.75rem;
	 }
 
 
 }