/* Dentwerx website - values from the Figma "DentWerx New Website Design" (desktop 1440 / mobile 393) */

:root {
	--dw-black: #0d0d0d;
	--dw-line-dark: #575757;
	--dw-orange: #f5761e;
	--dw-orange-pale: #ffe9da;
	--dw-orange-gradient: linear-gradient(170.13deg, #ffd0af 4.3%, #f5761e 69.33%);
	--dw-ink: #2d2d2d;
	--dw-grey: #b9b9b9;
	--dw-card: #fbfbfb;
	--dw-shadow-card: 0 4px 32px rgba(0, 0, 0, 0.15);
	--dw-content: 1344px;
	--dw-gutter: 48px;
	--dw-font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

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

body {
	margin: 0;
	font-family: var(--dw-font);
	font-size: 16px;
	line-height: normal;
	color: var(--dw-black);
	background: var(--dw-black);
}

img { max-width: 100%; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

:focus-visible { outline: 2px solid var(--dw-orange); outline-offset: 3px; }

/* ---------- button ---------- */

.btn-dw {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 154.5px;
	height: 46px;
	padding: 12px 24px;
	border: 0.5px solid var(--dw-orange-pale);
	border-radius: 4px;
	background: var(--dw-orange-gradient);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.32px;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.btn-dw:hover { filter: brightness(1.05); box-shadow: 0 4px 14px rgba(245, 118, 30, 0.35); }

/* ---------- header / tabs ---------- */

.site-header {
	position: relative;
	z-index: 20;
	background: var(--dw-black);
	padding: 32px var(--dw-gutter);
}
.site-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	max-width: var(--dw-content);
	margin: 0 auto;
}
.site-header__logo {
	flex: 0 0 252px;
	display: flex;
	align-items: center;
}
.site-header__logo img { display: block; width: auto; height: 52px; }
.site-header__toggle {
	display: none;
	margin-left: auto;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.site-header__toggle img { display: block; }

.site-nav {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 24px;
}
.site-nav__list {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 56px;
}
.site-nav__link {
	position: relative;
	display: block;
	padding: 4px 0;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.32px;
	text-transform: uppercase;
	white-space: nowrap;
}
.site-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	background: var(--dw-orange);
	transform: scaleX(0);
	transition: transform 0.2s ease;
}
.site-nav__link:hover::after,
.site-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.site-nav__actions {
	display: flex;
	align-items: center;
	gap: 24px;
}

.social-links { display: flex; gap: 16px; }
.social-links__link {
	display: flex;
	align-items: center;
	padding: 6px;
	border: 0.5px solid #fff;
	border-radius: 40px;
	transition: background 0.15s ease;
}
.social-links__link:hover { background: rgba(255, 255, 255, 0.12); }
.social-links__link img { display: block; }

/* ---------- cms text (CKEditor html) ---------- */

/* defaults for the rich text entered in the cms: the editor sets font sizes / colours inline */
.cms-content {
	color: #fff;
	font-size: 16px;
	letter-spacing: 0.32px;
}
.cms-content p { margin: 0 0 14px; }
.cms-content p:last-child { margin-bottom: 0; }
.cms-content strong { font-weight: 600; }
/* big headline sizes (42px / 56px in the editor) use the design's tighter line height (56px / 64px) */
.cms-content p:has([style*="font-size:4"]),
.cms-content p:has([style*="font-size:5"]) { line-height: 1.15; }

/* ---------- homepage banner (Figma "Landing Banner") ---------- */

.hero {
	position: relative;
	height: 650px;
	background: var(--dw-black);
	overflow: hidden;
}
.hero__media {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 36.875%; /* 531 / 1440 */
	right: 0;
}
.hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hero__media::before,
.hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.hero__media::before { background: rgba(13, 13, 13, 0.1); }
/* the design's radial "Gradient" layer: image fades into the black background on its left edge */
.hero__media::after {
	background: linear-gradient(90deg, #0d0d0d 0%, #0d0d0d 1.2%, rgba(13, 13, 13, 0.93) 8.4%, rgba(13, 13, 13, 0.75) 17.5%, rgba(13, 13, 13, 0) 43.2%);
}
.hero__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 32px;
	width: 531px;
	height: 100%;
	padding: 0 0 32px 65px;
}
.hero__text { width: 100%; }

/* page header banner (about etc): shorter, no button, the content sits a little below the middle like the design */
.hero--page { height: 480px; }
.hero--page .hero__media { left: 39.3%; } /* 566 / 1440 */
.hero--page .hero__media::before { background: rgba(0, 0, 0, 0.2); }
/* the design's radial "Gradient" layer, centred near the image's right edge */
.hero--page .hero__media::after {
	background: radial-gradient(86% 157% at 87% 50%, rgba(13, 13, 13, 0) 49%, rgba(13, 13, 13, 0.75) 80.3%, rgba(13, 13, 13, 0.93) 91.3%, #0d0d0d 100%);
}
.hero--page .hero__content { width: 514px; padding: 100px 0 0 48px; } /* 466 + 48 */

/* ---------- shared section pieces ---------- */

.section-heading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-align: center;
}
.section-heading__eyebrow {
	margin: 0;
	color: var(--dw-ink);
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
}
.section-heading__title {
	margin: 0;
	color: var(--dw-black);
	font-size: 42px;
	font-weight: 700;
}

.divider-heading {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	color: var(--dw-ink);
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	white-space: nowrap;
}
.divider-heading::before,
.divider-heading::after {
	content: "";
	flex: 1 1 0;
	height: 1px;
	background: var(--dw-grey);
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--dw-orange);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}
.link-arrow img { display: block; transition: transform 0.15s ease; }
.link-arrow:hover img { transform: translateX(3px); }

.progress {
	position: relative;
	display: none;
	height: 12px;
	border-radius: 40px;
	background: #fff;
	overflow: hidden;
}
.progress__bar {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 25%;
	border-radius: 40px;
	background: rgba(245, 118, 30, 0.8);
	transition: left 0.2s ease, width 0.2s ease;
}

/* dark text for cms content shown on light cards */
.cms-content--light { color: #000; }

/* ---------- our services (Figma "Our Services") ---------- */

.services {
	padding: 80px 40px;
	background: linear-gradient(90deg, #dedede 0%, #f4f4f4 47.6%, #dedede 100%);
}
.services__inner {
	display: flex;
	flex-direction: column;
	gap: 48px;
	max-width: var(--dw-content);
	margin: 0 auto;
}

.services__main {
	display: flex;
	gap: 32px;
	filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.25));
}
.main-service {
	position: relative;
	flex: 1 1 0;
	height: 320px;
	border-radius: 6px;
	background: var(--dw-black);
	overflow: hidden;
}
.main-service__media {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 58.5%; /* 384 / 656 */
}
.main-service__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.main-service__media::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 48%;
	background: linear-gradient(to left, rgba(13, 13, 13, 0) 19.72%, #0d0d0d 98.585%);
}
.main-service__content {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 16px;
	width: calc(207px + 48px);
	height: 100%;
	padding-left: 48px;
}
.main-service__text { font-size: 14px; letter-spacing: 0.28px; }
.main-service__text p { margin-bottom: 8px; }

.services__secondary-track { display: flex; gap: 32px; }
.secondary-service {
	flex: 1 1 0;
	display: flex;
	align-items: flex-start;
	gap: 20px;
	min-height: 182px;
	padding: 20px;
	border-radius: 6px;
	background: var(--dw-card);
	box-shadow: var(--dw-shadow-card);
}
.secondary-service__icon { display: block; flex: 0 0 40px; }
.secondary-service__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	min-width: 0;
}
.secondary-service__text { font-size: 14px; letter-spacing: 0; }
.secondary-service__text p { margin-bottom: 8px; }

/* ---------- get a quote in 3 simple steps (Figma "Get a Quote") ---------- */

.quote-steps {
	padding: 80px var(--dw-gutter);
	background: var(--dw-card);
}
.quote-steps__inner {
	display: flex;
	align-items: center;
	gap: 48px;
	max-width: var(--dw-content);
	margin: 0 auto;
}
.quote-steps__intro {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 34px;
	min-width: 186px;
}
.quote-steps__title {
	max-width: 186px;
	margin: 0;
	color: var(--dw-black);
	font-size: 28px;
	font-weight: 700;
}
.quote-steps__button--mobile { display: none; }
.quote-steps__list {
	--step-gap: 158px;
	--step-circle: 96px;
	flex: 0 1 1068px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--step-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
.quote-step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	color: var(--dw-black);
	text-align: center;
}
/* dashed connector (1.5px, 4px dash / 4px gap) from this step's circle to the next one */
.quote-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: calc(12px + var(--step-circle) / 2);
	left: calc(50% + var(--step-circle) / 2);
	width: calc(100% + var(--step-gap) - var(--step-circle));
	height: 1.5px;
	background: repeating-linear-gradient(90deg, var(--dw-orange) 0 4px, transparent 4px 8px);
}
.quote-step__icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--step-circle);
	height: var(--step-circle);
	margin: 12px 0 2px;
	border: 1.5px solid #ffbb8d;
	border-radius: 48px;
	background: rgba(255, 255, 255, 0.85);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.quote-step__icon img { display: block; }
