/* =============================================================
   Disaster Masters — main stylesheet
   Tokens and component values follow design-system.md.
   Do not introduce a competing token set (guardrail 37).
   ============================================================= */

/* ---------- Fonts (self-hosted, latin subset) ---------- */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/poppins-400.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/poppins-500.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/poppins-600.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/poppins-700.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

/* ---------- Tokens (design-system.md §11) ---------- */
:root {
	/* Colors */
	--color-primary: #FF8F08;
	--color-primary-alt: #FB9302;
	--color-primary-light: #FFAC37;

	--color-bg-page: #151515;
	--color-bg-footer: #1A1A1A;
	--color-bg-dark: #1F1F1F;
	--color-bg-card: #151515;
	--color-bg-card-alt: #000000;
	--color-bg-input: rgba(0, 0, 0, 0.6);

	--color-text-primary: #FFFFFF;
	--color-text-on-light: #1A1A1A;
	--color-text-accent: #FF8F08;
	--color-text-muted: #B7B7B7;

	--color-border-default: rgba(255, 255, 255, 0.2);
	--color-border-input: rgba(255, 255, 255, 0.15);
	--color-border-faint: rgba(255, 255, 255, 0.1);
	--color-border-card: #FFFFFF;
	--color-border-outline-btn: #D9D9D9;
	--color-border-active: #FF8F08;

	/* Decorative accents (design-system.md §1.4) */
	--color-gold: #8A7A3A;
	--color-cream: #F4F2EC;

	--shadow-btn-primary: 0 4px 26.6px rgba(255, 143, 8, 0.5);
	--shadow-card-active: 0 0 94px rgba(255, 143, 8, 0.2);
	--shadow-features-bar: 0 4px 114px rgba(255, 143, 8, 0.1);
	--shadow-text-hero: 0 4px 0 rgba(0, 0, 0, 0.25);

	/* Typography */
	--font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	/* Layout */
	--container-default: 1400px;
	--container-wide: 1568px;
	--container-pad: clamp(20px, 4vw, 60px);

	/* Spacing */
	--space-xs: 10px;
	--space-sm: 20px;
	--space-md: 30px;
	--space-lg: 50px;
	--space-xl: 60px;
	--space-2xl: 84px;
	--space-3xl: 105px;
	--space-4xl: 120px;
	--section-gap: clamp(64px, 6.25vw, 120px);

	/* Radius */
	--radius-sm: 6px;
	--radius-md: 8px;
	--radius-base: 10px;
	--radius-lg: 16px;
	--radius-card: 20px;
	--radius-pill: 50px;
	--radius-full: 560px;

	/* Component dimensions */
	--header-height: 100px;
	--input-height: 50px;
	--input-textarea-height: 105px;
	--btn-primary-height: 55px;
	--btn-nav-height: 50px;
	--btn-outline-height: 44px;
	--tab-height: 50px;
	--location-pill-height: 54px;

	/* Focus treatment — minimal, derived from the existing palette (guardrail 25) */
	--focus-ring: 0 0 0 3px rgba(255, 143, 8, 0.65);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--color-bg-page);
	color: var(--color-text-primary);
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.6;
	font-weight: var(--fw-regular);
	-webkit-font-smoothing: antialiased;

	/* `clip` contains stray horizontal overflow WITHOUT creating a scroll
	   container, so position: sticky on the header keeps resolving against the
	   viewport. `overflow-x: hidden` here would break it. */
	overflow-x: clip;
}

@supports not (overflow: clip) {
	body { overflow-x: hidden; }
}

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

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

button { font: inherit; color: inherit; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--fw-bold); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
	border-radius: 4px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

.dm-skip-link:focus {
	position: fixed !important;
	top: 12px; left: 12px;
	z-index: 999;
	width: auto; height: auto;
	clip: auto;
	padding: 12px 20px;
	background: #fff;
	color: var(--color-text-on-light);
	border-radius: var(--radius-md);
	font-weight: var(--fw-semibold);
}

/* ---------- Layout ---------- */
.dm-container {
	width: 100%;
	max-width: calc(var(--container-default) + (var(--container-pad) * 2));
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.dm-container--wide {
	max-width: calc(var(--container-wide) + (var(--container-pad) * 2));
}

.dm-main { display: block; }

.dm-section { padding-block: var(--section-gap); }
.dm-section + .dm-section { padding-top: 0; }

/* ---------- Headings ---------- */
/*
 * Two-tone headings: an optional <span> inside a heading field takes the brand
 * orange, e.g. "<span>Easy to</span> work with us". Sanitised server-side by
 * dm_heading_html(). Deliberately not applied to .dm-banner__heading, which sits
 * on an orange background where the accent would disappear.
 */
.dm-heading span,
.dm-hubrow__title span { color: var(--color-primary); }

.dm-heading {
	color: var(--color-text-primary);
	overflow-wrap: break-word;
}

.dm-heading--lg {
	font-size: clamp(32px, 2.86vw, 55px);
	line-height: 1.05;
	font-weight: var(--fw-bold);
	letter-spacing: 0;
}

.dm-heading--xl {
	font-size: clamp(34px, 3.33vw, 64px);
	line-height: 1.1;
	font-weight: var(--fw-semibold);
}

/* ---------- Buttons ---------- */
.dm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	cursor: pointer;
	text-align: center;
	transition: transform .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}
.dm-btn:hover { transform: translateY(-1px); }
.dm-btn__icon { width: 16px; height: 16px; flex: none; }

.dm-btn--primary {
	background: #fff;
	color: var(--color-text-on-light);
	border-radius: var(--radius-full);
	border-color: rgba(0, 0, 0, .9);
	padding: 16px 26px;
	min-height: var(--btn-primary-height);
	font-size: clamp(15px, 1.04vw, 20px);
	font-weight: var(--fw-semibold);
	letter-spacing: -.02em;
	text-transform: uppercase;
	box-shadow: var(--shadow-btn-primary);
}

.dm-btn--orange {
	background: var(--color-primary);
	color: #fff;
	padding: 16px 30px;
	min-height: 60px;
	font-size: 18px;
	font-weight: var(--fw-semibold);
	letter-spacing: -.5px;
	text-transform: uppercase;
}

.dm-btn--dark {
	background: var(--color-bg-card);
	color: #fff;
	padding: 15px 28px;
	min-height: var(--btn-primary-height);
	font-size: 18px;
	font-weight: var(--fw-semibold);
	letter-spacing: -.5px;
	text-transform: uppercase;
	border-color: var(--color-border-default);
}

.dm-btn--dark-outline {
	background: transparent;
	color: var(--color-text-on-light);
	border-color: rgba(0, 0, 0, .55);
	padding: 15px 26px;
	min-height: var(--btn-primary-height);
	font-size: 18px;
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
}

