/*
 * Mobile Detail Doctor — ATELIER design layer
 *
 * Adapted from mockup concept 2 (Atelier) with brand-blue accents from
 * concept 3. Sits on top of main.css + main-spice.css and supersedes the
 * earlier "vibrant" pack (file name retained for enqueue stability).
 *
 * Design language:
 *   - Studio minimalism: pure white + off-white + ink + ONE accent (brand blue)
 *   - Hairline rules everywhere — 1px dividers instead of decorative borders
 *   - Generous whitespace — sections breathe at 120–160px vertical padding
 *   - Extreme weight contrast in display headings: Inter 200 thin alongside
 *     800 bold (the <em> inside headings carries the heavy weight + blue)
 *   - Gold (#d4a017) is removed entirely from accent positions; brand blue
 *     becomes the single accent
 *   - Numbered details (01, 02, ...) render small + mono-feeling, not as
 *     decorative giant background numerals
 *
 * No structural changes — only visual styling layered on existing classes.
 */

/* =========================================================================
   0. TOKENS — Atelier palette override
   ========================================================================= */
:root {
	--mdd-ink: #0A0E14;
	--mdd-ink-soft: #1A2030;
	--mdd-paper: #FFFFFF;
	--mdd-paper-warm: #FAFAFA;
	--mdd-paper-cool: #F5F7FA;
	--mdd-hairline: rgba(10, 14, 20, 0.08);
	--mdd-hairline-strong: rgba(10, 14, 20, 0.16);
	--mdd-line: rgba(10, 14, 20, 0.08);
	--mdd-border: rgba(10, 14, 20, 0.08);
	--mdd-muted: #5A6677;
	--mdd-ink-mute: #6B7785;
	--mdd-blue: #1490DD;
	--mdd-blue-deep: #0E6BA8;
	--mdd-blue-bright: #3FA8E8;
	--mdd-blue-soft: rgba(20, 144, 221, 0.08);
	--mdd-blue-line: rgba(20, 144, 221, 0.25);
	--mdd-atelier-pad: clamp(80px, 9vw, 140px);
}

/* =========================================================================
   1. GLOBALS — refined typography
   ========================================================================= */
html { scroll-behavior: smooth; }
body {
	background: var(--mdd-paper);
	color: var(--mdd-ink);
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-feature-settings: 'ss01', 'cv11';
	-webkit-font-smoothing: antialiased;
}
a {
	color: var(--mdd-ink);
	text-decoration: none;
}
a:hover, a:focus { color: var(--mdd-blue); }

/* All headings: light by default. Where <em> appears, em carries the
   heavy weight + brand-blue accent. Where no em, the heading sits at a
   refined medium weight that still reads as a confident display. */
h1, h2, h3, h4, h5, h6 {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--mdd-ink);
}
h1 em, h2 em, h3 em, h4 em {
	font-style: normal;
	font-weight: 800;
	color: var(--mdd-blue);
	background: none !important;
	-webkit-text-fill-color: var(--mdd-blue) !important;
	text-shadow: none !important;
}

/* =========================================================================
   2. CONTAINER + SECTION RHYTHM
   ========================================================================= */
.mdd-container {
	max-width: 1320px;
	padding: 0 56px;
}
@media (max-width: 720px) { .mdd-container { padding: 0 24px; } }

/* Sections breathe — replace cramped 48–64px with Atelier's 120–160px */
.mdd-section,
.mdd-answer-block,
.mdd-decision-block,
.mdd-scope-module,
.mdd-services-overview,
.mdd-nc-context,
.mdd-process-module,
.mdd-cities-served,
.mdd-final-cta,
.mdd-cost-timeline,
.mdd-deliver-module,
.mdd-before-after-section,
.mdd-fleet-teaser,
.mdd-city-services,
.mdd-neighborhoods,
.mdd-fleet-context,
.mdd-pricing-band,
.mdd-ltv-band,
.mdd-question-body,
.mdd-products-block,
.mdd-local-hook,
.mdd-recent-job,
.mdd-detailer-specialties,
.mdd-detailer-certs {
	padding: var(--mdd-atelier-pad) 0 !important;
	background: var(--mdd-paper) !important;
	border-bottom: 1px solid var(--mdd-hairline) !important;
}

/* Alternating tone — every other content section gets the warm off-white */
.mdd-scope-module,
.mdd-nc-context,
.mdd-cities-served,
.mdd-products-block,
.mdd-detailer-specialties { background: var(--mdd-paper-warm) !important; }

/* =========================================================================
   3. SECTION CODE — refined hairline label (replaces eyebrow pill)
   ========================================================================= */
