:root {
	--mdh-color-primary: #5B2A9E;
	--mdh-color-secondary: #E63950;
	--mdh-gradient-brand: linear-gradient(135deg, #3D1E78 0%, #7A2A93 50%, #E63950 100%);
	--mdh-color-navy: #0D0C1A;
	--mdh-color-text: #00233D;
	--mdh-color-text-muted: #54595F;
	--mdh-color-bg: #ffffff;
	--mdh-color-bg-offwhite: #F8F8F8;
	--mdh-color-border: #DCE0E0;
	--mdh-container-max: 1210px;
	--mdh-font-heading: 'Muli', sans-serif;
	--mdh-font-body: 'Darker Grotesque', sans-serif;
}

body, .mdh-body-font { font-family: var(--mdh-font-body); font-size: 24px; line-height: 1.5; color: var(--mdh-color-text); background: var(--mdh-color-bg-offwhite); }
h1, h2, h3, h4, h5, h6, .mdh-heading-font { font-family: var(--mdh-font-heading); font-weight: 800; letter-spacing: -1px; color: var(--mdh-color-text); }

/* Elementor's native Button widget renders an <a> tag, which inherits the
   browser/theme default underline unless explicitly reset — the per-button
   "text-decoration:none" JSON prop is not enough on its own. */
.e-button-base, .e-button-base:hover, .e-button-base:focus { text-decoration: none !important; }

/* Elementor's SVG widget renders the <svg> as an inline element, so the
   browser positions it using text baseline metrics — it can sit low and
   spill outside its own square container instead of being truly centered.
   Forcing block display removes that baseline offset everywhere. */
.e-svg-base svg { display: block; }

/* Universal button hover — every button on the site (filled teal or
   ghost/outline) gets a consistent lift + shadow + brightness bump on
   hover. Uses filter/transform rather than hardcoding each button's own
   background color, so it works regardless of which local style a given
   button widget carries. */
.e-button-base {
	transition: filter .2s ease, transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
.e-button-base:hover {
	filter: brightness(1.08);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}
/* Ghost/outline buttons (transparent background) — invert to a solid fill
   on hover instead of just brightening, since there's no fill to brighten. */
.mdh-cta-overlap-card .e-button-base:hover { background: #fff !important; color: var(--mdh-color-primary) !important; }

/* Brand gradient on every solid button — each button's own flat-color
   background comes from its Elementor JSON local style (not CSS), so a
   blanket CSS override is the only way to recolor all of them at once
   without patching each widget's JSON individually. The two ghost/outline
   buttons (ecdb335... no — mdh-cta-overlap-card's and mdh-faq's) are
   explicitly kept transparent since they're meant to stay outlined at
   rest and only fill in on hover. */
.e-button-base { background: var(--mdh-gradient-brand) !important; }
.mdh-cta-overlap-card .e-button-base,
.mdh-faq .e-button-base { background: transparent !important; }

/* Brand gradient on the other flat-teal boxes that were set via Elementor
   JSON local styles rather than CSS (the small accent bars on the homepage,
   and the "You Dream It, We Build It" teal card) — same reasoning as the
   button override above. */
[data-id="mdhwhyaccent"], [data-id="mdhs3accent"], [data-id="mdhmaterialsaccent"],
[data-id="mdhtestaccent"], [data-id="mdhcta2accent"] { background: var(--mdh-gradient-brand) !important; }
[data-id="mdhs2card"] { background: var(--mdh-gradient-brand) !important; }

/* "View All Solutions" button — now sits at the very bottom of the section,
   below the carousel, centered as a closing CTA. mdhs3 (the section root)
   is a column flexbox with no explicit align-items, so it defaults to
   stretch and would otherwise pull this button to the full section width
   (the same bug already fixed on the "Request a Brochure" button and
   footer logo). It also needs width:auto + nowrap or the stretched box
   wraps its own text onto several lines instead of sizing to fit it. */
.e-mdhs3btn-local {
	align-self: center !important;
	margin-top: 24px;
	width: auto !important;
	white-space: nowrap !important;
}

/* Header social icons (Elementor's native Social Icons widget) — replace the
   default per-network brand colors (FB blue / X black / YouTube red) with
   our own gradient so they match the rest of the site's accent squares. */
.elementor-social-icon { background: var(--mdh-gradient-brand) !important; }

/* Hero */
.mdh-hero {
	position: relative;
	isolation: isolate;
	background-color: var(--mdh-color-navy);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
	overflow: hidden;
	padding-top: 60px !important;
	min-height: 78vh !important;
	animation: mdh-kenburns 20s ease-in-out infinite alternate;
}
/* Rotating hero background slides — injected by hero-slider.js, crossfade
   between multiple photos. isolation:isolate on .mdh-hero (above) confines
   this negative z-index to the hero box only, so the slides paint behind
   the hero's own background/overlay/wave without escaping to other
   sections. Falls back gracefully to the static .mdh-hero background-image
   if JS is disabled (only 1 image, or script blocked). */
/* ".mdh-hero > .mdh-hero-slide" (2 classes) is used instead of just
   ".mdh-hero-slide" so this reliably beats the later, equal-specificity
   ".mdh-hero > *{position:relative;z-index:2}" rule regardless of source
   order — otherwise that rule silently overrides position/z-index here,
   collapsing the slide to 0 height. */
.mdh-hero > .mdh-hero-slide {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transform: scale(1);
	transition: opacity 1.8s ease;
}
.mdh-hero-slide.is-active {
	opacity: 1;
	animation: mdh-slide-kenburns 6s ease-in-out infinite alternate;
}
@keyframes mdh-slide-kenburns {
	from { transform: scale(1); }
	to { transform: scale(1.08); }
}
.mdh-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .5);
	z-index: 0;
}
.mdh-hero::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 70px;
	background-image: url('../img/wave-divider-hero.svg');
	background-repeat: repeat-x;
	background-size: 1200px 70px;
	z-index: 1;
}
.mdh-hero > * {
	position: relative;
	z-index: 2;
}
.mdh-hero h2, .mdh-hero p { color: #fff; }
@media (max-width: 767px) {
	.mdh-hero { min-height: 70vh !important; }
}
@keyframes mdh-kenburns {
	from { background-size: 100%; }
	to { background-size: 115%; }
}
@media (max-width: 767px) {
	.mdh-hero h2 { font-size: 36px !important; line-height: 1.2 !important; }
	.mdh-hero p { font-size: 20px !important; }
}

/* Contained/centered homepage sections (max-width auto-centering isn't a proven
   Elementor atomic-widget style prop, so this lives in plain CSS we control). */
.mdh-section, .g-f402eaf {
	max-width: var(--mdh-container-max) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 40px !important;
	padding-right: 40px !important;
	box-sizing: border-box;
}
@media (max-width: 600px) {
	.mdh-section, .g-f402eaf {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}

/* Feature grid ("Why Choose Us") — 4-col x 2-row grid of white cards,
   each with an icon, bold heading and a short description. */
.mdh-feature-grid {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.mdh-feature-card {
	text-align: left !important;
	align-items: flex-start !important;
	background: #fff;
	border-radius: 8px;
	padding: 28px 24px;
	box-shadow: 0 4px 20px rgba(13, 12, 26, .08);
}
.mdh-feature-card .e-svg-base {
	display: inline-flex;
	width: 40px;
	height: 40px;
	margin-bottom: 16px;
}
.mdh-feature-card .e-svg-base svg { width: 100%; height: 100%; }
.mdh-feature-card .e-heading-base { font-size: 23px; margin: 0 0 8px; }
.mdh-feature-card .e-paragraph-base { font-size: 20px; line-height: 1.5; color: var(--mdh-color-text-muted); margin: 0; }
@media (max-width: 991px) {
	.mdh-feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.mdh-feature-grid { grid-template-columns: 1fr; }
}

/* Stack the "Why Choose Us" intro above the card grid (full width) instead
   of side-by-side, so the grid has room for 4 columns. */
.mdh-why-stack { flex-direction: column !important; align-items: stretch !important; }

/* "How the Purchase Works" — 4-step numbered process row. */
.mdh-steps-section { padding: 90px 0; text-align: center; align-items: center !important; }
.mdh-steps-section .e-button-base {
	align-self: center !important;
	width: auto !important;
	max-width: max-content;
	padding: 14px 32px !important;
}
.mdh-steps-header { align-items: center !important; gap: 12px; margin-bottom: 50px; }
.mdh-steps-header .e-paragraph-base { color: var(--mdh-color-text-muted); max-width: 560px; }
.mdh-steps-row {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	margin-bottom: 40px;
}
.mdh-step { align-items: center !important; gap: 10px; text-align: center; }
.mdh-step-icon-circle {
	position: relative;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	background: var(--mdh-color-bg-offwhite);
	align-items: center !important;
	justify-content: center !important;
	margin-bottom: 8px;
}
.mdh-step-icon-circle .e-svg-base { width: 36px; height: 36px; }
.mdh-step-icon-circle .e-svg-base svg { width: 100%; height: 100%; }
.mdh-step-number {
	position: absolute;
	top: -4px;
	right: -4px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--mdh-gradient-brand);
	align-items: center !important;
	justify-content: center !important;
}
.mdh-step-number .e-heading-base { color: #fff; font-size: 19px; margin: 0; }
.mdh-step .e-heading-base { font-size: 22px; margin: 0; }
.mdh-step-divider { width: 40px; height: 2px; background: var(--mdh-gradient-brand); }
.mdh-step .e-paragraph-base { font-size: 20px; line-height: 1.5; color: var(--mdh-color-text-muted); margin: 0; }
@media (max-width: 991px) {
	.mdh-steps-row { grid-template-columns: repeat(2, 1fr); gap: 40px; }
}
@media (max-width: 600px) {
	.mdh-steps-row { grid-template-columns: 1fr; }
}

/* FAQ section — built from real Elementor heading/paragraph widgets (fully
   editable in the Elementor editor, no shortcode) with a small JS toggle
   (assets/js/faq-toggle.js) driving the expand/collapse via the
   ".is-open" class. */
.mdh-faq { padding: 90px 40px; max-width: var(--mdh-container-max); margin: 0 auto !important; box-sizing: border-box; }
.mdh-faq-header { align-items: center !important; text-align: center; margin-bottom: 50px; }
.mdh-faq-bar { width: 100px; height: 2px; background: var(--mdh-gradient-brand); margin-bottom: 16px; }
.mdh-faq-header .e-heading-base { margin: 0 0 12px; }
.mdh-faq-header .e-paragraph-base { color: var(--mdh-color-text-muted); max-width: 600px; margin: 0 auto; }
.mdh-faq-list { max-width: 900px; margin: 0 auto; width: 100%; }
.mdh-faq-item { border-bottom: 1px solid var(--mdh-color-border); padding: 20px 0; }
.mdh-faq-question {
	align-items: center !important;
	justify-content: space-between !important;
	gap: 16px;
	cursor: pointer;
}
.mdh-faq-question .e-heading-base { font-size: 22px; margin: 0; }
.mdh-faq-chevron {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	border-right: 2px solid var(--mdh-color-text-muted);
	border-bottom: 2px solid var(--mdh-color-text-muted);
	transform: rotate(45deg);
	transition: transform .2s ease;
	margin-right: 6px;
}
.mdh-faq-item.is-open .mdh-faq-chevron { transform: rotate(225deg); margin-right: 0; margin-top: 6px; }
.mdh-faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height .3s ease;
}
.mdh-faq-item.is-open .mdh-faq-answer { max-height: 300px !important; }
.mdh-faq-answer .e-paragraph-base { margin: 12px 0 0; color: var(--mdh-color-text-muted); line-height: 1.6; }
.mdh-faq .e-button-base {
	display: block;
	width: max-content;
	margin: 40px auto 0;
	padding: 14px 28px;
	border: 1px solid var(--mdh-color-primary);
	border-radius: 3px;
	color: var(--mdh-color-primary) !important;
}
.mdh-faq .e-button-base:hover { background: var(--mdh-color-primary) !important; color: #fff !important; }

/* Header */
.mdh-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 16px 0; }
.mdh-header__logo img { max-height: 56px; display: block; }
/* height (not max-height) + max-width:none is required — Astra/Elementor's
   own "img { height:auto; max-width:100% }" reset otherwise fights with
   max-height and stretches the width out to fill the container instead of
   scaling proportionally. */
img.mdh-header-logo-img { height: 88px !important; width: auto !important; max-width: none !important; display: block; }
.mdh-nav__list { display: flex; flex-wrap: wrap; gap: 24px; list-style: none; margin: 0; padding: 0; }
.mdh-nav__list li { position: relative; }
.mdh-nav__list a { color: var(--mdh-color-text); text-decoration: none; font-weight: 600; }
.mdh-nav__list li:hover > a { color: var(--mdh-color-primary); }
.mdh-nav__list ul { list-style: none; margin: 0; padding: 8px 0; position: absolute; top: 100%; left: 0; min-width: 200px; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.12); display: none; z-index: 20; }
.mdh-nav__list li:hover > ul { display: block; }
.mdh-nav__list ul li a { display: block; padding: 8px 16px; font-weight: 400; }
.mdh-phone { font-weight: 700; color: var(--mdh-color-navy); text-decoration: none; white-space: nowrap; }

/* Sticky header — stays pinned to the top of the viewport on every page while
   scrolling, instead of scrolling out of view with the rest of the content. */
#masthead {
	/* Header-Footer-Elementor's own ".ehf-header #masthead" rule (higher
	   specificity: class + ID) sets position:relative and would otherwise
	   win over a plain "#masthead" selector regardless of load order. */
	position: sticky !important;
	top: 0;
	z-index: 999;
}