.dm-btn--ghost {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, .85);
	padding: 15px 26px;
	min-height: var(--btn-primary-height);
	font-size: clamp(14px, .94vw, 18px);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
}

.dm-btn--outline {
	background: transparent;
	color: #fff;
	border-color: var(--color-border-outline-btn);
	min-height: var(--btn-outline-height);
	padding: 10px 20px;
	font-size: 14px;
	font-weight: var(--fw-semibold);
}

.dm-btn--nav {
	background: #fff;
	color: var(--color-primary-alt);
	min-height: var(--btn-nav-height);
	padding: 7px 9px 7px 23px;
	font-size: clamp(14px, .94vw, 18px);
	font-weight: var(--fw-semibold);
	white-space: nowrap;
}

.dm-btn--white {
	background: #fff;
	color: var(--color-text-on-light);
	padding: 15px 28px;
	min-height: var(--btn-primary-height);
	font-size: 18px;
	font-weight: var(--fw-semibold);
	letter-spacing: -.5px;
	text-transform: uppercase;
}

.dm-btn--call{
	background-color: #151515;
	color: #FFFFFF;
	padding: 16px 21px;
	font-weight: 700;
	text-transform: uppercase;

}
/*
 * The Call Now treatment on a flat dark background needs an edge. Its fill is
 * #151515 — exactly the page background — so in the hero it only reads because
 * it sits over a photograph. Scoped to this section so the hero button keeps
 * its borderless look.
 */
.dm-locations__cta { border-color: var(--color-border-default); }
.dm-locations__cta:hover { border-color: var(--color-border-active); }

/* Orange highlight inside a button label, e.g. the phone number. */
.dm-btn__num { color: var(--color-primary); }

/* Circular arrow chips (Figma button treatment). */
.dm-btn--orange .dm-btn__icon,
.dm-features-bar__cta .dm-btn__icon {
	width: 28px;
	height: 28px;
	padding: 7px;
	border-radius: 50%;
	background: #fff;
	color: var(--color-text-on-light);
}
.dm-btn--nav .dm-btn__icon {
	width: 28px;
	height: 28px;
	padding: 7px;
	border-radius: 50%;
	background: var(--color-primary);
	color: #fff;
}
/* Features-bar estimate CTA: orange fill, dark text (Figma). */
.dm-features-bar__cta { color: var(--color-text-on-light); }

/* Banner call button: solid dark pill, orange phone icon + number. */
.dm-banner .dm-btn--dark { background: #1A1A1A; border-color: transparent; }
.dm-banner .dm-btn--dark .dm-btn__icon { color: var(--color-primary); }

.dm-textlink {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 18px;
	font-weight: var(--fw-semibold);
	color: #fff;
}
.dm-textlink:hover { text-decoration: underline; text-underline-offset: 4px; }
.dm-textlink__icon { width: 18px; height: 18px; }

.dm-carousel-btn {
	width: 55px; height: 55px;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--color-gold);
	background: transparent;
	color: var(--color-cream);
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}
.dm-carousel-btn:hover { background: rgba(255, 255, 255, .08); border-color: var(--color-primary); }
.dm-carousel-btn svg { width: 20px; height: 20px; }
.dm-carousel-btn[disabled] { opacity: .35; cursor: default; }

/* ---------- Header ---------- */
.dm-header {
	position: relative;
	z-index: 50;
	min-height: var(--header-height);
	display: flex;
	align-items: center;
	background: var(--color-bg-card-alt);
}

/* Sticky from 100px down. .is-stuck is added by main.js and only carries the
   lifted appearance; stickiness itself is CSS so there is no layout jump. */
.dm-header--sticky {
	position: sticky;
	top: 0;
}

.dm-header.is-stuck {
	box-shadow: 0 4px 26.6px rgba(0, 0, 0, .55);
}

.dm-header__inner {
	width: 100%;
	max-width: calc(1600px + (var(--container-pad) * 2));
	margin-inline: auto;
	padding-inline: var(--container-pad);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.dm-header__brand { flex: none; }

.dm-header__logo img,
.dm-header__brand img,
.dm-header__brand .custom-logo {
	height: auto;
	width: auto;
	max-height: 55px;
	object-fit: contain;
}

.dm-header__panel {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2vw, 40px);
	flex: 1;
	/* Centred between the logo and the action buttons: flex-end left a ~220px
	   hole after the logo at laptop widths with the menu glued to the CTAs. */
	justify-content: center;
}

.dm-header__actions {
	display: flex;
	align-items: center;
	gap: 18px;
}

.dm-header__phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--color-primary-alt);
	font-size: clamp(16px, 1.15vw, 22px);
	font-weight: var(--fw-bold);
	white-space: nowrap;
}
.dm-header__phone-icon { width: 20px; height: 20px; }

.dm-header__burger {
	display: none;
	background: transparent;
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-md);
	padding: 8px;
	color: #fff;
	cursor: pointer;
}
.dm-header__burger svg { width: 24px; height: 24px; }
.dm-header__burger-close { display: none; }
.dm-header__burger[aria-expanded="true"] .dm-header__burger-open { display: none; }
.dm-header__burger[aria-expanded="true"] .dm-header__burger-close { display: block; }

/* ---------- Navigation ---------- */
.dm-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(10px, 1.4vw, 26px);
}

.dm-nav__list > li {
	position: relative;
	display: flex;
	align-items: center;
	gap: 2px;
}

.dm-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 2px;
	font-size: clamp(14px, .89vw, 17px);
	font-weight: var(--fw-medium);
	line-height: 28px;
	color: #fff;
	background: transparent;
	border: 0;
	cursor: pointer;
	white-space: nowrap;
}
.dm-nav__link:hover { color: var(--color-primary); }

.dm-nav__chevron { width: 14px; height: 14px; transition: transform .15s ease; }

.dm-nav__toggle--adjacent {
	display: inline-flex;
	align-items: center;
	background: transparent;
	border: 0;
	padding: 6px 0;
	color: #fff;
	cursor: pointer;
	line-height: 1;
}
.dm-nav__toggle--adjacent:hover { color: var(--color-primary); }

.dm-nav__submenu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 240px;
	background: var(--color-bg-footer);
	border: 1px solid var(--color-border-faint);
	border-radius: var(--radius-base);
	padding: 8px;
	display: none;
	z-index: 20;
}
.dm-nav__submenu .dm-nav__submenu { top: 0; left: 100%; }

.dm-nav__list li:hover > .dm-nav__submenu,
.dm-nav__list li:focus-within > .dm-nav__submenu,
.dm-nav__list li.is-open > .dm-nav__submenu { display: block; }

