/* =========================================================
   =========================================================

   HANDYMAN EASTBOURNE — CLEAN MASTER STYLESHEET

   Rebuilt from the tested shared foundation and the new
   Handyman, Services and Project page CSS.

   =========================================================
   ========================================================= */

/* =========================================================
   01. FONTS
   ========================================================= */

@font-face {
    font-family: "LondrinaShadow";
    src: url("/wp-content/themes/blankslate-child/assets/fonts/Londrina_Shadow/LondrinaShadow-Regular.ttf")
         format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Chalktastic1";
    src: url("/wp-content/themes/blankslate-child/assets/fonts/Chalktastic/ChalktasticItalic-pEwZ.ttf")
         format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Chalktastic2";
    src: url("/wp-content/themes/blankslate-child/assets/fonts/Chalktastic/Chalktastic-x1nR.ttf")
         format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Chalktastic3";
    src: url("/wp-content/themes/blankslate-child/assets/fonts/Chalktastic/Chalktastic-r78L.ttf")
         format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Chalktastic4";
    src: url("/wp-content/themes/blankslate-child/assets/fonts/Chalktastic/ChalktasticItalic-YYA4.ttf")
         format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "PatrickHand";
    src: url("/wp-content/themes/blankslate-child/assets/fonts/Patrick_Hand/PatrickHand-Regular.ttf")
         format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "EraserRegular";
    src: url("/wp-content/themes/blankslate-child/assets/fonts/Eraser/EraserRegular-DO1D.ttf")
         format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "EraserDust";
    src: url("/wp-content/themes/blankslate-child/assets/fonts/Eraser/EraserDust-p70d.ttf")
         format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "ArchitectsDaughter";
    src: url("/wp-content/themes/blankslate-child/assets/fonts/Architects_Daughter/ArchitectsDaughter-Regular.ttf")
         format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Sriracha";
    src: url("/wp-content/themes/blankslate-child/assets/fonts/Sriracha/Sriracha-Regular.ttf")
         format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "GochiHandRegular";
    src: url("/wp-content/themes/blankslate-child/assets/fonts/Gochi_Hand/GochiHand-Regular.ttf")
         format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "BradleyHand";
    src: url("/wp-content/themes/blankslate-child/assets/fonts/Bradley_Hand/BradleyHandITCTT-Bold.ttf")
         format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "BarlowRegular";
    src: url("/wp-content/themes/blankslate-child/assets/fonts/Barlow/Barlow-Regular.ttf")
         format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "ChalktasticItalic1";
    src: url("/wp-content/themes/blankslate-child/assets/fonts/Chalktastic/ChalktasticItalic-pEwZ.ttf")
         format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "ChalktasticItalic2";
    src: url("/wp-content/themes/blankslate-child/assets/fonts/Chalktastic/ChalktasticItalic-YYA4.ttf")
         format("truetype");
    font-display: swap;
}


/* =========================================================
   02. HANDYMAN BASE / WRAPPER / SHARED HEADER
   ========================================================= */

/* GENERAL PAGE STRUCTURE */


body {
    margin: 0;
    padding: 30px;
	background-image:url("assets/images/BgBlackLeather.jpg");
	font-family: Arial, Helvetica, sans-serif;
}

body.HandymanSite {
    margin: 0;
}

.site-title-heading {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* =========================================================
   HANDYMAN PAGE WRAPPER
   Contains the header, page content and footer.
   ========================================================= */

.PageWrapper {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;
    padding: 1em;

    background-image:
        url("assets/images/BgWhiteParchment.gif");
    background-repeat: repeat;

    font-family: BarlowRegular, sans-serif;
    font-size: clamp(0.7rem, 1.8vw, 1.3rem);
    line-height: 1.5em;

    text-align: justify;

    border-style: solid;
    border-color: #0625BB;
    border-width: 0.75em 0.75em 0.75em 0.75em;

    box-sizing: border-box;
}


.PageContainer {
	font-family: BarlowRegular, sans-serif;
	font-size: clamp(0.7rem, 1.8vw, 1.3rem);
	background-image:url("assets/images/BgDarkBlueLeather.jpg");
    width: 100%;
    max-width: 1200px;
    margin: 0 0 0 0;
    padding: 1em;
    box-sizing: border-box;
    color: #fff;
}


.PageContainerDark {
	background-image:url("assets/images/BgDarkBlueLeather.jpg");
    width: 100%;
    max-width: 1200px;
    margin: 0 0 0 0;
    padding: 1em;
    box-sizing: border-box;
    color: #fff;
}

.PageContainer p {
    margin: 0 0 1em 0;
}


.PageContainerHandyman {
    display:block;
    width:100%;
    max-width:100%;
    margin:0;
    padding:0;
    box-sizing:border-box;
}


/* CONTAINER FORMATTING */


/* TEXT FORMATTING */


/* PRIVATE HEADER */
/* WORDPRESS CLASS — DO NOT RENAME */

.site-header {
    width: 100%;
    background: #ffffff;
    border-bottom: 2px solid #333333;
    color:blue;
}


/* WORDPRESS CLASS — DO NOT RENAME */

.site-header-branding {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1em;

    display: flex;
    align-items: center;
    gap: 1em;

    box-sizing: border-box;
}
/* WORDPRESS CLASS — DO NOT RENAME */

.site-header-branding > a {
    display: block;
    flex: 0 0 auto;
}
/* WORDPRESS CLASS — DO NOT RENAME */

.site-logo {
	display:block;
	width:clamp(80px, 15vw, 180px);
	height:auto;
}


/* HOME SITE TITLE */
/* WORDPRESS CLASS — DO NOT RENAME */

.site-title {
    display: flex;
    flex-direction: column;
	font-size:clamp(8px, 3vw, 2em);
}
/* WORDPRESS CLASS — DO NOT RENAME */

.site-title h1 {
    margin: 0;
    color: #222222;
    font-size: 2em;
    line-height: 1.1;
}
/* WORDPRESS CLASS — DO NOT RENAME */

.site-tagline {
    margin: 0.3em 0 0;
    color: #666666;
	font-size:clamp(8px, 1.5vw, 1em);
}


/* HOME NAVIGATION */
/* WORDPRESS CLASS — DO NOT RENAME */

.site-navigation {
    width: 100%;
    border-top: 1px solid #dddddd;
}

/* Services Overview submenu item */
.services-overview-menu > a {
    color:#800000 !important;
    font-weight:bold !important;
    font-size: 1.2em;
    background:lightyellow !important;
    padding:0.2em;
}


/* =========================================================
   GENERAL LINKS
   ========================================================= */

a {
    text-decoration: none !important;
    color: inherit;
}

/* WORDPRESS CLASS — DO NOT RENAME */

.site-menu {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.5em 1em;

    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;

    list-style: none;
    box-sizing: border-box;
}
/* WORDPRESS CLASS — DO NOT RENAME */

.site-menu li {
    margin: 0;
    padding: 0;
}
/* WORDPRESS CLASS — DO NOT RENAME */

.site-menu a {
    display: block;
    padding: 0.6em 0.9em;

    color: #222222;
    text-decoration: none;
}
/* WORDPRESS CLASS — DO NOT RENAME */

.site-menu a:hover,
/* WORDPRESS CLASS — DO NOT RENAME */
.site-menu a:focus {
    text-decoration: underline;
}
/* WORDPRESS CLASS — DO NOT RENAME */

.site-menu .current-menu-item > a,
/* WORDPRESS CLASS — DO NOT RENAME */
.site-menu .current_page_item > a {
    font-weight: bold;
    text-decoration: underline;
}


/* IMAGES */

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


/* PRIVATE FOOTER */
/* WORDPRESS CLASS — DO NOT RENAME */

.site-footer {
    width: 100%;
    margin: 0;
    padding: 1em;
    color: #666666;
    font-size: 0.9em;
    text-align: center;
    box-sizing: border-box;
}
/* WORDPRESS CLASS — DO NOT RENAME */

.site-footer-branding {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1em;

    display: flex;
    align-items: center;
    gap: 1em;

    box-sizing: border-box;
}
/* WORDPRESS CLASS — DO NOT RENAME */

.site-footer-branding > a {
    display: block;
    flex: 0 0 auto;
}


/* MOBILE HOME HEADER */

@media screen and (max-width: 750px) {
/* WORDPRESS CLASS — DO NOT RENAME */

    .site-header-branding {
        display: block;
        text-align: center;
    }
/* WORDPRESS CLASS — DO NOT RENAME */

    .site-logo {
        margin: 0 auto;
    }
/* WORDPRESS CLASS — DO NOT RENAME */

    .site-title {
        margin-top: 1em;
    }
/* WORDPRESS CLASS — DO NOT RENAME */

    .site-navigation {
        margin-top: 0;
    }
/* WORDPRESS CLASS — DO NOT RENAME */

    .site-menu {
        display: block;
        text-align: center;
    }
/* WORDPRESS CLASS — DO NOT RENAME */

    .site-menu a {
        padding: 0.7em;
    }
}


/* =========================================================
   03. HANDYMAN NAVIGATION
   ========================================================= */

:root {
	--ukraine-blue: #0057b7;
	--ukraine-yellow: #ffd700;
	--british-blue: #012169;
	--british-red: #c8102e;
	--menu-yellow: #f5dc68;
	--menu-text: #17213a;
	--menu-hover: rgba(255, 255, 255, 0.45);
}

/* =========================================================
   HANDYMAN NAVIGATION
   Abstract UK and Ukraine colour treatment
   ========================================================= */

.HandymanSite .site-navigation {
	position: relative;

	width: auto;
	margin-left: 0.3em;
	margin-right: 0.3em;
	padding: 0;

	background: #fffdf5;

	border-top: 3px solid var(--ukraine-blue);
	border-bottom: 3px solid var(--british-red);
	border-radius: 12px;

	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);

	/*
	The submenu must be allowed to extend below the navigation.
	Using overflow:hidden here would cut it off.
	*/
	overflow: visible;

	box-sizing: border-box;
	z-index: 100;
}


/*
Soft permanent colour wash inspired by Ukraine and Britain.

The colour layer is clipped to the inside of the navigation bar
so that the blurred colours cannot bleed around its outside edge.
*/
.HandymanSite .site-navigation::before {
	content: "";

	position: absolute;
	inset: 0;

	background:
		radial-gradient(
			circle at 8% 45%,
			rgba(0, 87, 183, 0.38) 0,
			rgba(0, 87, 183, 0.13) 25%,
			transparent 48%
		),
		radial-gradient(
			circle at 35% 20%,
			rgba(255, 215, 0, 0.38) 0,
			rgba(255, 215, 0, 0.12) 27%,
			transparent 50%
		),
		radial-gradient(
			circle at 68% 75%,
			rgba(255, 255, 255, 0.82) 0,
			rgba(255, 255, 255, 0.24) 34%,
			transparent 56%
		),
		radial-gradient(
			circle at 95% 48%,
			rgba(200, 16, 46, 0.34) 0,
			rgba(200, 16, 46, 0.11) 26%,
			transparent 49%
		);

	border-radius: 9px;

	filter: blur(12px);

	/*
	Clip the blurred layer itself rather than clipping the
	navigation, because the dropdown must remain visible.
	*/
	clip-path: inset(0 round 9px);

	pointer-events: none;
	z-index: 0;
}


