/**
 * Homepage sections. Loaded only on the front page.
 *
 * Rhythm: hero sheet (photo stage) → latest rail (bg) → featured spotlight
 * panel → Google reviews (banner + slider) → manifesto sheet (secondary) →
 * why (connected steps) → sold band
 * (secondary, rounded) → happy customers (photo grid) → CTA panel.
 * Surfaces, radii and type follow the inner pages (tokens.css, sections.css).
 */

/* ---------- Shared section pieces ---------- */

.home-section {
	padding-block: var(--nscb-space-section);
}

.home-section--flush-top {
	padding-top: 0;
}

/* A rounded band that sits on the page like the inner-page hero sheet. */
.home-about,
.home-sold {
	position: relative;
	border-block: 1px solid var(--nscb-edge);
	border-radius: var(--nscb-radius-xl);
	background-color: var(--nscb-color-bg-secondary);
}

/* Section heads and eyebrows: assets/css/components/sections.css. */

/* Reveal on scroll: assets/css/components/reveal.css. */

/* ---------- 1. Hero ---------- */

.home-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	min-height: clamp(32rem, calc(100svh - var(--nscb-header-height)), 56rem);
	overflow: hidden;
	padding-block: var(--nscb-space-9) var(--nscb-space-8);
	border-bottom: 1px solid var(--nscb-edge);
	border-radius: 0 0 var(--nscb-radius-xl) var(--nscb-radius-xl);
	background-color: var(--nscb-color-bg);
	box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.9);
}

.home-hero__media,
.home-hero__veil {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.home-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	animation: nscb-hero-zoom 1.8s var(--nscb-ease-out) both;
}

/* Photo variant: darken from the bottom so text stays legible, with a faint
   warm highlight glow under the car. */
.home-hero--image .home-hero__veil {
	background:
		linear-gradient(0deg, var(--nscb-color-bg) 0%, color-mix(in srgb, var(--nscb-color-bg) 82%, transparent) 30%, color-mix(in srgb, var(--nscb-color-bg) 20%, transparent) 58%, transparent 72%),
		linear-gradient(180deg, color-mix(in srgb, var(--nscb-color-bg) 60%, transparent) 0%, transparent 20%),
		radial-gradient(60% 30% at 64% 62%, color-mix(in srgb, var(--nscb-color-highlight) 10%, transparent), transparent 70%);
}

/* Phones and tablets: the whole car on a wide photo stage at the top (the
   1920×1080 photo keeps nearly its full width, so the car is not cropped to
   its nose), then the headline and action directly beneath, all on the first
   screen. The headline rises slightly over the stage floor for depth. */
@media (max-width: 63.99rem) {
	.home-hero--image {
		display: block;
		min-height: 0;
		padding-block: 0 var(--nscb-space-7);
	}

	.home-hero--image .home-hero__media {
		position: relative;
		inset: auto;
		aspect-ratio: 16 / 10;
	}

	.home-hero--image .home-hero__img {
		object-position: 56% 58%;
	}

	.home-hero--image .home-hero__veil {
		bottom: auto;
		height: calc(100vw * 10 / 16);
		background:
			linear-gradient(0deg, var(--nscb-color-bg) 0%, color-mix(in srgb, var(--nscb-color-bg) 60%, transparent) 14%, transparent 34%),
			linear-gradient(180deg, color-mix(in srgb, var(--nscb-color-bg) 55%, transparent) 0%, transparent 16%),
			radial-gradient(55% 22% at 56% 92%, color-mix(in srgb, var(--nscb-color-highlight) 14%, transparent), transparent 70%);
	}

	.home-hero--image .home-hero__inner {
		margin-top: calc(-1 * var(--nscb-space-5));
	}
}

/* Type variant (no hero image saved): quiet light falling on a dark stage. */
.home-hero--type {
	align-items: flex-end;
	min-height: clamp(26rem, 62svh, 44rem);
	padding-block: var(--nscb-space-8) var(--nscb-space-7);
	background-image: linear-gradient(180deg, var(--nscb-color-bg) 0%, var(--nscb-color-bg-secondary) 100%);
}