/* Submenu rows lay the label and its toggle side by side; without this the
   chevron button wraps onto its own line under the label. */
.dm-nav__submenu li {
	position: relative;
	display: flex;
	align-items: center;
	gap: 2px;
}
.dm-nav__submenu .dm-nav__link {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
	padding: 8px 12px;
	line-height: 1.4;
	white-space: normal;
}
.dm-nav__submenu .dm-nav__toggle--adjacent {
	flex: none;
	padding: 8px 10px 8px 0;
}

/* ---------- Hero ---------- */
.dm-hero {
	position: relative;
	min-height: 717px;
	padding-top: 40px;
	padding-bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	isolation: isolate;
}

.dm-hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.dm-hero__bg-img { width: 100%; height: 100%; object-fit: cover; }

.dm-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .35) 45%, var(--color-bg-page) 100%);
}

.dm-hero__inner {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 26px;
	padding-block: 40px;
}

.dm-hero__badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(16px, 2.5vw, 48px);
	font-size: clamp(13px, .94vw, 18px);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: .02em;
}
.dm-hero__badges li { display: flex; align-items: center; gap: 12px; }
.dm-hero__badges li + li::before {
	content: '';
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--color-primary);
	margin-right: 12px;
}

.dm-hero__heading { display: block; text-shadow: var(--shadow-text-hero); }

.dm-hero__heading-main {
	display: block;
	font-size: clamp(30px, 5.47vw, 105px);
	line-height: 1;
	overflow-wrap: break-word;
	letter-spacing: -.02em;
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	color: var(--color-primary);
}

.dm-hero__heading-sub {
	display: block;
	font-size: clamp(17px, 3.125vw, 60px);
	line-height: 1.25;
	overflow-wrap: break-word;
	letter-spacing: -.02em;
	font-weight: var(--fw-medium);
	text-transform: uppercase;
	color: #fff;
}

.dm-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	margin-top: 6px;
}

.dm-hero__features {
	margin-top: auto;
	border-top: 1px solid var(--color-border-faint);
	padding-block: 22px;
	background: rgba(0, 0, 0, .35);
}
.dm-hero__features-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px;
}
.dm-hero__features-list li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: clamp(13px, .94vw, 18px);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
}
.dm-hero__feature-icon { width: 26px; height: 26px; color: var(--color-primary); flex: none; }
.dm-hero__feature-img { width: 26px; height: 26px; object-fit: contain; flex: none; }

/* ---------- Property damage / intro ---------- */
.dm-intro__inner {
	display: grid;
	grid-template-columns: minmax(0, 631px) minmax(0, 520px);
	gap: clamp(40px, 8vw, 150px);
	align-items: center;
	justify-content: space-between;
}
.dm-intro__lead {
	margin-top: 22px;
	font-size: clamp(15px, .94vw, 18px);
	font-weight: var(--fw-medium);
	color: var(--color-primary);
}
.dm-intro__body {
	margin-top: 14px;
	font-size: clamp(15px, .94vw, 18px);
	line-height: 1.62;
}
.dm-intro__body p + p { margin-top: 14px; }
.dm-intro .dm-textlink { margin-top: 26px; }
.dm-intro__img { border-radius: var(--radius-card); width: 100%; }

/* ---------- Services ---------- */
.dm-services__heading { text-align: center; margin-bottom: 56px; }

.dm-services__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-sm);
}

.dm-service-card {
	position: relative;
	background: var(--color-bg-card);
	border: 1px solid var(--color-border-card);
	border-radius: var(--radius-card);
	padding: 40px 45px;
	min-height: 305px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.dm-service-card--featured {
	border-color: var(--color-border-active);
	box-shadow: var(--shadow-card-active);
}
.dm-service-card:hover {
	border-color: var(--color-border-active);
	box-shadow: var(--shadow-card-active);
}

.dm-service-card__head { display: flex; align-items: center; gap: 20px; }
.dm-service-card__icon { width: 72px; height: 72px; flex: none; display: grid; place-items: center; color: var(--color-primary); }
.dm-service-card__icon-img { width: 72px; height: 72px; object-fit: contain; }
.dm-service-card__icon-fallback { width: 44px; height: 44px; }

.dm-service-card__title {
	font-size: clamp(17px, 1.15vw, 22px);
	line-height: 1.36;
	letter-spacing: -.02em;
	font-weight: var(--fw-bold);
	text-transform: uppercase;
}

.dm-service-card__text {
	font-size: clamp(14px, .94vw, 18px);
	line-height: 1.56;
	max-width: 46ch;
}

.dm-service-card__link { margin-top: auto; align-self: flex-start; }
/*
 * Whole-card click target ("stretched link"): the button's ::after covers the
 * card, which is already position:relative. Deliberately NOT an <a> wrapping
 * the card — that would nest a link inside a link and give screen readers two
 * targets for one destination. This way there is a single link, it keeps its
 * own focus ring and keyboard behaviour, and hovering anywhere on the card
 * still triggers .dm-service-card:hover because the overlay is a descendant.
 * Trade-off: the card's text is no longer selectable, which is expected when
 * the whole card is the link.
 */
.dm-service-card__link::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: var(--radius-card);
	/* Explicit, so hit-testing is deterministic rather than relying on
	   painted order against the non-positioned heading and paragraph. */
	z-index: 1;
}

/*
 * Cursor flicker on the card heading - do not remove without reading this.
 *
 * .dm-service-card__link also carries .dm-btn, and .dm-btn:hover applies
 * transform: translateY(-1px). A transform makes an element a containing block
 * for its absolutely positioned descendants. So the overlay above, which is
 * meant to resolve against .dm-service-card (position: relative), instead
 * collapsed onto the button the instant the link was hovered:
 *
 *   pointer enters overlay -> <a> matches :hover -> transform applied
 *     -> <a> becomes the containing block -> inset: 0 shrinks to the button
 *     -> pointer is no longer over the overlay -> :hover drops
 *     -> transform removed -> overlay expands back to the card -> repeat
 *
 * That ran once per frame, so the cursor alternated between pointer (over the
 * overlay) and text (over the h3 glyphs) - the visible flicker.
 *
 * The lift is dropped for this one button; the card already signals hover with
 * its border and glow (.dm-service-card:hover), so nothing is lost visually.
 * Specificity (0,3,0) beats .dm-btn:hover (0,2,0) regardless of source order.
 */
.dm-service-card .dm-service-card__link:hover,
.dm-service-card .dm-service-card__link:focus-visible {
	transform: none;
}

/*
 * The whole card is a single click target, so nothing inside it should offer an
 * I-beam or start a text selection drag.
 */