.quote-step__number {
	position: absolute;
	top: -13.5px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 1px solid #ffbb8d;
	border-radius: 40px;
	background: linear-gradient(149.71deg, #ffd0af 4.3%, #f5761e 69.33%);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.26px;
}
.quote-step__title { margin: 0; font-size: 18px; font-weight: 600; }
.quote-step__text { margin: 0; font-size: 16px; }

/* ---------- request a quote (Figma "About" 409:4683, mobile 56:11731) ---------- */

.quote-request {
	display: flex;
	background: #fff;
}
.quote-request__media {
	position: relative;
	flex: 0 0 49.6%; /* 714 / 1440 */
	min-height: 676px;
	background: #e9e9e9;
}
.quote-request__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.quote-request__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.18);
}
.quote-request__panel {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 48px;
}
.quote-request__toggle { display: none; }
.quote-request__body { display: flex; flex-direction: column; gap: 32px; }
.quote-request__title {
	position: relative;
	margin: 0;
	padding-bottom: 14px;
	color: var(--dw-black);
	font-size: 32px;
	font-weight: 700;
}
.quote-request__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 40px;
	height: 2px;
	background: var(--dw-orange);
}
.quote-request__form { display: flex; flex-direction: column; gap: 24px; }
.quote-request__group { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; border: 0; min-width: 0; }
.quote-request__legend { margin: 0 0 16px; padding: 0; color: #000; font-size: 16px; font-weight: 600; }
.quote-request__row { display: flex; gap: 18px; }
.quote-request__message { padding: 12px 16px; border-radius: 4px; font-size: 14px; }
.quote-request__message h3 { margin: 0 0 4px; font-size: 18px; font-weight: 700; }
.quote-request__message p { margin: 0; }
.quote-request__message--success { background: var(--dw-orange-pale); color: var(--dw-black); }
.quote-request__message--error { background: #fdecec; color: #b3261e; }

.field {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	min-width: 0;
}
.field label { color: #000; font-size: 14px; font-weight: 600; }
.field__required { color: red; }
.field__hint { font-weight: 400; }
.field input,
.field select {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid #c9c9c9;
	border-radius: 4px;
	background: #fff;
	color: var(--dw-black);
	font-family: inherit;
	font-size: 16px;
	line-height: normal;
}
.field select { appearance: auto; }
.field select:disabled { color: #909090; background: #fafafa; }
.field input::placeholder { color: #909090; opacity: 1; }
.field input:focus,
.field select:focus { outline: none; border-color: var(--dw-orange); box-shadow: 0 0 0 3px rgba(245, 118, 30, 0.15); }
.field .input-validation-error { border-color: #d93025; }
.field__error { color: #d93025; font-size: 13px; }
.field__error:empty { display: none; }
.field__icon { position: relative; }
.field__icon input { padding-right: 36px; }
.field__icon input::-webkit-calendar-picker-indicator { position: absolute; right: 0; width: 36px; height: 100%; opacity: 0; cursor: pointer; }
.field__icon input:invalid:not(:focus) { color: #909090; }
.field__icon img { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); pointer-events: none; }
.field--rego { gap: 4px; }
.field--rego input { max-width: 303px; }

.quote-request__submit {
	height: 46px;
	padding: 12px 24px;
	border: 0;
	border-radius: 4px;
	background: var(--dw-grey);
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.32px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s ease;
}
.quote-request__submit.is-ready { border: 0.5px solid var(--dw-orange-pale); background: var(--dw-orange-gradient); }

/* ---------- google reviews (Figma "What Our Customers Say" 499:2080) ---------- */

.reviews {
	padding: 80px 40px;
	background: linear-gradient(90deg, #efe4de 0%, #fbf6f5 47.6%, #efe4de 100%);
}
.reviews__inner {
	display: flex;
	flex-direction: column;
	gap: 40px;
	max-width: var(--dw-content);
	margin: 0 auto;
}
.reviews .section-heading__title { color: #1e1e1e; }
.reviews__carousel { display: flex; flex-direction: column; gap: 24px; }

/* the track runs into the section padding so the card shadows aren't clipped by the scroll area */
.reviews__track {
	--review-gap: 32px;
	--review-columns: 4;
	--review-bleed: 40px;
	display: flex;
	align-items: flex-start;
	gap: var(--review-gap);
	margin: -32px calc(-1 * var(--review-bleed)) -40px;
	padding: 32px var(--review-bleed) 40px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--review-bleed);
	scroll-behavior: smooth;
	scrollbar-width: none;
}
.reviews__track::-webkit-scrollbar { display: none; }

.review {
	display: flex;
	flex: 0 0 calc((100% - (var(--review-columns) - 1) * var(--review-gap)) / var(--review-columns));
	gap: 20px;
	min-height: 186px;
	padding: 20px;
	border: 1px solid #ffbb8d;
	border-radius: 8px;
	background: var(--dw-card);
	box-shadow: var(--dw-shadow-card);
	scroll-snap-align: start;
}
/* centres the cards when they all fit, the auto margins drop to 0 once the track scrolls */
.review:first-child { margin-left: auto; }
.review:last-child { margin-right: auto; }
.review__quote { display: block; flex: 0 0 24px; }
.review__body {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	font-size: 14px;
	word-break: break-word;
}
.review__content { display: flex; flex: 1 1 auto; flex-direction: column; gap: 4px; }
.review__text {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: #000;
	white-space: pre-line;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
}
.review.is-expanded .review__text { display: block; -webkit-line-clamp: unset; line-clamp: unset; }
.review__more {
	align-self: flex-start;
	padding: 0;
	border: 0;
	background: none;
	color: #a0a0a0;
	font-size: 14px;
	cursor: pointer;
}
.review__more:hover { color: var(--dw-orange); }
.review__more[hidden] { display: none; }
.review__name { margin: 0; color: #000; font-weight: 600; }

.reviews__controls { display: flex; align-items: center; gap: 16px; }
.reviews__controls .progress { display: block; flex: 1 1 0; }
.reviews__carousel:not(.is-scrollable) .reviews__controls { display: none; }
.reviews__arrows { display: flex; align-items: center; }
.reviews__arrow {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.reviews__arrow img { display: block; }
.reviews__arrow--prev img { transform: scaleX(-1); }
.reviews__arrow:disabled { opacity: 0.4; cursor: default; }

/* ---------- footer quote banner (Figma "Quote Banner" 415:6541) ---------- */

.quote-banner {
	display: flex;
	align-items: center;
	height: 338px;
	background: var(--dw-black);
	overflow: hidden;
}
.quote-banner__media {
	position: relative;
	flex: 1 1 0;
	align-self: stretch;
}
.quote-banner__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.quote-banner__media::before,
.quote-banner__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.quote-banner__media::before { background: rgba(0, 0, 0, 0.2); }
/* the design's radial gradient: the image fades into the black on its right edge */
.quote-banner__media::after {
	background: radial-gradient(100% 157% at 0% 50%, rgba(13, 13, 13, 0) 63%, #0d0d0d 100%);
}
.quote-banner__content {
	position: relative;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	padding: 0 64px;
}
.quote-banner__text { width: 100%; max-width: 593px; text-align: center; }

/* ---------- footer (Figma 376:1789 and 376:1832) ---------- */

.site-footer { background: var(--dw-black); color: #eaeaea; }
.site-footer a { transition: color 0.15s ease; }
.site-footer a:hover { color: var(--dw-orange); }

.site-footer { border-top: 1px solid var(--dw-line-dark); }
.site-footer__bottom { border-top: 1px solid var(--dw-line-dark); }
.site-footer__main {
	display: flex;
	gap: 48px;
	align-items: flex-start;
	max-width: calc(var(--dw-content) + 2 * var(--dw-gutter));
	margin: 0 auto;
	padding: 32px var(--dw-gutter);
}
.site-footer__brand { display: flex; flex-direction: column; gap: 32px; }
.site-footer__brand img { display: block; }
.social-links--footer .social-links__link { border-width: 1px; }

.site-footer__columns {
	display: flex;
	flex: 1 1 0;
	justify-content: flex-end;
	gap: 80px;
}
.site-footer__column { display: flex; flex-direction: column; gap: 12px; }
.site-footer__column--hours { width: 208px; }
.site-footer__title {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.28px;
	text-transform: uppercase;
}
.site-footer__list { display: flex; flex-direction: column; gap: 8px; }
.site-footer__list,
.site-footer__contact,
.site-footer__hours,
.site-footer__bottom { font-size: 12px; letter-spacing: 0.24px; }
.site-footer__contact { display: flex; align-items: center; gap: 10px; }
.site-footer__contact img { display: block; flex: 0 0 16px; }
.site-footer__contact--address { align-items: flex-start; gap: 8px; max-width: 149px; }
.site-footer__hours { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.site-footer__hours div { display: flex; justify-content: space-between; gap: 8px; }
.site-footer__hours dd { margin: 0; text-align: right; }

.site-footer__bottom-inner {
	display: flex;
	align-items: center;
	gap: 48px;
	max-width: calc(var(--dw-content) + 2 * var(--dw-gutter));
	margin: 0 auto;
	padding: 16px var(--dw-gutter);
}
.site-footer__legal { flex: 1 1 0; margin: 0; }
.site-footer__credit { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.site-footer__credit img { display: block; }

/* ---------- tablet ---------- */

@media (max-width: 1279px) {
	:root { --dw-gutter: 32px; }
	.site-header__logo { flex-basis: auto; }
	.site-nav__list { gap: 32px; }
	.hero__media { left: 40%; }
	.hero__content { width: 46%; padding-left: 40px; }
	.hero--page .hero__media { left: 40%; }
	.hero--page .hero__content { width: 46%; padding-left: 40px; }
	.services__secondary-track { flex-wrap: wrap; }
	.secondary-service { flex: 1 1 calc(50% - 16px); }
	.quote-steps__list { --step-gap: 64px; }
	.reviews__track { --review-columns: 3; }
}

/* ---------- mobile: collapsed header with hamburger ---------- */

@media (max-width: 1023px) {
	.site-header { padding: 16px; }
	.site-header__logo img { height: 38px; }
	.site-header__toggle { display: block; }
	.site-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
		padding: 8px 16px 24px;
		background: var(--dw-black);
		border-top: 1px solid var(--dw-line-dark);
	}
	.site-header.is-open .site-nav { display: flex; }
	.site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.site-nav__link { padding: 16px 0; border-bottom: 1px solid #262626; }
	.site-nav__link::after { display: none; }
	.site-nav__link[aria-current="page"] { color: var(--dw-orange); }
	.site-nav__actions { justify-content: space-between; }

	/* banner: image behind the text (mobile design) */
	.hero { height: auto; min-height: 606px; }
	.hero__media { left: 0; }
	.hero__media::after { background: linear-gradient(90deg, rgba(13, 13, 13, 0.92) 0%, rgba(13, 13, 13, 0.75) 60%, rgba(13, 13, 13, 0.45) 100%); }
	.hero__content { width: 100%; min-height: 606px; padding: 48px 16px; gap: 24px; }
	.hero--page { min-height: 480px; }
	.hero--page .hero__media { left: 0; }
	.hero--page .hero__media::after { background: linear-gradient(90deg, rgba(13, 13, 13, 0.92) 0%, rgba(13, 13, 13, 0.75) 60%, rgba(13, 13, 13, 0.45) 100%); }
	.hero--page .hero__content { width: 100%; min-height: 480px; padding: 48px 16px; }

	.services__main { flex-direction: column; }
	.main-service { flex: 0 0 auto; }

	.quote-steps__inner { flex-direction: column; gap: 32px; }
	.quote-steps__intro { flex: 0 0 auto; align-items: center; min-width: 0; }
	.quote-steps__title { max-width: none; text-align: center; }
	.quote-steps__intro .quote-steps__button { display: none; }
	.quote-steps__list { flex: 0 0 auto; width: 100%; max-width: 820px; }
	.quote-steps__button--mobile { display: inline-flex; }

	.quote-request__media { flex-basis: 40%; }

	.reviews__track { --review-columns: 2; }

	/* footer banner: image behind the text, like the homepage banner on mobile */
	.quote-banner { position: relative; height: auto; min-height: 338px; }
	.quote-banner__media { position: absolute; inset: 0; }
	.quote-banner__media::after { background: rgba(13, 13, 13, 0.7); }
	.quote-banner__content { padding: 48px 24px; }

	.site-footer__main { flex-direction: column; gap: 32px; }
	.site-footer__columns { justify-content: flex-start; width: 100%; gap: 48px; }
}

@media (max-width: 767px) {
	.section-heading__eyebrow,
	.divider-heading { font-size: 14px; letter-spacing: 0.84px; }
	.section-heading__title { font-size: 28px; }

	.services { padding: 56px 16px; }
	.services__inner { gap: 32px; }
	.main-service { height: 280px; }
	.main-service__media { width: 100%; }
	.main-service__media::after { width: 100%; background: linear-gradient(90deg, #0d0d0d 20%, rgba(13, 13, 13, 0.3) 100%); }
	.main-service__content { width: 100%; max-width: 260px; padding-left: 24px; }

	/* secondary services become a swipe carousel (mobile design) */
	.services__secondary { display: flex; flex-direction: column; gap: 8px; margin: 0 -16px; }
	.services__secondary-track {
		flex-wrap: nowrap;
		gap: 16px;
		padding: 8px 16px 24px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.services__secondary-track::-webkit-scrollbar { display: none; }
	.secondary-service { flex: 0 0 84%; scroll-snap-align: center; }
	.services__secondary .progress { display: block; margin: 0 16px; }

	/* mobile design: small circles, titles only */
	.quote-steps { padding: 48px 24px; }
	.quote-steps__title { color: #1e1e1e; font-size: 24px; }
	.quote-steps__list { --step-gap: 8px; --step-circle: 64px; max-width: 350px; }
	.quote-step:not(:last-child)::after { width: calc(100% + var(--step-gap) - var(--step-circle) + 2px); }
	.quote-step__icon img { width: 28px; height: 28px; }
	.quote-step__title { font-size: 14px; }
	.quote-step__text { display: none; }

	/* request a quote folds into a single row (mobile design) */
	.quote-request { background: var(--dw-card); }
	.quote-request__media { display: none; }
	.quote-request__panel { padding: 0; }
	.quote-request__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 48px;
		width: 100%;
		padding: 48px 24px;
		border: 0;
		background: none;
		color: var(--dw-black);
		font-family: inherit;
		font-size: 24px;
		font-weight: 700;
		text-align: left;
		cursor: pointer;
	}
	.quote-request__toggle img { display: block; transition: transform 0.2s ease; }
	.quote-request__toggle[aria-expanded="true"] img { transform: rotate(90deg); }
	.quote-request__body { display: none; padding: 0 24px 48px; }
	.quote-request__body.is-open { display: flex; }
	.quote-request__title { display: none; }
	.quote-request__row { flex-direction: column; }
	.field--rego input { max-width: none; }

	.reviews { padding: 56px 16px; }
	.reviews__inner { gap: 32px; }
	.reviews__track { --review-gap: 16px; --review-columns: 1.19; --review-bleed: 16px; } /* the next card peeks in, like the services carousel */

	.site-footer__main { padding: 32px 16px; }
	.site-footer__columns { flex-direction: column; gap: 32px; }
	.site-footer__bottom-inner { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; }
	.quote-banner__text [style*="font-size:42px"] { font-size: 28px !important; }

	/* keep big cms headline sizes inside the phone width */
	.hero__text [style*="font-size:56px"] { font-size: 36px !important; }
	.hero__text [style*="font-size:42px"] { font-size: 32px !important; }
	.hero__text [style*="font-size:32px"],
	.hero__text [style*="font-size:28px"] { font-size: 20px !important; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; }
}