.home-hero--type .home-hero__veil {
	background:
		radial-gradient(70% 55% at 82% 8%, color-mix(in srgb, var(--nscb-color-accent) 24%, transparent), transparent 70%),
		radial-gradient(60% 45% at 8% 100%, color-mix(in srgb, var(--nscb-color-accent) 10%, transparent), transparent 75%);
}

/* One-time light sweep on load (type variant). */
.home-hero--type .home-hero__veil::before {
	content: "";
	position: absolute;
	inset: -20% -40%;
	background: linear-gradient(105deg, transparent 40%, color-mix(in srgb, var(--nscb-color-accent-secondary) 7%, transparent) 50%, transparent 60%);
	animation: nscb-hero-sweep 2.4s 0.3s var(--nscb-ease-in-out) both;
}

.home-hero__inner {
	position: relative;
}

.home-hero__content {
	max-width: 44rem;
}

.home-hero__title {
	font-size: var(--nscb-text-display);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: -0.045em;
	text-shadow: 0 2px 24px color-mix(in srgb, var(--nscb-color-bg) 60%, transparent);
}

.home-hero__line {
	display: block;
	animation: nscb-rise 0.8s var(--nscb-ease-out) both;
}

.home-hero__line--accent {
	color: var(--nscb-color-highlight);
	animation-delay: 0.12s;
}

.home-hero__subtext {
	max-width: 34ch;
	margin-top: var(--nscb-space-4);
	color: var(--nscb-color-text-secondary);
	font-size: var(--nscb-text-lg);
	line-height: var(--nscb-leading-normal);
	animation: nscb-rise 0.8s 0.24s var(--nscb-ease-out) both;
}

.home-hero__actions {
	display: grid;
	gap: var(--nscb-space-3);
	margin-top: var(--nscb-space-6);
	animation: nscb-rise 0.8s 0.36s var(--nscb-ease-out) both;
}

.home-hero__actions .nscb-btn {
	min-height: 3.5rem;
	padding-inline: var(--nscb-space-6);
	font-size: var(--nscb-text-md);
}

@media (min-width: 36rem) {
	.home-hero__actions {
		display: flex;
		flex-wrap: wrap;
	}
}

@media (min-width: 64rem) {
	.home-hero {
		padding-bottom: var(--nscb-space-9);
		border-radius: 0 0 var(--nscb-radius-2xl) var(--nscb-radius-2xl);
	}

	/* Wide screens: the photo fills the right side; the headline sits on clean dark space. */
	.home-hero--image {
		align-items: center;
	}

	.home-hero--image .home-hero__media {
		left: 30%;
	}

	.home-hero--image .home-hero__veil {
		background:
			linear-gradient(90deg, var(--nscb-color-bg) 0%, var(--nscb-color-bg) 30%, color-mix(in srgb, var(--nscb-color-bg) 55%, transparent) 46%, transparent 62%),
			linear-gradient(0deg, var(--nscb-color-bg) 0%, transparent 30%),
			linear-gradient(180deg, color-mix(in srgb, var(--nscb-color-bg) 50%, transparent) 0%, transparent 18%),
			radial-gradient(40% 35% at 66% 72%, color-mix(in srgb, var(--nscb-color-highlight) 11%, transparent), transparent 70%);
	}

	.home-hero--type {
		align-items: center;
		padding-block: var(--nscb-space-8);
	}

	.home-hero--type .home-hero__veil {
		background:
			radial-gradient(55% 70% at 80% 10%, color-mix(in srgb, var(--nscb-color-accent) 22%, transparent), transparent 70%),
			radial-gradient(45% 50% at 0% 100%, color-mix(in srgb, var(--nscb-color-accent) 9%, transparent), transparent 75%);
	}
}

/* Small desktops and landscape/portrait tablets (1024–1279px): a height-filling
   cover photo is narrower than the car here, so the rear of the car slid under
   the headline (and tall portrait screens zoomed into the grille). Size the
   photo by width instead, as a right-hand stage that fades out top and bottom,
   and step the headline down so the two sit side by side. */