.dm-service-card,
.dm-service-card__head,
.dm-service-card__icon,
.dm-service-card__title,
.dm-service-card__text {
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}

.dm-services__actions {
	margin-top: var(--space-lg);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-sm);
}

/* ---------- Locations ---------- */
.dm-locations__inner {
	display: grid;
	grid-template-columns: minmax(0, 442px) minmax(0, 860px);
	gap: clamp(30px, 5vw, 90px);
	align-items: start;
	justify-content: space-between;
}
.dm-locations__text {
	margin-top: 18px;
	font-size: clamp(15px, .94vw, 18px);
	color: rgba(255, 255, 255, .8);
}
.dm-locations__intro .dm-btn { margin-top: 30px; }

.dm-locations__grid {
	display: grid;
	/*
	 * auto-fit, not a fixed 3: between ~1025 and 1400px three columns squeezed
	 * the cells until "Montgomery County" wrapped onto a second line, leaving a
	 * 75px row among 54px ones — the uneven gap. The grid now drops to two
	 * columns instead of squeezing, so every label keeps one line. 215px is the
	 * longest label plus the pill's icon, gap and padding.
	 */
	grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
	column-gap: var(--space-sm);
	row-gap: 18px;
}

.dm-location-pill__inner {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: var(--location-pill-height);
	padding: 14px 26px;
	background: var(--color-bg-card);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-md);
	font-size: clamp(14px, .90vw, 18px);
	font-weight: var(--fw-medium);
	text-transform: capitalize;
	transition: border-color .15s ease;
}
a.dm-location-pill__inner:hover { border-color: var(--color-primary); }
.dm-location-pill__icon { width: 18px; height: 18px; flex: none; color: var(--color-primary); }
/* Paired with the auto-fit track above, which guarantees the room for it. */
.dm-location-pill__inner span { white-space: nowrap; }

/* ---------- Process ---------- */
.dm-process__intro { text-align: center; max-width: 700px; margin-inline: auto; }
.dm-process__text { margin-top: 16px; font-size: clamp(15px, .94vw, 18px); color: rgba(255, 255, 255, .8); }

.dm-process__grid {
	margin-top: var(--space-2xl);
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: var(--space-sm);
	row-gap: 70px;
}

/* The card is a wrapper so the icon can overflow the body, which keeps
   overflow:hidden for the clipped number. */
.dm-step-card {
	position: relative;
	padding-top: 50px; /* half the 100px icon circle */
	display: flex;
	flex-direction: column;
}

.dm-step-card__icon {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	margin: 0;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: var(--color-bg-footer);
	border: 1px solid var(--color-border-faint);
	display: grid;
	place-items: center;
	color: var(--color-primary);
}
.dm-step-card__icon-svg { width: 44px; height: 44px; }
.dm-step-card__icon-img { width: 44px; height: 44px; object-fit: contain; }

.dm-step-card__body {
	flex: 1;
	background: var(--color-bg-card-alt);
	border: 1px solid var(--color-border-faint);
	border-radius: var(--radius-card);
	padding: 80px 30px 96px;
	min-height: 340px;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}

.dm-step-card__title {
	font-size: clamp(19px, 1.35vw, 26px);
	font-weight: var(--fw-semibold);
	color: var(--color-primary);
}
.dm-step-card__title::after {
	content: '';
	display: block;
	margin: 16px auto 0;
	height: 1px;
	width: min(230px, 90%);
	background: linear-gradient(90deg, transparent, rgba(255, 143, 8, .65), transparent);
}
.dm-step-card__text { font-size: clamp(14px, .94vw, 18px); line-height: 1.55; }