.HandymanSite .site-menu {
	position: relative;
	z-index: 2;

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

	width: auto;
	max-width: 1200px;

	margin: 0 auto;
	padding: 0;

	background: rgba(255, 255, 255, 0.74);
	font-size: 3em;
	
	border-radius: 9px;

	list-style: none;
}

/* =========================================================
   TOP-LEVEL MENU ITEMS
   ========================================================= */

.HandymanSite .site-menu > li {
	position: relative;
	flex: 1 1 0;

	margin: 0;
	padding: 0;

	list-style: none;

	border-right: 1px solid rgba(1, 33, 105, 0.14);

	/*
	Normally hidden, but menu items containing a submenu
	are changed to overflow:visible farther below.
	*/
	overflow: hidden;
}

.HandymanSite .site-menu > li:first-child {
	border-radius: 9px 0 0 9px;
}

.HandymanSite .site-menu > li:last-child {
	border-right: 0;
	border-radius: 0 9px 9px 0;
}

/*
The rollover colour wash is applied directly to the top-level
link rather than to the list-item background. This ensures that
Home, Services and all the remaining menu choices behave in
exactly the same way, including items with rounded corners or
a drop-down submenu.
*/
.HandymanSite .site-menu > li::before {
	content: none;
	display: none;
}

.HandymanSite .site-menu > li > a {
	position: relative;
	z-index: 2;

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

	min-height: 2.5em;
	padding: 10px 18px;

	background: transparent !important;
	background-image: none !important;

	border: 0;
	border-radius: 0;

	color: var(--menu-text);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;

	box-shadow: none;

	transition:
		color 0.25s ease,
		text-shadow 0.25s ease;
}

/* Remove former menu flag images */
.HandymanSite .site-menu > li > a::before {
	content: none !important;
	display: none !important;
	background-image: none !important;
}

/* Uniform rollover treatment for every top-level menu choice */
.HandymanSite .site-menu > li:hover > a,
.HandymanSite .site-menu > li:focus-within > a,
.HandymanSite .site-menu > li > a:hover,
.HandymanSite .site-menu > li > a:focus {
	background:
		radial-gradient(
			circle at 10% 50%,
			rgba(0, 87, 183, 0.16) 0,
			rgba(0, 87, 183, 0.06) 30%,
			transparent 58%
		),
		radial-gradient(
			circle at 40% 25%,
			rgba(255, 215, 0, 0.18) 0,
			rgba(255, 215, 0, 0.06) 31%,
			transparent 60%
		),
		radial-gradient(
			circle at 70% 72%,
			rgba(255, 255, 255, 0.58) 0,
			rgba(255, 255, 255, 0.16) 35%,
			transparent 64%
		),
		radial-gradient(
			circle at 94% 48%,
			rgba(200, 16, 46, 0.13) 0,
			rgba(200, 16, 46, 0.05) 30%,
			transparent 58%
		) !important;

	color: var(--british-blue);

	text-shadow:
		0 1px 0 rgba(255, 255, 255, 0.8),
		0 1px 3px rgba(1, 33, 105, 0.12);

	outline: none;
}

/* Current page */
.HandymanSite .site-menu > .current-menu-item,
.HandymanSite .site-menu > .current-menu-ancestor,
.HandymanSite .site-menu > .current_page_item {
	background: rgba(255, 255, 255, 0.7);
}

.HandymanSite .site-menu > .current-menu-item > a,
.HandymanSite .site-menu > .current-menu-ancestor > a,
.HandymanSite .site-menu > .current_page_item > a {
	color: var(--british-blue);
}

/* Current-page underline */
.HandymanSite .site-menu > .current-menu-item > a::after,
.HandymanSite .site-menu > .current-menu-ancestor > a::after {
	content: "";

	position: absolute;
	left: 22%;
	right: 22%;

	top: calc(50% + 0.72em);
	bottom: auto;

	height: 0.6em;

	background:
		linear-gradient(
			to right,
			var(--ukraine-blue) 0%,
			var(--ukraine-yellow) 36%,
			#ffffff 65%,
			var(--british-red) 100%
		);

	border-radius: 999px;

	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.16),
		0 0 5px rgba(255, 215, 0, 0.12);
}


/* =========================================================
   SERVICES DROP-DOWN MENU
   ========================================================= */

/*
Only a menu item containing children needs visible overflow.
This allows its drop-down panel to extend below the main bar.
*/
.HandymanSite .site-menu > li.menu-item-has-children {
	overflow: visible;
}

/*
Hide the submenu by default.
These rules are the part missing from the previous stylesheet.
*/
.HandymanSite .site-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 1000;

	display: block;

	width: 260px;
	margin: 0;
	padding: 8px;

	background:
		radial-gradient(
			circle at 8% 20%,
			rgba(0, 87, 183, 0.12),
			transparent 44%
		),
		radial-gradient(
			circle at 45% 8%,
			rgba(255, 215, 0, 0.13),
			transparent 44%
		),
		radial-gradient(
			circle at 94% 78%,
			rgba(200, 16, 46, 0.09),
			transparent 46%
		),
		rgba(255, 253, 245, 0.98);

	border: 1px solid rgba(1, 33, 105, 0.16);
	border-top: 3px solid var(--ukraine-blue);
	border-bottom: 3px solid var(--british-red);
	border-radius: 0 0 12px 12px;

	box-shadow:
		0 14px 28px rgba(0, 0, 0, 0.16),
		0 4px 8px rgba(0, 0, 0, 0.08);

	list-style: none;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transform: translate(-50%, -8px);

	transition:
		opacity 0.22s ease,
		transform 0.22s ease,
		visibility 0.22s ease;
}

/* Display submenu only on hover or keyboard focus */
.HandymanSite .site-menu > li.menu-item-has-children:hover > .sub-menu,
.HandymanSite .site-menu > li.menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;

	transform: translate(-50%, 0);
}

/* Submenu list items */
.HandymanSite .site-menu .sub-menu > li {
	position: relative;

	display: block;
	width: 100%;

	margin: 0;
	padding: 0;

	background: transparent;

	border: 0;
	border-bottom: 1px solid rgba(1, 33, 105, 0.1);

	list-style: none;
	overflow: hidden;
}

.HandymanSite .site-menu .sub-menu > li:last-child {
	border-bottom: 0;
}

/* Prevent top-level rollover rules affecting submenu items */
.HandymanSite .site-menu .sub-menu > li::before {
	content: none;
	display: none;
}

/* Submenu links */
.HandymanSite .site-menu .sub-menu > li > a {
	position: relative;

	display: block;
	width: 100%;

	padding: 12px 15px;

	background: rgba(255, 255, 255, 0.5);

	color: var(--menu-text);
	font-size: 0.96rem;
	font-weight: 650;
	line-height: 1.3;
	text-align: left;
	text-decoration: none;

	box-sizing: border-box;

	transition:
		background 0.22s ease,
		color 0.22s ease,
		padding-left 0.22s ease;
}

/* Submenu rollover */
.HandymanSite .site-menu .sub-menu > li > a:hover,
.HandymanSite .site-menu .sub-menu > li > a:focus {
	padding-left: 21px;

	background:
		radial-gradient(
			circle at 8% 50%,
			rgba(0, 87, 183, 0.14),
			transparent 44%
		),
		radial-gradient(
			circle at 46% 20%,
			rgba(255, 215, 0, 0.15),
			transparent 45%
		),
		radial-gradient(
			circle at 94% 65%,
			rgba(200, 16, 46, 0.09),
			transparent 46%
		),
		rgba(255, 255, 255, 0.7);

	color: var(--british-blue);
	outline: none;
}

/* Current submenu page */
.HandymanSite .site-menu .sub-menu > .current-menu-item > a,
.HandymanSite .site-menu .sub-menu > .current_page_item > a {
	background:
		linear-gradient(
			90deg,
			rgba(0, 87, 183, 0.1),
			rgba(255, 215, 0, 0.13),
			rgba(255, 255, 255, 0.5),
			rgba(200, 16, 46, 0.08)
		);

	color: var(--british-blue);
	font-weight: 750;
}

/*
Do not place the thick top-level underline inside a submenu.
*/
.HandymanSite .site-menu .sub-menu .current-menu-item > a::after,
.HandymanSite .site-menu .sub-menu .current_page_item > a::after {
	content: none;
	display: none;
}


/* =========================================================
   TABLET
   ========================================================= */

/* =========================================================
   NARROW LANDSCAPE / SMALL TABLET
   Keep all six menu items on one row.

   Between 900px and 621px:
   - text gradually reduces from 16px to 8px;
   - horizontal padding gradually reduces from 18px to 4px;
   - the menu remains on one line.
   ========================================================= */

@media screen and (max-width: 900px) and (min-width: 621px) {

	.HandymanSite .site-navigation {
		border-radius: 10px;
	}

	.HandymanSite .site-menu {
		flex-wrap: nowrap;
	}

	.HandymanSite .site-menu > li {
		flex: 1 1 0;
		min-width: 0;

		border-right: 1px solid rgba(1, 33, 105, 0.14);
		border-bottom: 0;
	}

	.HandymanSite .site-menu > li:last-child {
		border-right: 0;
	}

	.HandymanSite .site-menu > li > a {
		min-width: 0;
		min-height: 2.5em;

		/*
		Reduces smoothly:
		16px at approximately 900px wide;
		8px at approximately 621px wide.
		*/
		font-size: clamp(
			8px,
			calc(2.86vw - 9.71px),
			16px
		);

		/*
		Horizontal padding reduces smoothly from
		18px to approximately 4px.
		*/
		padding-top: 10px;
		padding-right: clamp(
			4px,
			calc(5vw - 27px),
			18px
		);
		padding-bottom: 10px;
		padding-left: clamp(
			4px,
			calc(5vw - 27px),
			18px
		);

		white-space: nowrap;
		overflow: hidden;
		text-overflow: clip;
	}

	/* Keep the current-page underline proportional */
	.HandymanSite .site-menu > .current-menu-item > a::after,
	.HandymanSite .site-menu > .current-menu-ancestor > a::after,
	.HandymanSite .site-menu > .current_page_item > a::after {
		left: 18%;
		right: 18%;

		top: calc(50% + 0.72em);

		height: 0.6em;
	}

	/* Drop-down remains readable while top-level text shrinks */
	.HandymanSite .site-menu .sub-menu {
		width: 240px;
	}

	.HandymanSite .site-menu .sub-menu > li > a {
		font-size: 15px;
		white-space: normal;
	}
}