@media (min-width: 64rem) and (max-width: 79.99rem) {
	.home-hero--image {
		min-height: clamp(32rem, calc(100svh - var(--nscb-header-height)), 46rem);
	}

	.home-hero--image .home-hero__media {
		inset: 50% 0 auto auto;
		width: 68%;
		aspect-ratio: 16 / 10;
		translate: 0 -50%;
		-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
		mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
	}

	.home-hero--image .home-hero__img {
		object-position: 60% 55%;
	}

	.home-hero--image .home-hero__veil {
		background:
			linear-gradient(90deg, var(--nscb-color-bg) 0%, var(--nscb-color-bg) 32%, color-mix(in srgb, var(--nscb-color-bg) 50%, transparent) 42%, transparent 54%),
			linear-gradient(0deg, var(--nscb-color-bg) 0%, transparent 22%),
			radial-gradient(40% 30% at 68% 66%, color-mix(in srgb, var(--nscb-color-highlight) 11%, transparent), transparent 70%);
	}

	.home-hero--image .home-hero__title {
		font-size: clamp(3.5rem, 0.5rem + 5vw, 4.5rem);
	}

	.home-hero--image .home-hero__content {
		max-width: 26rem;
	}
}

@keyframes nscb-rise {
	from {
		opacity: 0;
		transform: translateY(1.5rem);
	}
}

@keyframes nscb-hero-zoom {
	from {
		transform: scale(1.08);
	}
}

@keyframes nscb-hero-sweep {
	from {
		opacity: 0;
		transform: translateX(-30%);
	}
	50% {
		opacity: 1;
	}
	to {
		opacity: 0;
		transform: translateX(30%);
	}
}

/* ---------- 2. Latest Arrivals ---------- */

.home-latest {
	padding-block: var(--nscb-space-8) var(--nscb-space-6);
}

/* ---------- 3. Featured Vehicle: one lit spotlight panel ---------- */

.home-featured {
	padding-top: var(--nscb-space-6);
}

.home-featured__grid {
	position: relative;
	display: grid;
	gap: var(--nscb-space-6);
	align-items: center;
	overflow: hidden;
	padding: var(--nscb-space-5) var(--nscb-space-4) var(--nscb-space-6);
	border: 1px solid var(--nscb-edge);
	border-radius: var(--nscb-radius-xl);
	background-color: var(--nscb-color-bg-secondary);
	background-image:
		radial-gradient(70% 55% at 20% 0%, color-mix(in srgb, var(--nscb-color-accent-secondary) 9%, transparent), transparent 70%),
		var(--nscb-surface-card);
	box-shadow: var(--nscb-edge-light), var(--nscb-shadow-lg);
}

/* The photo on a showroom stage: a spotlight from above and a lit floor. */
.home-featured__media {
	position: relative;
	display: grid;
	place-items: center;
	padding: var(--nscb-space-5) var(--nscb-space-5) var(--nscb-space-7);
	border-radius: calc(var(--nscb-radius-xl) - var(--nscb-space-2));
	background:
		radial-gradient(60% 18% at 50% 96%, color-mix(in srgb, var(--nscb-color-highlight) 22%, transparent), transparent 70%),
		radial-gradient(70% 55% at 50% 0%, color-mix(in srgb, var(--nscb-color-accent-secondary) 12%, transparent), transparent 70%),
		var(--nscb-color-bg);
}

/* Floor line the photo stands on. */
.home-featured__media::after {
	content: "";
	position: absolute;
	right: 12%;
	bottom: var(--nscb-space-5);
	left: 12%;
	height: 1px;
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--nscb-color-highlight) 55%, transparent), transparent);
}

.home-featured__img {
	position: relative;
	width: 100%;
	max-width: 22rem;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	border-radius: var(--nscb-radius-lg);
	box-shadow: 0 30px 50px -24px rgba(0, 0, 0, 0.9);
	transition: transform var(--nscb-duration-cinematic) var(--nscb-ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.home-featured__media:hover .home-featured__img {
		transform: translateY(-6px);
	}
}

.home-featured__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--nscb-space-3);
	margin-bottom: var(--nscb-space-4);
}

.home-featured__meta .nscb-eyebrow {
	margin-bottom: 0;
}

.home-featured__title {
	font-size: var(--nscb-text-3xl);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.04em;
	text-wrap: balance;
}