.mdd-section-code,
p.mdd-section-code,
.mdd-section .mdd-section-code {
	display: inline-flex !important;
	align-items: center;
	gap: 16px !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.22em !important;
	text-transform: uppercase;
	color: var(--mdd-muted) !important;
	background: transparent !important;
	border: none !important;
	padding: 0 0 16px !important;
	border-bottom: 1px solid var(--mdd-hairline-strong) !important;
	margin: 0 0 32px !important;
	border-radius: 0 !important;
	width: auto;
}
.mdd-section-code::before {
	content: "" !important;
	display: inline-block;
	width: 24px !important;
	height: 1px !important;
	background: var(--mdd-ink) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	flex-shrink: 0;
}
/* Section code on dark backgrounds (Final CTA, Process module) */
.mdd-final-cta .mdd-section-code,
.mdd-process-module .mdd-section-code {
	color: var(--mdd-blue-bright) !important;
	border-bottom-color: rgba(255, 255, 255, 0.18) !important;
	background: transparent !important;
}
.mdd-final-cta .mdd-section-code::before,
.mdd-process-module .mdd-section-code::before {
	background: var(--mdd-blue-bright) !important;
}

/* =========================================================================
   4. EYEBROW — hero label hairline treatment
   ========================================================================= */
.mdd-eyebrow {
	display: inline-flex !important;
	align-items: center;
	gap: 16px !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.22em !important;
	text-transform: uppercase;
	color: var(--mdd-muted) !important;
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	border-radius: 0 !important;
}
.mdd-eyebrow::before {
	content: "" !important;
	width: 24px !important;
	height: 1px !important;
	background: var(--mdd-ink) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	flex-shrink: 0;
}
.mdd-spoke__hero.has-bg .mdd-eyebrow {
	color: rgba(255, 255, 255, 0.9) !important;
	backdrop-filter: none !important;
}
.mdd-spoke__hero.has-bg .mdd-eyebrow::before { background: rgba(255, 255, 255, 0.9) !important; }

/* =========================================================================
   5. HEADER — clean hairline border, refined nav
   ========================================================================= */
.mdd-site-header {
	background: rgba(255, 255, 255, 0.92) !important;
	border-bottom: 1px solid var(--mdd-hairline) !important;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}
.mdd-site-header__inner {
	padding: 22px 0 !important;
}
.mdd-brand__name {
	font-size: 14px !important;
	font-weight: 800 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase;
	color: var(--mdd-ink) !important;
}
.mdd-nav__list { gap: 36px !important; }
.mdd-nav__list a {
	font-size: 13px !important;
	font-weight: 500 !important;
	color: var(--mdd-ink-soft) !important;
	letter-spacing: 0.01em !important;
}
.mdd-nav__list a:hover { color: var(--mdd-blue) !important; }
.mdd-header-phone {
	background: transparent !important;
	color: var(--mdd-ink) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em !important;
	padding: 0 !important;
	border-radius: 0 !important;
}
.mdd-header-phone:hover { color: var(--mdd-blue) !important; background: transparent !important; }

/* =========================================================================
   6. HERO — weight-contrast title + clean background
   ========================================================================= */

/* Kill the loud effects from the prior vibrant pack */
.mdd-spoke--home .mdd-spoke__hero.no-bg,
.mdd-spoke--archive .mdd-spoke__hero {
	background: var(--mdd-paper) !important;
}
.mdd-spoke--home .mdd-spoke__hero.no-bg::before,
.mdd-spoke--archive .mdd-spoke__hero::before,
.mdd-spoke--home .mdd-spoke__hero.no-bg::after,
.mdd-spoke--archive .mdd-spoke__hero::after {
	display: none !important;
	animation: none !important;
}

.mdd-spoke__hero {
	padding: 120px 0 100px !important;
	min-height: 0 !important;
	border-bottom: 1px solid var(--mdd-hairline) !important;
}
.mdd-spoke__hero.no-bg {
	background: var(--mdd-paper) !important;
}
.mdd-spoke__hero.no-bg::before,
.mdd-spoke__hero.no-bg::after { display: none !important; animation: none !important; }

.mdd-spoke__title {
	font-family: 'Inter', sans-serif !important;
	font-size: clamp(48px, 7.5vw, 108px) !important;
	line-height: 0.95 !important;
	font-weight: 300 !important;
	letter-spacing: -0.04em !important;
	margin: 32px 0 40px !important;
	color: var(--mdd-ink) !important;
}
.mdd-spoke__title em {
	font-style: normal !important;
	font-weight: 800 !important;
	color: var(--mdd-blue) !important;
	background: none !important;
	-webkit-background-clip: initial !important;
	background-clip: initial !important;
	-webkit-text-fill-color: var(--mdd-blue) !important;
	text-shadow: none !important;
	display: inline !important;
}

.mdd-spoke__hero.has-bg .mdd-spoke__title {
	color: #FFFFFF !important;
}
.mdd-spoke__hero.has-bg .mdd-spoke__title em {
	color: var(--mdd-blue-bright) !important;
	-webkit-text-fill-color: var(--mdd-blue-bright) !important;
}

.mdd-spoke__lede {
	font-size: clamp(16px, 1.4vw, 19px) !important;
	line-height: 1.65 !important;
	font-weight: 400 !important;
	color: var(--mdd-muted) !important;
	max-width: 560px !important;
	margin: 0 0 40px !important;
}
.mdd-spoke__hero.has-bg .mdd-spoke__lede {
	color: rgba(255, 255, 255, 0.85) !important;
}
.mdd-spoke__cta { gap: 20px !important; }

/* =========================================================================
   7. BUTTONS — sharper, calmer
   ========================================================================= */
