/* 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%; }
html, body { overflow-x: clip; }

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;
}
/* the logo png has transparent space around it: it's drawn bigger and that space overlaps the header padding */
.site-header__logo img { display: block; width: auto; height: 72px; margin: -10px 0 -10px -15px; }
.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; }
/* headings from the editor's Format dropdown, they take the text colour of the section */
.cms-content h1,
.cms-content h2,
.cms-content h3,
.cms-content h4 { margin: 0 0 14px; color: inherit; line-height: 1.15; letter-spacing: 0; }
.cms-content h1 { font-size: 42px; font-weight: 700; }
.cms-content h2 { font-size: 32px; font-weight: 700; }
.cms-content h3 { font-size: 24px; font-weight: 700; }
.cms-content h4 { font-size: 18px; font-weight: 600; }
.cms-content :is(h1, h2, h3, h4):last-child { margin-bottom: 0; }
/* 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 {
	/* the left edge of the page content (centred 1344px + gutters), so the banner text lines up with it on wide screens */
	--hero-edge: max(var(--dw-gutter), (100% - var(--dw-content)) / 2);
	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: calc(var(--hero-edge) + 17px + 466px); /* 531 at 1440 */
	height: 100%;
	padding: 0 0 32px calc(var(--hero-edge) + 17px);
}
.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: calc(var(--hero-edge) + 466px); padding: 100px 0 0 var(--hero-edge); } /* 514 at 1440 */

/* compact page banner (services): title only, straight fade on the image's left edge */
.hero--compact { height: 280px; }
.hero--compact .hero__media { left: 28.06%; } /* 404 / 1440 */
.hero--compact .hero__media::after {
	right: auto;
	width: 45.56%; /* 472 / 1036 */
	background: linear-gradient(90deg, #0d0d0d 1.4%, rgba(13, 13, 13, 0) 80.3%);
}
.hero--compact .hero__content { width: auto; padding: 0 var(--hero-edge) 16px; }

/* ---------- 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;
}
/* draggable like a scrollbar (site.js), only when there's something to scroll */
.is-scrollable .progress { cursor: pointer; touch-action: none; }
.is-scrollable .progress__bar { cursor: grab; }
.is-dragging .progress__bar { cursor: grabbing; background: var(--dw-orange); transition: none; }
.is-dragging { user-select: none; }

/* 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;
	isolation: isolate;
	flex: 1 1 0;
	height: 320px;
	border-radius: 6px;
	background: var(--dw-black);
	overflow: hidden;
}
.main-service__media {
	position: absolute;
	z-index: -1;
	top: 0;
	right: 0;
	bottom: 0;
	width: 58.5%; /* 384 / 656 */
	overflow: hidden; /* the zoom on hover stays under the fade */
}
.main-service__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.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 {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	width: calc(207px + 48px);
	height: 100%;
	padding: 40px 0 40px 48px;
}
.main-service__text { font-size: 14px; letter-spacing: 0.28px; }
.main-service__text p { margin-bottom: 8px; }
/* the links sit at the bottom of the cards, so they line up whatever the text length */
.main-service__content .link-arrow,
.secondary-service__body .link-arrow { margin-top: auto; }

/* cards with a link are clickable all over: the link's ::after covers the card (one link for screen readers and keyboards) */
.main-service .link-arrow::after,
.secondary-service .link-arrow::after,
.content-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.main-service:has(a:focus-visible),
.secondary-service:has(a:focus-visible),
.content-card:has(a:focus-visible) { outline: 2px solid var(--dw-orange); outline-offset: 3px; }
.main-service .link-arrow:focus-visible,
.secondary-service .link-arrow:focus-visible,
.content-card__link:focus-visible { outline: none; }
.main-service:hover .main-service__media img { transform: scale(1.05); }
.main-service:hover .link-arrow img,
.secondary-service:hover .link-arrow img,
.content-card:hover .content-card__link img { transform: translateX(3px); }

.services__secondary-track { display: flex; gap: 32px; }
.secondary-service {
	position: relative;
	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);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.secondary-service:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); }