.home-featured__price {
	display: grid;
	gap: var(--nscb-space-1);
	margin-top: var(--nscb-space-5);
	padding-top: var(--nscb-space-4);
	border-top: 1px solid var(--nscb-edge);
}

.home-featured__price-label {
	color: var(--nscb-color-text-secondary);
	font-size: var(--nscb-text-xs);
	font-weight: 600;
	letter-spacing: var(--nscb-tracking-wide);
	text-transform: uppercase;
}

.home-featured .nscb-price {
	color: var(--nscb-color-highlight);
	font-size: clamp(2rem, 1.6rem + 2vw, 2.75rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1;
}

.home-featured__tagline {
	margin-top: var(--nscb-space-4);
	color: var(--nscb-color-text-secondary);
	font-size: var(--nscb-text-lg);
}

/* Highlights: the raised fact tiles used on the car page description. */
.home-featured__highlights {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
	gap: var(--nscb-space-2);
	margin: var(--nscb-space-6) 0 0;
	padding: 0;
	list-style: none;
}

.home-featured__highlights li {
	display: flex;
	align-items: center;
	min-height: 3.25rem;
	padding: var(--nscb-space-3) var(--nscb-space-4);
	border: 1px solid var(--nscb-edge);
	border-radius: var(--nscb-radius-md);
	background-color: var(--nscb-surface-raised);
	box-shadow: var(--nscb-edge-light);
	color: var(--nscb-color-text);
	font-size: var(--nscb-text-sm);
	font-weight: var(--nscb-font-weight-medium);
	line-height: var(--nscb-leading-snug);
}

.home-featured__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--nscb-space-4) var(--nscb-space-5);
	margin-top: var(--nscb-space-6);
}

.home-featured__actions .nscb-btn {
	min-height: 3.5rem;
	padding-inline: var(--nscb-space-6);
	font-size: var(--nscb-text-md);
}

.home-featured__photos {
	display: inline-flex;
	align-items: center;
	gap: var(--nscb-space-2);
	color: var(--nscb-color-text-secondary);
	font-size: var(--nscb-text-sm);
}

.home-featured__photos .nscb-icon {
	box-sizing: content-box;
	width: 1rem;
	height: 1rem;
	padding: 0.625rem;
	border: 1px solid var(--nscb-edge);
	border-radius: 50%;
	background-color: var(--nscb-surface-raised);
	color: var(--nscb-color-highlight);
}

@media (min-width: 48rem) {
	.home-featured__grid {
		padding: var(--nscb-space-6);
	}
}

@media (min-width: 64rem) {
	.home-featured__grid {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		gap: var(--nscb-space-8);
		padding: var(--nscb-space-5) var(--nscb-space-8) var(--nscb-space-5) var(--nscb-space-5);
		border-radius: var(--nscb-radius-2xl);
	}

	.home-featured__grid--text {
		grid-template-columns: minmax(0, 1fr);
		padding: var(--nscb-space-8);
	}

	.home-featured__media {
		align-self: stretch;
		padding: var(--nscb-space-7) var(--nscb-space-6) var(--nscb-space-8);
		border-radius: calc(var(--nscb-radius-2xl) - var(--nscb-space-3));
	}

	.home-featured__img {
		max-width: 24rem;
	}

	.home-featured__title {
		font-size: var(--nscb-text-4xl);
	}
}

/* ---------- 4. About preview: a manifesto sheet ---------- */

.home-about {
	background-image: radial-gradient(55% 60% at 0% 0%, color-mix(in srgb, var(--nscb-color-accent) 13%, transparent), transparent 70%);
}

.home-about__grid {
	display: grid;
	gap: var(--nscb-space-6);
}

.home-about__head {
	margin-bottom: 0;
}

.home-about__head .nscb-section-head__title {
	font-size: var(--nscb-text-4xl);
	line-height: 1;
}

.home-about__line {
	display: block;
}

.home-about__line--muted {
	color: var(--nscb-color-text-secondary);
}

.home-about__media {
	margin-top: var(--nscb-space-6);
	overflow: hidden;
	border: 1px solid var(--nscb-edge);
	border-radius: var(--nscb-radius-xl);
	box-shadow: var(--nscb-shadow-card);
}