.mdd-btn--primary,
a.mdd-btn--primary {
	background: var(--mdd-ink) !important;
	color: var(--mdd-paper) !important;
	border: 1px solid var(--mdd-ink) !important;
	padding: 16px 28px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase;
	border-radius: 0 !important;
	box-shadow: none !important;
	transition: all 0.2s ease !important;
}
.mdd-btn--primary:hover {
	background: var(--mdd-blue) !important;
	border-color: var(--mdd-blue) !important;
	transform: none !important;
	box-shadow: none !important;
}
.mdd-btn--ghost {
	background: transparent !important;
	color: var(--mdd-ink) !important;
	border: 1px solid var(--mdd-hairline-strong) !important;
	padding: 16px 28px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase;
	border-radius: 0 !important;
	transition: all 0.2s ease !important;
}
.mdd-btn--ghost:hover {
	background: transparent !important;
	color: var(--mdd-blue) !important;
	border-color: var(--mdd-blue) !important;
	transform: none !important;
}
.mdd-spoke__hero.has-bg .mdd-btn--ghost {
	background: transparent !important;
	color: #FFFFFF !important;
	border-color: rgba(255, 255, 255, 0.4) !important;
}
.mdd-spoke__hero.has-bg .mdd-btn--ghost:hover {
	background: #FFFFFF !important;
	color: var(--mdd-ink) !important;
	border-color: #FFFFFF !important;
}

/* Kill the ::after arrow chevron from any prior layer — text already has → */
.mdd-btn--primary::after,
.mdd-btn--ghost::after { display: none !important; content: none !important; }

/* =========================================================================
   8. TRUST BAND — hairline column dividers, refined stat numerals
   ========================================================================= */
.mdd-trust-band {
	background: var(--mdd-paper) !important;
	border-top: 1px solid var(--mdd-hairline) !important;
	border-bottom: 1px solid var(--mdd-hairline) !important;
	padding: 64px 0 !important;
}
.mdd-trust-band li {
	border-left: 1px solid var(--mdd-hairline) !important;
	padding: 8px 24px !important;
}
.mdd-trust-band li:first-child { border-left: none !important; }
.mdd-trust-band li:hover { transform: none !important; }
.mdd-trust-band__num {
	font-family: 'Inter', sans-serif !important;
	font-size: clamp(36px, 4vw, 52px) !important;
	font-weight: 300 !important;
	letter-spacing: -0.03em !important;
	color: var(--mdd-ink) !important;
}
.mdd-trust-band__label {
	font-size: 10px !important;
	font-weight: 600 !important;
	letter-spacing: 0.22em !important;
	color: var(--mdd-muted) !important;
	margin-top: 8px !important;
}

/* =========================================================================
   9. CITY MARQUEE — refined hairline strip
   ========================================================================= */
.mdd-marquee {
	background: var(--mdd-paper-warm) !important;
	border-top: 1px solid var(--mdd-hairline) !important;
	border-bottom: 1px solid var(--mdd-hairline) !important;
	padding: 28px 0 !important;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.mdd-marquee__track {
	display: flex;
	white-space: nowrap;
	animation: mdd-marquee-scroll 55s linear infinite;
	gap: 56px;
	align-items: center;
}
.mdd-marquee__item {
	font-family: 'Inter', sans-serif;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: var(--mdd-ink);
}
.mdd-marquee__sep {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--mdd-blue);
	flex-shrink: 0;
}
@keyframes mdd-marquee-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* =========================================================================
   10. ANSWER BLOCK — refined large body type
   ========================================================================= */
.mdd-answer-block { border-bottom: 1px solid var(--mdd-hairline) !important; }
.mdd-answer-block__body {
	font-size: clamp(20px, 2vw, 28px) !important;
	line-height: 1.5 !important;
	font-weight: 300 !important;
	letter-spacing: -0.015em !important;
	color: var(--mdd-ink) !important;
	max-width: 880px !important;
}

/* =========================================================================
   11. DECISION BLOCK — magazine spread, weight contrast
   ========================================================================= */
.mdd-decision-block__grid {
	grid-template-columns: 1fr 1fr !important;
	gap: 80px !important;
	align-items: start !important;
}
@media (max-width: 960px) { .mdd-decision-block__grid { grid-template-columns: 1fr !important; gap: 48px !important; } }
.mdd-decision-block__heading {
	font-size: clamp(40px, 5vw, 68px) !important;
	line-height: 1 !important;
	font-weight: 300 !important;
	letter-spacing: -0.03em !important;
	margin: 0 0 40px !important;
	color: var(--mdd-ink) !important;
}
.mdd-decision-block__heading em {
	font-style: normal !important;
	font-weight: 800 !important;
	color: var(--mdd-blue) !important;
}
.mdd-decision-block__body p {
	font-size: 16px !important;
	line-height: 1.75 !important;
	color: var(--mdd-muted) !important;
	margin: 0 0 24px !important;
}
.mdd-decision-block__body h3 {
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase;
	color: var(--mdd-ink) !important;
	margin: 32px 0 12px !important;
	padding-top: 24px !important;
	border-top: 1px solid var(--mdd-hairline) !important;
}
.mdd-decision-block__body h3:first-of-type {
	margin-top: 0 !important;
	padding-top: 0 !important;
	border-top: none !important;
}

