/**
 * SD Cars — theme stylesheet
 *
 * 1.  Tokens
 * 2.  Base & reset
 * 3.  Layout
 * 4.  Buttons
 * 5.  Header & navigation
 * 6.  Sections
 * 7.  Cards & blocks
 * 8.  FAQ accordion
 * 9.  Location & map
 * 10. Forms
 * 11. Footer
 * 12. Motion & utilities
 */

/* ========================================================================== */
/* 1. Tokens                                                                  */
/* ========================================================================== */

:root {
	--sd-red: #d71920;
	--sd-red-dark: #b51218;
	--sd-red-soft: #fcebec;

	--sd-ink: #17191c;
	--sd-nav: #1f2326;
	--sd-charcoal: #292d32;
	--sd-slate: #626a73;
	--sd-muted: #8a929a;
	--sd-line: #dde1e5;
	--sd-mist: #f4f6f7;
	--sd-warm-white: #fafaf9;
	--sd-white: #fff;
	--sd-success: #217a4a;
	--sd-whatsapp: #1da851;

	--sd-font-heading: "Manrope", "Segoe UI", Arial, sans-serif;
	--sd-font-body: "Inter", "Segoe UI", Arial, sans-serif;

	--sd-space-1: 0.25rem;
	--sd-space-2: 0.5rem;
	--sd-space-3: 0.75rem;
	--sd-space-4: 1rem;
	--sd-space-5: 1.25rem;
	--sd-space-6: 1.5rem;
	--sd-space-8: 2rem;
	--sd-space-10: 2.5rem;
	--sd-space-12: 3rem;
	--sd-space-16: 4rem;
	--sd-space-20: 5rem;

	--sd-container: 1200px;
	--sd-gutter: clamp(1.125rem, 3vw, 2rem);
	--sd-section: clamp(3rem, 7vw, 5.5rem);

	--sd-radius-sm: 6px;
	--sd-radius: 10px;
	--sd-radius-card: 12px;
	--sd-radius-pill: 999px;

	--sd-shadow-sm: 0 2px 8px rgba(23, 25, 28, 0.06);
	--sd-shadow-md: 0 12px 30px rgba(23, 25, 28, 0.1);
	--sd-shadow-nav: 0 6px 24px rgba(23, 25, 28, 0.16);

	--sd-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--sd-fast: 160ms;
	--sd-normal: 220ms;

	--sd-nav-height: 52px;
	--sd-focus: 0 0 0 3px rgba(215, 25, 32, 0.32);
}

/* ========================================================================== */
/* 2. Base & reset                                                            */
/* ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	/* Keep anchor targets clear of the pinned nav strip. */
	scroll-padding-top: calc(var(--sd-nav-offset, 52px) + 1rem);
}

body {
	margin: 0;
	font-family: var(--sd-font-body);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--sd-ink);
	background: var(--sd-white);
	-webkit-font-smoothing: antialiased;
	/*
	 * Guards against a single wide child (a stray embed) scrolling the page.
	 *
	 * `clip`, not `hidden`: `overflow-x: hidden` turns body into a scroll
	 * container, which silently breaks every `position: sticky` inside it.
	 * `clip` does the same job without creating one.
	 */
	overflow-x: clip;
}

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

img,
picture,
svg,
video { max-width: 100%; }

img { height: auto; }

h1, h2, h3, h4 {
	font-family: var(--sd-font-heading);
	font-weight: 700;
	line-height: 1.18;
	color: var(--sd-ink);
	margin: 0 0 var(--sd-space-4);
	text-wrap: balance;
	/* Dutch compounds run long — "Verwerkingsverantwoordelijke" is 28 characters
	   and overflows a 320px column at heading sizes. Hyphenate where the
	   language allows it, and break as a last resort. */
	hyphens: auto;
	overflow-wrap: break-word;
}

/* Same reasoning for body copy, plus long e-mail addresses and URLs. */
p, li, dd, dt, address, figcaption, blockquote {
	overflow-wrap: break-word;
}

h2 { font-size: clamp(1.625rem, 3.2vw, 2.125rem); }
h3 { font-size: clamp(1.125rem, 2vw, 1.375rem); }

p { margin: 0 0 var(--sd-space-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--sd-red); }
a:hover { color: var(--sd-red-dark); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--sd-red);
	outline-offset: 2px;
	border-radius: var(--sd-radius-sm);
}

.sd-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: var(--sd-space-3) var(--sd-space-5);
	background: var(--sd-red);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}
.sd-skip-link:focus {
	left: var(--sd-space-4);
	top: var(--sd-space-4);
	color: #fff;
}

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