.home-about__media img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.home-about__copy {
	display: grid;
	align-content: start;
	gap: var(--nscb-space-5);
}

/* The quote reads as the pull-quote used on About Us. */
.home-about__quote {
	position: relative;
	margin: 0;
	padding-left: var(--nscb-space-5);
	color: var(--nscb-color-text);
	font-family: var(--nscb-font-heading);
	font-size: var(--nscb-text-xl);
	font-weight: 600;
	line-height: var(--nscb-leading-snug);
	letter-spacing: -0.015em;
}

.home-about__quote::before {
	content: "";
	position: absolute;
	top: 0.2em;
	bottom: 0.2em;
	left: 0;
	width: 0.25rem;
	border-radius: var(--nscb-radius-pill);
	background: linear-gradient(180deg, var(--nscb-color-highlight), color-mix(in srgb, var(--nscb-color-highlight) 15%, transparent));
}

.home-about__body {
	max-width: 60ch;
	color: var(--nscb-color-text-secondary);
}

.home-about__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nscb-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.home-about__tags li {
	display: inline-flex;
	align-items: center;
	gap: var(--nscb-space-2);
	min-height: 2.75rem;
	padding: 0.25rem 1rem 0.25rem 0.25rem;
	border: 1px solid var(--nscb-edge);
	border-radius: var(--nscb-radius-pill);
	background-color: var(--nscb-surface-raised);
	box-shadow: var(--nscb-edge-light);
	color: var(--nscb-color-text);
	font-size: var(--nscb-text-sm);
	font-weight: 600;
}

.home-about__tags .nscb-icon {
	box-sizing: content-box;
	width: 0.875rem;
	height: 0.875rem;
	padding: 0.5rem;
	border-radius: 50%;
	background-color: var(--nscb-color-bg);
	color: var(--nscb-color-highlight);
}

.home-about__copy .nscb-btn {
	justify-self: start;
}

@media (min-width: 64rem) {
	.home-about {
		border-radius: var(--nscb-radius-2xl);
	}

	.home-about__grid {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		gap: var(--nscb-space-9);
	}

	.home-about__copy {
		padding-top: var(--nscb-space-6);
	}

	.home-about__quote {
		font-size: var(--nscb-text-2xl);
	}
}

/* ---------- 5. Why Choose Us: connected steps, not a row of cards ---------- */

.home-why__head {
	margin-bottom: var(--nscb-space-7);
}

.home-why__highlight {
	color: var(--nscb-color-highlight);
	font-style: normal;
}

.home-why__list {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Phones: a vertical track; each step hangs off a numbered round badge. */
.home-why__item {
	position: relative;
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr);
	column-gap: var(--nscb-space-4);
	align-content: start;
	padding-bottom: var(--nscb-space-7);
}

.home-why__item:last-child {
	padding-bottom: 0;
}

/* The connecting line runs from one badge to the next. */
.home-why__item:not(:last-child)::before {
	content: "";
	position: absolute;
	top: 3.75rem;
	bottom: 0.25rem;
	left: calc(1.75rem - 1px);
	width: 2px;
	border-radius: 2px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--nscb-color-highlight) 70%, transparent), var(--nscb-edge));
}

.home-why__number {
	display: grid;
	grid-row: 1 / span 2;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	border: 2px solid var(--nscb-color-highlight);
	border-radius: 50%;
	background-color: var(--nscb-color-bg);
	box-shadow: 0 0 0 6px var(--nscb-highlight-soft);
	color: var(--nscb-color-highlight);
	font-family: var(--nscb-font-heading);
	font-size: var(--nscb-text-lg);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	transition: background-color var(--nscb-duration-base) var(--nscb-ease-standard), color var(--nscb-duration-base) var(--nscb-ease-standard);
}

.home-why__item:hover .home-why__number {
	background-color: var(--nscb-color-highlight);
	color: var(--nscb-color-highlight-text);
}