.dm-step-card__number {
	position: absolute;
	bottom: -16px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 96px;
	font-weight: var(--fw-semibold);
	line-height: 1;
	background: linear-gradient(180deg, rgba(255, 255, 255, .32) 0%, rgba(255, 255, 255, 0) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	pointer-events: none;
}

/* ---------- Features bar ---------- */
.dm-features-bar {
	margin-top: 22px;
	background: var(--color-bg-card);
	border: 1px solid rgba(255, 143, 8, .2);
	border-radius: var(--radius-base);
	box-shadow: var(--shadow-features-bar);
	padding: 34px clamp(24px, 6.25vw, 120px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.dm-features-bar__block { display: flex; align-items: center; gap: 16px; }
.dm-features-bar__icon {
	width: 56px;
	height: 56px;
	padding: 14px;
	border: 1px solid rgba(255, 255, 255, .85);
	border-radius: 50%;
	color: #fff;
	flex: none;
}
.dm-features-bar__title { font-size: clamp(16px, 1.04vw, 20px); font-weight: var(--fw-semibold); }
.dm-features-bar__text { font-size: 14px; color: rgba(255, 255, 255, .75); }
.dm-features-bar__phone {
	font-size: clamp(20px, 1.56vw, 30px);
	font-weight: var(--fw-bold);
	color: var(--color-primary);
}

/* ---------- Testimonials ---------- */
.dm-testimonials__heading {
	text-align: center;
	margin-bottom: var(--space-xl);
}

.dm-testimonials__stage {
	display: flex;
	align-items: center;
	gap: clamp(10px, 1.8vw, 29px);
}
.dm-testimonials__stage .dm-carousel-btn { flex: none; }

.dm-testimonials__viewport { overflow: hidden; flex: 1; min-width: 0; }
.dm-testimonials__track {
	display: flex;
	gap: 42px;
	transition: transform .35s ease;
}
.dm-testimonial-card {
	flex: 0 0 calc((100% - 42px) / 2);
	margin: 0;
	background: transparent;
	border: 1px solid var(--color-border-card);
	border-radius: var(--radius-card);
	padding: 40px 40px 42px;
	min-height: 284px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 26px;
}
.dm-testimonial-card { transition: border-color .2s ease, box-shadow .2s ease; }
.dm-testimonial-card:hover { box-shadow: var(--shadow-card-active); } /* card accent glow (§1.5) */

.dm-testimonial-card__quote {
	margin: 0;
	font-size: clamp(16px, 1.15vw, 22px);
	line-height: 1.55;
}
.dm-testimonial-card__meta { display: flex; align-items: center; gap: 14px; }
.dm-testimonial-card__avatar {
	width: 46px; height: 46px;
	border-radius: 50%;
	background: var(--color-primary);
	color: var(--color-text-on-light);
	display: grid;
	place-items: center;
	font-weight: var(--fw-semibold);
	font-size: 15px;
	overflow: hidden;
	flex: none;
}
.dm-testimonial-card__avatar-img { width: 100%; height: 100%; object-fit: cover; }
.dm-testimonial-card__name { font-size: clamp(16px, 1.15vw, 22px); font-weight: var(--fw-semibold); }
.dm-testimonial-card__role { display: block; font-size: 14px; font-weight: var(--fw-regular); color: var(--color-text-muted); }

.dm-testimonials__foot { margin-top: 44px; text-align: center; }

/* ---------- Before / After ---------- */
.dm-ba { background: var(--color-bg-dark); }
.dm-ba__head { text-align: center; max-width: 780px; margin-inline: auto; }
.dm-ba__text { margin-top: 14px; font-size: clamp(15px, .94vw, 18px); color: rgba(255, 255, 255, .8); }

.dm-ba__filters {
	margin-top: 40px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}
.dm-ba__filter {
	min-width: 160px;
	min-height: var(--tab-height);
	padding: 10px 22px;
	border-radius: var(--radius-base);
	border: 1px solid #fff;
	background: transparent;
	color: #fff;
	font-size: clamp(15px, 1.04vw, 20px);
	font-weight: var(--fw-medium);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.dm-ba__filter.is-active {
	background: #fff;
	color: var(--color-primary);
	font-weight: var(--fw-semibold);
}

.dm-ba__stage {
	margin-top: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(12px, 2vw, 30px);
}
.dm-ba__items { flex: 1; max-width: 1000px; }
.dm-ba__item { display: none; margin: 0; }
.dm-ba__item.is-active { display: block; }

.dm-ba__compare {
	position: relative;
	width: 100%;
	aspect-ratio: 1000 / 400;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: #000;
}
.dm-ba__layer { position: absolute; inset: 0; }
.dm-ba__layer--after { clip-path: inset(0 0 0 var(--dm-ba-pos)); }
.dm-ba__img { width: 100%; height: 100%; object-fit: cover; }

.dm-ba__tag {
	position: absolute;
	bottom: 16px;
	padding: 6px 14px;
	background: #fff;
	color: var(--color-primary);
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-weight: var(--fw-medium);
}
.dm-ba__tag--before { left: 16px; }
.dm-ba__tag--after { right: 16px; }

.dm-ba__divider {
	position: absolute;
	top: 0; bottom: 0;
	left: var(--dm-ba-pos);
	width: 4px;
	background: #fff;
	transform: translateX(-2px);
	pointer-events: none;
	display: grid;
	place-items: center;
}
.dm-ba__handle {
	width: 40px; height: 40px;
	border-radius: 50%;
	background: #fff;
	color: var(--color-primary);
	display: grid;
	place-items: center;
}
.dm-ba__handle svg { width: 22px; height: 22px; }

.dm-ba__range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
	appearance: none;
	background: transparent;
}
.dm-ba__range:focus-visible { opacity: .001; }
.dm-ba__compare:focus-within .dm-ba__handle { box-shadow: var(--focus-ring); }

.dm-ba__label { margin-top: 18px; text-align: center; font-size: 16px; color: rgba(255, 255, 255, .8); }
.dm-ba__foot { margin-top: 44px; text-align: center; }

/* ---------- CTA banner ---------- */
.dm-banner {
	position: relative;
	overflow: hidden;
	background: var(--color-primary);
	border-radius: var(--radius-card);
	min-height: 348px;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(24px, 3vw, 56px);
	padding: 44px clamp(28px, 3.6vw, 70px);
	color: var(--color-text-on-light);
	margin-top: 50px;
}
/*
 * The inner-page banner carries no flanking images. Without this it would keep
 * the homepage's three-column track, so the copy would sit in the first column
 * with the other two left empty beside it.
 */
.dm-banner--solo {
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}
.dm-banner--solo .dm-banner__content {
	max-width: 900px;
	margin-inline: auto;
}

.dm-banner__content { text-align: center; }
.dm-banner__heading {
	font-size: clamp(28px, 2.6vw, 50px);
	line-height: 1.15;
	font-weight: var(--fw-bold);
	color: var(--color-text-on-light);
}
.dm-banner__text {
	margin-top: 12px;
	font-size: clamp(17px, 1.35vw, 26px);
	color: #000;
}
.dm-banner__actions {
	margin-top: 30px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}
.dm-banner__media {
	margin: 0;
	width: clamp(180px, 13vw, 250px);
	aspect-ratio: 4 / 5;
}
.dm-banner__img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); }
/*
 * Desktop stagger (Figma reference): the right image bleeds to the banner's top
 * edge while the left one drops toward the bottom, so the pair frames the copy
 * diagonally instead of sitting level. The 44px offsets mirror the banner's own
 * vertical padding above; both images are hidden below 1200px.
 */
.dm-banner__media--left { align-self: end; margin-bottom: -44px; }
.dm-banner__media--right {
	align-self: start;
	margin-top: -44px; /* cancels the banner's top padding, so it meets the edge */
	aspect-ratio: 4 / 5.6; /* a little taller than its partner, per the reference */
}


/* ---------- Latest blogs ---------- */
.dm-blogs__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	margin-bottom: var(--space-3xl);
}
.dm-blogs__aside { max-width: 420px; text-align: right; }
.dm-blogs__text { font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, .8); }
.dm-blogs__aside .dm-textlink { margin-top: 12px; font-size: 14px; }

.dm-blogs__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 52px;
}
.dm-blog-card { display: flex; flex-direction: column; gap: var(--space-md); }
.dm-blog-card__media {
	display: block;
	border-radius: var(--radius-lg);
	overflow: hidden;
	aspect-ratio: 431 / 269;
	background: #0d0d0d;
}
.dm-blog-card__img { width: 100%; height: 100%; object-fit: cover; }
.dm-blog-card__placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #202020, #0d0d0d); }
.dm-blog-card__date { font-size: 14px; font-weight: var(--fw-medium); color: rgba(255, 255, 255, .75); }
.dm-blog-card__title {
	font-size: clamp(18px, 1.25vw, 24px);
	line-height: 1.33;
	letter-spacing: -.02em;
	font-weight: var(--fw-semibold);
}
.dm-blog-card__title a:hover { color: var(--color-primary); }

/* ---------- Contact ---------- */
.dm-contact__heading { text-align: center; margin-bottom: var(--space-3xl); }
.dm-contact__panel {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-card);
	isolation: isolate;
	min-height: 565px;
	display: flex;
	align-items: center;
}
.dm-contact__bg { position: absolute; inset: 0; z-index: -2; }
.dm-contact__bg-img { width: 100%; height: 100%; object-fit: cover; }
.dm-contact__panel::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(0, 0, 0, .78);
}
.dm-contact__grid {
	width: 100%;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
	gap: clamp(30px, 5vw, 80px);
	align-items: center;
	padding: clamp(30px, 4vw, 70px);
}
.dm-contact__aside-heading {
	font-size: clamp(24px, 2.08vw, 40px);
	line-height: 1.2;
	font-weight: var(--fw-bold);
	text-transform: uppercase;
}
.dm-contact__aside-text { margin-top: 16px; font-size: clamp(15px, 1.15vw, 22px); line-height: 1.5; color: rgba(255, 255, 255, .85); }
.dm-contact__form-intro { margin-bottom: 20px; font-size: 14px; color: rgba(255, 255, 255, .85); }