.sd-icon { flex: none; vertical-align: middle; }
.sd-icon--up { transform: rotate(-90deg); }

/* ========================================================================== */
/* 3. Layout                                                                  */
/* ========================================================================== */

.sd-container {
	width: 100%;
	max-width: var(--sd-container);
	margin-inline: auto;
	padding-inline: var(--sd-gutter);
}

.sd-main { display: block; }

.sd-section { padding-block: var(--sd-section); }
.sd-section--mist { background: var(--sd-mist); }
.sd-section--warm { background: var(--sd-warm-white); }
.sd-section--ink { background: var(--sd-ink); color: rgba(255, 255, 255, 0.86); }
.sd-section--ink h2,
.sd-section--ink h3 { color: #fff; }
.sd-section--tight { padding-block: clamp(2rem, 4vw, 3rem); }

.sd-section__head {
	max-width: 46rem;
	margin-bottom: var(--sd-space-10);
}
.sd-section__head--center {
	margin-inline: auto;
	text-align: center;
}

.sd-eyebrow {
	display: block;
	margin-bottom: var(--sd-space-2);
	font-family: var(--sd-font-heading);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sd-red);
}

.sd-section__head h2 { margin-bottom: var(--sd-space-3); }

.sd-lead {
	font-size: 1.0625rem;
	color: var(--sd-slate);
	margin-bottom: 0;
}

.sd-grid { display: grid; gap: var(--sd-space-6); }
.sd-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sd-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sd-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px) {
	.sd-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sd-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.sd-grid--2,
	.sd-grid--3 { grid-template-columns: minmax(0, 1fr); }
	/* Trust and guarantee items stay two-up on mobile rather than becoming a
	   tall stack of oversized cards. */
	.sd-grid--4 { gap: var(--sd-space-3); }
}

/* ========================================================================== */
/* 4. Buttons                                                                 */
/* ========================================================================== */

.sd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.75rem 1.375rem;
	border: 2px solid transparent;
	/* 10px matches the reference's measured button radius. */
	border-radius: var(--sd-radius);
	font-family: var(--sd-font-heading);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--sd-fast) var(--sd-ease),
		border-color var(--sd-fast) var(--sd-ease),
		color var(--sd-fast) var(--sd-ease),
		transform var(--sd-fast) var(--sd-ease);
}

.sd-btn:hover { transform: translateY(-1px); }
.sd-btn:active { transform: translateY(0); }

.sd-btn--primary {
	background: var(--sd-red);
	border-color: var(--sd-red);
	color: #fff;
}
.sd-btn--primary:hover {
	background: var(--sd-red-dark);
	border-color: var(--sd-red-dark);
	color: #fff;
}

.sd-btn--outline {
	background: transparent;
	border-color: var(--sd-line);
	color: var(--sd-ink);
}
.sd-btn--outline:hover {
	border-color: var(--sd-ink);
	color: var(--sd-ink);
}

/* Over imagery — white outline. */
.sd-btn--ghost {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.75);
	color: #fff;
	backdrop-filter: blur(2px);
}
.sd-btn--ghost:hover {
	background: #fff;
	border-color: #fff;
	color: var(--sd-ink);
}

.sd-btn--whatsapp {
	background: var(--sd-whatsapp);
	border-color: var(--sd-whatsapp);
	color: #fff;
}
.sd-btn--whatsapp:hover {
	background: #178f44;
	border-color: #178f44;
	color: #fff;
}

.sd-btn--sm { min-height: 38px; padding: 0.5rem 1rem; font-size: 0.8125rem; }
.sd-btn--lg { min-height: 52px; padding: 0.9375rem 1.75rem; font-size: 1rem; }
.sd-btn--block { width: 100%; }

.sd-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	/* These sit alone in their own paragraph as a section CTA, so they are
	   standalone controls rather than inline prose links and need a real hit
	   area. */
	min-height: 44px;
	font-family: var(--sd-font-heading);
	font-weight: 700;
	text-decoration: none;
}
.sd-link-arrow .sd-icon { transition: transform var(--sd-fast) var(--sd-ease); }
.sd-link-arrow:hover .sd-icon { transform: translateX(3px); }

/* ========================================================================== */
/* 5. Header & navigation                                                     */
/* ========================================================================== */

/*
 * The whole header sticks, offset upwards by the height of the white bar.
 *
 * Sticking the nav strip alone does not work: a sticky element can only travel
 * within its own containing block, and .sd-header is barely taller than the
 * strip — so the strip scrolled away with it. Offsetting the header instead
 * lets the white logo bar slide out of view while the dark navigation pins at
 * the top of the viewport.
 *
 * --sd-header-offset is measured and set by nav.js, so it survives changes to
 * the logo size, the breakpoint, or the bar's contents.
 */