.home-why__title {
	grid-column: 2;
	padding-top: 0.6rem;
	font-size: var(--nscb-text-xl);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.home-why__body {
	grid-column: 2;
	margin-top: var(--nscb-space-2);
	color: var(--nscb-color-text-secondary);
}

/* Wide screens: a horizontal track across the steps. */
@media (min-width: 48rem) {
	.home-why__list {
		grid-template-columns: repeat(var(--nscb-count, 3), minmax(0, 1fr));
		gap: var(--nscb-space-6);
	}

	.home-why__item {
		display: block;
		padding-bottom: 0;
	}

	.home-why__item:not(:last-child)::before {
		top: calc(1.75rem - 1px);
		right: calc(-1 * var(--nscb-space-6));
		bottom: auto;
		left: 4.5rem;
		width: auto;
		height: 2px;
		background: linear-gradient(90deg, color-mix(in srgb, var(--nscb-color-highlight) 70%, transparent), var(--nscb-edge));
	}

	.home-why__number {
		margin-bottom: var(--nscb-space-5);
	}

	.home-why__title {
		padding-top: 0;
	}
}

/* ---------- 6. Recently Sold ---------- */

.home-sold {
	background-image: radial-gradient(55% 60% at 100% 0%, color-mix(in srgb, var(--nscb-color-text-secondary) 7%, transparent), transparent 70%);
}

/* Square crops on wide screens keep the sold grid compact and set it apart
   from the 4:5 latest-arrivals rail. */
@media (min-width: 64rem) {
	.home-sold {
		--nscb-card-ratio: 1 / 1;
		border-radius: var(--nscb-radius-2xl);
	}
}

/* The rail's own bottom padding already spaces the cards from the band edge. */
.home-sold {
	padding-bottom: var(--nscb-space-7);
}

.home-sold__footnote {
	margin-top: var(--nscb-space-4);
	color: var(--nscb-color-text-secondary);
}

.home-sold__footnote a {
	color: var(--nscb-color-text);
	text-decoration-color: var(--nscb-color-highlight);
}

/* ---------- 7. Happy Customers: photo grid + "see all" button ---------- */

/* Grid and lightbox: assets/css/components/photo-grid.css and lightbox.css. */

/* Six photos on phones keeps the section compact. */
@media (max-width: 47.99rem) {
	.home-happy .nscb-photo-grid__tile:nth-child(n + 7) {
		display: none;
	}
}

.home-happy__more {
	display: flex;
	justify-content: center;
	margin-top: var(--nscb-space-6);
}

/* ---------- 3b. Google reviews: rating banner + review slider ---------- */

/* Follows the featured spotlight on the same background: its bottom padding
   already separates the two. */
.home-reviews {
	padding-top: 0;
}

.home-reviews__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--nscb-space-4) var(--nscb-space-5);
	margin-bottom: var(--nscb-space-6);
	padding: var(--nscb-space-5);
	border: 1px solid var(--nscb-edge);
	border-radius: var(--nscb-radius-xl);
	background: var(--nscb-surface-card);
	box-shadow: var(--nscb-edge-light), var(--nscb-shadow-card);
}

.home-reviews__score-value {
	color: var(--nscb-color-highlight);
	font-family: var(--nscb-font-heading);
	font-size: var(--nscb-text-3xl);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
}

.home-reviews__summary-text {
	flex: 1 1 12rem;
	color: var(--nscb-color-text-secondary);
	font-size: var(--nscb-text-sm);
}

.home-reviews__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nscb-space-2);
}

/* "See all reviews on Google", centred under the cards. */
.home-reviews__more-all {
	display: flex;
	justify-content: center;
	margin-top: var(--nscb-space-5);
}

.home-reviews__summary-text .home-reviews__stars {
	margin-bottom: var(--nscb-space-1);
}

.home-reviews__stars {
	display: flex;
	gap: 0.125rem;
	color: var(--nscb-edge-strong);
}

.home-reviews__stars .nscb-icon {
	width: 1.125rem;
	height: 1.125rem;
	fill: currentColor;
	stroke: none;
}

.home-reviews__stars .is-lit {
	color: var(--nscb-color-highlight);
}

/* Slider, built like the car rails (assets/css/components/car-card.css): the
   track spans the screen and its padding lines the cards up with the content
   column. Column widths are percentages of that content width, so a set number
   of cards fits each view: 1 on phones (the next one peeks in), 2 on tablets,
   3 on laptops and desktops. Arrow buttons come from rail.js. */