/* =========================================================
   PORTRAIT MOBILE
   Exactly two equal rows of three menu items.

   Once the one-row version would become too cramped:
   - the menu changes to three columns;
   - the six items form two equal rows;
   - the text returns to a much larger readable size.
   ========================================================= */

@media screen and (max-width: 620px) {

	.HandymanSite .site-navigation {
		border-radius: 10px;
	}

	.HandymanSite .site-menu {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));

		width: auto;

		flex-wrap: initial;
	}

	.HandymanSite .site-menu > li {
		width: auto;
		min-width: 0;

		border-right: 1px solid rgba(1, 33, 105, 0.14);
		border-bottom: 1px solid rgba(1, 33, 105, 0.14);

		border-radius: 0;
	}

	/* Remove the right border from items 3 and 6 */
	.HandymanSite .site-menu > li:nth-child(3n) {
		border-right: 0;
	}

	/* Remove the bottom border from the second row */
	.HandymanSite .site-menu > li:nth-child(n + 4) {
		border-bottom: 0;
	}

	/* Preserve rounded outside corners */
	.HandymanSite .site-menu > li:first-child {
		border-radius: 9px 0 0 0;
	}

	.HandymanSite .site-menu > li:nth-child(3) {
		border-radius: 0 9px 0 0;
	}

	.HandymanSite .site-menu > li:nth-child(4) {
		border-radius: 0 0 0 9px;
	}

	.HandymanSite .site-menu > li:last-child {
		border-radius: 0 0 9px 0;
	}

	.HandymanSite .site-menu > li > a {
		min-width: 0;
		min-height: 3.25em;

		padding: 9px 5px;

		/*
		Keeps the wording as large as the available
		three-column layout reasonably permits.
		*/
		font-size: clamp(
			13px,
			4.2vw,
			16px
		);

		line-height: 1.15;

		white-space: nowrap;
		overflow: hidden;
		text-overflow: clip;
	}

	/* Current-page underline */
	.HandymanSite .site-menu > .current-menu-item > a::after,
	.HandymanSite .site-menu > .current-menu-ancestor > a::after,
	.HandymanSite .site-menu > .current_page_item > a::after {
		left: 25%;
		right: 25%;

		top: calc(50% + 0.72em);

		height: 0.5em;
	}

	/* Keep the Services submenu within the viewport */
	.HandymanSite .site-menu .sub-menu {
		left: 50%;

		width: min(
			260px,
			calc(100vw - 1.2em)
		);

		transform: translate(-50%, -8px);
	}

	.HandymanSite .site-menu > li.menu-item-has-children:hover > .sub-menu,
	.HandymanSite .site-menu > li.menu-item-has-children:focus-within > .sub-menu {
		transform: translate(-50%, 0);
	}

	/* Submenu wording must not inherit the shrinking top-menu size */
	.HandymanSite .site-menu .sub-menu > li > a {
		min-height: 0;

		padding: 12px 15px;

		font-size: 15px;
		line-height: 1.3;

		white-space: normal;
		overflow: visible;
	}
}


.MappingBy {
    display: block;
    width: 100%;

    text-align: center;

    padding-top: 0.5em;
    margin: 0 auto;

    font-size: clamp(0.4rem, 2vw, 1rem);
}

.MappingBy a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
}

.MappingBy img {
    display: block;
    width: clamp(30px, 10vw, 100px);
    height: auto;
}

/* =========================================================
   =========================================================

   SITE FOOTER

   Shared Handyman footer used by MySiteFooter.php

   =========================================================
   ========================================================= */

.MySiteFooterContainer {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 15% 70% 15%;
	align-items: center;
	gap: 5px;
	padding: 10px;
	background-image: url("/wp-content/themes/blankslate-child/assets/images/BgWhiteLinnen.jpg");
	background-repeat: repeat;
	border: 1px solid black;
	overflow: hidden;
}

.MyFooterCol1,
.MyFooterCol2,
.MyFooterCol3 {
	min-width: 0;
	box-sizing: border-box;
}

.MyFooterCol1 {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	overflow: hidden;
	padding-left: 1em;
}

.MyFooterCol2 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: 0.15em;
	padding: 0 1em;
	overflow: hidden;
}

.MyFooterCol3 {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	overflow: hidden;
	padding-right: 2em;
}

.MyFooterCol1 img,
.MyFooterCol3 img {
	display: block;
	object-fit: contain;
	height: auto;
}

.MyFooterNoCallout {
	color: black;
	font-weight: bold;
	font-size: clamp(0.3rem, 1.5vw, 1.5rem);
	margin-bottom: 1.5em;
}

.MyFooterHeading {
	font-size: clamp(0.5rem, 2vw, 1.8rem);
	font-weight: bold;
	letter-spacing: 0.15em;
	line-height: 1;
	color: #000;
}

.MyFooterSlogan {
	font-family: "Rock Salt", cursive;
	font-size: clamp(0.4rem, 2vw, 1.5rem);
	font-weight: bold;
	color: #004a99;
	margin: 0.5em 0;
	text-align: center;
	line-height: 2em;
}

.MyFooterText {
	font-size: clamp(0.45rem, 1.2vw, 1rem);
	line-height: 1.3;
	color: #222;
}

@media screen and (max-width: 620px) {

	.MySiteFooterContainer {
		grid-template-columns: 18% 64% 18%;
		gap: 3px;
		padding: 6px;
	}

	.MyFooterCol1 {
		padding-left: 0.3em;
	}

	.MyFooterCol2 {
		padding: 0 0.3em;
	}

	.MyFooterCol3 {
		padding-right: 0.3em;
	}

}

/* =========================================================
   =========================================================

   HANDYMAN PAGE

   Complete current homepage CSS from latest home.css

   =========================================================
   ========================================================= */

/* =========================================================
   =========================================================

   HANDYMAN HOME PAGE
   Clean rebuild

   =========================================================
   ========================================================= */


/* =========================================================
   GENERAL
   ========================================================= */

.HandymanHome {
    width:100%;
    max-width:100%;
    margin:0;
    color:#17213a;
    box-sizing:border-box;
}

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

.HandymanHome img {
    display:block;
    max-width:100%;
}

.HandymanHome p {
    margin:0 0 1em;
}

.HandymanHome h1,
.HandymanHome h2,
.HandymanHome h3 {
    margin-top:0;
}

.HandymanHomeKicker {
    margin:0 0 0.7em;
    color:#467606;
    font-size:clamp(0.7rem, 1.2vw, 0.9rem);
    font-weight:800;
    line-height:1.3;
    letter-spacing:0.16em;
    text-transform:uppercase;
}


.HandymanHomeSectionHeading {
    max-width:52em;
    margin:0 auto 2.5em;
    text-align:center;
}

.HandymanHomeSectionHeading h2 {
    margin-bottom:0.45em;
    color:#0625BB;
    font-size:clamp(8px, 4vw, 2.5rem);
    line-height:1.1;
}

.HandymanHomeSectionHeading > p:last-child {
    max-width:44em;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:0;
    line-height:1.65;
}

.grid-container-contact {
    display: grid;
    grid-template-columns: 45% 45%;
    grid-gap: 10%;
}

.MyContactForm input[type="text"],
.MyContactForm input[type="email"],
.MyContactForm input[type="tel"] {
    padding: 0.7em;
}