.sd-header {
	position: sticky;
	top: calc(-1 * var(--sd-header-offset, 85px));
	z-index: 100;
}

/* Tier 1 — white bar */
.sd-header__bar { background: var(--sd-white); border-bottom: 1px solid var(--sd-line); }

.sd-header__bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sd-space-4);
	min-height: 84px;
	padding-block: var(--sd-space-3);
}

.sd-logo {
	display: inline-flex;
	align-items: center;
	/* The logo is a link home — keep it a full-size tap target. */
	min-height: 44px;
}
.sd-logo img,
.custom-logo {
	display: block;
	width: auto;
	height: 46px;
}

.sd-header__actions {
	display: flex;
	align-items: center;
	gap: var(--sd-space-3);
}

.sd-header__phone-text {
	display: none;
	font-family: var(--sd-font-heading);
	font-weight: 700;
	color: var(--sd-ink);
	text-decoration: none;
	white-space: nowrap;
}
.sd-header__phone-text:hover { color: var(--sd-red); }

/* Circular accent phone button — mirrors the reference's header action. */
.sd-header__phone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--sd-radius);
	background: var(--sd-red);
	color: #fff;
	transition: background-color var(--sd-fast) var(--sd-ease);
}
.sd-header__phone:hover { background: var(--sd-red-dark); color: #fff; }

/* Tier 2 — dark nav strip. Pins at the top because the header above it is
   sticky with a negative offset; it needs no sticky of its own. */
.sd-header__nav-strip {
	position: relative;
	z-index: 90;
	background: var(--sd-nav);
	transition: box-shadow var(--sd-normal) var(--sd-ease);
}
.sd-header__nav-strip.is-stuck { box-shadow: var(--sd-shadow-nav); }

.sd-header__nav-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sd-space-4);
	min-height: var(--sd-nav-height);
}

.sd-nav__list {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(1rem, 3vw, 2.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sd-nav__link {
	position: relative;
	display: block;
	padding: calc((var(--sd-nav-height) - 20px) / 2) 0;
	font-family: var(--sd-font-heading);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	color: rgba(255, 255, 255, 0.88);
	transition: color var(--sd-fast) var(--sd-ease);
}
.sd-nav__link::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 3px;
	background: var(--sd-red);
	transform: scaleX(0);
	transition: transform var(--sd-normal) var(--sd-ease);
}
.sd-nav__link:hover,
.sd-nav__link.is-current { color: #fff; }
.sd-nav__link:hover::after,
.sd-nav__link.is-current::after { transform: scaleX(1); }

.sd-nav__cta { display: none; }
.sd-nav__mobile-actions { display: none; }

.sd-nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	min-width: 44px;
	padding: 0.5rem 0.75rem;
	background: transparent;
	border: 0;
	border-radius: var(--sd-radius-sm);
	color: #fff;
	font-family: var(--sd-font-heading);
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	cursor: pointer;
}

.sd-nav-toggle__icon {
	position: relative;
	display: block;
	width: 22px;
	height: 16px;
}
.sd-nav-toggle__icon span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform var(--sd-normal) var(--sd-ease),
		opacity var(--sd-fast) var(--sd-ease);
}
.sd-nav-toggle__icon span:nth-child(1) { top: 0; }
.sd-nav-toggle__icon span:nth-child(2) { top: 7px; }
.sd-nav-toggle__icon span:nth-child(3) { top: 14px; }

.sd-nav-toggle[aria-expanded="true"] .sd-nav-toggle__icon span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sd-nav-toggle[aria-expanded="true"] .sd-nav-toggle__icon span:nth-child(2) { opacity: 0; }
.sd-nav-toggle[aria-expanded="true"] .sd-nav-toggle__icon span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Desktop --- */
@media (min-width: 1025px) {
	.sd-nav-toggle { display: none; }
	.sd-header__phone-text { display: inline-block; }
	.sd-header__nav-inner { justify-content: space-between; }
	.sd-nav { flex: 1; }
	.sd-nav__cta { display: inline-flex; }
	.sd-logo img,
	.custom-logo { height: 52px; }
}