/* =========================================================================
   12. SCOPE MODULE — hairline cards, mono-feeling numbers
   ========================================================================= */
.mdd-scope-module__heading {
	font-size: clamp(40px, 5vw, 68px) !important;
	line-height: 1 !important;
	font-weight: 300 !important;
	letter-spacing: -0.03em !important;
	margin: 0 0 20px !important;
	max-width: 720px !important;
	color: var(--mdd-ink) !important;
}
.mdd-scope-module__heading em {
	font-style: normal !important;
	font-weight: 800 !important;
	color: var(--mdd-blue) !important;
}
.mdd-scope-module__lede {
	font-size: 16px !important;
	line-height: 1.65 !important;
	color: var(--mdd-muted) !important;
	max-width: 640px !important;
	margin: 0 0 64px !important;
}
.mdd-scope-module__list {
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 1px !important;
	background: var(--mdd-hairline) !important;
	border: 1px solid var(--mdd-hairline) !important;
	border-radius: 0 !important;
}
@media (max-width: 960px) { .mdd-scope-module__list { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 640px) { .mdd-scope-module__list { grid-template-columns: 1fr !important; } }

/* Kill any background giant-numeral ::before from prior vibrant layer */
.mdd-scope-module__item::before,
.mdd-scope-module__item::after { display: none !important; content: none !important; }

.mdd-scope-module__item {
	display: block !important;
	grid-template-columns: none !important;
	background: var(--mdd-paper) !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 48px 40px !important;
	gap: 0 !important;
	box-shadow: none !important;
	transform: none !important;
	position: relative;
	transition: background 0.3s ease !important;
}
.mdd-scope-module__item:hover {
	background: var(--mdd-paper-warm) !important;
	border-color: transparent !important;
	box-shadow: none !important;
	transform: none !important;
}
.mdd-scope-module__num {
	font-family: 'Inter', sans-serif !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.22em !important;
	color: var(--mdd-muted) !important;
	margin: 0 0 24px !important;
	display: block !important;
	width: auto !important;
	height: auto !important;
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	box-shadow: none !important;
	line-height: 1 !important;
	-webkit-background-clip: initial !important;
	background-clip: initial !important;
	-webkit-text-fill-color: var(--mdd-muted) !important;
	text-fill-color: var(--mdd-muted) !important;
}
.mdd-scope-module__num::before { content: ""; }
.mdd-scope-module__title {
	font-size: 22px !important;
	font-weight: 600 !important;
	letter-spacing: -0.015em !important;
	line-height: 1.25 !important;
	color: var(--mdd-ink) !important;
	margin: 0 0 16px !important;
}
.mdd-scope-module__desc {
	font-size: 14px !important;
	line-height: 1.7 !important;
	color: var(--mdd-muted) !important;
}

/* =========================================================================
   13. SERVICES OVERVIEW — hairline grid
   ========================================================================= */
.mdd-services-overview__heading {
	font-size: clamp(40px, 5vw, 68px) !important;
	line-height: 1 !important;
	font-weight: 300 !important;
	letter-spacing: -0.03em !important;
	margin: 0 0 20px !important;
	color: var(--mdd-ink) !important;
}
.mdd-services-overview__heading em {
	font-weight: 800 !important;
	color: var(--mdd-blue) !important;
	font-style: normal !important;
}
.mdd-services-overview__lede {
	font-size: 16px !important;
	line-height: 1.65 !important;
	color: var(--mdd-muted) !important;
	max-width: 640px !important;
	margin: 0 0 64px !important;
}
.mdd-services-overview__grid {
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 1px !important;
	background: var(--mdd-hairline) !important;
	border: 1px solid var(--mdd-hairline) !important;
}
@media (max-width: 960px) { .mdd-services-overview__grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 640px) { .mdd-services-overview__grid { grid-template-columns: 1fr !important; } }
.mdd-services-overview__card {
	background: var(--mdd-paper) !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	transition: background 0.3s ease !important;
	display: block;
	color: inherit !important;
}
.mdd-services-overview__card:hover {
	background: var(--mdd-paper-warm) !important;
	border-color: transparent !important;
	transform: none !important;
	box-shadow: none !important;
}
.mdd-services-overview__thumb {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--mdd-paper-warm);
	border-radius: 0 !important;
}
.mdd-services-overview__img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform 0.5s ease;
}
.mdd-services-overview__card:hover .mdd-services-overview__img { transform: scale(1.04); }
.mdd-services-overview__body { padding: 32px 32px 36px !important; }
.mdd-services-overview__name {
	font-size: 22px !important;
	font-weight: 600 !important;
	letter-spacing: -0.015em !important;
	color: var(--mdd-ink) !important;
	margin: 0 0 12px !important;
	transition: color 0.2s ease;
}
.mdd-services-overview__card:hover .mdd-services-overview__name { color: var(--mdd-blue) !important; }
.mdd-services-overview__desc {
	font-size: 14px !important;
	line-height: 1.65 !important;
	color: var(--mdd-muted) !important;
	margin: 0 0 24px !important;
}
.mdd-services-overview__arrow {
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase;
	color: var(--mdd-ink) !important;
	border-bottom: 1px solid var(--mdd-ink) !important;
	padding-bottom: 2px;
	display: inline-block;
	transition: all 0.2s ease;
}
.mdd-services-overview__card:hover .mdd-services-overview__arrow {
	color: var(--mdd-blue) !important;
	border-color: var(--mdd-blue) !important;
}
.mdd-services-overview__foot {
	margin: 64px 0 0 !important;
	text-align: center;
}