/* Homepage, desktop only (matches the hamburger-nav breakpoint — on mobile
   the toggle icon's own dark color doesn't get flipped to white, so it'd be
   unreadable against a dark hero photo): transparent header floating over
   the hero while at the very top, becoming a normal solid sticky header as
   soon as the page scrolls. nav-toggle.js measures the header's real
   rendered height into --mdh-header-h (it differs between the 992-1439px
   two-row layout and the >=1440px single row) and toggles .mdh-scrolled on
   <body> based on scroll position. The negative margin pulls the hero up
   underneath the header without affecting its sticky behavior — margin
   doesn't interact with how a sticky element tracks scroll, only with
   where it sits in normal document flow. */
@media (min-width: 992px) {
	body.home:not(.mdh-scrolled) #masthead {
		margin-bottom: calc(-1 * var(--mdh-header-h, 96px));
		background: transparent;
	}
	body.home:not(.mdh-scrolled) #masthead .elementor-element-a318061 {
		background: transparent !important;
	}
	body.home:not(.mdh-scrolled) #masthead h2.e-heading-base a,
	body.home:not(.mdh-scrolled) #masthead .mdh-nav__list a,
	body.home:not(.mdh-scrolled) #masthead .mdh-phone {
		color: #fff;
	}
	body.home:not(.mdh-scrolled) #masthead .mdh-nav__list li:hover > a {
		color: var(--mdh-color-primary);
	}
	body.home:not(.mdh-scrolled) #masthead .mdh-nav__list ul a {
		color: var(--mdh-color-text);
	}
	body.home .mdh-hero {
		padding-top: calc(var(--mdh-header-h, 96px) + 40px) !important;
	}
}

/* Mobile navigation */
.mdh-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 32px;
	height: 24px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	color: var(--mdh-color-text);
}
.mdh-nav-toggle span { display: block; width: 100%; height: 2px; background: currentColor; border-radius: 1px; }
.mdh-nav-overlay { display: none; }
.mdh-nav__panel-header { display: none; }
.mdh-nav__panel-footer { display: none; }

/* Below 991px the header collapses to just logo + hamburger (true mobile) —
   phone/social move into the off-canvas drawer instead. */
@media (max-width: 991px) {
	#masthead .elementor-element-fcb029f,
	#masthead .elementor-element-7e2648f {
		display: none;
	}
}

/* 992–1439px ("laptop" range): logo, full nav menu, phone and social icons
   don't all fit in one row, but we don't want to hide phone/social here —
   so the header row wraps into two lines instead. Row 1 keeps logo left /
   phone+social right; the nav menu is forced onto its own full-width row 2
   via flex-basis:100%, where it has the whole row to itself. */
@media (min-width: 992px) and (max-width: 1439px) {
	#masthead .elementor-element-a318061 {
		flex-wrap: wrap;
		justify-content: flex-start;
		column-gap: 24px;
		row-gap: 16px;
	}
	#masthead .elementor-element-fcb029f {
		margin-left: auto;
		/* Elementor's own responsive CSS (its built-in tablet breakpoint)
		   narrows this widget's width below ~1024px, which wraps the 3
		   social icons onto two lines. Force it back to its natural,
		   content-sized width so they all stay on one row — it's
		   auto-sized (not a fixed width), so adding 1-2 more icons later
		   just grows it into the ~400px of slack this row already has,
		   no further CSS changes needed. */
		width: auto !important;
		flex-wrap: nowrap !important;
		flex-shrink: 0;
	}
	#masthead .elementor-element-1707005 {
		flex: 1 0 100%;
		order: 3;
	}
}