/* --- Mobile panel --- */
@media (max-width: 1024px) {
	.sd-header__nav-inner { justify-content: center; }

	.sd-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: block;
		max-height: 0;
		overflow: hidden;
		background: var(--sd-nav);
		visibility: hidden;
		transition: max-height var(--sd-normal) var(--sd-ease),
			visibility 0s linear var(--sd-normal);
	}
	.sd-nav.is-open {
		max-height: min(80vh, 640px);
		overflow-y: auto;
		visibility: visible;
		transition: max-height var(--sd-normal) var(--sd-ease), visibility 0s;
		box-shadow: var(--sd-shadow-nav);
	}

	.sd-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: var(--sd-space-2) var(--sd-gutter) 0;
	}
	.sd-nav__item { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
	.sd-nav__link {
		padding: 0.9375rem 0;
		font-size: 1rem;
	}
	.sd-nav__link::after { display: none; }
	.sd-nav__link.is-current { color: var(--sd-red); }

	.sd-nav__mobile-actions {
		display: grid;
		gap: var(--sd-space-3);
		padding: var(--sd-space-5) var(--sd-gutter) var(--sd-space-6);
	}
}

/* ========================================================================== */
/* 6. Sections                                                                */
/* ========================================================================== */

/* --- Trust strip --- */
.sd-trust {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sd-space-6);
	list-style: none;
	margin: 0;
	padding: 0;
}
.sd-trust__item {
	display: flex;
	align-items: flex-start;
	gap: var(--sd-space-3);
}
.sd-trust__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: var(--sd-radius);
	background: var(--sd-red-soft);
	color: var(--sd-red);
}
.sd-trust__title {
	display: block;
	font-family: var(--sd-font-heading);
	font-weight: 700;
	font-size: 0.9375rem;
	margin-bottom: 2px;
}
.sd-trust__text {
	margin: 0;
	font-size: 0.875rem;
	color: var(--sd-slate);
	line-height: 1.5;
}

@media (max-width: 1024px) { .sd-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Below 620px a two-column trust strip leaves ~170px per item, which shreds the
   Dutch copy into five ragged lines. Each item is a compact icon-plus-two-lines
   row, so one column reads better than a cramped grid — and it is still not a
   stack of oversized cards. */
@media (max-width: 620px) {
	.sd-trust {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sd-space-4);
	}
	.sd-trust__icon { width: 40px; height: 40px; }
	.sd-trust__text { font-size: 0.9375rem; }
}

/* --- Welcome split (text column + elevated card) --- */
.sd-welcome {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}
@media (max-width: 900px) { .sd-welcome { grid-template-columns: minmax(0, 1fr); } }

/* Elevated white "reasons" card — mirrors the reference's WAAROM…? card. */
.sd-reasons {
	background: var(--sd-white);
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-radius-card);
	box-shadow: var(--sd-shadow-md);
	padding: clamp(1.5rem, 3vw, 2.25rem);
}
.sd-reasons h2 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); }
.sd-reasons__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sd-space-4);
}
.sd-reasons__list li {
	display: flex;
	align-items: flex-start;
	gap: var(--sd-space-3);
	font-size: 0.9375rem;
	line-height: 1.55;
}
.sd-reasons__list .sd-icon {
	flex: none;
	margin-top: 2px;
	color: var(--sd-success);
}

/* --- Guarantees --- */
.sd-guarantees {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sd-space-4) var(--sd-space-8);
	list-style: none;
	margin: 0;
	padding: 0;
}
.sd-guarantees li {
	display: flex;
	align-items: flex-start;
	gap: var(--sd-space-3);
	padding-block: var(--sd-space-3);
	border-bottom: 1px solid var(--sd-line);
	font-size: 0.9375rem;
}
.sd-guarantees .sd-icon { flex: none; margin-top: 3px; color: var(--sd-red); }
@media (max-width: 720px) { .sd-guarantees { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* --- About split --- */
.sd-about {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}
.sd-about__media {
	border-radius: var(--sd-radius-card);
	overflow: hidden;
	box-shadow: var(--sd-shadow-md);
}
.sd-about__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
@media (max-width: 900px) {
	.sd-about { grid-template-columns: minmax(0, 1fr); }
	.sd-about__media { order: -1; }
}

/* --- CTA band --- */
.sd-cta-band {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sd-space-6);
}
.sd-cta-band__text { max-width: 38rem; }
.sd-cta-band__text h2 { margin-bottom: var(--sd-space-2); }
.sd-cta-band__text p { color: rgba(255, 255, 255, 0.78); margin: 0; }
.sd-cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sd-space-3); }
@media (max-width: 640px) {
	.sd-cta-band__actions { width: 100%; }
	.sd-cta-band__actions .sd-btn { flex: 1 1 100%; }
}

/* ========================================================================== */
/* 7. Cards & blocks                                                          */
/* ========================================================================== */