.ContactSuccess {
    color: green;
    font-weight: bold;
    padding:1em;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.HandymanHomeButton {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0.8em 1.3em;
    border:2px solid #0625BB;
    border-radius:0.4em;
    font-weight:800;
    line-height:1.2;
    text-align:center;
    text-decoration:none;
}

.HandymanHomeButtonBlue {
    background:#0625BB;
    color:#ffffff;
}

.HandymanHomeButtonWhite {
    background:#ffffff;
    color:#0625BB;
}

.HandymanHomeButtonYellow {
    background:#FFD700;
    border-color:#FFD700;
    color:#0625BB;
}


/* =========================================================
   HERO
   ========================================================= */

.HandymanHomeHero {
    margin-bottom:5em;
}

.HandymanHomeHeroImage {
    position:relative;
    z-index:1;
    width:100%;
    overflow:hidden;
    border-radius:0.65em;
}


.HandymanHomeHeroImage img {
    width:100%;
    height:auto;
}

.HandymanHomeHeroText {
    position:relative;
    z-index:10;
    width:86%;
    max-width:58em;
    margin:-4em auto 0;
    padding:clamp(1.8em, 4vw, 3.2em);
    background:#fffdf5;
    border-top:0.4em solid #0625BB;
    border-radius:0.5em;
    box-shadow:0 0.8em 2em rgba(23, 33, 58, 0.16);
    text-align:center;
}


.HandymanHomeHeroText h2 {
    margin-bottom:0.55em;
    color:#17213a;
    font-size:clamp(8px, 3vw, 3rem);
    line-height:1.05;
}

.HandymanHomeHeroText h2 span {
    color:#0625BB;
}

.HandymanHomeHeroLead {
    max-width:43em;
    margin:0 auto 1.5em;
    font-size:clamp(6px, 2vw, 1.5rem);
    line-height:1.65;
}

.HandymanHomeHeroButtons {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:0.8em;
}



/* =========================================================
   CUSTOMER TESTIMONIAL
   ========================================================= */

.HandymanHomeTestimonial {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1.2em;
    max-width:48em;
    margin:-2em auto 5em;
    padding:1.5em 2em;

    border-top:1px solid rgba(6, 37, 187, 0.18);
    border-bottom:1px solid rgba(6, 37, 187, 0.18);
}

.HandymanHomeTestimonialLabel {
    display:inline-block;
    margin-right:1.2em;
    padding:0.35em 0.9em;
    background:#fff8d6;
    border:1px solid #0625BB;
    border-radius:999px;
    color:#0625BB;
    font-family:BarlowRegular, sans-serif;
    font-size:0.78em;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    white-space:nowrap;
}

.HandymanHomeTestimonialQuote {
    margin:0 auto 0.5em !important;
    color:#17213a;
    font-size:clamp(1rem, 2.2vw, 1.45rem);
    font-style:italic;
    font-weight:600;
    line-height:1.55;
}

.HandymanHomeTestimonialName {
    margin:0 !important;
    color:#467606;
    font-size:0.9em;
    font-weight:800;
}


/* =========================================================
   SERVICES
   ========================================================= */

/* =========================================================
   SERVICES
   Two cards per row
   Each card contains its own image and text
   ========================================================= */

.HandymanHomeServices {
    margin-bottom:5em;
}

.HandymanHomeServicesGrid {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:1.25em;
    width:100%;
}

.HandymanHomeServiceCard {
	display:flex !important;
    flex-direction:column !important;
    overflow:hidden;
    min-width:0;
    background:#ffffff;
    border:1px solid rgba(6, 37, 187, 0.13);
    border-radius:0.55em;
    box-shadow:0 0.4em 1.1em rgba(23, 33, 58, 0.10);
    color:#17213a;
    text-decoration:none;
}

.HandymanHomeServiceCard > img {
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto;
    aspect-ratio:4 / 3;
    object-fit:cover;
    margin:0 !important;
}


.HandymanHomeServiceCard > div {
    display:flex;
    flex:1;
    flex-direction:column;

    padding:1.25em;

    text-align:left;
}

.HandymanHomeServiceNumber {
    margin-bottom:0.45em;

    color:#467606;

    font-size:0.8em;
    font-weight:800;
}

.HandymanHomeServiceCard h3 {
    margin-bottom:0.55em;

    color:#0625BB;

    font-size:1.25em;
    line-height:1.22;
}

.HandymanHomeServiceCard p {
    line-height:1.55;
}

.HandymanHomeServiceCardText > a {
    margin-top:auto;
    color:#467606;
    font-weight:800;
    text-decoration:none !important;
}

.HandymanHomeServiceCardGeneral {
    background:
        linear-gradient(
            135deg,
            rgba(6, 37, 187, 0.055),
            rgba(255, 215, 0, 0.10)
        ),
        #ffffff;
}

/* =========================================================
   WHY DMYTRO
   ========================================================= */

.HandymanHomeWhy {
    display:flex;
    gap:3em;
    margin-bottom:5em;
    padding:clamp(2.5em, 5vw, 4em);
    background:#17213a;
    border-radius:0.65em;
    color:#ffffff;
}

.HandymanHomeWhyIntro {
    flex:0 0 34%;
}

.HandymanHomeWhy .HandymanHomeKicker {
    color:#FFD700;
}

.HandymanHomeWhyIntro h2 {
    margin-bottom:0.65em;
    color:#ffffff;
    font-size:clamp(2rem, 4vw, 3.2rem);
    line-height:1.08;
}

.HandymanHomeWhyIntro p:last-child {
    margin-bottom:0;
    line-height:1.65;
}

.HandymanHomeWhySteps {
    flex:1;
    display:flex;
    flex-wrap:wrap;
    gap:1em;
}

.HandymanHomeWhySteps > div {
    width:calc(50% - 0.5em);
    padding:1.3em;
    background:rgba(255, 255, 255, 0.07);
    border:1px solid rgba(255, 255, 255, 0.14);
    border-radius:0.4em;
    text-align:left;
}

.HandymanHomeWhySteps span {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:2.5em;
    height:2.5em;
    margin-bottom:0.8em;
    background:#FFD700;
    border-radius:50%;
    color:#0625BB;
    font-weight:800;
    line-height:1;
}

.HandymanHomeWhySteps h3 {
    margin-bottom:0.4em;
    color:#FFD700;
    font-size:1.25em;
}

.HandymanHomeWhySteps p {
    margin-bottom:0;
    line-height:1.55;
}


/* =========================================================
   FEATURED WORK
   ========================================================= */

.HandymanHomeWork {
    margin-bottom:5em;
}

.HandymanHomeWorkGrid {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:1.25em;
    width:100%;
}

.HandymanHomeWorkCard {
    display:flex;
    flex-direction:column;
    overflow:hidden;

    background:#ffffff;

    border:1px solid rgba(6, 37, 187, 0.12);
    border-radius:0.55em;

    box-shadow:0 0.4em 1.1em rgba(23, 33, 58, 0.11);
}

.HandymanHomeWorkCard > img {
    display:block;
    width:100%;
    aspect-ratio:4 / 3;
    object-fit:cover;
}

.HandymanHomeWorkCardText {
    display:flex;
    flex:1;
    flex-direction:column;

    padding:1.1em 1.2em 1.25em;

    text-align:left;
}

.HandymanHomeWorkCardText small {
    display:block;

    margin-bottom:0.4em;

    color:#467606;

    font-weight:800;
    letter-spacing:0.12em;
}

.HandymanHomeWorkCardText h3 {
    margin-bottom:0.4em;

    color:#0625BB;

    font-size:1.3em;
}

.HandymanHomeWorkCardText > a {
    margin-top:auto;

    color:#467606;

    font-weight:800;

    text-decoration:none !important;
}

/* =========================================================
   ABOUT
   ========================================================= */

.HandymanHomeAbout {
    display:flex;
    margin-bottom:5em;
    overflow:hidden;
    background:#f7f1df;
    border-radius:0.65em;
}

.HandymanHomeAboutImage {
    flex:0 0 50%;
}

.HandymanHomeAboutImage img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.HandymanHomeAboutText {
    flex:1;
    padding:clamp(2em, 5vw, 4em);
    text-align:left;
}

.HandymanHomeAboutText h2 {
    margin-bottom:0.65em;
    color:#0625BB;
    font-size:clamp(1.8rem, 3vw, 2.8rem);
    line-height:1.15;
}

.HandymanHomeAboutText p {
    line-height:1.65;
}

.HandymanHomeTextLink {
    color:#0625BB;
    font-weight:800;
    text-decoration:underline;
    text-underline-offset:0.2em;
}


/* =========================================================
   CONTACT
   ========================================================= */

.HandymanHomeContact {
    margin-bottom:3em;
    padding:clamp(2.5em, 6vw, 5em);
    background:#0625BB;
    border-radius:0.65em;
    color:#ffffff;
    text-align:center;
}

.HandymanHomeContact .HandymanHomeKicker {
    color:#FFD700;
}

.HandymanHomeContact h2 {
    max-width:20em;
    margin:0 auto 0.65em;
    color:#ffffff;
    font-size:clamp(2rem, 4vw, 3.2rem);
    line-height:1.12;
}

.HandymanHomeContact > p:not(.HandymanHomeKicker) {
    max-width:42em;
    margin:0 auto 1.5em;
    line-height:1.65;
}


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width:900px) {

    .HandymanHomeServicesGrid {
        grid-template-columns:repeat(2, 1fr);
    }

    .HandymanHomeWhy {
        flex-direction:column;
    }

    .HandymanHomeWhyIntro {
        flex:0 0 auto;
    }

    .HandymanHomeHeroText {
        width:92%;
        margin:-3em auto 0;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width:600px) {

    .HandymanHomeHeroText {
        width:94%;
        margin:-2em auto 0;
        padding:1.4em;
    }

    .HandymanHomeHeroButtons {
        display:grid;
        grid-template-columns:1fr;
    }

    .HandymanHomeServicesGrid {
        grid-template-columns:1fr;
    }

    .HandymanHomeWorkGrid {
        grid-template-columns:1fr;
    }

    .HandymanHomeWhySteps > div {
        width:100%;
    }

    .HandymanHomeAbout {
        flex-direction:column;
    }

    .HandymanHomeAboutImage {
        flex:0 0 auto;
    }

    .HandymanHomeAboutImage img {
        height:auto;
    }

}

/* =========================================================
   =========================================================

   SERVICES PAGES

   =========================================================
   ========================================================= */


/* =========================================================
   INDIVIDUAL SERVICE PAGES — GENERAL
   ========================================================= */

.ServicePage {
	width: 100%;
	max-width: 100%;
	margin: 0;

	color: #17213a;

	box-sizing: border-box;
}

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

.ServicePage img {
	display: block;

	width: 100%;
	height: auto;
}

.ServicePage p {
	margin: 0 0 1em;
}

.ServicePage h1,
.ServicePage h2,
.ServicePage h3 {
	margin-top: 0;
}

.ServiceEyebrow,
.ServiceSectionLabel {
	margin: 0 0 0.7em;

	color: #467606;

	font-size: 0.78em;
	font-weight: 700;
	letter-spacing: 0.15em;
	line-height: 1.35;

	text-transform: uppercase;
}


/* =========================================================
   SERVICE PAGE — HERO
   ========================================================= */

.ServiceHero {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);

	min-height: 34rem;

	margin: 0 0 3em;

	overflow: hidden;

	background: #f7f1df;

	border: 1px solid rgba(6, 37, 187, 0.18);
	border-radius: 0.7em;

	box-shadow: 0 0.8em 2em rgba(23, 33, 58, 0.13);
}

.ServiceHeroImage {
	min-height: 100%;

	overflow: hidden;
}

.ServiceHeroImage img {
	height: 100%;

	object-fit: cover;
}

.ServiceHeroContent {
	display: flex;
	flex-direction: column;
	justify-content: center;

	padding: clamp(2em, 5vw, 4.5em);

	background:
		radial-gradient(
			circle at 20% 10%,
			rgba(255, 215, 0, 0.15),
			transparent 38%
		),
		radial-gradient(
			circle at 95% 90%,
			rgba(6, 37, 187, 0.11),
			transparent 42%
		),
		#fffdf5;
}

.ServiceMainTitle {
	margin-bottom: 0.55em;

	color: #0625BB;

	font-size: clamp(2rem, 5vw, 4.2rem);
	line-height: 0.98;

	text-align: left;
}

.ServiceHeroStatement {
	color: #17213a;

	font-size: clamp(1.15rem, 2.1vw, 1.75rem);
	font-weight: 700;
	line-height: 1.35;
}

.ServiceHeroText {
	max-width: 38em;

	font-size: clamp(1rem, 1.5vw, 1.18rem);
	line-height: 1.7;
}

.ServiceHeroButtons {
	display: flex;
	flex-wrap: wrap;

	gap: 0.8em;

	margin-top: 0.7em;
}


/* =========================================================
   SERVICE PAGE — BUTTONS
   ========================================================= */

.ServiceButton {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 3em;

	padding: 0.75em 1.25em;

	border: 2px solid transparent;
	border-radius: 0.45em;

	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;

	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		background-color 0.2s ease;
}

.ServiceButton:hover,
.ServiceButton:focus {
	transform: translateY(-0.15em);

	box-shadow: 0 0.5em 1.1em rgba(23, 33, 58, 0.18);

	outline: none;
}

.ServiceButtonPrimary {
	background: #0625BB;
	border-color: #0625BB;
	color: #ffffff;
}

.ServiceButtonPrimary:hover,
.ServiceButtonPrimary:focus {
	background: #041c91;
}

.ServiceButtonSecondary {
	background: #ffffff;
	border-color: #0625BB;
	color: #0625BB;
}