/* The nav container defaults to flex-grow:0, so on its own it never claims
   leftover row space — that's needed at 992-1439px above (via flex:1 0 100%
   there), but must NOT also apply at >=1440px: growing there would eat into
   the room social/phone need, leaving no space for extra icons later. */

@media (max-width: 991px) {
	#masthead .elementor-element-a318061 { flex-wrap: wrap; }
	.mdh-nav-toggle { display: flex; }

	/* Off-canvas slide-in panel, not a dropdown — matches the reference pattern. */
	.mdh-nav-overlay {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0,0,0,.4);
		opacity: 0;
		visibility: hidden;
		transition: opacity .3s ease;
		z-index: 199;
	}
	.mdh-nav-overlay.mdh-nav-overlay--active {
		opacity: 1;
		visibility: visible;
	}
	.mdh-nav {
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		width: 85%;
		max-width: 320px;
		background: #fff;
		transform: translateX(-100%);
		transition: transform .3s ease;
		z-index: 200;
		overflow-y: auto;
		box-shadow: 4px 0 24px rgba(0,0,0,.15);
		display: flex;
		flex-direction: column;
	}
	.mdh-nav.mdh-nav--open { transform: translateX(0); }
	.mdh-nav__panel-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px;
		border-bottom: 1px solid var(--mdh-color-border);
	}
	.mdh-nav__panel-title {
		font-family: var(--mdh-font-heading);
		font-weight: 700;
		font-size: 22px;
		color: var(--mdh-color-text);
	}
	.mdh-nav-close {
		background: none;
		border: none;
		font-size: 32px;
		line-height: 1;
		cursor: pointer;
		color: var(--mdh-color-text);
		padding: 0;
	}
	.mdh-nav__panel-footer {
		display: flex;
		flex-direction: column;
		gap: 16px;
		margin-top: auto;
		padding: 20px;
		border-top: 1px solid var(--mdh-color-border);
	}
	.mdh-nav__phone {
		display: flex;
		align-items: center;
		gap: 10px;
		font-weight: 700;
		font-size: 18px;
		color: var(--mdh-color-text);
		text-decoration: none;
	}
	.mdh-nav__phone-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border-radius: 50%;
		background: var(--mdh-gradient-brand);
		color: #fff;
		flex-shrink: 0;
	}
	.mdh-nav__phone-icon svg { width: 18px; height: 18px; display: block; }
	.mdh-nav__social { display: flex; gap: 12px; }
	.mdh-nav__social-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		border-radius: 10%;
		background: var(--mdh-gradient-brand);
		color: #fff;
	}
	.mdh-nav__social-icon svg { width: 17px; height: 17px; display: block; }
	.mdh-nav__list {
		display: flex !important;
		flex-direction: column;
		width: 100%;
		gap: 0;
		background: none;
		margin-top: 0;
		box-shadow: none;
	}
	.mdh-nav__list li { width: 100%; border-bottom: 1px solid var(--mdh-color-border); position: relative; }
	.mdh-nav__list a { display: block; padding: 16px 20px; }
	.mdh-nav__list ul { position: static; box-shadow: none; padding-left: 20px; display: none; background: var(--mdh-color-bg-offwhite); }
	.mdh-nav__item--open > ul { display: block !important; }

	/* Chevron indicator for items with a submenu (native WP "menu-item-has-children" class). */
	.mdh-nav__list > li.menu-item-has-children > a { padding-right: 44px; }
	.mdh-nav__list > li.menu-item-has-children > a::after {
		content: '';
		position: absolute;
		right: 20px;
		top: 50%;
		width: 8px;
		height: 8px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-65%) rotate(45deg);
		transition: transform .2s ease;
	}
	.mdh-nav__item--open > a::after { transform: translateY(-35%) rotate(-135deg); }
}

/* Footer */
/* House cards / grid */
.mdh-grid { display: grid; gap: 24px; grid-template-columns: repeat(4, 1fr); }
.mdh-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.mdh-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.mdh-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 991px) { .mdh-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .mdh-grid { grid-template-columns: 1fr; } }