.sd-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--sd-white);
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-radius-card);
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	transition: transform var(--sd-normal) var(--sd-ease),
		box-shadow var(--sd-normal) var(--sd-ease);
}
.sd-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--sd-shadow-sm);
}
.sd-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: var(--sd-space-4);
	border-radius: var(--sd-radius);
	background: var(--sd-red-soft);
	color: var(--sd-red);
}
.sd-card h3 { margin-bottom: var(--sd-space-2); font-size: 1.0625rem; }
.sd-card p { margin: 0; font-size: 0.9375rem; color: var(--sd-slate); line-height: 1.55; }

/* ========================================================================== */
/* 8. FAQ accordion                                                           */
/* ========================================================================== */

.sd-faq { max-width: 52rem; margin-inline: auto; }
.sd-faq__item { border-bottom: 1px solid var(--sd-line); }

.sd-faq__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sd-space-4);
	width: 100%;
	min-height: 56px;
	padding: var(--sd-space-4) 0;
	background: none;
	border: 0;
	font-family: var(--sd-font-heading);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.4;
	text-align: left;
	color: var(--sd-ink);
	cursor: pointer;
	transition: color var(--sd-fast) var(--sd-ease);
}
.sd-faq__trigger:hover { color: var(--sd-red); }

.sd-faq__icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--sd-radius-sm);
	background: var(--sd-mist);
	color: var(--sd-red);
	transition: transform var(--sd-normal) var(--sd-ease),
		background-color var(--sd-fast) var(--sd-ease);
}
.sd-faq__trigger[aria-expanded="true"] .sd-faq__icon {
	transform: rotate(45deg);
	background: var(--sd-red-soft);
}

.sd-faq__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--sd-normal) var(--sd-ease);
}
.sd-faq__panel.is-open { grid-template-rows: 1fr; }
.sd-faq__panel > div { overflow: hidden; }
.sd-faq__panel p {
	margin: 0;
	padding-bottom: var(--sd-space-5);
	max-width: 46rem;
	color: var(--sd-slate);
}

/* ========================================================================== */
/* 9. Location & map                                                          */
/* ========================================================================== */

.sd-location {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(2rem, 4vw, 3rem);
	align-items: stretch;
}
@media (max-width: 900px) { .sd-location { grid-template-columns: minmax(0, 1fr); } }

.sd-location__details {
	display: grid;
	gap: var(--sd-space-5);
	align-content: start;
}
.sd-location__row { display: flex; align-items: flex-start; gap: var(--sd-space-3); }
.sd-location__row .sd-icon { flex: none; margin-top: 3px; color: var(--sd-red); }
.sd-location__label {
	display: block;
	font-family: var(--sd-font-heading);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sd-muted);
	margin-bottom: 2px;
}
.sd-location__value { font-style: normal; }
.sd-location__value a {
	/* Phone and e-mail are primary tap targets here, not inline prose links. */
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--sd-ink);
	text-decoration: none;
	font-weight: 600;
}
.sd-location__value a:hover { color: var(--sd-red); }

.sd-map {
	position: relative;
	min-height: 340px;
	border-radius: var(--sd-radius-card);
	overflow: hidden;
	border: 1px solid var(--sd-line);
	background: var(--sd-mist);
}
.sd-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 340px;
	border: 0;
}

/* Full-width variant: the map carries a section on its own, so it needs the
   height a side-by-side map does not. */
.sd-map--wide {
	min-height: clamp(320px, 46vw, 520px);
}
.sd-map--wide iframe {
	min-height: clamp(320px, 46vw, 520px);
}

/* ========================================================================== */
/* 10. Forms                                                                  */
/* ========================================================================== */

.sd-form { display: grid; gap: var(--sd-space-5); }
.sd-form__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sd-space-5);
}
@media (max-width: 640px) { .sd-form__row { grid-template-columns: minmax(0, 1fr); } }

.sd-field { display: grid; gap: var(--sd-space-2); }
.sd-field label {
	font-family: var(--sd-font-heading);
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--sd-ink);
}
.sd-field__required { color: var(--sd-red); }

.sd-field input,
.sd-field textarea,
.sd-field select {
	width: 100%;
	min-height: 48px;
	padding: 0.75rem 0.875rem;
	font-family: inherit;
	font-size: 1rem;
	color: var(--sd-ink);
	background: var(--sd-white);
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-radius);
	transition: border-color var(--sd-fast) var(--sd-ease),
		box-shadow var(--sd-fast) var(--sd-ease);
}
.sd-field textarea { min-height: 150px; resize: vertical; }