.ServiceButtonSecondary:hover,
.ServiceButtonSecondary:focus {
	background: #f6f8ff;
}


/* =========================================================
   SERVICE PAGE — INTRODUCTION
   ========================================================= */

.ServiceIntroduction {
	display: grid;
	grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);

	gap: clamp(2em, 6vw, 5em);

	padding:
		clamp(1em, 3vw, 2em)
		clamp(0.5em, 2vw, 1.5em)
		4em;
}

.ServiceIntroductionHeading h2,
.ServiceSectionHeading h2,
.ServiceFeatureContent h2,
.ServiceCallToAction h2 {
	color: #0625BB;

	font-size: clamp(1.7rem, 3vw, 2.8rem);
	line-height: 1.15;

	text-align: left;
}

.ServiceIntroductionText {
	font-size: clamp(1rem, 1.4vw, 1.16rem);
	line-height: 1.75;
}

.ServiceSectionHeading {
	max-width: 50em;
	padding-top: 2em;
	margin: 0 auto 1em;

	text-align: center;
}

.ServiceSectionHeading h2 {
	text-align: center;
}

.ServiceSectionHeading p:last-child {
	font-size: 1.05em;
	line-height: 1.65;
}


/* =========================================================
   SERVICE PAGE — SERVICE CARDS
   ========================================================= */

.ServiceCardsSection {
	padding:
		clamp(1em, 3vw, 2.5em);

	background:
		linear-gradient(
			135deg,
			rgba(6, 37, 187, 0.055),
			rgba(255, 215, 0, 0.08)
		);

	border-radius: 0.7em;
}

.ServiceCards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));

	gap: 1em;
}

.ServiceCard {
	padding: 1em;
	background: rgba(255, 255, 255, 0.94);
	border-top: 0.32em solid #0625BB;
	border-radius: 0.45em;
	box-shadow: 0 0.35em 1em rgba(23, 33, 58, 0.09);
}

.ServiceCard:nth-child(2n) {
	border-top-color: #d6b500;
}

.ServiceCard h3 {
	margin-bottom: 0.7em;

	color: #467606;

	font-size: 1.25em;

	text-align: left;
}

.ServiceCard ul {
	margin: 0;
	padding-left: 1.2em;

	list-style: disc;

	text-align: left;
}

.ServiceCard li {
	margin: 0.4em 0;

	line-height: 1.45;
}


/* =========================================================
   SERVICE PAGE — FEATURE
   ========================================================= */

.ServiceFeature {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);

	margin: 4em 0;

	overflow: hidden;

	background: #17213a;

	border-radius: 0.7em;

	color: #ffffff;
}

.ServiceFeatureImage img {
	height: 100%;

	object-fit: cover;
}

.ServiceFeatureContent {
	padding: clamp(2em, 5vw, 4em);
}

.ServiceFeatureContent h2 {
	color: #ffffff;
}

.ServiceFeatureContent > p {
	font-size: 1.05em;
	line-height: 1.7;
}

.ServiceBenefitsGrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));

	gap: 1em;

	margin-top: 1.7em;
}

.ServiceBenefit {
	padding: 1em;

	background: rgba(255, 255, 255, 0.08);

	border-left: 0.25em solid #FFD700;
	border-radius: 0.3em;
}

.ServiceBenefit strong,
.ServiceBenefit span {
	display: block;
}

.ServiceBenefit strong {
	margin-bottom: 0.3em;

	color: #FFD700;
}

.ServiceBenefit span {
	line-height: 1.5;
}


/* =========================================================
   SERVICE PAGE — FEATURED PROJECTS
   ========================================================= */

.ServiceProjects {
	padding: 1em 0 4em;
}

.ServiceProjectsGrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));

	gap: 1.25em;
}

.ServiceProjectCard {
	display: flex;
	flex-direction: column;

	overflow: hidden;

	background: #ffffff;

	border: 1px solid rgba(6, 37, 187, 0.13);
	border-radius: 0.55em;

	box-shadow: 0 0.45em 1.2em rgba(23, 33, 58, 0.10);

	text-align: left;

	transition:
		transform 0.22s ease,
		box-shadow 0.22s ease;
}

.ServiceProjectCard:hover {
	transform: translateY(-0.25em);

	box-shadow: 0 0.85em 1.8em rgba(23, 33, 58, 0.16);
}

.ServiceProjectCard > img {
	aspect-ratio: 4 / 3;

	object-fit: cover;
}

.ServiceProjectContent {
	display: flex;
	flex: 1;
	flex-direction: column;

	padding: 1.2em;
}

.ServiceProjectContent h3 {
    margin: 0;
    padding: 0;
    color: #0625BB;
    font-size: 1.25em;
    line-height: 1.25;
    text-align: left;
}

.ServiceProjectContent > p:not(.ServiceSectionLabel) {
    flex: 1;
    line-height: 1.55;
    text-align: justify;
}

.ServiceProjectContent .ServiceSectionLabel {
    flex: none;
}

.ServiceProjectContent a {
	align-self: flex-start;

	color: #467606;

	font-weight: 700;

	text-decoration: underline;
	text-underline-offset: 0.2em;
}


/* =========================================================
   SERVICE PAGE — PROCESS
   ========================================================= */

.ServiceProcess {
	padding:
		clamp(2.5em, 6vw, 5em)
		clamp(1em, 3vw, 2.5em);

	background: #f7f1df;

	border-radius: 0.7em;
}

.ServiceProcessGrid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));

	gap: 1.25em;
}

.ServiceProcessStep {
	padding: 1.3em;

	background: #ffffff;

	border-radius: 0.45em;
}

.ServiceStepNumber {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 2.2em;
	height: 2.2em;

	margin-bottom: 0.8em;

	background: #0625BB;

	border-radius: 50%;

	color: #ffffff;

	font-weight: 700;
}

.ServiceProcessStep h3 {
	color: #467606;
}

.ServiceProcessStep p {
	margin-bottom: 0;

	line-height: 1.55;
}


/* =========================================================
   SERVICE PAGE — FAQ
   ========================================================= */

.ServiceFaq {
	max-width: 58em;

	margin: 0 auto;
	padding: 4em 0;
}

.ServiceFaq details {
	margin-bottom: 0.8em;

	overflow: hidden;

	background: #ffffff;

	border: 1px solid rgba(6, 37, 187, 0.16);
	border-radius: 0.4em;
}

.ServiceFaq summary {
	padding: 1em 1.2em;

	color: #0625BB;

	cursor: pointer;

	font-weight: 700;
	line-height: 1.4;
}

.ServiceFaq details p {
	padding: 0 1.2em 1.1em;

	line-height: 1.65;
}


/* =========================================================
   SERVICE PAGE — CALL TO ACTION
   ========================================================= */

.ServiceCallToAction {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;

	gap: 2em;

	padding: clamp(2em, 5vw, 4em);

	background:
		radial-gradient(
			circle at 10% 10%,
			rgba(255, 215, 0, 0.2),
			transparent 35%
		),
		#fffdf5;

	border: 0.22em solid #0625BB;
	border-radius: 0.7em;
}

.ServiceCallToAction h2 {
	max-width: 22em;
}

.ServiceCallToAction p:last-child {
	margin-bottom: 0;

	font-size: 1.05em;
	line-height: 1.6;
}


/* =========================================================
   SERVICE PAGES — TABLET
   ========================================================= */

@media screen and (max-width: 950px) {

	.ServiceCards,
	.ServiceProcessGrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ServiceProjectsGrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}


/* =========================================================
   SERVICE PAGES — SMALL TABLET
   ========================================================= */

@media screen and (max-width: 760px) {

	.ServiceHero,
	.ServiceIntroduction,
	.ServiceFeature,
	.ServiceCallToAction {
		grid-template-columns: 1fr;
	}

	.ServiceHero {
		min-height: 0;
	}

	.ServiceHeroImage img,
	.ServiceFeatureImage img {
		max-height: 28rem;
	}

	.ServiceIntroduction {
		gap: 1em;
	}

	.ServiceCallToAction .ServiceButton {
		width: 100%;
	}

}


/* =========================================================
   SERVICE PAGES — MOBILE
   ========================================================= */

@media screen and (max-width: 560px) {

	.ServiceHeroContent,
	.ServiceFeatureContent {
		padding: 1.4em;
	}

	.ServiceHeroButtons {
		display: grid;
		grid-template-columns: 1fr;
	}

	.ServiceCardsSection {
		padding: 2em 1em;
	}

	.ServiceCards,
	.ServiceProjectsGrid,
	.ServiceProcessGrid,
	.ServiceBenefitsGrid {
		grid-template-columns: 1fr;
	}

	.ServiceMainTitle {
		font-size: clamp(2rem, 11vw, 3rem);
	}

}


/* =========================================================
   SERVICE PAGE — FEATURE GALLERY
   ========================================================= */

.ServiceFeatureGallery {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	grid-template-rows: 1fr 1fr;

	gap: 0.8em;

	align-self: center;

	padding: 1.5em 1.5em 1.5em 0;
}

.ServiceFeatureGallery figure {
	position: relative;

	margin: 0;

	overflow: hidden;

	border-radius: 0.4em;
}

.ServiceFeatureGallery figure:first-child {
	grid-row: 1 / 3;
}

.ServiceFeatureGallery img {
	width: 100%;
	height: 100%;

	object-fit: cover;
}

.ServiceFeatureGallery figure:first-child img {
	aspect-ratio: 3 / 4;
}

.ServiceFeatureGallery figure:nth-child(2) img,
.ServiceFeatureGallery figure:nth-child(3) img {
	aspect-ratio: 4 / 3;
}

.ServiceFeatureGallery figcaption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;

	margin: 0;
	padding: 0.45em 0.7em;

	background: rgba(23, 33, 58, 0.78);

	color: #ffffff;

	font-size: 0.85em;
	font-weight: 700;

	text-align: center;
}


/* =========================================================
   SERVICE PAGE — PROJECT GROUPS
   ========================================================= */

.ServiceProjectGroups {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));

	gap: 2em;
}

.ServiceProjectGroup {
	min-width: 0;
}

.ServiceProjectGroup > h3 {
	margin-bottom: 1em;

	color: #467606;

	font-size: 1.35em;

	text-align: center;
}

.ServiceProjectPair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));

	gap: 1.25em;
}


/* =========================================================
   SERVICE PAGE — FEATURE GALLERY / PROJECT GROUPS
   RESPONSIVE
   ========================================================= */

@media screen and (max-width: 760px) {

	.ServiceFeatureGallery {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto;

		padding: 0 1.4em 1.4em;
	}

	.ServiceFeatureGallery figure:first-child {
		grid-column: 1 / 3;
		grid-row: auto;
	}

	.ServiceFeatureGallery figure:first-child img {
		aspect-ratio: 16 / 9;
	}

	.ServiceProjectGroups {
		grid-template-columns: 1fr;
	}

}


