/* =============================================================
   Homepage-only sections (front-page.php). Loaded ONLY on the
   front page via inc/enqueue.php. Global tokens/components
   live in main.css.
   ============================================================= */

/* ---------- Hero ---------- */
.dm-hero {
	position: relative;
	min-height: 717px;
	/*
	 * No padding-top: it would offset the content from the true centre of the
	 * band. The minimum breathing room comes from .dm-hero__inner's own
	 * padding-block, which is symmetrical.
	 */
	padding-top: 0;
	padding-bottom: 0;
	display: flex;
	flex-direction: column;
	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;
	/*
	 * Fills the band above the features bar and centres its own content there.
	 * justify-content on .dm-hero could not do this: the features bar carries
	 * margin-top:auto, which swallows all the free space and pinned the content
	 * to the top (measured 40px above vs 241px below).
	 */
	flex: 1;
	justify-content: 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%; }

/* ---------- Before / After ---------- */
/*
 * This section follows another .dm-section, so the adjacent-sibling rule zeroes
 * its top padding. Restored deliberately — .dm-section.dm-ba matches that rule's
 * specificity and wins on order. ~70px desktop, 30px mobile.
 */
.dm-section.dm-ba { padding-top: clamp(30px, 4.5vw, 70px); }
.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 rgba(255, 255, 255, 0.3);
	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: rgba(255, 255, 255, 0.1);
	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;
	transform: translateX(-18px);
}
.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; }

/* ---------- Contact ---------- */
.dm-contact__heading { text-align: center; margin-bottom: clamp(24px, 3vw, 52px); }
/*
 * No padding or gap: the photograph runs to the card's edges. The dark
 * background belongs to the form side only, so it is set on the form panel and
 * the card itself stays transparent.
 */
.dm-contact__panel {
	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) — the whole card carries it, since the panel clips
	   its children and a glow on the form half alone would be cut off. */
	box-shadow: var(--shadow-card-active);
}

/* Photograph side: the message sits over its lower edge. */
.dm-contact__media {
	position: relative;
	min-height: 420px;
}
.dm-contact__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.dm-contact__overlay {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: clamp(20px, 2.2vw, 40px);
	background: linear-gradient(to top, rgba(0, 0, 0, .85) 10%, rgba(0, 0, 0, .55) 55%, transparent);
}
.dm-contact__aside-heading {
	font-size: clamp(20px, 1.8vw, 34px);
	line-height: 1.2;
	font-weight: var(--fw-bold);
	text-transform: uppercase;
}
.dm-contact__aside-text {
	margin-top: 10px;
	font-size: clamp(14px, 1vw, 18px);
	line-height: 1.45;
	color: rgba(255, 255, 255, .85);
}

/* Form side. */
.dm-contact__form {
	padding: clamp(22px, 2.4vw, 44px);
	background: var(--color-bg-page);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.dm-contact__form-intro {
	margin-bottom: 22px;
	text-align: center;
	font-size: clamp(15px, 1.1vw, 20px);
	line-height: 1.35;
	color: #fff;
}

@media (max-width: 900px) {
	/* Form first, photograph below it. */
	.dm-contact__panel { grid-template-columns: minmax(0, 1fr); }
	.dm-contact__form { order: -1; }
	.dm-contact__media { min-height: 320px; }
}

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

.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; }

/* ---------- 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;
}

@media (max-width: 1200px) {
	.dm-blogs__grid { gap: 32px; }
	.dm-banner { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1024px) {
	.dm-locations__inner { grid-template-columns: minmax(0, 1fr); }
	.dm-contact__grid { 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-blogs__grid { grid-template-columns: minmax(0, 1fr); }
	.dm-ba__stage { flex-direction: column; }
	.dm-ba__nav { order: 2; }
	.dm-ba__filter { min-width: 0; flex: 1 1 auto; }
}

@media (max-width: 560px) {
	.dm-hero__heading-main { font-size: clamp(28px, 8.5vw, 44px); }
	.dm-hero__heading-sub { font-size: clamp(16px, 4.6vw, 24px); }
	.dm-hero__badges { flex-direction: column; align-items: center; gap: 8px; }
	.dm-hero__badges li + li::before { display: none; }
	.dm-hero__actions .dm-btn { width: 100%; }

	/*
	 * 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; }

	/*
	 * Before / after on phones. The tabs run one per row at full width: sharing a
	 * row left them at 142px next to 194px next to a stray full-width pair, which
	 * is the uneven gap the flex-wrap version produced with these labels.
	 */
	.dm-ba__filters { margin-top: 28px; gap: 10px; }
	.dm-ba__filter {
		flex: 1 1 100%;
		width: 100%;
		padding: 12px 18px;
	}

	/*
	 * Grid rather than a flex column so the two arrows share one row under the
	 * slider instead of stacking. They meet at the centre line, column-gap apart.
	 */
	.dm-ba__stage {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"items items"
			"prev  next";
		column-gap: 14px;
		row-gap: 22px;
	}
	.dm-ba__items { grid-area: items; width: 100%; }
	.dm-ba__nav--prev { grid-area: prev; justify-self: end; }
	.dm-ba__nav--next { grid-area: next; justify-self: start; }
	.dm-ba__nav { width: 44px; height: 44px; }
	.dm-ba__nav svg { width: 17px; height: 17px; }
}