/* Contact Form 7 output — styling only, no markup or behaviour changes. */
.dm-contact__form .wpcf7-form p { margin: 0 0 14px; }
.dm-contact__form input[type="text"],
.dm-contact__form input[type="email"],
.dm-contact__form input[type="tel"],
.dm-contact__form input[type="url"],
.dm-contact__form input[type="number"],
.dm-contact__form textarea,
.dm-contact__form select {
	width: 100%;
	min-height: var(--input-height);
	padding: 16px 20px 13px;
	background: var(--color-bg-input);
	border: 1px solid var(--color-border-input);
	border-radius: var(--radius-base);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
}
.dm-contact__form textarea { min-height: var(--input-textarea-height); resize: vertical; }
.dm-contact__form ::placeholder { color: rgba(255, 255, 255, .7); }
.dm-contact__form input:focus-visible,
.dm-contact__form textarea:focus-visible { box-shadow: var(--focus-ring); border-color: var(--color-primary); }

.dm-contact__form input[type="submit"] {
	width: auto;
	min-height: var(--btn-primary-height);
	padding: 14px 34px;
	background: var(--color-primary);
	border: 0;
	border-radius: var(--radius-pill);
	color: #fff;
	font-size: 18px;
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	cursor: pointer;
}
.dm-contact__form input[type="submit"]:hover { filter: brightness(1.06); }

.dm-contact__form .wpcf7-not-valid-tip { color: #ffb4a2; font-size: 13px; margin-top: 6px; }
.dm-contact__form .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 12px 16px;
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border-input);
	font-size: 14px;
}

/* ---------- Form component ---------- */
/*
 * Shared by every section that renders a Contact Form 7 form. The markup is
 * reshaped by inc/cf7-styling.php at render time — the form definition, field
 * names and submissions are untouched.
 */
.dm-form .wpcf7-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}
.dm-form .dm-form__field { display: block; }
.dm-form .dm-form__field--half { grid-column: span 1; }
.dm-form .dm-form__field--full,
.dm-form .dm-form__submit,
.dm-form .wpcf7-response-output { grid-column: 1 / -1; }

.dm-form input[type="text"],
.dm-form input[type="email"],
.dm-form input[type="tel"],
.dm-form input[type="url"],
.dm-form input[type="number"],
.dm-form textarea,
.dm-form select {
	width: 100%;
	min-height: var(--input-height);
	padding: 14px 18px;
	background: var(--color-bg-input);
	border: 1px solid var(--color-border-input);
	border-radius: var(--radius-base);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
}
/* Height, not min-height: CF7 prints rows="10", which min-height cannot undo. */
.dm-form textarea { height: 118px; min-height: 118px; resize: vertical; }
.dm-form ::placeholder { color: rgba(255, 255, 255, .55); opacity: 1; }
.dm-form input:focus-visible,
.dm-form textarea:focus-visible { box-shadow: var(--focus-ring); border-color: var(--color-primary); }

.dm-form .dm-form__submit {
	width: 100%;
	min-height: var(--btn-primary-height);
	margin-top: 6px;
	padding: 14px 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: var(--color-primary);
	border: 0;
	border-radius: var(--radius-base);
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: var(--fw-semibold);
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
}
.dm-form .dm-form__submit::after {
	content: '';
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.dm-form .dm-form__submit:hover { filter: brightness(1.06); }

.dm-form .wpcf7-not-valid-tip { color: #ffb4a2; font-size: 13px; margin-top: 6px; }
.dm-form .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 12px 16px;
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border-input);
	font-size: 14px;
}


/* A visible label, kept when the field is a radio or checkbox group. */
.dm-form .dm-form__label {
	display: block;
	margin-bottom: 8px;
	font-size: 15px;
	color: rgba(255, 255, 255, .85);
}
.dm-form .wpcf7-radio,
.dm-form .wpcf7-checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
}
.dm-form .wpcf7-list-item { margin: 0; }
.dm-form .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}
.dm-form .wpcf7-list-item input { accent-color: var(--color-primary); }

@media (max-width: 480px) {
	.dm-form .dm-form__field--half { grid-column: 1 / -1; }
}

/* ---------- Form panel ---------- */
.dm-formpanel__head { text-align: center; max-width: 760px; margin-inline: auto; }
.dm-formpanel__text {
	margin-top: 12px;
	font-size: clamp(15px, 1.1vw, 20px);
	color: rgba(255, 255, 255, .8);
}
.dm-formpanel__card {
	margin-top: clamp(26px, 2.6vw, 44px);
	margin-inline: auto;
	max-width: 860px;
	padding: clamp(22px, 2.6vw, 48px);
	border: 1px solid var(--color-border-faint);
	border-radius: var(--radius-card);
	background: var(--color-bg-card-alt);
}
.dm-formpanel__notice { color: rgba(255, 255, 255, .8); }

/* Split: the copy sits beside the form instead of above it — used by the
   conversion pages, where the form is the point of the page. */
.dm-formpanel--split .dm-formpanel__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 54%);
	gap: clamp(28px, 3.5vw, 70px);
	align-items: center;
}
.dm-formpanel--split .dm-formpanel__head {
	text-align: left;
	max-width: none;
	margin-inline: 0;
}
.dm-formpanel--split .dm-formpanel__card {
	margin-top: 0;
	max-width: none;
	box-shadow: var(--shadow-card-active); /* card accent glow (§1.5) */
}

/* Framed: heading above one bordered card holding the media and the form, the
   treatment the homepage contact panel uses. */