@media screen and (max-width: 560px) {

	.ServiceProjectPair {
		grid-template-columns: 1fr;
	}

}


/* =========================================================
   SERVICE FEATURE GALLERY — FOUR IMAGES
   ========================================================= */

.ServiceFeatureGalleryFour {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, auto);
}

.ServiceFeatureGalleryFour figure:first-child {
	grid-column: auto;
	grid-row: auto;
}

.ServiceFeatureGalleryFour figure:last-child {
	grid-column: auto;
}

.ServiceFeatureGalleryFour figure img,
.ServiceFeatureGalleryFour figure:first-child img,
.ServiceFeatureGalleryFour figure:nth-child(2) img,
.ServiceFeatureGalleryFour figure:nth-child(3) img,
.ServiceFeatureGalleryFour figure:nth-child(4) img {
	width: 100%;
	height: auto;

	aspect-ratio: 4 / 3;

	object-fit: cover;
}


/* =========================================================
   SERVICE PROJECTS — FOUR COLUMNS
   ========================================================= */

.ServiceProjectsGridFour {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}


/* =========================================================
   FOUR-IMAGE SERVICE LAYOUTS — TABLET
   ========================================================= */

@media screen and (max-width: 950px) {

	.ServiceProjectsGridFour {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}


/* =========================================================
   FOUR-IMAGE SERVICE LAYOUTS — MOBILE
   ========================================================= */

@media screen and (max-width: 560px) {

	.ServiceFeatureGalleryFour,
	.ServiceProjectsGridFour {
		grid-template-columns: 1fr;
	}

}


/* =========================================================
   HOME REPAIRS — COMMON PHOTOGRAPH STYLING
   ========================================================= */


/* =========================================================
   HOME REPAIRS — ENSUITE
   ========================================================= */


/* =========================================================
   HOME REPAIRS — MAIN ENTRANCE
   ========================================================= */


/* =========================================================
   HOME REPAIRS — WINDOW & DOUBLE GLAZING
   ========================================================= */


/* =========================================================
   HOME REPAIRS — BUILDING MAINTENANCE
   ========================================================= */


/* =========================================================
   HOME REPAIRS — WEATHERBOARD
   ========================================================= */


/* =========================================================
   HOME REPAIRS — STAIR HANDRAIL
   ========================================================= */


/* =========================================================
   HOME REPAIRS — APPROACH
   ========================================================= */


/* =========================================================
   HOME REPAIRS — TABLET
   ========================================================= */

@media screen and (max-width: 950px) {


}


/* =========================================================
   HOME REPAIRS — SMALL TABLET
   ========================================================= */

@media screen and (max-width: 760px) {


}


/* =========================================================
   HOME REPAIRS — MOBILE
   ========================================================= */

@media screen and (max-width: 560px) {


}


/* =========================================================
   SHARED UTILITY CLASSES
   ========================================================= */


.site-logo img {
    width: clamp(2.5em, 8vw, 7em);
    height: auto;
}

/* =========================================================
   =========================================================

   CURRENT PROJECT STORY SYSTEM

   Retained from the latest ai-services.css because the current
   project PHP pages use the ProjectStory classes.

   =========================================================
   ========================================================= */

/* =========================================================
   =========================================================

   DINING TABLE RESTORATION
   PROJECT STORY TEMPLATE

   This section styles detailed case-study/project pages.
   All selectors begin with ProjectStory so they remain
   separate from the general service-page CSS.

   =========================================================
   ========================================================= */


/* =========================================================
   PROJECT STORY — GENERAL
   ========================================================= */

.ProjectStory {
    width: 100%;
    max-width: 100%;
    margin: 0;
    color: #17213a;
    box-sizing: border-box;
}

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

.ProjectStory img {
    display: block;
    width: 100%;
    height: auto;
}

.ProjectStory p {
    margin: 0 0 1em;
}

.ProjectStory h1,
.ProjectStory h2,
.ProjectStory h3 {
    margin-top: 0;
}

.ProjectStorySectionLabel,
.ProjectStoryCategory {
    margin: 0 0 0.7em;
    color: #467606;
    font-size: clamp(0.68rem, 1vw, 0.9rem);
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1.35;
    text-transform: uppercase;
}

.ProjectStorySectionHeading {
    max-width: 50em;
    margin: 0 auto 2.4em;
    text-align: center;
}

.ProjectStorySectionHeading h2,
.ProjectStoryOpeningHeading h2,
.ProjectStoryChallengeContent h2,
.ProjectStoryResultContent h2,
.ProjectStoryCallToAction h2 {
    color: #0625BB;
    font-size: clamp(1.75rem, 3.6vw, 3rem);
    line-height: 1.12;
}

.ProjectStorySectionHeading > p:last-child {
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    line-height: 1.7;
}


/* =========================================================
   PROJECT STORY — SECTION SPACING
   ========================================================= */

.ProjectStoryChallenge,
.ProjectStoryTransformation,
.ProjectStoryQuote,
.ProjectStoryProcess,
.ProjectStoryBenefits,
.ProjectStoryResult {
    margin: 0 0 clamp(3em, 6vw, 5em);
}

.ProjectStoryCallToAction {
    margin: 0 0 clamp(2.5em, 5vw, 4em);
}

/* =========================================================
   PROJECT STORY — HERO
   ========================================================= */

.ProjectStoryHero {
    position: relative;
    min-height: clamp(28rem, 65vw, 48rem);
    margin: 0 0 clamp(3em, 6vw, 5em);
    overflow: hidden;
    background: #17213a;
    border-radius: 0.65em;
    box-shadow: 0 0.9em 2.2em rgba(23, 33, 58, 0.2);
}

.ProjectStoryHeroImage {
    position: absolute;
    inset: 0;
}

.ProjectStoryHeroImage::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(8, 15, 38, 0.88) 0%,
            rgba(8, 15, 38, 0.45) 45%,
            rgba(8, 15, 38, 0.08) 78%
        );
}

.ProjectStoryHeroImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ProjectStoryHeroOverlay {
    position: absolute;
    left: clamp(1.5em, 6vw, 5em);
    right: clamp(1.5em, 6vw, 5em);
    bottom: clamp(1.8em, 6vw, 5em);
    z-index: 1;

    max-width: 54em;
    color: #fff;
    text-align: left;
}

.ProjectStoryHeroOverlay .ProjectStoryCategory {
    color: #FFD700;
}

.ProjectStoryMainTitle {
    max-width: 12em;
    margin-bottom: 0.35em;
    color: #fff;
    font-size: clamp(2.5rem, 7vw, 5.8rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 0.95;
}

.ProjectStoryIntroduction {
    max-width: 36em;
    margin-bottom: 0;
    font-size: clamp(1.08rem, 2.2vw, 1.65rem);
    line-height: 1.5;
}


/* =========================================================
   PROJECT STORY — OPENING
   ========================================================= */

.ProjectStoryOpening {
    display: grid;
    grid-template-columns:
        minmax(0, 0.75fr)
        minmax(0, 1.25fr);

    gap: clamp(2em, 7vw, 6em);

    padding: 0 clamp(0.5em, 2vw, 1.5em) clamp(3em, 6vw, 5em);
}

.ProjectStoryOpeningHeading h2 {
    margin-bottom: 0;
}

.ProjectStoryOpeningText {
    font-size: clamp(1rem, 1.5vw, 1.18rem);
    line-height: 1.8;
}


/* =========================================================
   PROJECT STORY — TRANSFORMATION
   ========================================================= */

.ProjectStoryTransformation {
    padding:
        clamp(3em, 7vw, 6em)
        clamp(1em, 4vw, 3em);

    background:
        linear-gradient(
            135deg,
            rgba(6, 37, 187, 0.055),
            rgba(255, 215, 0, 0.1)
        );

    border-radius: 0.65em;
}


/* =========================================================
   PROJECT STORY — CHALLENGE
   ========================================================= */


/* =========================================================
   PROJECT STORY — PROCESS
   ========================================================= */

.ProjectStoryProcess {
    padding:
        clamp(3em, 7vw, 6em)
        clamp(1em, 4vw, 3em);

    background: #17213a;
    border-radius: 0.65em;
    color: #fff;
}

.ProjectStoryProcess .ProjectStorySectionHeading h2 {
    color: #fff;
}

.ProjectStoryProcess .ProjectStorySectionLabel {
    color: #FFD700;
}

.ProjectStoryProcessGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2em;
}

.ProjectStoryProcessStep {
    padding: 1.5em;

    background: rgba(255, 255, 255, 0.075);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.45em;
}

.ProjectStoryStepNumber {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 2.5em;
    height: 2.5em;
    margin-bottom: 0.9em;

    background: #FFD700;
    border-radius: 50%;

    color: #0625BB;
    font-weight: 800;
}

.ProjectStoryProcessStep h3 {
    margin-bottom: 0.55em;
    color: #FFD700;
    font-size: 1.25em;
}

.ProjectStoryProcessStep p {
    margin-bottom: 0;
    line-height: 1.6;
}


/* =========================================================
   PROJECT STORY — WORK IN PROGRESS GALLERY
   ========================================================= */


/* =========================================================
   PROJECT STORY — PULL QUOTE
   ========================================================= */


/* =========================================================
   PROJECT STORY — FINISHED RESULT
   ========================================================= */

.ProjectStoryResult {
    display: grid;
    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.05fr);

    overflow: hidden;

    background: #f7f1df;
    border-radius: 0.65em;
}

.ProjectStoryResultContent {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: clamp(2em, 5vw, 4.5em);
}

.ProjectStoryResultContent p {
    line-height: 1.75;
}

.ProjectStoryResultImage img {
    height: 100%;
    min-height: 30em;
    object-fit: cover;
}


/* =========================================================
   PROJECT STORY — WHY RESTORE
   ========================================================= */

.ProjectStoryWhyRestore {
    padding: 5em 0;
}

.ProjectStoryBenefitsGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1em;
}

.ProjectStoryBenefitsGrid article {
    padding: 1.5em;

    background: #fff;
    border-top: 0.35em solid #0625BB;
    border-radius: 0.45em;

    box-shadow: 0 0.4em 1.1em rgba(23, 33, 58, 0.1);
}

.ProjectStoryBenefitsGrid article:nth-child(even) {
    border-top-color: #D6B500;
}

.ProjectStoryBenefitsGrid h3 {
    color: #467606;
    font-size: 1.2em;
    text-align: left;
}

.ProjectStoryBenefitsGrid p {
    margin-bottom: 0;
    line-height: 1.6;
}