/* =========================================================================
   14. NC CONTEXT — hairline two-column
   ========================================================================= */
.mdd-nc-context__heading {
	font-size: clamp(40px, 5vw, 64px) !important;
	line-height: 1.02 !important;
	font-weight: 300 !important;
	letter-spacing: -0.03em !important;
	margin: 0 0 64px !important;
	color: var(--mdd-ink) !important;
}
.mdd-nc-context__heading em { font-weight: 800 !important; color: var(--mdd-blue) !important; font-style: normal !important; }
.mdd-nc-context__grid {
	gap: 1px !important;
	background: var(--mdd-hairline);
	border: 1px solid var(--mdd-hairline);
}
.mdd-nc-context__grid > div {
	background: var(--mdd-paper-warm) !important;
	padding: 40px 36px !important;
}
.mdd-nc-context__grid h3 {
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.22em !important;
	text-transform: uppercase;
	color: var(--mdd-muted) !important;
	margin: 0 0 16px !important;
	padding-bottom: 16px !important;
	border-bottom: 1px solid var(--mdd-hairline) !important;
}
.mdd-nc-context__grid p {
	font-size: 15px !important;
	line-height: 1.75 !important;
	color: var(--mdd-ink) !important;
}

/* =========================================================================
   15. PROCESS MODULE — dark hairline row
   ========================================================================= */
.mdd-process-module {
	background: var(--mdd-ink) !important;
	color: var(--mdd-paper);
	border-bottom: none !important;
}
.mdd-process-module .mdd-section-code {
	color: var(--mdd-blue-bright) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
	background: transparent !important;
}
.mdd-process-module .mdd-section-code::before { background: var(--mdd-blue-bright) !important; }
.mdd-process-module__heading {
	font-size: clamp(40px, 5vw, 68px) !important;
	line-height: 1 !important;
	font-weight: 300 !important;
	letter-spacing: -0.03em !important;
	color: var(--mdd-paper) !important;
	margin: 0 0 64px !important;
	max-width: 720px !important;
}
.mdd-process-module__heading em { font-weight: 800 !important; color: var(--mdd-blue-bright) !important; font-style: normal !important; }
.mdd-process-module__grid {
	grid-template-columns: repeat(5, 1fr) !important;
	gap: 1px !important;
	background: rgba(255, 255, 255, 0.12) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
@media (max-width: 920px) { .mdd-process-module__grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 580px) { .mdd-process-module__grid { grid-template-columns: 1fr !important; } }
.mdd-process-module__step {
	background: var(--mdd-ink) !important;
	padding: 36px 28px !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	transform: none !important;
	transition: background 0.3s ease !important;
}
.mdd-process-module__step:hover {
	background: var(--mdd-ink-soft) !important;
	border-color: transparent !important;
	box-shadow: none !important;
	transform: none !important;
}
.mdd-process-module__num {
	font-family: 'Inter', sans-serif !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.22em !important;
	color: var(--mdd-blue-bright) !important;
	margin: 0 0 28px !important;
	line-height: 1 !important;
	display: block !important;
	width: auto !important;
	height: auto !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	-webkit-background-clip: initial !important;
	background-clip: initial !important;
	-webkit-text-fill-color: var(--mdd-blue-bright) !important;
}
.mdd-process-module__step h4 {
	font-size: 20px !important;
	font-weight: 600 !important;
	letter-spacing: -0.015em !important;
	color: var(--mdd-paper) !important;
	margin: 0 0 12px !important;
}
.mdd-process-module__step p {
	font-size: 14px !important;
	line-height: 1.65 !important;
	color: rgba(255, 255, 255, 0.6) !important;
	margin: 0;
}

/* =========================================================================
   16. REVIEWS — hairline cards, refined quote type
   ========================================================================= */
.mdd-reviews-block,
.mdd-reviews {
	padding: var(--mdd-atelier-pad) 0 !important;
	background: var(--mdd-paper-warm) !important;
	border-bottom: 1px solid var(--mdd-hairline) !important;
}
.mdd-reviews-block__heading,
.mdd-reviews__heading {
	font-size: clamp(40px, 5vw, 64px) !important;
	line-height: 1 !important;
	font-weight: 300 !important;
	letter-spacing: -0.03em !important;
	color: var(--mdd-ink) !important;
	margin: 0 0 64px !important;
}
.mdd-reviews-block__heading em,
.mdd-reviews__heading em { font-weight: 800 !important; color: var(--mdd-blue) !important; font-style: normal !important; }
.mdd-reviews-block__grid,
.mdd-reviews__grid,
.mdd-review-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 24px !important;
}
@media (max-width: 920px) {
	.mdd-reviews-block__grid, .mdd-reviews__grid, .mdd-review-grid { grid-template-columns: 1fr !important; }
}
.mdd-review {
	background: var(--mdd-paper) !important;
	border: 1px solid var(--mdd-hairline) !important;
	border-radius: 0 !important;
	padding: 40px 36px !important;
	box-shadow: none !important;
	transition: border-color 0.3s ease, transform 0.3s ease !important;
}
.mdd-review:hover {
	border-color: var(--mdd-blue) !important;
	transform: translateY(-4px) !important;
}
.mdd-review__stars,
.mdd-review-stars {
	font-size: 13px !important;
	font-weight: 600;
	color: var(--mdd-blue) !important;
	letter-spacing: 3px !important;
	margin: 0 0 24px !important;
}
.mdd-review__body,
.mdd-review p {
	font-size: 17px !important;
	line-height: 1.6 !important;
	font-weight: 400 !important;
	color: var(--mdd-ink) !important;
	letter-spacing: -0.005em !important;
	margin: 0 0 24px !important;
}
.mdd-review__author,
.mdd-review__meta,
.mdd-review-meta {
	display: flex !important;
	justify-content: space-between !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	color: var(--mdd-muted) !important;
	padding-top: 24px !important;
	border-top: 1px solid var(--mdd-hairline) !important;
}
.mdd-review__author strong, .mdd-review__meta strong, .mdd-review-meta strong {
	color: var(--mdd-ink) !important;
	font-weight: 700 !important;
}