.sd-field input:focus,
.sd-field textarea:focus {
	outline: none;
	border-color: var(--sd-red);
	box-shadow: var(--sd-focus);
}

.sd-field input[aria-invalid="true"],
.sd-field textarea[aria-invalid="true"] { border-color: var(--sd-red); }

.sd-field__error {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--sd-red-dark);
}

.sd-field--consent {
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: var(--sd-space-3);
}
.sd-field--consent input {
	width: 20px;
	min-height: 20px;
	height: 20px;
	margin-top: 3px;
	accent-color: var(--sd-red);
}
.sd-field--consent label { font-weight: 500; font-family: var(--sd-font-body); font-size: 0.9375rem; }

/* Honeypot — hidden from people, reachable by bots. */
.sd-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sd-notice {
	padding: var(--sd-space-4) var(--sd-space-5);
	border-radius: var(--sd-radius);
	border: 1px solid;
	font-size: 0.9375rem;
}
.sd-notice--success {
	background: #eaf6ef;
	border-color: #b9dfc8;
	color: #14562f;
}
.sd-notice--error {
	background: var(--sd-red-soft);
	border-color: #f0bfc2;
	color: #8e0f15;
}
.sd-notice ul { margin: var(--sd-space-2) 0 0; padding-left: 1.125rem; }

.sd-contact {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}
@media (max-width: 900px) { .sd-contact { grid-template-columns: minmax(0, 1fr); } }

/* Standalone contact actions on a light surface. These are primary tap targets,
   not inline prose links, so they get a full 44px hit area. */
.sd-contact-list {
	list-style: none;
	margin: var(--sd-space-6) 0 0;
	padding: 0;
	display: grid;
	gap: var(--sd-space-2);
}
.sd-contact-list a {
	display: inline-flex;
	align-items: center;
	gap: var(--sd-space-3);
	min-height: 44px;
	padding: var(--sd-space-2) 0;
	font-family: var(--sd-font-heading);
	font-weight: 700;
	color: var(--sd-ink);
	text-decoration: none;
}
.sd-contact-list a:hover { color: var(--sd-red); }
.sd-contact-list .sd-icon { color: var(--sd-red); }

/* ========================================================================== */
/* 11. Footer                                                                 */
/* ========================================================================== */

.sd-footer {
	background: var(--sd-ink);
	color: rgba(255, 255, 255, 0.74);
	padding-block: var(--sd-space-16) var(--sd-space-8);
	font-size: 0.9375rem;
}

.sd-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: var(--sd-space-10) var(--sd-space-8);
}
@media (max-width: 900px) { .sd-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sd-footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sd-space-8); } }

.sd-footer__col--brand .sd-logo img { height: 40px; }
.sd-footer__tagline { margin: var(--sd-space-4) 0 var(--sd-space-5); max-width: 32ch; }

.sd-footer__heading {
	margin: 0 0 var(--sd-space-4);
	font-family: var(--sd-font-heading);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
}

.sd-footer__list,
.sd-footer__social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* Gap reduced because each link now carries its own 44px hit area. */
	gap: var(--sd-space-1);
}

.sd-footer__list a,
.sd-footer__social a {
	display: inline-flex;
	align-items: center;
	gap: var(--sd-space-2);
	/* Footer links are standalone navigation, so they get a full tap target
	   rather than the bare line-height of their text. */
	min-height: 44px;
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
	transition: color var(--sd-fast) var(--sd-ease);
}
.sd-footer__list a:hover,
.sd-footer__social a:hover { color: #fff; }
.sd-footer__list .sd-icon,
.sd-footer__social .sd-icon { color: var(--sd-red); }

.sd-footer__address { font-style: normal; margin-bottom: var(--sd-space-4); }
.sd-footer__hours { display: flex; align-items: flex-start; gap: var(--sd-space-2); margin: 0; }
.sd-footer__hours .sd-icon { flex: none; margin-top: 3px; color: var(--sd-red); }

.sd-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sd-space-4);
	margin-top: var(--sd-space-12);
	padding-top: var(--sd-space-6);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 0.875rem;
}
.sd-footer__legal { margin: 0; color: rgba(255, 255, 255, 0.6); }

/* ========================================================================== */
/* 12. Motion & utilities                                                     */
/* ========================================================================== */

/* ---------- Scroll reveal ----------
   Elements start hidden only when JS is present to reveal them — the .sd-js
   class is set by ui.js, so content stays visible without JS. */