.mdh-card { display: block; color: inherit; background: #fff; border-radius: 4px; overflow: hidden; box-shadow: 0 0 4px 2px rgba(0,0,0,.03); transition: box-shadow .2s ease; }
.mdh-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.mdh-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.mdh-card__media a { display: block; width: 100%; height: 100%; }
.mdh-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mdh-card__badge { position: absolute; top: 20px; right: 20px; background: var(--mdh-gradient-brand); color: #fff; font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 4px 10px; border-radius: 3px; z-index: 2; }
.mdh-card__tools { position: absolute; bottom: 20px; right: 20px; display: flex; gap: 8px; opacity: 0; transition: opacity .2s ease; z-index: 2; }
.mdh-card:hover .mdh-card__tools { opacity: 1; }
.mdh-card__tool { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.35); color: #fff; text-decoration: none; }
.mdh-card__tool svg { width: 16px; height: 16px; }
@media (max-width: 991px) { .mdh-card__tools { opacity: 1; } }
.mdh-card__body { padding: 20px; }
.mdh-card__title { margin: 0 0 10px; font-size: 24px; font-family: var(--mdh-font-heading); font-weight: 700; letter-spacing: 0; }
.mdh-card__title a { color: inherit; text-decoration: none !important; }
.mdh-card__title a:hover { color: var(--mdh-color-primary); }
.mdh-card__price { font-size: 20px; font-weight: 700; color: var(--mdh-color-text); margin-bottom: 10px; }
.mdh-card__meta { display: flex; gap: 16px; font-size: 18px; font-weight: 500; color: var(--mdh-color-text-muted); }
.mdh-card__meta span { display: flex; align-items: center; gap: 5px; }
.mdh-card__meta .mdh-icon { width: 16px; height: 16px; color: var(--mdh-color-primary); flex-shrink: 0; }

/* Property carousel (Swiper.js) */
.mdh-carousel { padding-bottom: 40px; }
.mdh-carousel .swiper-pagination-bullet-active { background: var(--mdh-color-primary); }

/* Single house/project template */
.mdh-single-house__gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 32px; }
.mdh-single-house__gallery img { width: 100%; height: 160px; object-fit: cover; border-radius: 4px; }
.mdh-overview-box { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; background: #f7f7f5; padding: 24px; border-radius: 8px; margin-bottom: 32px; }
.mdh-overview-box__stats { display: flex; flex-wrap: wrap; gap: 24px; }
.mdh-overview-box__stat { text-align: center; }
.mdh-overview-box__stat strong { display: block; font-size: 24px; color: var(--mdh-color-primary); }
.mdh-specs-table { width: 100%; border-collapse: collapse; margin-bottom: 32px; }
.mdh-specs-table th { text-align: left; background: var(--mdh-color-primary); color: #fff; padding: 10px 16px; width: 220px; }
.mdh-specs-table td { padding: 10px 16px; border-bottom: 1px solid #eee; white-space: pre-line; }
.mdh-floors { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 32px; }
.mdh-floor-card { border: 1px solid #e5e5e5; border-radius: 8px; padding: 16px; }
.mdh-energy-scale { display: flex; gap: 4px; margin: 12px 0; }
.mdh-energy-scale span { flex: 1; text-align: center; padding: 6px 0; color: #fff; font-weight: 700; border-radius: 3px; }
.mdh-energy-scale span.active { outline: 3px solid #000; }

.mdh-container { max-width: 1200px; margin: 0 auto; padding: 40px 20px; }
.mdh-single-house__title { margin-bottom: 8px; }
.mdh-single-house__meta { color: #666; margin-bottom: 24px; }
.mdh-single-house__description { margin-bottom: 32px; }
.mdh-btn { display: inline-block; padding: 12px 28px; border-radius: 3px; font-family: var(--mdh-font-body); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none; }
.mdh-btn--primary { background: var(--mdh-gradient-brand); color: #fff; }
.mdh-contact-box { margin-top: 40px; padding: 32px; background: #f7f7f5; border-radius: 8px; }
.mdh-archive-header { text-align: center; margin-bottom: 32px; }
.mdh-archive-filters { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 32px; }
.mdh-archive-filters a { padding: 8px 16px; border: 1px solid #ddd; border-radius: 20px; text-decoration: none; color: var(--mdh-color-text); }
.mdh-archive-filters a.active, .mdh-archive-filters a:hover { background: var(--mdh-color-primary); color: #fff; border-color: var(--mdh-color-primary); }

@media (max-width: 767px) {
	.mdh-single-house__gallery { grid-template-columns: repeat(2, 1fr); }
	.mdh-specs-table { display: block; overflow-x: auto; white-space: nowrap; }
	.mdh-specs-table th { width: auto; white-space: nowrap; }
}
@media (max-width: 480px) {
	.mdh-single-house__gallery { grid-template-columns: 1fr; }
}

/* Secondary services row (image-led cards) */
.mdh-photo-placeholder {
	box-shadow: 0 50px 50px rgba(0, 0, 0, .1);
	position: relative;
}
@media (max-width: 991px) {
	.mdh-photo-placeholder { width: 100% !important; }
}
/* Only show the "Photo" placeholder label when no real photo has been added
   as a child (an <img>, e.g. via Elementor's own Image widget) — once a real
   photo is placed inside, the label disappears automatically. */
.mdh-photo-placeholder:has(img)::after { display: none; }
.mdh-photo-placeholder img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mdh-photo-placeholder::after {
	content: 'Photo';
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--mdh-color-text-muted);
	font-family: var(--mdh-font-body);
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 18px;
}

/* Testimonials */
.mdh-testimonial-card, .g-fd22a64 { text-align: center; }
.mdh-testimonial-card .e-paragraph-base, .g-fd22a64 .e-paragraph-base { color: var(--mdh-color-text-muted); }
.mdh-testimonial-card .e-heading-base, .g-fd22a64 .e-heading-base { font-size: 22px; margin: 0; }
.mdh-avatar-placeholder, .g-af197e9 { flex-shrink: 0; }

/* Partner/client logo strip */
.mdh-partner-strip { border-top: 1px solid var(--mdh-color-border); }
.mdh-partner-logo-placeholder, .g-b8fe502 {
	border: 1px dashed var(--mdh-color-border);
	border-radius: 4px;
}
.mdh-partner-logo-placeholder .e-heading-base, .g-b8fe502 .e-heading-base {
	font-size: 16px;
	color: var(--mdh-color-text-muted);
	letter-spacing: 1px;
	margin: 0;
}

/* Second CTA — dark, narrow centered content, photo background with a
   navy overlay for text contrast. No wave divider — flat top edge. */
.mdh-cta-dark {
	position: relative;
	z-index: 2;
	background:
		linear-gradient(rgba(13, 12, 26, .82), rgba(13, 12, 26, .82)),
		url('https://my-dream-home.dobrich-bg.com/wp-content/uploads/2026/09/mdh-family-keys.jpg') center / cover no-repeat,
		var(--mdh-color-navy);
}
.mdh-cta-dark .e-heading-base,
.mdh-cta-dark .e-paragraph-base {
	color: #fff;
	position: relative;
	z-index: 2;
}
.mdh-cta-dark .elementor-element { position: relative; z-index: 2; }

/* "Why Choose Us" left column — talk-to-an-expert link */
.mdh-talk-link .e-svg-base { width: 22px; height: 22px; color: var(--mdh-color-primary); }
.mdh-talk-link .e-heading-base { font-size: 20px; font-weight: 600; letter-spacing: 0; }
.mdh-talk-link .e-heading-base a { color: var(--mdh-color-primary); text-decoration: none; }
.mdh-talk-link .e-heading-base a:hover { text-decoration: underline; }

/* Photo + overlapping teal CTA card — negative margin set here, not via Elementor's
   own JSON props: Elementor silently rejects negative "size" values on margin props
   (confirmed with both a raw-string and a proper size-object attempt), so this is the
   same stable-class + theme.css fallback used elsewhere for anything the atomic style
   schema won't accept. */
.mdh-cta-overlap-card {
	margin-left: -100px !important;
	box-shadow: 0 20px 50px rgba(0, 0, 0, .15);
}
.mdh-cta-overlap-card .e-heading-base,
.mdh-cta-overlap-card .e-paragraph-base { color: #fff; }
.mdh-cta-overlap-card .e-button-base { border-radius: 3px; }
/* The button's own JSON local style hardcodes a fixed width sized for the
   original (smaller) font — at the current font size that box is too
   narrow and wraps "REQUEST A BROCHURE" word-by-word onto several lines.
   Sizing it to its own content instead fixes that at every width, not
   just mobile. align-self:flex-start is required too — the card is a
   column flexbox with the default align-items:stretch, which otherwise
   stretches the button to the card's full width regardless of its own
   width value. */
.mdh-cta-overlap-card .e-button-base {
	width: auto !important;
	white-space: nowrap !important;
	align-self: flex-start !important;
}
@media (max-width: 991px) {
	.mdh-cta-overlap-card { margin-left: 0 !important; width: 100% !important; padding: 40px !important; }
}
@media (max-width: 480px) {
	.mdh-cta-overlap-card { padding: 30px 24px !important; }
}

/* "Only High-End Quality Materials" — full-bleed photo with a white card
   floating at the right, built with plain flexbox (justify-content:flex-end)
   rather than position:absolute, since that prop is unverified in this
   Elementor version's atomic style schema. Background image set here (not
   via Elementor's own Background panel) because the atomic-widget image
   background schema isn't reliably editable yet — see project memory. */
.mdh-materials-photo {
	position: relative;
	background-image: url('https://my-dream-home.dobrich-bg.com/wp-content/uploads/2026/07/image-5.jpg');
	background-size: cover;
	background-position: center;
}
.mdh-materials-card {
	position: relative;
	z-index: 1;
	box-shadow: 0 20px 50px rgba(0, 0, 0, .15);
}
@media (max-width: 991px) {
	.mdh-materials-photo { flex-direction: column !important; height: auto !important; padding: 30px 20px !important; }
	.mdh-materials-card { width: 100% !important; }
}

/* Photo+card row overlapping down into the next (dark) section's top edge,
   matching the reference site. Negative margin must be plain CSS — Elementor
   silently rejects negative values on its own JSON size props (see memory).
   position:relative + z-index keeps the row painting above the next section
   even though it's earlier in DOM order. */
.mdh-overlap-row {
	position: relative;
	z-index: 2;
	margin-bottom: -50px !important;
}
@media (max-width: 991px) {
	.mdh-overlap-row { margin-bottom: 0 !important; }
}

/* Dark section with wave divider at the BOTTOM (property carousel intro).
   The wave itself is colored via a CSS mask (not a flat white PNG/SVG fill)
   so it always matches THIS section's own navy — and no overflow:hidden
   here, so the wave can genuinely extend past this section's own box and
   sit on top of the section below, instead of being clipped flush at the
   boundary (which read as a bare white gap rather than an overlap). */
.mdh-dark-wave-bottom {
	position: relative;
	z-index: 2;
	background: var(--mdh-color-navy);
}
.mdh-dark-wave-bottom::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -80px;
	height: 130px;
	background-color: var(--mdh-color-navy);
	-webkit-mask-image: url('../img/wave-divider.svg');
	mask-image: url('../img/wave-divider.svg');
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	z-index: 3;
}
.mdh-dark-wave-bottom .e-heading-base,
.mdh-dark-wave-bottom .e-paragraph-base {
	color: #fff;
	position: relative;
	z-index: 2;
}
.mdh-dark-wave-bottom .mdh-card { position: relative; z-index: 2; }
.mdh-dark-wave-bottom .swiper { position: relative; z-index: 2; }
.mdh-dark-wave-bottom .mdh-grid-empty { color: rgba(255, 255, 255, .6); position: relative; z-index: 2; }

/* Multi-color heading words — apply to any heading/heading-part element's
   classes (alongside its own local-style class) to recolor just that piece
   of a section title, e.g. "Discover Our [Prefab] Solutions". Needs
   !important since section-wide rules like
   ".mdh-dark-wave-bottom .e-heading-base{color:#fff}" have higher
   specificity (2 classes) than a heading's own generated local-style class
   (1 class) and would otherwise always win regardless of source order.
   .mdh-accent-heading is kept as an alias of .mdh-text-primary for the
   headings already using it. */
.mdh-accent-heading,
.mdh-text-primary { color: var(--mdh-color-primary) !important; }
.mdh-text-secondary {
	background: var(--mdh-gradient-brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
	display: inline-block;
}
.mdh-text-navy { color: var(--mdh-color-navy) !important; }
.mdh-text-white { color: #fff !important; }

/* Stack the new two-column sections on tablet/mobile */
@media (max-width: 991px) {
	.mdh-2col-row, .g-3f4155c {
		flex-direction: column !important;
	}
	.mdh-2col-row > *, .g-3f4155c > * {
		width: 100% !important;
	}
}

/* =======================================================================
   Single Solution (house model) page
   ======================================================================= */

.mdh-icon { width: 22px; height: 22px; flex-shrink: 0; }

/* Hero: gallery (left) + sticky overview sidebar (right) */
.mdh-solution-hero {
	display: flex;
	gap: 40px;
	align-items: flex-start;
	padding-top: 30px;
}
.mdh-solution-gallery {
	flex: 1 1 62%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	border-radius: 4px;
	overflow: hidden;
}
.mdh-solution-gallery__item { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.mdh-solution-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.mdh-solution-gallery__item:hover img { transform: scale(1.04); }
/* Single-photo houses (most of our catalog for now) span the full grid */
.mdh-solution-gallery:has(.mdh-solution-gallery__item:only-child) { grid-template-columns: 1fr; }
.mdh-solution-gallery:has(.mdh-solution-gallery__item:only-child) .mdh-solution-gallery__item { aspect-ratio: 16 / 10; }

.mdh-solution-hero__sidebar {
	flex: 1 1 38%;
	position: sticky;
	top: 24px;
	padding-top: 8px;
}
.mdh-solution-hero__title { font-size: 38px; margin: 0 0 8px; }
.mdh-solution-hero__price { font-size: 24px; color: var(--mdh-color-text-muted); margin-bottom: 16px; }
.mdh-solution-hero__price strong { color: var(--mdh-color-text); font-weight: 700; }
.mdh-solution-hero__desc { color: var(--mdh-color-text-muted); margin-bottom: 24px; line-height: 1.6; }
@media (max-width: 991px) {
	.mdh-solution-hero { flex-direction: column; }
	.mdh-solution-hero__sidebar { position: static; }
}
@media (max-width: 600px) {
	.mdh-solution-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* "About this home" stats band */
.mdh-solution-stats { background: var(--mdh-gradient-brand); margin-top: 50px; }
.mdh-solution-stats__inner { padding-top: 40px; padding-bottom: 40px; }
.mdh-solution-stats__title { color: #fff; margin: 0 0 24px; }
.mdh-solution-stats__row { display: flex; flex-wrap: wrap; gap: 36px; }
.mdh-solution-stats__item { display: flex; align-items: center; gap: 10px; color: #fff; }
.mdh-solution-stats__item .mdh-icon { color: #fff; opacity: .85; }
.mdh-solution-stats__item strong { display: block; font-size: 26px; line-height: 1.1; }
.mdh-solution-stats__item span { font-size: 18px; opacity: .85; }

/* Project details — two-column key/value table, like a spec sheet */
.mdh-solution-details h2 { margin-bottom: 20px; }
.mdh-solution-details__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 60px; }
.mdh-solution-details__table { width: 100%; border-collapse: collapse; }
.mdh-solution-details__table tr { border-bottom: 1px solid var(--mdh-color-border); }
.mdh-solution-details__table th,
.mdh-solution-details__table td { text-align: left; padding: 14px 0; font-weight: 400; vertical-align: top; }
.mdh-solution-details__table th { color: var(--mdh-color-text); font-weight: 700; width: 45%; }
.mdh-solution-details__table td { color: var(--mdh-color-text-muted); text-align: right; }
@media (max-width: 767px) {
	.mdh-solution-details__grid { grid-template-columns: 1fr; }
}

/* Floor plans */
.mdh-solution-floors h2 { margin-bottom: 24px; }
.mdh-solution-floors__list { display: flex; flex-direction: column; gap: 20px; }
.mdh-solution-floors__card {
	display: flex;
	gap: 24px;
	align-items: center;
	border: 1px solid var(--mdh-color-border);
	border-radius: 4px;
	padding: 16px;
}
.mdh-solution-floors__image { width: 160px; height: 120px; object-fit: cover; border-radius: 3px; flex-shrink: 0; }
.mdh-solution-floors__meta h3 { margin: 0 0 10px; font-size: 24px; }
.mdh-solution-floors__facts { display: flex; flex-wrap: wrap; gap: 20px; color: var(--mdh-color-text-muted); font-size: 19px; }
.mdh-solution-floors__facts span { display: flex; align-items: center; gap: 6px; }
.mdh-solution-floors__facts .mdh-icon { width: 18px; height: 18px; color: var(--mdh-color-primary); }
@media (max-width: 600px) {
	.mdh-solution-floors__card { flex-direction: column; align-items: flex-start; }
	.mdh-solution-floors__image { width: 100%; height: auto; }
}

/* Energy efficiency — EU EPC-style rating scale (standard public convention,
   not any third party's proprietary design) */
.mdh-solution-energy { display: flex; gap: 60px; align-items: flex-start; }
.mdh-solution-energy__intro { flex: 1 1 40%; }
.mdh-solution-energy__intro .mdh-icon { width: 34px; height: 34px; color: var(--mdh-color-primary); margin-bottom: 14px; }
.mdh-solution-energy__intro h2 { margin: 0 0 14px; }
.mdh-solution-energy__intro p { color: var(--mdh-color-text-muted); line-height: 1.6; }
.mdh-solution-energy__panel { flex: 1 1 60%; padding-top: 8px; }
.mdh-solution-energy__stats { margin-bottom: 30px; }
.mdh-solution-energy__stats div { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--mdh-color-border); }
.mdh-solution-energy__stats span { color: var(--mdh-color-text-muted); }
.mdh-solution-energy__stats strong { color: var(--mdh-color-text); }

.mdh-energy-scale { position: relative; padding-top: 34px; }
.mdh-energy-scale__pointer {
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	background: var(--mdh-color-text);
	color: #fff;
	font-size: 16px;
	white-space: nowrap;
	padding: 5px 10px;
	border-radius: 3px;
}
.mdh-energy-scale__pointer::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: var(--mdh-color-text);
}
.mdh-energy-scale__bar { display: flex; width: 100%; border-radius: 3px; overflow: hidden; }
.mdh-energy-scale__seg {
	flex: 1;
	text-align: center;
	padding: 10px 0;
	font-weight: 700;
	font-size: 18px;
	color: #fff;
	opacity: .55;
	transition: opacity .2s;
}
.mdh-energy-scale__seg.is-active { opacity: 1; }
.mdh-energy-scale__seg--aplus { background: #1a9850; }
.mdh-energy-scale__seg--a     { background: #4bb04f; }
.mdh-energy-scale__seg--b     { background: #a6d96a; color: var(--mdh-color-text); }
.mdh-energy-scale__seg--c     { background: #ffffbf; color: var(--mdh-color-text); }
.mdh-energy-scale__seg--d     { background: #fee08b; color: var(--mdh-color-text); }
.mdh-energy-scale__seg--e     { background: #fdae61; }
.mdh-energy-scale__seg--f     { background: #f46d43; }
.mdh-energy-scale__seg--g     { background: #d73027; }
.mdh-energy-scale__seg--h     { background: #a50026; }
@media (max-width: 767px) {
	.mdh-solution-energy { flex-direction: column; gap: 30px; }
}

/* Related solutions + contact */
.mdh-solution-related h2,
.mdh-solution-contact h2 { margin-bottom: 24px; }
.mdh-solution-contact { max-width: 720px; }

/* WPForms — restyled from the plugin's own generic blue/system-font look to
   match the site's design (rounded fields, brand gradient submit button,
   consistent spacing/typography). Overrides target WPForms' own class
   names directly since the form markup isn't ours to change. */
/* WPForms' own stylesheet (wpforms-full.min.css) loads AFTER theme.css, so
   every property here needs !important to win the cascade — plain
   specificity isn't enough since these target the same classes. */
.wpforms-container { margin: 0 !important; }
.wpforms-form .wpforms-field { padding: 0 !important; margin: 0 0 22px !important; }
.wpforms-form .wpforms-field-label,
.wpforms-form legend.wpforms-field-label {
	display: block !important;
	font-family: var(--mdh-font-heading) !important;
	font-weight: 700 !important;
	font-size: 17px !important;
	color: var(--mdh-color-text) !important;
	margin: 0 0 8px !important;
}
.wpforms-form .wpforms-required-label { color: var(--mdh-color-secondary) !important; }
.wpforms-form .wpforms-field-sublabel {
	display: block !important;
	font-size: 14px !important;
	color: var(--mdh-color-text-muted) !important;
	margin-top: 6px !important;
	font-weight: 400 !important;
}
.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form input[type="tel"],
.wpforms-form input[type="number"],
.wpforms-form textarea,
.wpforms-form select {
	width: 100% !important;
	padding: 14px 16px !important;
	border: 1px solid var(--mdh-color-border) !important;
	border-radius: 6px !important;
	font-family: var(--mdh-font-body) !important;
	font-size: 17px !important;
	color: var(--mdh-color-text) !important;
	background: #fff !important;
	transition: border-color .2s ease, box-shadow .2s ease !important;
	box-shadow: none !important;
}
.wpforms-form textarea { min-height: 140px !important; resize: vertical !important; }
.wpforms-form input[type="text"]:focus,
.wpforms-form input[type="email"]:focus,
.wpforms-form input[type="tel"]:focus,
.wpforms-form textarea:focus,
.wpforms-form select:focus {
	border-color: var(--mdh-color-primary) !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(91, 42, 158, .12) !important;
}
/* No custom gap here — WPForms' modern render style already sizes each
   .wpforms-one-half block at calc(50% - 10px), reserving the gap itself;
   adding a flex "gap" on top of that pushes the pair past 100% and wraps
   "Last" onto its own row instead of sitting beside "First". Even without
   an added gap, the pair sits right at 100% width and sub-pixel rounding
   alone is enough to trip flex-wrap's "wrap" — nowrap removes that
   coin-flip entirely (mobile still stacks via flex-direction:column below). */
.wpforms-form .wpforms-field-row { flex-wrap: nowrap !important; }
.wpforms-form .wpforms-field-row-block + .wpforms-field-row-block { margin-top: 0 !important; }
.wpforms-form .wpforms-submit-container { margin-top: 8px !important; }
.wpforms-form button.wpforms-submit {
	background: var(--mdh-gradient-brand) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 3px !important;
	padding: 15px 40px !important;
	font-family: var(--mdh-font-body) !important;
	font-weight: 700 !important;
	font-size: 17px !important;
	text-align: center !important;
	text-transform: uppercase !important;
	letter-spacing: .5px !important;
	display: block !important;
	width: auto !important;
	cursor: pointer !important;
	transition: filter .2s ease, transform .2s ease, box-shadow .2s ease !important;
}
.wpforms-form button.wpforms-submit:hover {
	filter: brightness(1.08) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 20px rgba(0, 0, 0, .18) !important;
}
.wpforms-form .wpforms-error,
.wpforms-form label.wpforms-error {
	color: var(--mdh-color-secondary) !important;
	font-size: 14px !important;
	margin-top: 6px !important;
	display: block !important;
}
.wpforms-form input.wpforms-error,
.wpforms-form textarea.wpforms-error {
	border-color: var(--mdh-color-secondary) !important;
}
.wpforms-confirmation-container {
	background: var(--mdh-color-bg-offwhite) !important;
	border-left: 4px solid var(--mdh-color-primary) !important;
	border-radius: 6px !important;
	padding: 24px !important;
	font-size: 17px !important;
	color: var(--mdh-color-text) !important;
}
@media (max-width: 600px) {
	.wpforms-form .wpforms-field-row { flex-direction: column !important; }
	/* Stacking to a column isn't enough on its own — the blocks still carry
	   their side-by-side ~50% width (and each resolves it slightly
	   differently: calc(50% - 10px) vs plain 50%), so without this they'd
	   sit as two narrow, inconsistently-offset boxes instead of full-width
	   fields matching Email/Message below them. */
	.wpforms-form .wpforms-field-row-block.wpforms-one-half {
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.wpforms-form .wpforms-field-row-block.wpforms-one-half + .wpforms-field-row-block { margin-top: 22px !important; }
}

/* =======================================================================
   Homepage — taller sections, zero gap between them (sections already sit
   flush with margin:0 by default; this only adds breathing room inside
   each one). Targeted by data-id, which Elementor renders from our own
   stable element ids and doesn't change on re-save, rather than by
   patching each element's own JSON padding prop again — safer than
   fighting the atomic style schema a fourth time for the same kind of
   value. */
body.home [data-id="mdhwhyrow"]        { padding-top: 110px !important; padding-bottom: 110px !important; }
body.home [data-id="mdhs2row"]         { padding-top: 60px !important; padding-bottom: 60px !important; }
body.home [data-id="mdhs3"]            { padding-top: 90px !important; padding-bottom: 70px !important; }
body.home [data-id="mdhmaterials"]     { height: 650px !important; }
body.home [data-id="mdhtesttitlewrap"] { padding-top: 90px !important; padding-bottom: 30px !important; }
body.home [data-id="mdhtestrow"]       { padding-top: 30px !important; padding-bottom: 100px !important; }
body.home [data-id="mdhcta2"]          { padding-top: 130px !important; padding-bottom: 130px !important; }
@media (max-width: 767px) {
	body.home [data-id="mdhmaterials"] { height: auto !important; }
}

/* 50px breathing room between homepage sections. Skipped on purpose where a
   section already has a deliberate seam with its neighbor — the wave
   dividers (mdh-hero, mdhs3/dark-wave-bottom), the photo+card overlap
   (mdhs2row/mdh-overlap-row), and the tightly-paired title+row combo
   (mdhtesttitlewrap+mdhtestrow) that reads as one visual unit — adding a
   gap there would break those transitions or split a single unit in two. */
body.home [data-id="mdhwhyrow"]        { margin-bottom: 50px !important; }
body.home [data-id="mdhstepssection"]  { margin-bottom: 50px !important; }
body.home [data-id="mdhmaterials"]     { margin-bottom: 50px !important; }
body.home [data-id="mdhtestrow"]       { margin-bottom: 50px !important; }
body.home [data-id="mdhfaqsection"]    { margin-bottom: 50px !important; }

/* Testimonials — stack the 3 cards on tablet/mobile instead of squeezing
   them into cramped side-by-side columns. */
@media (max-width: 767px) {
	body.home [data-id="mdhtestrow"] {
		flex-direction: column !important;
	}
	body.home [data-id="mdhtestrow"] > * {
		width: 100% !important;
	}
}

/* Partner/client logos strip — hidden for now, content not ready yet */
body.home [data-id="mdhpartners"] { display: none !important; }

/* =======================================================================
   About page (post 9) — structure adapted from a reference site the client
   supplied, built entirely with original copy/icons and this theme's own
   design tokens (teal/navy, not the reference's orange).
   ======================================================================= */

/* Page header band — full-bleed edge-to-edge, matching the Portfolio page's
   .mdh-page-banner 1:1 (same background/padding, broken out of the page's
   padded container the same way). This section also carries Elementor's
   global class "g-f402eaf" (.mdh-section, .g-f402eaf { max-width ... auto
   margins ... !important }), which loads after this stylesheet and would
   otherwise win outright — every property it touches needs !important here. */
.mdh-about-pageheader {
	background: var(--mdh-color-navy);
	padding: 70px 40px !important;
	max-width: none !important;
	width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}
/* Portfolio's equivalent inner wrapper is a plain div carrying .mdh-container
   (max-width:1200/padding:40px 20px, theme.css:619), which stacks on top of
   the banner's own 70px/40px padding. This inner wrapper is instead an
   Elementor e-flexbox, whose own base class (".elementor .e-flexbox-base",
   two selectors) is more specific than a bare ".mdh-container" class would
   be and would keep winning even after theme.css's load-order edge — so the
   equivalent spacing has to be reproduced here directly, with !important. */
.mdh-about-header-inner { padding: 40px 20px !important; }
/* Dark background here, so the eyebrow label needs a light muted tone, not
   the brand purple (too low-contrast against navy — hard to read). A small
   dash in the brand gradient (via background-clip:text) stands in for the
   plain-color accent bar used elsewhere, matching the "dash + label"
   pattern the client asked to standardize on. */
.mdh-about-header-inner .e-paragraph-base {
	display: flex;
	align-items: center;
	gap: 10px;
	color: rgba(255, 255, 255, .65);
	text-transform: uppercase;
	font-size: 17px;
	letter-spacing: 1px;
	margin: 0 0 10px;
}
.mdh-about-header-inner .e-paragraph-base::before {
	content: '';
	display: inline-block;
	width: 24px;
	height: 2px;
	background: var(--mdh-gradient-brand);
	flex-shrink: 0;
}
.mdh-about-title-row { gap: 12px; align-items: baseline; }
.mdh-about-title-row .e-heading-base { color: #fff; margin: 0; font-size: 44px; font-weight: 800; }

/* Intro: text column + photo column with overlapping card */
.mdh-about-intro-row { gap: 60px; align-items: center; padding: 90px 40px; }
.mdh-about-intro-left { flex: 1 1 50%; }
.mdh-about-intro-right { flex: 1 1 50%; position: relative; }
.mdh-about-intro-left .e-heading-base { margin: 0 0 20px; }
.mdh-about-intro-left .e-paragraph-base { color: var(--mdh-color-text-muted); line-height: 1.6; margin: 0 0 14px; }
.mdh-about-checklist { gap: 10px; margin: 20px 0 0; }
.mdh-about-check-item { align-items: center; gap: 10px; }
.mdh-about-check-item .e-svg-base { width: 20px; height: 20px; color: var(--mdh-color-primary); flex-shrink: 0; }
.mdh-about-check-item .e-paragraph-base { margin: 0; color: var(--mdh-color-text); font-weight: 600; }
.mdh-about-divider { width: 80px; height: 2px; background: var(--mdh-color-border); margin-top: 20px; }
.mdh-about-photo-wrap { height: 480px; }
.mdh-about-photo-wrap img, .mdh-about-photo { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 4px; }
.mdh-about-overlay-card {
	position: absolute;
	right: -20px;
	bottom: -20px;
	max-width: 260px;
	background: var(--mdh-gradient-brand);
	padding: 24px;
	border-radius: 4px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, .15);
	align-items: center;
	gap: 16px;
	z-index: 2;
}
.mdh-about-overlay-card .e-paragraph-base { color: #fff; font-size: 20px; line-height: 1.5; margin: 0; }
/* White badge behind the icon — its stroke is a hardcoded teal, not
   currentColor, so it needs contrast against this card's teal background. */
.mdh-about-overlay-card .e-svg-base {
	width: 36px;
	height: 36px;
	padding: 8px;
	box-sizing: content-box;
	background: #fff;
	border-radius: 50%;
	color: var(--mdh-color-primary);
	flex-shrink: 0;
}

/* Value props band (dark, 3 columns — general claims, no fabricated stats) */
.mdh-about-values { background: var(--mdh-color-navy); padding: 70px 40px; }
.mdh-about-values-row { gap: 40px; }
.mdh-about-value { flex: 1; align-items: center; text-align: center; gap: 12px; }
.mdh-about-value-circle { width: 70px; height: 70px; border-radius: 50%; background: rgba(255, 255, 255, .08); align-items: center; justify-content: center; }
.mdh-about-value-circle .e-svg-base { width: 30px; height: 30px; color: var(--mdh-color-primary); }
.mdh-about-value .e-heading-base { color: #fff; font-size: 24px; margin: 0; }
.mdh-about-value .e-paragraph-base { color: rgba(255, 255, 255, .65); font-size: 20px; line-height: 1.5; margin: 0; }

/* "Why Choose Us" — eyebrow + two-tone heading + 6-card grid */
.mdh-about-why { padding: 90px 40px; }
.mdh-about-why-header { text-align: center; margin-bottom: 50px; align-items: center; }
.mdh-about-why-header .e-paragraph-base {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: var(--mdh-color-text-muted);
	text-transform: uppercase;
	font-size: 17px;
	letter-spacing: 1px;
	margin: 0 0 10px;
}
.mdh-about-why-header .e-paragraph-base::before {
	content: '';
	display: inline-block;
	width: 24px;
	height: 2px;
	background: var(--mdh-gradient-brand);
	flex-shrink: 0;
}
.mdh-about-why-heading { gap: 8px; justify-content: center; }
.mdh-about-why-heading .e-heading-base { margin: 0; }
[data-id="abtwhyh2b"] .e-heading-base { color: var(--mdh-color-primary) !important; }
.mdh-about-why-grid { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mdh-about-why-card { background: var(--mdh-color-bg-offwhite); padding: 32px; border-radius: 4px; gap: 14px; }
.mdh-about-why-icon { width: 56px; height: 56px; border-radius: 4px; background: var(--mdh-gradient-brand); align-items: center; justify-content: center; }
.mdh-about-why-icon .e-svg-base { width: 26px; height: 26px; color: #fff; }
.mdh-about-why-card .e-heading-base { font-size: 23px; margin: 0; }
.mdh-about-why-card .e-paragraph-base { font-size: 20px; line-height: 1.55; color: var(--mdh-color-text-muted); margin: 0; }

/* Services page intro — same eyebrow-dash + heading pattern as "Why Choose
   Us" above, just left-aligned instead of centered. */
.mdh-services-header { text-align: left; align-items: flex-start; }
.mdh-services-header .e-paragraph-base { justify-content: flex-start; }

@media (max-width: 991px) {
	.mdh-about-intro-row { flex-direction: column !important; }
	.mdh-about-intro-left, .mdh-about-intro-right { width: 100% !important; }
	.mdh-about-why-grid { grid-template-columns: repeat(2, 1fr); }
	.mdh-about-values-row { flex-direction: column !important; gap: 40px; }
}
@media (max-width: 767px) {
	/* Same breakpoint/values as the Portfolio banner's mobile rule. */
	.mdh-about-pageheader { padding: 36px 20px !important; }
	.mdh-about-title-row .e-heading-base { font-size: 32px; }
}
@media (max-width: 600px) {
	.mdh-about-why-grid { grid-template-columns: 1fr; }
	.mdh-about-overlay-card { position: static !important; margin-top: 20px; max-width: 100% !important; }
	.mdh-about-intro-row, .mdh-about-values, .mdh-about-why { padding-left: 20px !important; padding-right: 20px !important; }
}

/* =======================================================================
   Site footer (post 26, Header Footer Elementor "Site Footer" template) —
   rebuilt as real Elementor widgets, structure adapted from a reference
   site the client supplied, in this theme's own gradient design.
   ======================================================================= */
.mdh-footer-root { background: var(--mdh-color-navy); }
.mdh-footer-contact-band { border-bottom: 1px solid rgba(255, 255, 255, .1); padding: 30px 40px; }
.mdh-footer-contact-row { gap: 40px; flex-wrap: wrap; }
.mdh-footer-contact-item { flex: 1 1 240px; align-items: center; gap: 16px; }
.mdh-footer-contact-icon { width: 48px; height: 48px; border-radius: 6px; background: var(--mdh-gradient-brand); align-items: center; justify-content: center; flex-shrink: 0; }
.mdh-footer-contact-icon .e-svg-base { width: 22px; height: 22px; color: #fff; }
.mdh-footer-contact-text { gap: 2px; }
.mdh-footer-contact-text .e-heading-base { color: #fff; font-size: 19px; margin: 0; }
.mdh-footer-contact-text .e-paragraph-base { color: rgba(255, 255, 255, .65); font-size: 19px; margin: 0; }

.mdh-footer-main-row { gap: 60px; padding: 60px 40px; flex-wrap: wrap; }
.mdh-footer-col { flex: 1 1 220px; gap: 16px; }
/* The footer column is a column-direction flexbox with the default
   align-items:stretch, which stretches this img to the column's full width
   (the same class of bug fixed earlier for the "Request a Brochure"
   button) — align-self overrides that back to its own natural size. */
img.mdh-footer-logo-img { height: 60px !important; width: auto !important; max-width: none !important; display: block; align-self: flex-start !important; }
.mdh-footer-col .e-heading-base { color: #fff; font-size: 22px; margin: 0 0 6px; }
.mdh-footer-col .e-paragraph-base { color: rgba(255, 255, 255, .6); line-height: 1.6; font-size: 19px; margin: 0; }
.mdh-footer-social-icon { width: 30px; height: 30px; border-radius: 10%; background: var(--mdh-gradient-brand); align-items: center; justify-content: center; }
.mdh-footer-social-icon .e-svg-base { width: 15px; height: 15px; color: #fff; }
.mdh-footer-social-row { gap: 12px; }
.mdh-footer-links-list { gap: 10px; }
.mdh-footer-link.e-heading-base, .mdh-footer-link { color: rgba(255, 255, 255, .65) !important; font-size: 19px !important; font-weight: 400 !important; margin: 0 !important; text-decoration: none !important; transition: color .2s ease; }
.mdh-footer-link:hover { color: var(--mdh-color-secondary) !important; }
.mdh-footer-map-btn.e-button-base { padding: 10px 20px; font-size: 17px; border-radius: 3px; width: max-content; }

.mdh-footer-copyright { border-top: 1px solid rgba(255, 255, 255, .1); padding: 20px 40px; text-align: center; }
.mdh-footer-copyright .e-paragraph-base { color: rgba(255, 255, 255, .5); font-size: 18px; margin: 0; }

@media (max-width: 767px) {
	.mdh-footer-contact-row, .mdh-footer-main-row { flex-direction: column !important; gap: 30px; }
	.mdh-footer-contact-band, .mdh-footer-main-row { padding-left: 20px !important; padding-right: 20px !important; }
}

/* "Back to top" button (Astra theme's built-in #ast-scroll-top) — restyled
   from the theme default flat blue square into a circular scroll-progress
   ring in our brand gradient. --mdh-scroll-pct is kept updated by
   nav-toggle.js's scroll listener; the conic-gradient traces the ring from
   the top (from -90deg) round to the current scroll percentage, with the
   remainder left as a plain gray track. The inner white circle (::before)
   masks the gradient down to a thin ring instead of a filled pie. */
#ast-scroll-top.ast-scroll-top-icon {
	width: 50px !important;
	height: 50px !important;
	border-radius: 50% !important;
	background: conic-gradient(from -90deg, #3D1E78 0deg, #E63950 calc(var(--mdh-scroll-pct, 0) * 3.6deg), #e2e2e2 calc(var(--mdh-scroll-pct, 0) * 3.6deg) 360deg) !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
#ast-scroll-top.ast-scroll-top-icon::before {
	content: '';
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: #fff;
}
/* Astra's own CSS sizes/positions .ast-icon (width:100%, a hardcoded
   line-height) for its original small square button — those fight flex
   centering once the button is a bigger circle, so reset them here. */
#ast-scroll-top.ast-scroll-top-icon .ast-icon {
	position: relative;
	z-index: 1;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	height: auto !important;
	line-height: normal !important;
}
#ast-scroll-top.ast-scroll-top-icon .ast-arrow-svg path {
	fill: var(--mdh-color-primary) !important;
}

/* =======================================================================
   Shared dark page banner (eyebrow + title) — used at the top of every
   PHP-templated archive/single page (Portfolio, Solutions, Solutions
   category filters, single Portfolio project) so they all open with the
   same look instead of each page inventing its own header treatment.
   ======================================================================= */
/* The real bug behind two failed full-bleed attempts on the first page this
   shipped on: .ast-container itself is display:flex, and a template that
   hands it two top-level siblings (banner + page body) gets them laid out
   side-by-side and stretched to match the taller one's height, instead of
   the banner sitting above the body as a normal block. Wrapping both in
   one .mdh-page-wrap parent fixes that (single flex child, normal in-flow
   block layout inside it) — every template below follows this same
   single-wrapper structure. With that fixed, the standard viewport
   break-out trick works correctly, because .ast-container's own width is
   the true, stable percentage basis again. */
.mdh-page-wrap { width: 100%; }
.mdh-page-banner {
	background: var(--mdh-color-navy);
	padding: 70px 40px;
	margin-bottom: 90px;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.mdh-page-banner-inner .mdh-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	color: rgba(255, 255, 255, .65);
	text-transform: uppercase;
	font-size: 17px;
	letter-spacing: 1px;
	margin: 0 0 10px;
}
.mdh-page-banner-inner .mdh-eyebrow::before {
	content: '';
	display: inline-block;
	width: 24px;
	height: 2px;
	background: var(--mdh-gradient-brand);
	flex-shrink: 0;
}
.mdh-page-banner-inner h1 { color: #fff; margin: 0; font-size: 44px; }
@media (max-width: 767px) {
	/* 70px top+bottom padding was sized for desktop — on a short mobile
	   viewport that alone eats over a third of the visible screen, making
	   this look like a huge full-height block instead of a slim title band. */
	.mdh-page-banner { padding: 36px 20px; margin-bottom: 50px; }
	.mdh-page-banner-inner h1 { font-size: 32px; }
}

/* Single Portfolio project — light status/subtitle strip sitting flush under
   the dark banner (no gap, so the two read as one header block, matching
   the reference), then a 3-column photo grid and a centered back button.
   The bigger, taller crop here (vs. the smaller 4-col .mdh-single-house__
   gallery shared with single-mdh_solution.php) is deliberately a separate
   class so it doesn't change that other template's thumbnail grid. */
.mdh-single-house .mdh-page-banner { margin-bottom: 0; }
.mdh-project-subtitle { background: var(--mdh-color-bg-offwhite); }
.mdh-project-subtitle-inner { padding-top: 30px !important; padding-bottom: 30px !important; display: flex; flex-direction: column; gap: 10px; }
.mdh-project-status { display: inline-flex; align-items: center; gap: 8px; color: var(--mdh-color-text-muted); font-size: 16px; width: max-content; }
.mdh-project-status .mdh-icon { width: 20px; height: 20px; color: var(--mdh-color-primary); flex-shrink: 0; }
.mdh-project-subtitle-inner p { margin: 0; color: var(--mdh-color-text-muted); font-size: 17px; line-height: 1.6; }

.mdh-project-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 50px 0; }
.mdh-project-gallery__img { width: 100%; height: 300px; object-fit: cover; border-radius: 4px; display: block; box-shadow: 0 10px 30px rgba(0, 0, 0, .08); }
.mdh-project-back-wrap { text-align: center; margin: 20px 0 60px; }
@media (max-width: 900px) {
	.mdh-project-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.mdh-project-gallery { grid-template-columns: 1fr; }
	.mdh-project-gallery__img { height: 220px; }
}

.mdh-portfolio-list { max-width: 1100px; }
.mdh-portfolio-row {
	position: relative;
	display: flex;
	align-items: center;
	margin-bottom: 110px;
}
.mdh-portfolio-row__photo { flex: 0 0 62%; }
.mdh-portfolio-row__photo a { display: block; }
.mdh-portfolio-row__img { width: 100%; height: 420px; object-fit: cover; border-radius: 4px; display: block; }
.mdh-portfolio-row__card {
	position: relative;
	margin-left: -140px;
	background: #fff;
	box-shadow: 0 20px 50px rgba(0, 0, 0, .12);
	padding: 40px;
	flex: 1 1 auto;
	z-index: 2;
}
.mdh-portfolio-row__title { margin: 0 0 6px; font-size: 24px; }
.mdh-portfolio-row__title a { color: var(--mdh-color-text); text-decoration: none; }
.mdh-portfolio-row__title a:hover { color: var(--mdh-color-primary); }
.mdh-portfolio-row__location {
	margin: 0 0 16px;
	font-weight: 700;
	background: var(--mdh-gradient-brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	display: inline-block;
}
.mdh-portfolio-row__divider { display: block; width: 60px; height: 2px; background: var(--mdh-color-border); margin-bottom: 16px; }
.mdh-portfolio-row__meta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.mdh-portfolio-row__status { display: flex; align-items: center; gap: 8px; color: var(--mdh-color-text-muted); font-size: 16px; }
.mdh-portfolio-row__status .mdh-icon { width: 18px; height: 18px; color: var(--mdh-color-primary); flex-shrink: 0; }
.mdh-portfolio-row__link { font-weight: 700; color: var(--mdh-color-text); text-decoration: none; white-space: nowrap; }
.mdh-portfolio-row__link:hover { color: var(--mdh-color-primary); }

/* Even rows mirror: photo on the right, card overlapping on the left. */
.mdh-portfolio-row--reverse { flex-direction: row-reverse; }
.mdh-portfolio-row--reverse .mdh-portfolio-row__card { margin-left: 0; margin-right: -140px; }

@media (max-width: 900px) {
	.mdh-portfolio-row,
	.mdh-portfolio-row--reverse { flex-direction: column; margin-bottom: 60px; }
	.mdh-portfolio-row__photo { flex: 1 1 auto; width: 100%; }
	.mdh-portfolio-row__img { height: 260px; }
	.mdh-portfolio-row__card,
	.mdh-portfolio-row--reverse .mdh-portfolio-row__card { margin: -40px 20px 0; padding: 24px; }
}

/* WordPress's default the_posts_pagination() output. */
.pagination { margin-top: 40px; }
.pagination .nav-links { display: flex; align-items: center; justify-content: center; gap: 8px; }
.pagination .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	color: var(--mdh-color-text);
	text-decoration: none;
	font-weight: 600;
	transition: background .2s ease, color .2s ease;
}
.pagination .page-numbers:hover { background: var(--mdh-color-bg-offwhite); }
.pagination .page-numbers.current { background: var(--mdh-gradient-brand); color: #fff; }
.pagination .page-numbers.dots { background: none; }