.secondary-service__icon { display: block; flex: 0 0 40px; }
.secondary-service__body {
	flex: 1 1 auto;
	align-self: stretch;
	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;
	overflow: clip; /* not hidden, so the photo can still be sticky */
}
/* the photo is the height of the screen and sticks while the form scrolls past, so it doesn't
   re-crop when the form gets taller (time slots loading, error messages) */
.quote-request__media img {
	position: sticky;
	top: 0;
	display: block;
	width: 100%;
	height: 100vh;
	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; }

/* sent (Figma 417:12778) */
.quote-request__sent { display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; }
.quote-request__sent img { display: block; }
.quote-request__sent-title { margin: 0; color: var(--dw-black); font-size: 32px; font-weight: 700; }
.quote-request__sent-text { margin: 0; color: #000; font-size: 16px; font-weight: 600; }

.field {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	min-width: 0;
}
.field label,
.field__label { color: #000; font-size: 14px; font-weight: 600; }
.field--compact { gap: 4px; justify-content: flex-start; }
.field__status { color: #555; font-size: 13px; }
.field__status:empty { display: none; }
.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[readonly] { color: #909090; background: #fafafa; cursor: not-allowed; }
.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 photos (Figma 417:12192): the label is the drop zone, the input is hidden inside it */
.upload {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 80px;
	padding: 16px;
	border: 1px dashed #c9c9c9;
	border-radius: 8px;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease;
}
.upload:hover,
.upload.is-dragover { border-color: var(--dw-orange); background: rgba(245, 118, 30, 0.04); }
.upload:focus-within { border-color: var(--dw-orange); box-shadow: 0 0 0 3px rgba(245, 118, 30, 0.15); }
.upload__input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.upload__title { color: #1e1e1e; font-size: 14px; font-weight: 500; }
.upload__hint { color: #909090; font-size: 14px; }
.upload__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.upload__list:empty { display: none; }
.upload__item { position: relative; width: 64px; height: 64px; border-radius: 4px; background: #e9e9e9; overflow: hidden; }
.upload__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.upload__remove {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(13, 13, 13, 0.75);
	color: #fff;
	font-size: 16px;
	line-height: 22px;
	cursor: pointer;
}

.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, filter 0.15s ease, box-shadow 0.15s ease;
}
.quote-request__submit.is-ready { border: 0.5px solid var(--dw-orange-pale); background: var(--dw-orange-gradient); }
/* the same hover as the other orange buttons (.btn-dw), only once the form is ready to send */
.quote-request__submit.is-ready:hover { filter: brightness(1.05); box-shadow: 0 4px 14px rgba(245, 118, 30, 0.35); }

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

/* ---------- content blocks (Figma "Our History" 415:6359 / "Mobile PDR" 415:5991) ---------- */

.content-block { padding: 32px; background: #fff; }
.content-block__inner {
	display: flex;
	align-items: center;
	gap: 48px;
	max-width: 1376px;
	margin: 0 auto;
}
.content-block--right .content-block__inner { flex-direction: row-reverse; }
.content-block--above .content-block__inner { flex-direction: column; align-items: stretch; }
.content-block--under .content-block__inner { flex-direction: column-reverse; align-items: stretch; }

.content-block__media {
	position: relative;
	flex: 1 1 0;
	aspect-ratio: 664 / 520;
	border-radius: 6px;
	background: #e9e9e9;
	overflow: hidden;
}
.content-block--above .content-block__media,
.content-block--under .content-block__media { flex: 0 0 auto; aspect-ratio: auto; height: 500px; }
.content-block__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.content-block__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.2);
	pointer-events: none;
}
.content-block__text { flex: 1 1 0; min-width: 0; }

/* ---------- our values (Figma "Our Values, Your Advantage" 415:5890) ---------- */

.values {
	padding: 80px 40px;
	background: linear-gradient(90deg, #dedede 0%, #f4f4f4 47.6%, #dedede 100%);
}
.values__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	max-width: var(--dw-content);
	margin: 0 auto;
}
.values__title {
	margin: 0;
	color: #000;
	font-size: 42px;
	font-weight: 600;
	text-align: center;
}
.values__cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 32px;
	width: 100%;
}
.value-card {
	display: flex;
	flex: 1 1 280px;
	flex-direction: column;
	gap: 20px;
	padding: 20px;
	border-radius: 6px;
	background: var(--dw-card);
	box-shadow: var(--dw-shadow-card);
}
.value-card__icon { display: block; }
.value-card__text { font-size: 14px; letter-spacing: 0; }
.value-card__text p { margin-bottom: 8px; }

/* ---------- brands we work with (Figma "Brands" 98:29100) ---------- */

.brands {
	padding: 64px var(--dw-gutter);
	background: linear-gradient(90deg, #efe4de 0%, #fbf6f5 47.6%, #efe4de 100%);
}
.brands__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 48px;
	max-width: var(--dw-content);
	margin: 0 auto;
}
.brands__title {
	margin: 0;
	color: var(--dw-black);
	font-size: 36px;
	font-weight: 700;
	text-align: center;
}
.brands__list {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 48px;
	width: 100%;
}
.brands__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 48px 64px;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* every logo fits the same box, keeping its own shape */
.brands__item img {
	display: block;
	width: auto;
	height: auto;
	max-width: 300px;
	max-height: 160px;
}

/* ---------- services intro (Figma 506:3344) ---------- */

.services-intro { background: #fff; }
.services-intro__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	padding: 64px 40px 48px;
	background: linear-gradient(90deg, #efe4de 0%, #fbf6f5 47.6%, #efe4de 100%);
}
.services-intro__car { display: block; max-width: 100%; height: auto; }
.services-intro__text { width: 100%; max-width: 1078px; text-align: center; }
/* the gradient ends in a slant into the white below */
.services-intro__slant { display: block; width: 100%; height: 86px; }

/* ---------- services cards (Figma 506:2695 main, 506:2763 additional) ---------- */

.services-cards { padding: 64px var(--dw-gutter); background: #fff; }
.services-cards--additional { display: flex; flex-direction: column; align-items: center; gap: 48px; }
.services-cards__heading {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 1078px;
	text-align: center;
}
.services-cards__title { margin: 0; color: var(--dw-black); font-size: 36px; font-weight: 700; }
.services-cards__intro { margin: 0; color: #000; font-size: 16px; }

.content-cards {
	--card-gap: 97px; /* 48 + the 1px divider + 48 */
	display: grid;
	grid-template-columns: repeat(var(--card-columns, 2), minmax(0, 1fr));
	gap: 48px var(--card-gap);
	width: 100%;
	max-width: var(--dw-content);
	margin: 0 auto;
}
.content-cards--1 { --card-columns: 1; }
.content-cards--3 { --card-columns: 3; }
.content-card { position: relative; display: flex; flex-direction: column; gap: 24px; }
/* divider line in the middle of the gap */
.content-card + .content-card::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--card-gap) / -2);
	width: 1px;
	background: #c9c9c9;
}
.content-card__text { flex: 1 1 auto; }
.content-card__text p { margin-bottom: 24px; }
/* the first line is the title, with the short orange line under it */
.content-card__text > p:first-child::after {
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	margin-top: 12px;
	background: var(--dw-orange);
}
.content-card__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	align-self: flex-start;
	color: #000;
	font-size: 16px;
	font-weight: 600;
}
.content-card__link img { display: block; transition: transform 0.15s ease; }
.content-card__link:hover img { transform: translateX(3px); }
.content-card__media {
	aspect-ratio: 624 / 340;
	border-radius: 6px;
	background: #d7d7d7;
	overflow: hidden;
}
.content-cards--3 .content-card__media { aspect-ratio: 604 / 362; }
.content-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.content-card:hover .content-card__media img { transform: scale(1.04); }

/* services page version of the quote steps: steps on the left, grey with slanted edges */
.section-slant { display: block; width: 100%; height: 86px; background: #fff; }
.section-slant--top { transform: rotate(180deg); }
.quote-steps--services {
	padding: 64px var(--dw-gutter);
	background: linear-gradient(90deg, #dedede 0%, #f4f4f4 47.6%, #dedede 100%);
}
.quote-steps--services .quote-steps__inner { flex-direction: row-reverse; }

/* ---------- contact (Figma "Enquiry" 345:23880) ---------- */

.contact { padding: 64px var(--dw-gutter); background: var(--dw-card); }
.contact__inner {
	--contact-gap: 65px; /* 32 + the 1px divider + 32 */
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--contact-gap);
	max-width: var(--dw-content);
	margin: 0 auto;
}
.contact__inner::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 1px;
	background: #c9c9c9;
}
.contact__form-area,
.contact__details { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.contact__details { gap: 28px; }
.contact__title {
	margin: 0;
	padding-bottom: 14px;
	position: relative;
	color: var(--dw-black);
	font-size: 24px;
	font-weight: 700;
}
.contact__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 40px;
	height: 2px;
	background: var(--dw-orange);
}
/* get in touch / request a quote tabs, the active one has the title's orange line */
.contact__tabs { display: flex; flex-wrap: wrap; gap: 8px 32px; }
.contact__tab {
	position: relative;
	margin: 0;
	padding: 0 0 14px;
	border: 0;
	background: none;
	color: #909090;
	font-family: inherit;
	font-size: 24px;
	font-weight: 700;
	line-height: normal;
	cursor: pointer;
	transition: color 0.15s ease;
}
.contact__tab:hover,
.contact__tab.is-active { color: var(--dw-black); }
.contact__tab.is-active::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 40px;
	height: 2px;
	background: var(--dw-orange);
}
.contact__tab:focus-visible { outline: 2px solid var(--dw-orange); outline-offset: 4px; }
.contact__panel { display: flex; flex-direction: column; gap: 32px; scroll-margin-top: 96px; }
.contact__panel[hidden] { display: none; }
.contact__form { display: flex; flex-direction: column; gap: 18px; }
.contact__row { display: flex; gap: 18px; }
.contact .field { gap: 4px; justify-content: flex-start; }
.contact .field label { font-size: 13px; }
.contact .field input,
.contact .field select,
.contact .field textarea { font-size: 12px; }
.field textarea {
	width: 100%;
	min-height: 64px;
	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;
	resize: vertical;
}
.field textarea::placeholder { color: #909090; opacity: 1; }
.field textarea:focus { outline: none; border-color: var(--dw-orange); box-shadow: 0 0 0 3px rgba(245, 118, 30, 0.15); }
.contact__submit {
	align-self: flex-start;
	height: 46px;
	padding: 12px 24px;
	border: 0;
	border-radius: 4px;
	background: var(--dw-black);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.28px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.15s ease;
}
.contact__submit:hover { background: #333; }

.contact__columns { display: flex; gap: 32px; }
.contact__column { display: flex; flex: 1 1 0; flex-direction: column; gap: 14px; min-width: 0; }
.contact__subtitle { margin: 0; color: #000; font-size: 16px; font-weight: 600; }
.contact__item { display: flex; align-items: flex-start; gap: 14px; color: #000; font-size: 16px; }
.contact__item img { display: block; flex: 0 0 24px; }
.contact__item:hover { color: var(--dw-orange); }
.contact__hours { display: flex; flex-direction: column; gap: 4px; max-width: 274px; margin: 0; color: #000; font-size: 16px; letter-spacing: 0.32px; }
.contact__hours div { display: flex; justify-content: space-between; gap: 8px; }
.contact__hours dd { margin: 0; text-align: right; }
.contact__map { height: 219px; border-radius: 8px; background: #e9e9e9; overflow: hidden; }
.contact__map-canvas { display: block; width: 100%; height: 100%; border: 0; }

/* ---------- gallery (Figma 173:701) ---------- */

.gallery { padding: 48px 56px 64px; background: var(--dw-card); }
.gallery__empty { margin: 0; text-align: center; color: #000; font-size: 16px; }
/* loading (site.js): a spinner until the page's photos are in, then the gallery fades in */
.gallery__loader { display: none; align-items: center; justify-content: center; min-height: 420px; }
.gallery__spinner { width: 48px; height: 48px; border: 4px solid var(--dw-orange-pale); border-top-color: var(--dw-orange); border-radius: 50%; animation: gallery-spin 0.8s linear infinite; }
@keyframes gallery-spin { to { transform: rotate(360deg); } }
.gallery.is-loading .gallery__loader { display: flex; }
.gallery.is-loading .gallery__rows,
.gallery.is-loading .pager { display: none; }
.gallery__rows { animation: gallery-in 0.3s ease; }
@keyframes gallery-in { from { opacity: 0; } }
.gallery__rows { display: flex; flex-direction: column; gap: 24px; max-width: 1328px; margin: 0 auto; }
.gallery__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* every second row has the before / after on the right, the images fill the 2 columns on the left */
.gallery__grid--reverse .gallery-item--compare { grid-column: 3 / span 2; grid-row: 1; }
/* the slider takes the height of the square images next to it (its own ratio when the row has none) */
.gallery-item--compare:not(:only-child) .compare { aspect-ratio: auto; }
.gallery-item { position: relative; aspect-ratio: 1; border-radius: 6px; background: #d7d7d7; overflow: hidden; }
.gallery-item--compare { grid-column: span 2; aspect-ratio: auto; }
.gallery-item__figure,
.gallery-item__link { display: block; height: 100%; margin: 0; }
.gallery-item__image { display: block; width: 100%; height: 100%; object-fit: cover; }

/* normal image: caption fades in at the bottom on hover */
.gallery-item__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 52px 15px 14px;
	background: linear-gradient(180deg, rgba(13, 13, 13, 0) 19.7%, rgba(13, 13, 13, 0.8) 98.6%);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	opacity: 0;
	transition: opacity 0.2s ease;
}
.gallery-item:hover .gallery-item__caption { opacity: 1; }
.gallery-item__link--zoom { cursor: zoom-in; }
.gallery-item__caption { pointer-events: none; } /* clicks go through to the photo */

/* full screen photo (gallery normal photos) */
html:has(.lightbox[open]) { overflow: hidden; }
.lightbox {
	width: 100vw;
	max-width: none;
	height: 100vh;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(13, 13, 13, 0.94);
	color: #fff;
}
.lightbox::backdrop { background: transparent; }
.lightbox__stage { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 64px 96px; }
.lightbox__figure { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 100%; max-height: 100%; margin: 0; }
.lightbox__image { display: block; max-width: 100%; max-height: calc(100vh - 128px - 40px); object-fit: contain; border-radius: 4px; }
.lightbox__caption { font-size: 16px; font-weight: 500; text-align: center; }
.lightbox__close {
	position: absolute;
	top: 16px;
	right: 20px;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	font-size: 40px;
	line-height: 48px;
	cursor: pointer;
}
.lightbox__arrow {
	position: absolute;
	top: 50%;
	right: 24px;
	padding: 0;
	border: 0;
	background: none;
	transform: translateY(-50%);
	cursor: pointer;
}
.lightbox__arrow img { display: block; }
.lightbox__arrow--prev { right: auto; left: 24px; }
.lightbox__arrow--prev img { transform: scaleX(-1); }
.lightbox__arrow[hidden] { display: none; }

/* instagram: icon in the corner, "View on Instagram" on hover */
.gallery-item__instagram { position: absolute; top: 20px; right: 20px; display: block; }
.gallery-item__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.4);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	opacity: 0;
	transition: opacity 0.2s ease;
}
.gallery-item__link:hover .gallery-item__overlay,
.gallery-item__link:focus-visible .gallery-item__overlay { opacity: 1; }

/* gallery pages (Figma 173:763): the previous arrow is the next one mirrored, 40% when there's no page to go to */
.pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 48px; }
.pager__text { color: #000; font-size: 16px; font-weight: 500; }
.pager__arrow { display: block; }
.pager__arrow img { display: block; }
.pager__arrow--prev img { transform: scaleX(-1); }
.pager__arrow.is-disabled { opacity: 0.4; }

/* before / after slider: the after photo shows from the divider to the right.
   everything moves with transforms so dragging doesn't repaint the photos */
.compare { --compare: 50%; position: relative; height: 100%; aspect-ratio: 652 / 318; border-radius: inherit; overflow: hidden; user-select: none; }
/* thin frame around the photos, drawn over them so the slider keeps its size */
.compare::before { content: ""; position: absolute; inset: 0; z-index: 2; border: 5px solid #000; border-radius: inherit; pointer-events: none; }
.compare__image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.compare__after { position: absolute; inset: 0; overflow: hidden; transform: translateX(var(--compare)); }
.compare__after .compare__image { transform: translateX(calc(var(--compare) * -1)); }
.compare::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 85px;
	background: linear-gradient(180deg, rgba(13, 13, 13, 0) 19.7%, rgba(13, 13, 13, 0.8) 98.6%);
	pointer-events: none;
}
.compare__label { position: absolute; bottom: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; color: #fff; font-size: 14px; font-weight: 500; pointer-events: none; }
.compare__arrow { display: block; flex: 0 0 auto; }
.compare__arrow--left { transform: scaleX(-1); }
.compare__label--before { left: 15px; }
.compare__label--after { right: 15px; }
.compare__handle {
	position: absolute;
	inset: 0;
	z-index: 2;
	transform: translateX(var(--compare));
	pointer-events: none;
}
.compare__handle::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -1.5px;
	width: 3px;
	background: #fff;
}
.compare__knob {
	position: absolute;
	top: 50%;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 3px solid #fff;
	border-radius: 22px;
	transform: translate(-50%, -50%);
}
.compare__knob img { display: block; }
/* invisible range input over the whole slider: drag anywhere to move the divider */
.compare__range {
	position: absolute;
	inset: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
}
/* the orange ring is always on, keyboard focus makes it stronger */
.compare__knob { box-shadow: 0 0 0 3px rgba(245, 118, 30, 0.6); }
.compare:has(.compare__range:focus-visible) .compare__knob { box-shadow: 0 0 0 4px var(--dw-orange); }


/* ---------- homepage before & after (Figma "Before & After - Slider 3x1" 376:1656) ---------- */

.before-after { padding: 80px var(--dw-gutter); background: var(--dw-black); }
.before-after__inner { display: flex; flex-direction: column; gap: 48px; max-width: var(--dw-content); margin: 0 auto; }
.before-after__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
.before-after__intro { display: flex; flex-direction: column; gap: 28px; }
.before-after__heading { display: flex; flex-direction: column; gap: 4px; }
.before-after__eyebrow { margin: 0; color: var(--dw-grey); font-size: 20px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; }
.before-after__title { margin: 0; color: #fff; font-size: 42px; font-weight: 700; }
.before-after__text { max-width: 600px; margin: 0; color: #fff; font-size: 16px; letter-spacing: 0.32px; }
.before-after__link { display: inline-flex; flex-shrink: 0; align-items: center; gap: 10px; color: #fff; font-size: 16px; font-weight: 600; white-space: nowrap; }
.before-after__link img { display: block; transition: transform 0.15s ease; }
.before-after__link:hover img { transform: translateX(3px); }
.before-after__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; }
/* always a third of the row, so 1 or 2 sliders stay the same size and sit in the middle */
.before-after__item { flex: 0 1 calc((100% - 80px) / 3); border-radius: 8px; overflow: hidden; }
.before-after__item .compare { aspect-ratio: 422 / 318; }

/* ---------- terms of use / privacy policy (text from the cms global sections) ---------- */

.legal { padding: 64px var(--dw-gutter) 80px; background: var(--dw-card); }
.legal__inner { display: flex; flex-direction: column; gap: 32px; max-width: 900px; margin: 0 auto; }
.legal__title { position: relative; margin: 0; padding-bottom: 14px; color: var(--dw-black); font-size: 42px; font-weight: 700; }
.legal__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 2px; background: var(--dw-orange); }
.legal__text ul,
.legal__text ol { margin: 0 0 14px; padding-left: 24px; }
.legal__text ul { list-style: disc; }
.legal__text li { margin-bottom: 6px; }

/* ---------- 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; }
.site-footer__brand > a img { margin: -14px 0 -14px -24px; } /* the logo's transparent space, so it lines up with the icons */
.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; }
	.hero--compact .hero__media { left: 28.06%; }
	.hero--compact .hero__content { width: auto; }
	.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: 52px; margin: -7px 0 -7px -11px; }
	.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; }
	.hero--compact { min-height: 280px; }
	.hero--compact .hero__media::after { width: auto; right: 0; }
	.hero--compact .hero__content { min-height: 280px; }

	.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; }
	.before-after__header { flex-direction: column; align-items: flex-start; gap: 24px; }
	.before-after__list { gap: 24px; }
	.before-after__item { flex-basis: 100%; max-width: 640px; }
	.gallery { padding: 40px var(--dw-gutter) 56px; }
	.gallery__rows,
	.gallery__grid { gap: 16px; }
	.gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gallery__grid--reverse .gallery-item--compare { grid-column: 1 / span 2; }
	.gallery-item--compare:not(:only-child) .compare { aspect-ratio: 652 / 318; }
	.quote-steps--services .quote-steps__inner { flex-direction: column; }
	.contact__inner { grid-template-columns: minmax(0, 1fr); gap: 64px; }
	.contact__inner::before { display: none; }
	.content-cards { --card-columns: 1; gap: 64px; }
	.content-card + .content-card::before { top: -32px; bottom: auto; left: 0; right: 0; width: auto; height: 1px; }

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

	/* the rows merge into one wrapping list, 8 logos don't fit a row */
	.brands__list { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 40px 48px; }
	.brands__row { display: contents; }
}

@media (max-width: 767px) {
	.cms-content h1 { font-size: 32px; }
	.cms-content h2 { font-size: 26px; }
	.cms-content h3 { font-size: 21px; }
	.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 { min-width: 0; padding: 0; }
	.quote-request__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		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--spacer { display: none; }
	.field--rego input { max-width: none; }
	/* ios safari keeps its own look and minimum width on date fields, so the preferred date was wider than the other boxes */
	.field input[type="date"] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%; min-height: 37px; }
	.field input[type="date"]::-webkit-date-and-time-value { text-align: left; }

	.brands { padding: 56px 16px; }
	.brands__title { font-size: 28px; }
	/* 2 logos a line, each centred in its column, an odd last one centred across both */
	.brands__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 32px 24px; }
	.brands__item { display: flex; justify-content: center; min-width: 0; }
	.brands__item--last-odd { grid-column: 1 / -1; }
	.brands__item img { max-width: 100%; max-height: 120px; }

	.services-intro__inner { gap: 32px; padding: 48px 16px 32px; }
	.services-intro__car { width: 240px; }
	.services-intro__text [style*="font-size:20px"] { font-size: 16px !important; letter-spacing: 0.96px; }
	.services-intro__text [style*="font-size:36px"] { font-size: 28px !important; }
	.services-intro__slant { height: 40px; }

	.legal { padding: 48px 16px 64px; }
	.legal__title { font-size: 32px; }
	.contact { padding: 48px 16px; }
	.contact__tabs { gap: 8px 24px; }
	.contact__tab { font-size: 20px; }
	.contact__row,
	.contact__columns { flex-direction: column; }
	.contact__spacer { display: none; }
	/* 16px stops ios zooming into the fields */
	.contact .field input,
	.contact .field select,
	.contact .field textarea { font-size: 16px; }
	.contact .field label { font-size: 14px; }

	.gallery { padding: 32px 16px 48px; }
	.gallery__rows,
	.gallery__grid { gap: 12px; }
	.gallery-item__instagram { top: 12px; right: 12px; width: 24px; height: 24px; }
	/* no hover on phones: show the captions */
	.gallery-item__caption { opacity: 1; }
	.lightbox__stage { padding: 64px 16px 96px; }
	.lightbox__image { max-height: calc(100vh - 160px - 40px); }
	.lightbox__arrow { top: auto; bottom: 24px; transform: none; }

	.before-after { padding: 56px 16px; }
	.before-after__inner { gap: 32px; }
	.before-after__eyebrow { font-size: 14px; letter-spacing: 0.84px; }
	.before-after__title { font-size: 28px; }

	.services-cards { padding: 48px 16px; }
	.services-cards__title { font-size: 28px; }
	.section-slant { height: 40px; }

	.values { padding: 56px 16px; }
	.values__title { font-size: 28px; }

	/* content blocks: text first then the image edge to edge (mobile design) */
	.content-block { padding: 0; }
	.content-block .content-block__inner { flex-direction: column; align-items: stretch; gap: 0; }
	.content-block__text { order: -1; padding: 48px 24px; background: var(--dw-card); }
	.content-block__text [style*="font-size:20px"] { font-size: 16px !important; letter-spacing: 0.96px; }
	.content-block .content-block__media { flex: 0 0 auto; aspect-ratio: auto; height: 330px; border-radius: 0; }

	.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 */

	/* page banner with text (Figma "Mobile - About Us" 504:2622): the photo, its bottom fading into the black, then the
	   title and text centred under it. The compact banner (title only) keeps the text over the photo */
	.hero--page:not(.hero--compact) { display: flex; flex-direction: column; min-height: 0; }
	.hero--page:not(.hero--compact) .hero__media { position: relative; inset: auto; flex: 0 0 auto; height: 317px; }
	.hero--page:not(.hero--compact) .hero__media::after {
		top: auto;
		height: 115px;
		background: radial-gradient(608px 113px at 50% 0, rgba(13, 13, 13, 0) 31.5%, rgba(13, 13, 13, 0.68) 66%, rgba(13, 13, 13, 0.9) 85%, #0d0d0d 100%);
	}
	.hero--page:not(.hero--compact) .hero__content { min-height: 0; align-items: center; gap: 28px; padding: 28px 20px 48px; text-align: center; }

	/* footer banner (Figma "Mobile Quote" 415:5870): the photo, its bottom fading into the black, then the text */
	.quote-banner { flex-direction: column; align-items: stretch; min-height: 0; }
	.quote-banner__content { gap: 28px; padding: 40px 20px 28px; }
	.quote-banner__media { position: relative; inset: auto; flex: 0 0 auto; height: 317px; }
	.quote-banner__media::before { display: none; }
	.quote-banner__media::after {
		top: auto;
		height: 139px;
		background: radial-gradient(608px 137px at 50% 0, rgba(13, 13, 13, 0) 31.5%, rgba(13, 13, 13, 0.68) 66%, rgba(13, 13, 13, 0.9) 85%, #0d0d0d 100%);
	}
	.quote-banner__text [style*="font-size:42px"] { font-size: 36px !important; line-height: 1.25; }
	.quote-banner__text p:first-child { max-width: 292px; margin-left: auto; margin-right: auto; } /* the headline breaks like the design */

	/* footer (Figma "MobileFooter" 193:6875): one centred column */
	.site-footer__main { align-items: center; gap: 32px; padding: 32px 24px; text-align: center; }
	.site-footer__brand { align-items: center; }
	.site-footer__brand > a img { width: 245px; height: auto; margin: -13px 0; }
	.site-footer__columns { flex-direction: column; align-items: center; gap: 32px; }
	.site-footer__column { align-items: center; }
	.site-footer__list { align-items: center; }
	.site-footer__contact--address { align-items: center; max-width: none; }
	.site-footer__column--hours { align-items: stretch; }
	.site-footer__hours dt { text-align: left; }
	.site-footer__bottom-inner { flex-direction: column; align-items: center; gap: 16px; padding: 16px 24px; text-align: center; }

	/* 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"],
	.hero__text [style*="font-size:48px"] { font-size: 32px !important; }
	.hero__text [style*="font-size:32px"],
	.hero__text [style*="font-size:28px"] { font-size: 20px !important; }
}

/* scroll reveal (Figma "Animations" page, site.js): hidden to the left (24px, 16px on phones) until it scrolls into view */
.js-reveal [data-reveal] { opacity: 0; transform: translateX(calc(var(--reveal-x, -24px) * var(--reveal-dir, 1))); }
.js-reveal [data-reveal-from="right"] { --reveal-dir: -1; } /* from the right instead (the brands) */
@media (max-width: 767px) {
	.js-reveal { --reveal-x: -16px; }
}
.js-reveal [data-reveal].is-revealed {
	opacity: 1;
	transform: none;
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
	transition-delay: var(--reveal-delay, 0ms);
}

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

/* cms anchors (eg /services#paintless-dent-removal from a service's Learn More): a little space above the item */
.content-block,
.services-intro,
.content-card { scroll-margin-top: 24px; }

@media (max-width: 359px) {
	.g-recaptcha { transform: scale(0.88); transform-origin: left top; height: 69px; }
}