.dm-formpanel--framed .dm-formpanel__head { margin-bottom: clamp(26px, 2.6vw, 44px); }
.dm-formpanel__frame {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
	align-items: stretch;
	border: 1px solid var(--color-border-faint);
	border-radius: var(--radius-card);
	overflow: hidden;
	/* Card accent glow (§1.5) — on the frame, which clips its children. */
	box-shadow: var(--shadow-card-active);
}
.dm-formpanel--framed .dm-formpanel__media { display: flex; min-height: 420px; }
.dm-formpanel--framed .dm-formpanel__card {
	margin: 0;
	max-width: none;
	border: 0;
	border-radius: 0;
	background: var(--color-bg-page);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

@media (max-width: 900px) {
	.dm-formpanel--split .dm-formpanel__inner { grid-template-columns: minmax(0, 1fr); }

	.dm-formpanel__frame { grid-template-columns: minmax(0, 1fr); }
	.dm-formpanel--framed .dm-formpanel__card { order: -1; }
	.dm-formpanel--framed .dm-formpanel__media { min-height: 300px; }
}

/* ---------- Footer ---------- */
.dm-footer { background: var(--color-bg-footer); padding-block: 48px; }
.dm-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 278px) minmax(0, 977px);
	gap: clamp(40px, 9.4vw, 181px);
	justify-content: space-between;
}
.dm-footer__logo-img { max-height: 64px; width: auto; }
.dm-footer__text { margin-top: var(--space-md); font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, .8); }

.dm-footer__social { margin-top: 24px; display: flex; gap: 12px; }
.dm-footer__social a {
	width: 36px; height: 36px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid var(--color-border-default);
	font-size: 14px;
	font-weight: var(--fw-semibold);
}
.dm-footer__social a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.dm-footer__social-img { width: 18px; height: 18px; object-fit: contain; }

.dm-footer__cols {
	display: grid;
	/*
	 * The service-areas column is sized to its content instead of taking a
	 * rigid third: two equal thirds left it at 279px while its two sub-columns
	 * needed 310px, so "Montgomery County" wrapped onto a second line and
	 * pushed the row below it out of alignment. The other two columns absorb
	 * the difference.
	 */
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	gap: var(--space-xl);
}
.dm-footer__heading {
	font-size: clamp(16px, 1.04vw, 20px);
	line-height: 30px;
	font-weight: var(--fw-medium);
	text-transform: uppercase;
	margin-bottom: 18px;
}
.dm-footer__links li + li { margin-top: 10px; }
.dm-footer__links a { font-size: 14px; color: rgba(255, 255, 255, .82); }
.dm-footer__links a:hover { color: var(--color-primary); }
/* max-content + nowrap: each sub-column takes exactly the width of its longest
   place name, which is what the auto track above is measured against. */
.dm-footer__links--two-col { display: grid; grid-template-columns: repeat(2, max-content); gap: 10px 20px; }
.dm-footer__links--two-col li + li { margin-top: 0; }
.dm-footer__links--two-col a { white-space: nowrap; }

.dm-footer__contact li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.dm-footer__contact li + li { margin-top: 14px; }
/* The email address is one unbreakable token; without this it forces the page
   past the viewport at narrow tablet widths (~769px). */
.dm-footer__contact a { min-width: 0; overflow-wrap: anywhere; }
.dm-footer__icon { width: 18px; height: 18px; color: var(--color-primary); flex: none; margin-top: 3px; }
.dm-footer__address { font-style: normal; }

.dm-footer__bottom {
	margin-top: var(--space-lg);
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, .35);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	font-size: 14px;
	color: rgba(255, 255, 255, .8);
}
.dm-footer__legal-links { display: flex; gap: 22px; }
.dm-footer__legal-links a:hover { color: var(--color-primary); }

/* ---------- Fallback template ---------- */
.dm-fallback { padding-block: 60px 80px; }
.dm-fallback__title { font-size: clamp(28px, 2.86vw, 55px); line-height: 1.15; margin-bottom: 26px; }
.dm-fallback__content { max-width: 80ch; }
.dm-fallback__content p { margin-bottom: 16px; }
.dm-fallback__content h2 { font-size: 30px; margin: 32px 0 12px; }
.dm-fallback__content h3 { font-size: 24px; margin: 26px 0 10px; }
.dm-fallback__content a { color: var(--color-primary); text-decoration: underline; }
.dm-fallback__content ul { list-style: disc; padding-left: 22px; margin-bottom: 16px; }
.dm-fallback__content li { margin-bottom: 8px; }
.dm-fallback__list li { padding: 14px 0; border-bottom: 1px solid var(--color-border-faint); }
.dm-fallback__list a { font-size: 20px; font-weight: var(--fw-semibold); }
.dm-fallback__list time { display: block; font-size: 14px; color: var(--color-text-muted); }
.dm-fallback__thumb { margin: 0 0 24px; }
.dm-fallback__thumb img { border-radius: var(--radius-card); }

/* =============================================================
   RESPONSIVE
   No tablet/mobile designs exist (design-system.md §5, §13.1).
   These are conservative implementation decisions: stack, preserve
   order, keep hierarchy. They are not design specifications.
   ============================================================= */

@media (max-width: 1400px) {
	.dm-header__burger { display: inline-flex; }
	.dm-header__panel {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		flex-direction: column;
		align-items: stretch;
		/* The desktop rule aligns to flex-end. In a scrollable column that pushes
		   overflow past the TOP edge, where it cannot be scrolled back into
		   view, so the list has to start at the top here. */
		justify-content: flex-start;
		gap: 18px;
		padding: 20px var(--container-pad) 28px;
		background: var(--color-bg-footer);
		border-top: 1px solid var(--color-border-faint);
		max-height: calc(100vh - var(--header-height));
		overflow-y: auto;
	}
	.dm-header__panel.is-open { display: flex; }
	.dm-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	/* The list items are flex rows so the label and its chevron sit inline. The
	   submenu is a third child of that row, so it must be allowed to wrap onto
	   its own full-width line — otherwise the children render beside the parent
	   instead of underneath it. */
	.dm-nav__list > li,
	.dm-nav__submenu li {
		flex-wrap: wrap;
		align-items: center;
	}
	.dm-nav__link { flex: 1 1 auto; padding: 14px 0; justify-content: space-between; }
	.dm-nav__toggle--adjacent { flex: none; padding: 14px 0 14px 10px; }
	.dm-nav__list > li { border-bottom: 1px solid var(--color-border-faint); }
	.dm-nav__submenu {
		position: static;
		flex: 0 0 100%;
		width: 100%;
		min-width: 0;
		border: 0;
		background: transparent;
		padding: 0 0 10px 14px;
	}
	.dm-nav__submenu .dm-nav__submenu { left: 0; }
	.dm-nav__list li:hover > .dm-nav__submenu { display: none; }
	.dm-nav__list li.is-open > .dm-nav__submenu { display: block; }

	/* Logo hugs the left; the CTAs and toggle group together on the right. */
	.dm-header__inner { justify-content: flex-start; }

	.dm-header__actions {
		flex-direction: row;
		align-items: center;
		gap: 12px;
		margin-left: auto;
	}

	/* Call button condenses to an orange circle with just the phone icon. */
	.dm-header__phone {
		width: 46px;
		height: 46px;
		padding: 0;
		flex: none;
		justify-content: center;
		border-radius: 50%;
		background: var(--color-primary);
		color: #fff;
	}
	/*
	 * Visually hidden, NOT display:none: the number must stay in the
	 * accessibility tree or the icon-only circle becomes a nameless link
	 * (axe: "links must have discernible text"). Same clip pattern as
	 * .screen-reader-text.
	 */
	.dm-header__phone span {
		position: absolute !important;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}
	.dm-header__phone-icon { width: 22px; height: 22px; }
}