.sd-js [data-sd-reveal] {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 620ms var(--sd-ease), transform 620ms var(--sd-ease);
}
.sd-js [data-sd-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

/* Variants. Calm by design: short travel, no scale beyond a hair, no rotation. */
.sd-js [data-sd-reveal="fade"] { transform: none; }
.sd-js [data-sd-reveal="left"] { transform: translateX(-24px); }
.sd-js [data-sd-reveal="right"] { transform: translateX(24px); }
.sd-js [data-sd-reveal="zoom"] { transform: scale(0.97); }
.sd-js [data-sd-reveal="zoom"].is-revealed { transform: none; }

/* Children stagger in sequence. The delay is applied by ui.js from
   --sd-stagger-index so it works for any number of items. */
.sd-js [data-sd-stagger] > * {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 520ms var(--sd-ease), transform 520ms var(--sd-ease);
}
.sd-js [data-sd-stagger].is-revealed > * {
	opacity: 1;
	transform: none;
}

/* ---------- Page transitions ----------
   Chromium runs a real cross-document transition; everything else gets the
   fade below, driven by motion.js. */

@view-transition {
	navigation: auto;
}

::view-transition-old(root) {
	animation: sd-page-out 220ms var(--sd-ease) both;
}
::view-transition-new(root) {
	animation: sd-page-in 380ms var(--sd-ease) both;
}

@keyframes sd-page-out {
	to { opacity: 0; transform: translateY(-6px); }
}
@keyframes sd-page-in {
	from { opacity: 0; transform: translateY(10px); }
}

/* Fallback: fade the document out on the way to the next page… */
html.sd-leaving body {
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 200ms var(--sd-ease), transform 200ms var(--sd-ease);
}

/* …and ease the new one in. Only where View Transitions are unavailable, so
   Chromium does not run both. */
@supports not (view-transition-name: none) {
	.sd-js body {
		animation: sd-page-in 420ms var(--sd-ease) both;
	}
}

/* ---------- Back to top ---------- */

.sd-to-top {
	position: fixed;
	right: clamp(1rem, 2.5vw, 1.75rem);
	bottom: clamp(1rem, 2.5vw, 1.75rem);
	z-index: 80;

	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	width: 52px;
	height: 52px;
	padding: 0;

	background: var(--sd-red);
	color: #fff;
	border: 0;
	border-radius: var(--sd-radius);
	box-shadow: 0 8px 24px rgba(23, 25, 28, 0.24);
	cursor: pointer;

	/* Hidden state — kept in the DOM so the transition has something to run on. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px) scale(0.94);
	transition: opacity var(--sd-normal) var(--sd-ease),
		transform var(--sd-normal) var(--sd-ease),
		background-color var(--sd-fast) var(--sd-ease),
		visibility 0s linear var(--sd-normal);
}

.sd-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity var(--sd-normal) var(--sd-ease),
		transform var(--sd-normal) var(--sd-ease),
		background-color var(--sd-fast) var(--sd-ease),
		visibility 0s;
}

.sd-to-top:hover {
	background: var(--sd-red-dark);
	transform: translateY(-2px);
}
.sd-to-top:active { transform: translateY(0); }

@media (max-width: 640px) {
	/* Clear of the thumb zone and of any sticky element. */
	.sd-to-top { width: 48px; height: 48px; }
}

/* ---------- Inventory focus mode ----------
   Collapses whatever sits above the inventory once the visitor is browsing
   inside it, so the vehicle content is not pushed below a marketing intro. */

.sd-collapse-out {
	overflow: hidden;
	opacity: 0;
	/* Stop the browser's scroll anchoring from compensating for the shrinking
	   height — it fights the scroll-to-top that runs at the same moment. */
	overflow-anchor: none;
	max-height: 0 !important;
	/* min-height wins over max-height in CSS, so a section that sets one — the
	   hero sets 560px — would keep its full height and leave a blank gap. */
	min-height: 0 !important;
	padding-block: 0 !important;
	margin-block: 0 !important;
	border-width: 0 !important;
	transform: translateY(-12px);
	transition: opacity 280ms var(--sd-ease),
		max-height 420ms var(--sd-ease),
		transform 320ms var(--sd-ease),
		padding 320ms var(--sd-ease);
}

/* The hidden attribute's UA `display: none` loses to any explicit display, and
   .sd-hero is display:flex. Force it so collapsed sections really do leave the
   layout once the animation has finished. */
.sd-main [hidden] {
	display: none !important;
}

/* Give the collapse something finite to animate from. */
.sd-main > *,
.sd-main article > * {
	max-height: 100000px;
	transition: max-height 420ms var(--sd-ease);
}

/* In focus mode the inventory becomes the first thing under the navigation, so
   it no longer needs a full section's worth of lead-in. */
.sd-inventory-focus .sd-inventory-section {
	padding-top: var(--sd-space-6);
	transition: padding-top 320ms var(--sd-ease);
}

.sd-page-header {
	padding-block: clamp(2.5rem, 5vw, 4rem);
	background: var(--sd-mist);
	border-bottom: 1px solid var(--sd-line);
}
.sd-page-header h1 { margin-bottom: var(--sd-space-3); }
.sd-page-header p { margin: 0; max-width: 46rem; color: var(--sd-slate); font-size: 1.0625rem; }

/* ---------- Image-backed page header ----------
   Same height as the plain variant — this is a page header, not a second hero.
   The photograph is pre-cropped, so no object-position juggling is needed. */

.sd-page-header--image {
	position: relative;
	overflow: hidden;
	border-bottom: 0;
	background: var(--sd-ink);
	isolation: isolate;
}

.sd-page-header__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.sd-page-header__media picture,
.sd-page-header__img {
	display: block;
	width: 100%;
	height: 100%;
}

.sd-page-header__img {
	object-fit: cover;
	object-position: 50% 50%;
}

/* Same reasoning as the hero: white text over a daylight photograph needs a
   scrim to hold contrast. Heavier on the left, where the copy sits. */
.sd-page-header__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(100deg, rgba(15, 17, 19, 0.86) 0%, rgba(15, 17, 19, 0.66) 45%, rgba(15, 17, 19, 0.34) 100%);
}