/* =========================================================
   PROJECT STORY — TESTIMONIAL
   ========================================================= */


/* =========================================================
   PROJECT STORY — CALL TO ACTION
   ========================================================= */

.ProjectStoryCallToAction {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;
    gap: 2em;

    padding: clamp(2em, 6vw, 4.5em);

    background: #0625BB;
    border-radius: 0.65em;

    color: #fff;
}

.ProjectStoryCallToAction .ProjectStorySectionLabel {
    color: #FFD700;
}

.ProjectStoryCallToAction h2 {
    color: #fff;
}

.ProjectStoryCallToAction p:last-child {
    max-width: 45em;
    margin-bottom: 0;
    line-height: 1.65;
}

.ProjectStoryButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 3.2em;
    padding: 0.8em 1.4em;

    background: #FFD700;
    border: 2px solid #FFD700;
    border-radius: 0.45em;

    color: #0625BB;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.ProjectStoryButton:hover,
.ProjectStoryButton:focus {
    background: #fff;
    transform: translateY(-0.15em);
    box-shadow: 0 0.55em 1.2em rgba(0, 0, 0, 0.25);
    outline: none;
}


/* =========================================================
   PROJECT STORY NAVIGATION
   ========================================================= */


.MyGridContainer {
	display: grid;
	grid-template-rows: 100%;
	grid-template-columns: 50% 50%;
}

.item-1 {
	grid-row-start:1;
	grid-row-end:1;
	grid-column-start:1;
	grid-column-end:1;
	text-align: left;
    color: #0625BB;
    font-weight: 700;
}

.item-2 {
	grid-row-start:1;
	grid-row-end:1;
	grid-column-start:2;
	grid-column-end:2;
	text-align: right;
    color: #0625BB;
    font-weight: 700;
}


/* =========================================================
   PROJECT STORY — TABLET
   ========================================================= */

@media screen and (max-width: 900px) {

    .ProjectStoryProcessGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ProjectStoryBenefitsGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   PROJECT STORY — SMALL TABLET
   ========================================================= */

@media screen and (max-width: 760px) {

    .ProjectStoryOpening,
    .ProjectStoryChallenge,
    .ProjectStoryResult,
    .ProjectStoryCallToAction {
        grid-template-columns: 1fr;
    }

    .ProjectStoryOpening {
        gap: 1em;
    }

    .ProjectStoryChallengeImage img,
    .ProjectStoryResultImage img {
        min-height: 0;
        max-height: 30em;
    }


    .ProjectStoryCallToAction .ProjectStoryButton {
        width: 100%;
    }
}


/* =========================================================
   PROJECT STORY — MOBILE
   ========================================================= */

@media screen and (max-width: 560px) {

    .ProjectStoryHero {
        min-height: 32rem;
    }

    .ProjectStoryHeroOverlay {
        left: 1.2em;
        right: 1.2em;
        bottom: 1.5em;
    }

    .ProjectStoryMainTitle {
        font-size: clamp(2.2rem, 13vw, 3.5rem);
    }

    .ProjectStoryProcessGrid,
    .ProjectStoryBenefitsGrid,
    .ProjectStoryGalleryGrid {
        grid-template-columns: 1fr;
    }


}


/* =========================================================
   PROJECT STORY — GENERIC STAGE / PHOTO GRID
   ========================================================= */

.ProjectStoryStageGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25em;
    align-items: start;
}

.ProjectStoryStageGrid figure {
    margin: 0;
}

.ProjectStoryStageFrame {
    position: relative;
    overflow: hidden;
    background: #eeeeee;
    border: 0.35em solid #ffffff;
    border-radius: 0.45em;
    box-shadow: 0 0.5em 1.3em rgba(23, 33, 58, 0.14);
}

.ProjectStoryStageLandscape .ProjectStoryStageFrame {
    aspect-ratio: 3 / 2;
}

.ProjectStoryStagePortrait .ProjectStoryStageFrame {
    aspect-ratio: 2 / 3;
}

.ProjectStoryStageFrame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ProjectStoryStageNumberOLD {
    position: absolute;
    top: 0.7em;
    left: 0.7em;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4em;
    height: 2.4em;
    padding: 0;
    background: #0625BB;
    border: 0.15em solid #ffffff;
    border-radius: 50%;
    color: #ffffff;
    font-size: 1em;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    box-shadow: 0 0.2em 0.6em rgba(0, 0, 0, 0.25);
}

.ProjectStoryStageGridOLD figure:nth-child(4) .ProjectStoryStageNumberOLD {
    background: #467606;
    background: #0625BB;
}

.ProjectStoryStageGrid figcaption {
    padding: 0.7em 0.25em 0;
    color: #555555;
    font-size: 0.85em;
    line-height: 1.4;
}

.ProjectStoryStageGrid figcaption strong {
    display: block;
    margin-bottom: 0.2em;
    color: #0625BB;
    font-size: 0.88em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

@media screen and (max-width: 950px) {

    .ProjectStoryStageGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media screen and (max-width: 560px) {

    .ProjectStoryStageGrid {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   =========================================================

   GALLERY PAGE

   =========================================================
   ========================================================= */

.GalleryPage {
    width: 100%;
    max-width: 100%;
    margin: 0;
    color: #17213a;
    box-sizing: border-box;
}

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

.GalleryHero {
    padding: 2em 1em 1em;
    text-align: center;
}

.GalleryEyebrow,
.GallerySectionLabel {
    margin: 0 0 0.6em;
    color: #467606;
    font-size: clamp(0.68rem, 1vw, 0.9rem);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.GalleryMainTitle {
    margin: 0 0 0.4em;
    color: #0625BB;
    font-size: clamp(2.5rem, 6vw, 4.8rem);
    line-height: 1;
}

.GalleryHeroText {
    max-width: 48em;
    margin: 0 auto;
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.6em;
    text-align: center;
}

.GallerySection {
    margin-bottom: 4em;
}

.GallerySectionHeading {
    margin-bottom: 1.5em;
    text-align: left;
}

.GallerySectionHeading h2 {
    margin: 0;
    color: #0625BB;
    font-size: clamp(1.4rem, 2.5vw, 2.2rem);
    line-height: 1.15;
}

.GalleryGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1em;
    width: 100%;
}

.GalleryItem {
    position: relative;
    display: block;
    overflow: hidden;
    background: #ffffff;
    border-radius: 0.5em;
    box-shadow: 0 0.35em 1em rgba(23, 33, 58, 0.11);
    text-decoration: none;
}

.GalleryItem img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.25s ease;
}

.GalleryItem span {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 3.6em;
    padding: 0.6em 0.9em;
    color: #17213a;
    font-weight: 700;
    line-height: 1.25;
    text-align: left;
}

.GalleryItem:hover img,
.GalleryItem:focus img {
    transform: scale(1.035);
}

.GalleryLightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 2em;
    background: rgba(0, 0, 0, 0.88);
}

.GalleryLightboxOpen {
    display: flex;
}

.GalleryLightboxImage {
    display: block;
    max-width: min(92vw, 1400px);
    max-height: 80vh;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 0 2em rgba(0, 0, 0, 0.6);
}

.GalleryLightboxCaption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8em;
    margin-top: 0.8em;
    color: #ffffff;
    font-weight: 700;
    text-align: center;
}

.GalleryLightboxClose {
    position: static;
    transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45em 0.8em;
    background: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 0.4em;
    color: #0625BB;
    font-size: 0.8em;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 0.3em 1em rgba(0, 0, 0, 0.4);
}

.GalleryLightboxClose:hover,
.GalleryLightboxClose:focus {
    background: #FFD700;
    border-color: #FFD700;
    color: #0625BB;
}

@media screen and (max-width: 760px) {

    .GalleryGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75em;
    }

}

@media screen and (max-width: 480px) {

    .GalleryGrid {
        grid-template-columns: 1fr;
    }

    .GalleryHero {
        padding-left: 0;
        padding-right: 0;
    }

    .GalleryLightbox {
        padding: 1em;
    }

    .GalleryLightboxCaption {
        flex-direction: column;
    }

}

/* =========================================================
   =========================================================

   CONTACT PAGE

   =========================================================
   ========================================================= */

.ContactPage {
    width: 100%;
    margin: 0 auto;
}

/* =========================================================
   SHARED CONTACT TYPOGRAPHY
   ========================================================= */

.ContactKicker {
    margin: 0 0 0.7em;
    color: #0625BB;
    font-size: 0.82em;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ContactPage h2 {
    margin: 0 0 0.8em;
    color: #111111;
    font-size: clamp(1.8rem, 3.4vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
}

.ContactPage h3 {
    margin: 0 0 0.45em;
    color: #111111;
    font-size: 1.2em;
    line-height: 1.25;
}

.ContactPage p {
    line-height: 1.65;
}

/* =========================================================
   CONTACT HERO
   ========================================================= */

.ContactHero {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(18em, 0.9fr);
    gap: 2.2em;
    align-items: stretch;
    padding: 3em 2em;
    background: #f4f6fb;
    border-radius: 0.6em;
}

.ContactHeroText {
    padding: 0.5em 0;
}

.ContactIntro {
    color: #222222;
    font-size: 1.15em;
    font-weight: 600;
}

.ContactTelephoneBox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2em;
    background: #ffffff;
    border-top: 0.32em solid #0625BB;
    border-radius: 0.45em;
    box-shadow: 0 0.35em 1em rgba(0, 0, 0, 0.10);
    text-align: center;
}

.ContactTelephoneBox img {
    display: block;
    width: clamp(70px, 15vw, 150px);
    height: auto;
    margin: 0 auto;
}

.ContactTelephoneLabel {
    margin: 0 0 0.5em;
    color: #0625BB;
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.ContactTelephoneNumber {
    display: block;
    margin: 0 0 0.8em;
    color: #0625BB;
    font-size: clamp(1.45rem, 2.6vw, 2.2rem);
    font-weight: 700;
    line-height: 1.15;
    text-decoration: none;
}

.ContactTelephoneBox p:last-child {
    margin-bottom: 0;
}

/* =========================================================
   FORM SECTION
   ========================================================= */

.ContactFormSection {
    margin-top: 2.5em;
    padding: 3em 2em;
    background: #ffffff;
    border-radius: 0.6em;
    box-shadow: 0 0.35em 1.1em rgba(0, 0, 0, 0.08);
}

.ContactFormHeading {
    max-width: 48em;
    margin: 0 auto 2em;
    text-align: center;
}

.ContactForm {
    max-width: 58em;
    margin: 0 auto;
}

.ContactFormGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2em 1.5em;
}

.ContactFormField {
    display: flex;
    flex-direction: column;
}

.ContactFormField label {
    margin: 0 0 0.45em;
    color: #222222;
    font-size: 0.95em;
    font-weight: 700;
}

.ContactFormField label span {
    color: #C40000;
}

.ContactFormField input,
.ContactFormField textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.9em 1em;
    background: #ffffff;
    border: 0.1em solid #c8c8c8;
    border-radius: 0.35em;
    color: #111111;
    font: inherit;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ContactFormField input:focus,
.ContactFormField textarea:focus {
    border-color: #0625BB;
    box-shadow: 0 0 0 0.18em rgba(6, 37, 187, 0.12);
}

.ContactFormField textarea {
    min-height: 11em;
    resize: vertical;
}

.ContactFormMessage {
    margin-top: 1.4em;
}

/* =========================================================
   PHOTO PLACEHOLDER
   ========================================================= */

.ContactPhotoComingSoon {
    margin-top: 1.6em;
    padding: 1.3em 1.4em;
    background: #fff9d8;
    border-left: 0.35em solid #FFD700;
    border-radius: 0.35em;
}

.ContactPhotoComingSoon p {
    margin: 0;
}

.ContactPhotoComingSoon p + p {
    margin-top: 0.5em;
}

/* =========================================================
   CONSENT
   ========================================================= */

.ContactConsent {
    margin-top: 1.5em;
}

.ContactConsent label {
    display: flex;
    align-items: flex-start;
    gap: 0.7em;
    cursor: pointer;
}

.ContactConsent input[type="checkbox"] {
    width: 1.15em;
    height: 1.15em;
    margin-top: 0.25em;
    flex: 0 0 auto;
}

/* =========================================================
   SUBMIT AREA
   ========================================================= */

.ContactFormSubmit {
    margin-top: 2em;
    text-align: center;
}

.ContactFormSubmit button {
    border: none;
    cursor: pointer;
    font: inherit;
}

.ContactFormSubmit p {
    margin: 0.8em 0 0;
    color: #666666;
    font-size: 0.85em;
}

.ContactFormSubmit p span {
    color: #C40000;
}

/* =========================================================
   WHAT HAPPENS NEXT
   ========================================================= */

.ContactNext {
    margin-top: 2.5em;
    padding: 3em 2em;
    background: #f4f6fb;
    border-radius: 0.6em;
    text-align: center;
}

.ContactNextGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.3em;
    margin-top: 2em;
}