.home-reviews__list {
	--nscb-reviews-pad: max(var(--nscb-gutter), calc((100% - var(--nscb-container-xl)) / 2));
	display: grid;
	grid-auto-columns: calc(100% - 2.5rem);
	grid-auto-flow: column;
	gap: var(--nscb-space-3);
	margin: 0;
	padding: var(--nscb-space-1) var(--nscb-reviews-pad) var(--nscb-space-3);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-padding-inline: var(--nscb-reviews-pad);
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	list-style: none;
}

/* The row spans the screen: draw its keyboard focus ring inside the edges. */
.home-reviews__list:focus-visible {
	outline-offset: -3px;
}

.home-reviews__list::-webkit-scrollbar {
	display: none;
}

.home-reviews__item {
	scroll-snap-align: start;
}

/* position: relative keeps the screen-reader-only labels (absolutely
   positioned) inside the swipe row; otherwise cards scrolled off to the side
   widen the whole page. */
.home-reviews__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--nscb-space-4);
	height: 100%;
	margin: 0;
	padding: var(--nscb-space-5);
	border: 1px solid var(--nscb-edge);
	border-radius: var(--nscb-radius-lg);
	background: var(--nscb-surface-card);
	box-shadow: var(--nscb-edge-light), var(--nscb-shadow-card);
}

.home-reviews__text {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: var(--nscb-color-text);
	font-size: var(--nscb-text-md);
	line-height: var(--nscb-leading-normal);
	-webkit-line-clamp: 7;
	line-clamp: 7;
	-webkit-box-orient: vertical;
}

.home-reviews__text p + p {
	margin-top: var(--nscb-space-2);
}

.home-reviews__author {
	display: flex;
	align-items: center;
	gap: var(--nscb-space-3);
	margin-top: auto;
}

/* Initial-letter avatar (no Google profile photos are loaded). */
.home-reviews__avatar {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background-color: var(--nscb-color-bg);
	box-shadow: var(--nscb-edge-light);
	color: var(--nscb-color-highlight);
	font-family: var(--nscb-font-heading);
	font-weight: 800;
}

.home-reviews__who {
	display: grid;
	min-width: 0;
}

.home-reviews__name {
	overflow: hidden;
	color: var(--nscb-color-text);
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.home-reviews__time {
	color: var(--nscb-color-text-secondary);
	font-size: var(--nscb-text-xs);
}

.home-reviews__more {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	min-height: 2.75rem;
	color: var(--nscb-color-highlight);
	font-size: var(--nscb-text-sm);
	font-weight: 700;
	text-decoration: none;
}

.home-reviews__more:hover {
	text-decoration: underline;
}

@media (min-width: 48rem) {
	.home-reviews__summary {
		padding: var(--nscb-space-5) var(--nscb-space-6);
	}

	/* Beside a rating, the buttons sit at the far end of the card. */
	.home-reviews__summary-text + .home-reviews__actions {
		margin-inline-start: auto;
	}
}

@media (min-width: 48rem) {
	.home-reviews__list {
		grid-auto-columns: calc((100% - var(--nscb-space-4)) / 2);
		gap: var(--nscb-space-4);
	}
}

@media (min-width: 64rem) {
	.home-reviews__list {
		grid-auto-columns: calc((100% - 2 * var(--nscb-space-4)) / 3);
	}

	.home-reviews__card {
		border-radius: var(--nscb-radius-xl);
	}
}

/* Arrow buttons under the slider (mouse/trackpad only, see rail.js). */
.home-reviews__controls {
	margin-top: var(--nscb-space-2);
}

/* ---------- 8. Final enquiry CTA (same lit card as the inner-page CTA) ---------- */

.home-cta {
	padding-top: 0;
}

.home-cta__panel {
	position: relative;
	isolation: isolate;
	display: grid;
	overflow: hidden;
	border: 1px solid var(--nscb-edge);
	border-radius: var(--nscb-radius-xl);
	background-color: var(--nscb-color-bg-secondary);
	background-image:
		radial-gradient(60% 55% at 30% 115%, color-mix(in srgb, var(--nscb-color-highlight) 20%, transparent), transparent 70%),
		radial-gradient(80% 90% at 100% 0%, color-mix(in srgb, var(--nscb-color-accent) 16%, transparent), transparent 70%),
		var(--nscb-surface-card);
	box-shadow: var(--nscb-edge-light), var(--nscb-shadow-lg);
}

/* A hairline of light along the top edge. */
.home-cta__panel::before {
	content: "";
	position: absolute;
	top: 0;
	left: 10%;
	right: 40%;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--nscb-color-highlight), transparent);
}