/* Between the widest desktop and the 1400 collapse the full nav is tight, so
   spacing and type step down just enough for nine items plus the CTAs to fit. */
@media (max-width: 1600px) {
	.dm-header__inner { gap: 10px; }
	/* Roomier than the original clamp(4px,.5vw,12px); verified to still fit at
	   1401px, the narrowest width before the burger takes over. */
	.dm-nav__list { gap: clamp(8px, .9vw, 20px); }
	.dm-nav__link { font-size: 15px; padding-inline: 0; }
	.dm-nav__chevron { width: 12px; height: 12px; }
	.dm-header__actions { gap: 10px; }
	.dm-header__phone { font-size: 17px; gap: 6px; }
	.dm-header__phone-icon { width: 18px; height: 18px; }
	.dm-btn--nav { font-size: 15px; padding: 7px 8px 7px 14px; }
	.dm-btn--nav .dm-btn__icon { width: 24px; height: 24px; padding: 6px; }
}

/* Below 1400 the nav collapses into the toggle. The bar becomes:
   logo (left) … call circle · Free Estimate · toggle (right). */
@media (max-width: 1200px) {
	.dm-services__grid { gap: 16px; }
	.dm-process__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dm-blogs__grid { gap: 32px; }
	.dm-banner { grid-template-columns: minmax(0, 1fr); }
	.dm-banner__media { display: none; } /* decorative flanking images */
}

@media (max-width: 1024px) {
	.dm-locations__inner { grid-template-columns: minmax(0, 1fr); }
	.dm-locations__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dm-contact__grid { grid-template-columns: minmax(0, 1fr); }
	.dm-testimonial-card { flex: 0 0 100%; }
	.dm-footer__top { grid-template-columns: minmax(0, 1fr); }
	.dm-blogs__head { flex-direction: column; align-items: flex-start; }
	.dm-blogs__aside { text-align: left; }
}

@media (max-width: 768px) {
	.dm-hero { min-height: 0; padding-top: calc(var(--header-height) + 20px); }
	.dm-hero__inner { gap: 20px; }
	.dm-hero__features-list { justify-content: flex-start; gap: 14px; }

	.dm-services__grid { grid-template-columns: minmax(0, 1fr); }
	.dm-service-card { padding: 28px 24px; min-height: 0; }

	.dm-process__grid { grid-template-columns: minmax(0, 1fr); }
	.dm-step-card__body { min-height: 0; padding: 72px 22px 80px; }

	.dm-blogs__grid { grid-template-columns: minmax(0, 1fr); }
	.dm-testimonials__stage { gap: 8px; }
	.dm-testimonials__stage .dm-carousel-btn { width: 44px; height: 44px; }

	.dm-ba__stage { flex-direction: column; }
	.dm-ba__nav { order: 2; }
	.dm-ba__filter { min-width: 0; flex: 1 1 auto; }

	.dm-footer__cols { grid-template-columns: minmax(0, 1fr); }
	.dm-footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
	.dm-header__logo img, .dm-header__brand img, .dm-header__brand .custom-logo{
		max-height: 45px;
	}
	/* The actions stay: only the Free Estimate pill drops, leaving the orange
	   call circle beside the burger. */
	.dm-header__actions .dm-btn--nav{
		display: none;
	}
	.dm-hero__heading-main { font-size: clamp(28px, 8.5vw, 44px); }
	.dm-hero__heading-sub { font-size: clamp(16px, 4.6vw, 24px); }
	.dm-locations__grid { grid-template-columns: minmax(0, 1fr); }
	.dm-hero__badges { flex-direction: column; align-items: center; gap: 8px; }
	.dm-hero__badges li + li::before { display: none; }
	/*
	 * Buttons on phones: one width so stacked actions line up as a column, and a
	 * step down in type. Sizes are set per variant rather than on .dm-btn so each
	 * one genuinely shrinks — a single shared value would have made the smaller
	 * outline buttons larger.
	 */
	.dm-btn { width: 100%; }
	.dm-btn--primary,
	.dm-btn--ghost { font-size: 14px; }
	.dm-btn--white,
	.dm-btn--dark,
	.dm-btn--dark-outline,
	.dm-btn--orange,
	.dm-btn--call { font-size: 16px; }
	.dm-btn--outline { font-size: 13px; }

	/* Tighter inner padding on the CTA banner. */
	.dm-banner { padding: 28px 18px; }

	.dm-features-bar { padding: 24px; }

	/*
	 * Intro stays two-up from tablet onwards; only phones stack it, with the
	 * photograph leading. Was collapsing at 1024, which flattened tablets too.
	 */
	.dm-intro__inner { grid-template-columns: minmax(0, 1fr); }
	.dm-intro__media { order: -1; }

	/*
	 * Testimonials on phones: the arrows leave the flex row and sit on the card's
	 * left and right edges, so the viewport — and with it the card — takes the
	 * full container width instead of losing ~100px to two buttons and their
	 * gaps. The buttons are siblings of the viewport, not children, so its
	 * overflow: hidden never clips them; the stage is the positioning context.
	 */
	.dm-testimonials__stage {
		display: block;
		position: relative;
	}
	.dm-testimonials__viewport { width: 100%; }
	.dm-testimonials__stage .dm-carousel-btn {
		position: absolute;
		top: 50%;
		z-index: 2;
		width: 40px;
		height: 40px;
		transform: translateY(-50%);
		/* Opaque so the button stays legible where it laps over the card. */
		background: var(--color-bg-page);
	}
	.dm-testimonials__stage .dm-carousel-btn:hover { background: rgba(255, 255, 255, .08); }
	.dm-testimonials__stage .dm-carousel-btn svg { width: 17px; height: 17px; }
	/*
	 * -18px of a 40px button: 22px laps onto the card, 18px sits in the 20px
	 * container gutter — so the whole target stays on screen down to 320px.
	 */
	.dm-testimonials__stage [data-dm-carousel-prev] { left: -18px; }
	.dm-testimonials__stage [data-dm-carousel-next] { right: -18px; }

	/* Matches the overlap, so the arrows rest against the text rather than on it. */
	.dm-testimonial-card {
		padding: 26px 22px 28px;
		min-height: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}