/* =========================================================================
   17. CITIES SERVED — hairline list with arrows on hover
   ========================================================================= */
.mdd-cities-served__heading {
	font-size: clamp(40px, 5vw, 68px) !important;
	line-height: 1 !important;
	font-weight: 300 !important;
	letter-spacing: -0.03em !important;
	margin: 0 0 20px !important;
	color: var(--mdd-ink) !important;
}
.mdd-cities-served__heading em { font-weight: 800 !important; color: var(--mdd-blue) !important; font-style: normal !important; }
.mdd-cities-served__lede {
	font-size: 16px !important;
	line-height: 1.65 !important;
	color: var(--mdd-muted) !important;
	max-width: 640px !important;
	margin: 0 0 56px !important;
}
.mdd-cities-served__list {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 0 24px !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 0 32px !important;
	border-top: 1px solid var(--mdd-ink) !important;
}
@media (max-width: 720px) { .mdd-cities-served__list { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 480px) { .mdd-cities-served__list { grid-template-columns: 1fr !important; } }
.mdd-cities-served__list li {
	border-bottom: 1px solid var(--mdd-hairline) !important;
	margin: 0 !important;
	padding: 0 !important;
}
.mdd-cities-served__list li::before { content: none !important; }
.mdd-cities-served__list a {
	display: flex !important;
	justify-content: space-between;
	align-items: center;
	padding: 18px 0 !important;
	font-size: 17px !important;
	font-weight: 500 !important;
	letter-spacing: -0.01em !important;
	color: var(--mdd-ink) !important;
	text-decoration: none !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	transform: none !important;
	transition: padding 0.2s ease, color 0.2s ease;
}
.mdd-cities-served__list a::after {
	content: "→";
	font-weight: 400;
	font-size: 15px;
	color: var(--mdd-muted);
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.2s ease;
	transform: translateX(-6px);
}
.mdd-cities-served__list a:hover {
	color: var(--mdd-blue) !important;
	padding: 18px 0 18px 8px !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	transform: none !important;
}
.mdd-cities-served__list a:hover::after {
	opacity: 1;
	transform: translateX(0);
	color: var(--mdd-blue);
}

/* =========================================================================
   18. LEAD FORM — calm hairline inputs
   ========================================================================= */
.mdd-lead-form {
	padding: var(--mdd-atelier-pad) 0 !important;
	background: var(--mdd-paper) !important;
	border-bottom: 1px solid var(--mdd-hairline) !important;
}
.mdd-lead-form h2, .mdd-lead-form__heading {
	font-size: clamp(40px, 5vw, 64px) !important;
	line-height: 1 !important;
	font-weight: 300 !important;
	letter-spacing: -0.03em !important;
	color: var(--mdd-ink) !important;
	margin: 0 0 40px !important;
}
.mdd-lead-form h2 em, .mdd-lead-form__heading em { font-weight: 800 !important; color: var(--mdd-blue) !important; font-style: normal !important; }
.mdd-lead-form input,
.mdd-lead-form textarea,
.mdd-lead-form select {
	background: var(--mdd-paper) !important;
	border: none !important;
	border-bottom: 1px solid var(--mdd-hairline-strong) !important;
	border-radius: 0 !important;
	padding: 16px 0 !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	color: var(--mdd-ink) !important;
	transition: border-color 0.2s ease;
}
.mdd-lead-form input:focus,
.mdd-lead-form textarea:focus,
.mdd-lead-form select:focus {
	outline: none;
	border-bottom-color: var(--mdd-blue) !important;
}
.mdd-lead-form label {
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	color: var(--mdd-muted) !important;
	margin-bottom: 6px !important;
}
.mdd-lead-form button[type="submit"] {
	background: var(--mdd-ink) !important;
	color: var(--mdd-paper) !important;
	border: 1px solid var(--mdd-ink) !important;
	padding: 18px 36px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	border-radius: 0 !important;
	transition: all 0.2s ease;
}
.mdd-lead-form button[type="submit"]:hover {
	background: var(--mdd-blue) !important;
	border-color: var(--mdd-blue) !important;
}

/* =========================================================================
   19. FINAL CTA — large display, calm gradient
   ========================================================================= */
.mdd-final-cta {
	background: var(--mdd-ink) !important;
	color: var(--mdd-paper) !important;
	text-align: center;
	padding: clamp(120px, 14vw, 180px) 0 !important;
	border-bottom: none !important;
}
.mdd-final-cta::before, .mdd-final-cta::after { display: none !important; }
.mdd-final-cta .mdd-section-code {
	justify-content: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
	display: inline-flex !important;
}
.mdd-final-cta__heading,
.mdd-final-cta h2,
.mdd-section.mdd-final-cta .mdd-final-cta__heading,
.mdd-section.mdd-final-cta h2 {
	font-size: clamp(48px, 7vw, 96px) !important;
	line-height: 0.95 !important;
	font-weight: 300 !important;
	letter-spacing: -0.035em !important;
	color: var(--mdd-paper) !important;
	max-width: 880px !important;
	margin: 0 auto 32px !important;
	padding: 0 !important;
	text-align: center !important;
}
.mdd-final-cta__heading em {
	font-weight: 800 !important;
	color: var(--mdd-blue-bright) !important;
	font-style: normal !important;
}
.mdd-final-cta__body {
	font-size: 17px !important;
	line-height: 1.65 !important;
	color: rgba(255, 255, 255, 0.7) !important;
	max-width: 560px !important;
	margin: 0 auto 48px !important;
}
.mdd-final-cta__actions { gap: 20px !important; }
.mdd-final-cta .mdd-btn--primary {
	background: var(--mdd-paper) !important;
	border-color: var(--mdd-paper) !important;
	color: var(--mdd-ink) !important;
}
.mdd-final-cta .mdd-btn--primary:hover {
	background: var(--mdd-blue) !important;
	border-color: var(--mdd-blue) !important;
	color: var(--mdd-paper) !important;
}
.mdd-final-cta .mdd-btn--ghost {
	background: transparent !important;
	color: var(--mdd-paper) !important;
	border-color: rgba(255, 255, 255, 0.25) !important;
}
.mdd-final-cta .mdd-btn--ghost:hover {
	color: var(--mdd-blue-bright) !important;
	border-color: var(--mdd-blue-bright) !important;
}

/* =========================================================================
   20. FOOTER MEGALINKS + BASE FOOTER
   ========================================================================= */
.mdd-site-footer {
	background: var(--mdd-ink) !important;
	color: var(--mdd-paper) !important;
	padding: 96px 0 32px !important;
	border-top: none !important;
}
.mdd-footer__name {
	font-size: 14px !important;
	font-weight: 800 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase;
	color: var(--mdd-paper) !important;
	margin: 0 0 16px !important;
}
.mdd-footer__tagline {
	font-size: 13px !important;
	color: rgba(255, 255, 255, 0.55) !important;
	line-height: 1.65 !important;
	margin: 0 0 28px !important;
}
.mdd-footer__nap p {
	font-size: 13px !important;
	color: rgba(255, 255, 255, 0.7) !important;
	margin: 0 0 6px !important;
}
.mdd-footer__nap strong { color: var(--mdd-paper) !important; font-weight: 600 !important; }
.mdd-footer__nap a { color: rgba(255, 255, 255, 0.85) !important; }
.mdd-footer__nap a:hover { color: var(--mdd-blue-bright) !important; }
.mdd-footer__col h4 {
	font-size: 10px !important;
	font-weight: 600 !important;
	letter-spacing: 0.22em !important;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45) !important;
	margin: 0 0 20px !important;
}
.mdd-footer__col a {
	font-size: 14px !important;
	color: rgba(255, 255, 255, 0.8) !important;
	transition: color 0.2s ease;
}
.mdd-footer__col a:hover {
	color: var(--mdd-paper) !important;
	text-decoration: none !important;
}
.mdd-footer__legal {
	border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
	padding-top: 32px !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: 0.02em !important;
}
.mdd-footer__legal a { color: rgba(255, 255, 255, 0.5) !important; }
.mdd-footer__legal a:hover { color: var(--mdd-paper) !important; }
.mdd-footer__copy {
	font-size: 12px !important;
	color: rgba(255, 255, 255, 0.35) !important;
	letter-spacing: 0.02em !important;
}