.home-cta__media img {
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.home-cta__content {
	padding: var(--nscb-space-8) var(--nscb-space-5);
}

.home-cta__title {
	max-width: 18ch;
	font-size: var(--nscb-text-4xl);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.04em;
}

.home-cta__subtext {
	margin-top: var(--nscb-space-4);
	color: var(--nscb-color-text-secondary);
	font-size: var(--nscb-text-lg);
}

.home-cta__actions {
	display: grid;
	gap: var(--nscb-space-3);
	margin-top: var(--nscb-space-6);
}

.home-cta__actions .nscb-btn {
	min-height: 3.5rem;
	padding-inline: var(--nscb-space-6);
	font-size: var(--nscb-text-md);
	white-space: normal;
}

@media (min-width: 36rem) {
	.home-cta__actions {
		display: flex;
		flex-wrap: wrap;
	}
}

@media (min-width: 64rem) {
	.home-cta__panel {
		border-radius: var(--nscb-radius-2xl);
	}

	.home-cta__content {
		padding: var(--nscb-space-9) var(--nscb-space-8);
	}

	.home-cta__panel--image {
		grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	}

	.home-cta__panel--image .home-cta__media {
		order: 2;
	}

	.home-cta__panel--image .home-cta__media img {
		aspect-ratio: auto;
	}
}

/* ---------- Reduced motion: no entrance animations at all ---------- */

@media (prefers-reduced-motion: reduce) {
	.home-hero__img,
	.home-hero__line,
	.home-hero__subtext,
	.home-hero__actions,
	.home-hero--type .home-hero__veil::before {
		animation: none;
	}
}

/* ---------- 3c. Videos: latest 3 videos + "view all" button ---------- */

/* Tiles and player: assets/css/components/video-grid.css and lightbox.css.
   Follows the reviews (or the featured spotlight) on the same background:
   their bottom padding already separates the two. */
.home-videos {
	padding-top: 0;
}

/* Phones: a slider. The track bleeds to the screen edge like the car rails;
   one video fills the view and the next peeks in. Arrows and dots below it
   (assets/js/video-slider.js) follow the swipe. Wider screens: three across,
   no controls. */
@media (max-width: 47.99rem) {
	.home-videos .nscb-video-grid--three {
		grid-auto-columns: calc(100% - 3rem);
		margin-inline: calc(-1 * var(--nscb-gutter));
		padding: var(--nscb-space-1) var(--nscb-gutter) var(--nscb-space-2);
		scroll-padding-inline: var(--nscb-gutter);
	}

	.home-videos__controls {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--nscb-space-4);
		margin-top: var(--nscb-space-4);
	}

	.home-videos__controls[hidden] {
		display: none;
	}
}

@media (min-width: 48rem) {
	.home-videos__controls {
		display: none;
	}
}

.home-videos__dots {
	display: flex;
	align-items: center;
	gap: var(--nscb-space-1);
}

/* 24px tap target around a small dot; the current one stretches into a bar. */
.home-videos__dot {
	position: relative;
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	border: 0;
	background: none;
}

.home-videos__dot::before {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 999px;
	background-color: var(--nscb-edge-strong);
	content: "";
	transform: translate(-50%, -50%);
	transition: width var(--nscb-duration-fast) var(--nscb-ease-standard), background-color var(--nscb-duration-fast) var(--nscb-ease-standard);
}

.home-videos__dot[aria-current="true"]::before {
	width: 1.25rem;
	background-color: var(--nscb-color-highlight);
}

.home-videos__more {
	display: flex;
	justify-content: center;
	margin-top: var(--nscb-space-6);
}

@media (prefers-reduced-motion: reduce) {
	.home-videos__dot::before {
		transition: none;
	}
}