.ContactNextGrid > div {
    padding: 1.6em 1.3em;
    background: #ffffff;
    border-top: 0.28em solid #0625BB;
    border-radius: 0.45em;
    box-shadow: 0 0.3em 0.9em rgba(0, 0, 0, 0.08);
}

.ContactNextGrid > div > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.3em;
    height: 2.3em;
    margin: 0 auto 0.9em;
    background: #0625BB;
    border-radius: 50%;
    color: #ffffff;
    font-size: 1.05em;
    font-weight: 700;
}

.ContactNextGrid p {
    margin-bottom: 0;
}

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

@media screen and (max-width: 900px) {

    .ContactHero {
        grid-template-columns: 1fr;
    }

    .ContactNextGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media screen and (max-width: 650px) {

    .ContactHero,
    .ContactFormSection,
    .ContactNext {
        padding: 2em 1.2em;
    }

    .ContactFormGrid,
    .ContactNextGrid {
        grid-template-columns: 1fr;
    }

    .ContactTelephoneBox {
        padding: 1.5em 1.2em;
    }

    .ContactPage h2 {
        font-size: clamp(1.6rem, 8vw, 2.3rem);
    }

}

/* =========================================================
   =========================================================

   ABOUT PAGE

   =========================================================
   ========================================================= */

.AboutPage {
    width: 100%;
    max-width: 100%;
    margin: 0;
    color: #17213a;
    box-sizing: border-box;
}

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

.AboutPage img {
    display: block;
    max-width: 100%;
    height: auto;
}

.AboutEyebrow,
.AboutSectionLabel {
    margin: 0 0 0.7em;
    color: #467606;
    font-size: clamp(0.68rem, 1vw, 0.9rem);
    font-weight: 700;
    letter-spacing: 0.15em;
    line-height: 1.35;
    text-transform: uppercase;
}

.AboutPage h2,
.AboutPage h3 {
    margin-top: 0;
}

.AboutSectionHeading {
    max-width: 52em;
    margin: 0 auto 2.4em;
    text-align: center;
}

/* =========================================================
   HERO
   ========================================================= */

.AboutHero {
    display: grid;
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    margin-bottom: clamp(3em, 6vw, 5em);
    overflow: hidden;
    background: #f7f1df;
    border: 1px solid rgba(6, 37, 187, 0.18);
    border-radius: 0.7em;
    box-shadow: 0 0.8em 2em rgba(23, 33, 58, 0.13);
}

.AboutHeroImage {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.2em;
    background: #eee8d7;
}

.AboutHeroImage img {
    width: auto;
    max-width: 100%;
    max-height: 36em;
    object-fit: contain;
}

.AboutHeroContent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2em, 5vw, 4em);
    background: #fffdf5;
}

.AboutMainTitle {
    margin-bottom: 0.55em;
    color: #0625BB;
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1;
}

.AboutHeroStatement {
    margin: 0 0 1em;
    font-size: clamp(1.15rem, 2vw, 1.6rem);
    font-weight: 700;
    line-height: 1.4;
}

.AboutHeroText {
    margin: 0 0 1.4em;
    line-height: 1.7;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.AboutButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    padding: 0.8em 1.3em;
    background: #0625BB;
    border: 2px solid #0625BB;
    border-radius: 0.45em;
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
}

.AboutButtonLight {
    background: #ffffff;
    border-color: #ffffff;
    color: #0625BB;
}

/* =========================================================
   OUR STORY
   ========================================================= */

.AboutStory,
.AboutLanguage {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    gap: clamp(2em, 6vw, 5em);
    padding: 1em 1em clamp(3em, 6vw, 5em);
}

.AboutStoryHeading h2,
.AboutLanguageHeading h2,
.AboutApproach h2,
.AboutWorkStatus h2,
.AboutCallToAction h2 {
    color: #0625BB;
    font-size: clamp(1.7rem, 3vw, 2.8rem);
    line-height: 1.15;
}

.AboutStoryText,
.AboutLanguageText {
    font-size: clamp(1rem, 1.4vw, 1.16rem);
    line-height: 1.75;
}

/* =========================================================
   TEAM
   ========================================================= */

.AboutTeam {
    margin-bottom: clamp(3em, 6vw, 5em);
    padding: clamp(3em, 6vw, 5em) clamp(1em, 3vw, 2.5em);
    background: linear-gradient(135deg, rgba(6, 37, 187, 0.055), rgba(255, 215, 0, 0.08));
    border-radius: 0.7em;
}

.AboutTeamGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5em;
}

.AboutTeamCard {
    position: relative;
    padding: 1.6em;
    background: rgba(255, 255, 255, 0.96);
    border-top: 0.32em solid #0625BB;
    border-radius: 0.45em;
    box-shadow: 0 0.35em 1em rgba(23, 33, 58, 0.09);
}

.AboutTeamCard:nth-child(2) {
    border-top-color: #D6B500;
}

.AboutTeamNumber {
    color: #467606;
    font-size: 0.8em;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.AboutTeamCard h3 {
    margin: 0.4em 0 0.7em;
    color: #0625BB;
    font-size: 1.6em;
}

.AboutTeamCard img {
    width: auto;
    max-width: 100%;
    max-height: 22em;
    margin: 0 auto 1.2em;
    border-radius: 0.45em;
}

.AboutTeamRole {
    color: #467606;
    font-weight: 700;
}

/* =========================================================
   APPROACH
   ========================================================= */

.AboutApproach {
    margin-bottom: clamp(3em, 6vw, 5em);
    padding: clamp(3em, 6vw, 5em);
    background: #17213a;
    border-radius: 0.7em;
    color: #ffffff;
}

.AboutApproachContent {
    max-width: 70em;
    margin: 0 auto;
}

.AboutApproach h2 {
    color: #ffffff;
}

.AboutApproach .AboutSectionLabel {
    color: #FFD700;
}

.AboutValuesGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1em;
    margin-top: 2em;
}

.AboutValuesGrid > div {
    padding: 1.4em;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 0.45em;
}

.AboutValuesGrid strong,
.AboutValuesGrid span {
    display: block;
}

.AboutValuesGrid strong {
    margin-bottom: 0.5em;
    color: #FFD700;
}

/* =========================================================
   LANGUAGE / QUOTE / WORK STATUS
   ========================================================= */

.AboutQuote {
    margin: 0 0 clamp(3em, 6vw, 5em);
    padding: clamp(2em, 5vw, 3.5em);
    background: #f7f1df;
    border-left: 0.4em solid #467606;
    border-radius: 0.45em;
}

.AboutQuote blockquote,
.AboutQuote p {
    margin: 0;
}

.AboutQuote p {
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    font-weight: 700;
    line-height: 1.55;
}

.AboutWorkStatus {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.4em;
    align-items: center;
    margin-bottom: clamp(3em, 6vw, 5em);
    padding: 2em;
    background: #f4f6fb;
    border-radius: 0.6em;
}

.AboutWorkStatusIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.7em;
    height: 2.7em;
    background: #467606;
    border-radius: 50%;
    color: #ffffff;
    font-size: 1.35em;
    font-weight: 800;
}

.AboutWorkStatus p {
    margin-bottom: 0;
}

/* =========================================================
   CALL TO ACTION
   ========================================================= */

.AboutCallToAction {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2em;
    align-items: center;
    padding: clamp(2.5em, 5vw, 4em);
    background: #0625BB;
    border-radius: 0.7em;
    color: #ffffff;
}

.AboutCallToAction h2,
.AboutCallToAction .AboutSectionLabel {
    color: #ffffff;
}

.AboutCallToAction p:last-child {
    margin-bottom: 0;
}

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

@media screen and (max-width: 900px) {

    .AboutHero,
    .AboutStory,
    .AboutLanguage,
    .AboutCallToAction {
        grid-template-columns: 1fr;
    }

    .AboutValuesGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .AboutCallToAction .AboutButton {
        justify-self: start;
    }

}

@media screen and (max-width: 650px) {

    .AboutHeroContent,
    .AboutTeam,
    .AboutApproach,
    .AboutCallToAction {
        padding: 2em 1.2em;
    }

    .AboutTeamGrid,
    .AboutValuesGrid {
        grid-template-columns: 1fr;
    }

    .AboutStory,
    .AboutLanguage {
        padding-right: 0.5em;
        padding-left: 0.5em;
    }

    .AboutWorkStatus {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .AboutWorkStatusIcon {
        margin: 0 auto;
    }

    .AboutButton {
        width: 100%;
    }

}