.sd-page-header__inner {
	position: relative;
	z-index: 1;
}

.sd-page-header--image h1 {
	color: #fff;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.sd-page-header--image p {
	color: rgba(255, 255, 255, 0.92);
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}
.sd-page-header--image .sd-breadcrumb { color: rgba(255, 255, 255, 0.7); }
.sd-page-header--image .sd-breadcrumb a { color: rgba(255, 255, 255, 0.85); }
.sd-page-header--image .sd-breadcrumb a:hover { color: #fff; }

@media (max-width: 640px) {
	/* The copy spans the full width here, so the gradient runs top-to-bottom. */
	.sd-page-header--image .sd-page-header__scrim {
		background:
			linear-gradient(180deg, rgba(15, 17, 19, 0.72) 0%, rgba(15, 17, 19, 0.78) 100%);
	}
}

.sd-breadcrumb {
	margin-bottom: var(--sd-space-4);
	font-size: 0.875rem;
	color: var(--sd-muted);
}
.sd-breadcrumb a { color: var(--sd-slate); text-decoration: none; }
.sd-breadcrumb a:hover { color: var(--sd-red); }

/* Long-form page content */
.sd-prose { max-width: 46rem; }
.sd-prose h2 { margin-top: var(--sd-space-10); }
.sd-prose h3 { margin-top: var(--sd-space-8); }
.sd-prose ul,
.sd-prose ol { padding-left: 1.25rem; margin-bottom: var(--sd-space-4); }
.sd-prose li { margin-bottom: var(--sd-space-2); }
.sd-prose > *:first-child { margin-top: 0; }
.sd-prose img { border-radius: var(--sd-radius-card); }
.sd-prose table { width: 100%; border-collapse: collapse; }
.sd-prose th,
.sd-prose td { padding: var(--sd-space-3); border-bottom: 1px solid var(--sd-line); text-align: left; }

/* Any wide child (table, embed) scrolls inside itself instead of the page. */
.sd-prose > table,
.sd-prose > .wp-block-table { display: block; overflow-x: auto; }

.sd-editor-note {
	margin-block: var(--sd-space-6);
	padding: var(--sd-space-4) var(--sd-space-5);
	border-left: 4px solid var(--sd-red);
	background: var(--sd-red-soft);
	border-radius: 0 var(--sd-radius) var(--sd-radius) 0;
	font-size: 0.9375rem;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.sd-js [data-sd-reveal],
	.sd-js [data-sd-stagger] > * { opacity: 1; transform: none; }
	.sd-btn:hover { transform: none; }
	.sd-card:hover { transform: none; }
	.sd-to-top:hover { transform: none; }
	.sd-to-top.is-visible { transform: none; }

	/* No page transition at all — neither the native one nor the fallback. */
	@view-transition { navigation: none; }
	html.sd-leaving body { opacity: 1; transform: none; }
	.sd-js body { animation: none; }
}

/* Administrator-only diagnosis inside a visitor-facing error notice. */
.sd-notice__admin {
	margin-top: var(--sd-space-3);
	padding-top: var(--sd-space-3);
	border-top: 1px solid rgba(23, 25, 28, 0.12);
	font-size: 0.8125rem;
	line-height: 1.55;
}