/* Footer megalinks (cities × services × fleets) */
.mdd-megalinks {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
	padding-bottom: 48px !important;
	margin-bottom: 48px !important;
	background: transparent !important;
}
.mdd-megalinks__heading,
.mdd-megalinks h3 {
	color: rgba(255, 255, 255, 0.55) !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	letter-spacing: 0.22em !important;
	text-transform: uppercase !important;
	margin: 0 0 20px !important;
}
.mdd-megalinks__list { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.mdd-megalinks__list li { margin: 0 0 10px !important; }
.mdd-megalinks__list li::before { content: none !important; }
.mdd-megalinks__list a {
	font-size: 14px !important;
	color: rgba(255, 255, 255, 0.8) !important;
	text-decoration: none !important;
	transition: color 0.2s ease;
}
.mdd-megalinks__list a:hover { color: var(--mdd-paper) !important; }
.mdd-megalinks__more {
	color: var(--mdd-blue-bright) !important;
	font-weight: 600 !important;
}
.mdd-megalinks__more:hover { color: var(--mdd-paper) !important; }

/* =========================================================================
   21. RESET LOUD VIBRANT EFFECTS
   ========================================================================= */

/* Kill 3D tilt — Atelier is calm, not interactive showmanship */
.mdd-card,
.mdd-services-overview__card,
.mdd-scope-module__item,
.mdd-process-module__step,
.mdd-gallery-cluster__item {
	transform-style: flat !important;
}

/* Kill gradient text on any element */
*[style*="background-clip"],
.mdd-trust-band__num,
.mdd-scope-module__num,
.mdd-process-module__num,
.mdd-services-overview__name,
.mdd-final-cta__heading em {
	-webkit-text-fill-color: initial !important;
}
.mdd-trust-band__num,
.mdd-process-module__num { color: var(--mdd-ink) !important; }
.mdd-process-module__num { color: var(--mdd-blue-bright) !important; }
.mdd-final-cta__heading em { color: var(--mdd-blue-bright) !important; -webkit-text-fill-color: var(--mdd-blue-bright) !important; }
.mdd-decision-block__heading em,
.mdd-scope-module__heading em,
.mdd-services-overview__heading em,
.mdd-nc-context__heading em,
.mdd-process-module__heading em,
.mdd-cities-served__heading em,
.mdd-spoke__title em {
	-webkit-text-fill-color: var(--mdd-blue) !important;
	color: var(--mdd-blue) !important;
}

/* Kill any pulsing/glow box-shadows from prior layers */
.mdd-scope-module__item,
.mdd-services-overview__card,
.mdd-review,
.mdd-card {
	box-shadow: none !important;
}

/* ===== KILL GOLD ACCENTS EVERYWHERE — replace with brand blue ===== */
.mdd-card__more,
.mdd-related-card__more,
.mdd-card .mdd-card__more,
.mdd-meta-grid__heading,
.mdd-cost-timeline__label,
.mdd-deliver-module__num,
.mdd-brands-block__name,
.mdd-megalinks__more,
.mdd-compare-pair__vs,
.mdd-404__col h2,
.mdd-review-single__stars,
.mdd-compare-table thead th a:hover {
	color: var(--mdd-blue) !important;
}
.mdd-mini-list li::before { color: var(--mdd-blue) !important; }
.mdd-detailer-quote__body { border-left-color: var(--mdd-blue) !important; }
.mdd-brands-block__cell:hover { border-color: var(--mdd-blue) !important; }
.mdd-card__more {
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase;
	color: var(--mdd-ink) !important;
	border-bottom: 1px solid var(--mdd-ink) !important;
	padding-bottom: 2px;
	display: inline-block !important;
	transition: all 0.2s ease;
}
.mdd-card:hover .mdd-card__more,
.mdd-related-card:hover .mdd-related-card__more {
	color: var(--mdd-blue) !important;
	border-color: var(--mdd-blue) !important;
}

/* Card grid items — flat hairline cards (kill spice's rounded + shadow) */
.mdd-card,
.mdd-related-card {
	background: var(--mdd-paper) !important;
	border: 1px solid var(--mdd-hairline) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	transform: none !important;
	transition: border-color 0.3s ease, transform 0.3s ease !important;
}
.mdd-card:hover,
.mdd-related-card:hover {
	border-color: var(--mdd-blue) !important;
	transform: translateY(-3px) !important;
	box-shadow: none !important;
}

/* Kill the scroll-cue and fleet-pop animations */
.mdd-scroll-cue { display: none !important; }

/* Fade-up reveals — keep them, but make them more subtle */
.mdd-fade-up {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}
.mdd-fade-up.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* =========================================================================
   22. MOBILE — collapse to single columns gracefully
   ========================================================================= */
@media (max-width: 720px) {
	.mdd-spoke__hero { padding: 80px 0 64px !important; }
	.mdd-spoke__title { font-size: clamp(36px, 9vw, 56px) !important; }
	.mdd-decision-block__heading,
	.mdd-scope-module__heading,
	.mdd-services-overview__heading,
	.mdd-nc-context__heading,
	.mdd-process-module__heading,
	.mdd-cities-served__heading,
	.mdd-final-cta__heading {
		font-size: clamp(32px, 8vw, 48px) !important;
	}
	.mdd-trust-band li {
		border-left: none !important;
		border-top: 1px solid var(--mdd-hairline) !important;
		padding: 24px !important;
	}
	.mdd-trust-band li:first-child { border-top: none !important; }
}