:root {
	--garage-bg-start: #000000;
	--garage-bg-end: #050505;
	--garage-page-glow: rgba(193, 18, 31, 0.2);
	--garage-page-glow-2: rgba(245, 245, 245, 0.08);
	--garage-shell-radius: clamp(1.25rem, 2vw, 1.9rem);
	--garage-section-gap: clamp(1.25rem, 2vw, 2rem);
}

:root[data-theme="light"] {
	color-scheme: dark;
}

html {
	background: var(--garage-bg-end);
}

body {
	background:
		radial-gradient(circle at top left, var(--garage-page-glow), transparent 34%),
		radial-gradient(circle at right top, var(--garage-page-glow-2), transparent 28%),
		linear-gradient(180deg, var(--garage-bg-start) 0%, var(--garage-bg-end) 100%);
}

.u-section {
	padding-block: clamp(3rem, 7vw, 5.75rem);
}

.garage-page > .u-section:first-child {
	padding-top: clamp(2.5rem, 6vw, 5rem);
}

.u-glass,
.garage-panel,
.garage-card,
.garage-shell-panel {
	border-radius: var(--garage-shell-radius);
	border-color: rgba(245, 245, 245, 0.1);
	background:
		linear-gradient(180deg, rgba(193, 18, 31, 0.12), rgba(0, 0, 0, 0.04)),
		var(--surface-card);
	box-shadow: var(--shadow-elevation-2);
}

:root[data-theme="light"] .u-glass,
:root[data-theme="light"] .garage-panel,
:root[data-theme="light"] .garage-card,
:root[data-theme="light"] .garage-shell-panel {
	border-color: rgba(245, 245, 245, 0.1);
	background:
		linear-gradient(180deg, rgba(193, 18, 31, 0.12), rgba(0, 0, 0, 0.04)),
		var(--surface-card);
}

.garage-site-header {
	padding-block: 0.8rem;
}

.garage-site-header__inner {
	padding: 0.9rem 1.1rem;
	border-radius: calc(var(--garage-shell-radius) + 1rem);
	gap: 1rem;
}

.garage-brand {
	min-width: 0;
}

.garage-brand__media {
	display: inline-flex;
	align-items: center;
}

.garage-brand__image {
	display: block;
	width: auto;
	max-width: clamp(9rem, 17vw, 13rem);
	max-height: 3rem;
	object-fit: contain;
}

.garage-brand__text {
	gap: 0.15rem;
}

.garage-brand__kicker {
	color: var(--text-soft);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
}

.garage-brand__name {
	font-size: clamp(1rem, 1.6vw, 1.1rem);
}

.garage-header-actions {
	gap: 0.7rem;
}

.garage-button--compact {
	padding: 0.75rem 1rem;
	font-size: var(--fs-300);
}

.garage-mobile-panel {
	padding-top: calc(var(--header-height) + 1.25rem);
}

.garage-mobile-panel__meta {
	display: grid;
	gap: 0.75rem;
}

.garage-site-footer__inner {
	grid-template-columns: 1.2fr 0.9fr;
	align-items: start;
}

.garage-footer__meta {
	display: grid;
	gap: 0.65rem;
}

.garage-footer__meta a {
	color: var(--text-body);
}

.garage-footer__bottom {
	padding-bottom: var(--space-xl);
}

.garage-footer__newsletter {
	align-self: stretch;
}

.garage-button {
	font-weight: 700;
}

.garage-button--cta::after,
[data-logo-mark] {
	animation: none !important;
}

[data-scroll-animate] {
	transform: translate3d(0, 0.85rem, 0);
	transition: opacity 280ms ease, transform 280ms ease;
}

@media (prefers-reduced-motion: reduce) {
	[data-scroll-animate] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

.garage-hero-grid,
.garage-story-hero,
.garage-dual-grid--story,
.garage-pricing-hero,
.garage-contact-hero {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2rem);
	align-items: center;
}

.garage-home-hero__title,
.garage-story-hero h1 {
	max-width: 12ch;
}

.garage-home-hero__subtitle {
	max-width: 42rem;
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
}

.garage-home-hero__visual,
.garage-story-hero__media {
	position: relative;
	overflow: hidden;
	min-height: 24rem;
}

.garage-home-hero__visual::before {
	content: none;
}

.garage-home-hero__visual > img,
.garage-story-hero__media > img,
.garage-rent-hero__video > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.garage-hero-card,
.garage-story-hero__badge {
	position: absolute;
	left: 1rem;
	right: 1rem;
	bottom: 1rem;
	display: grid;
	gap: 0.75rem;
	padding: 1rem 1.1rem;
	border-radius: calc(var(--garage-shell-radius) - 0.2rem);
}

.garage-hero-card p,
.garage-story-hero__badge span {
	margin: 0;
}

.garage-stat-grid--compact {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.garage-service-grid,
.garage-proof-grid {
	display: grid;
	gap: var(--garage-section-gap);
}

.garage-service-card,
.garage-proof-card {
	display: grid;
	gap: 0.9rem;
	padding: clamp(1.2rem, 2vw, 1.6rem);
}

.garage-service-card--detailed {
	align-content: start;
}

.garage-step-grid {
	display: grid;
	gap: var(--garage-section-gap);
}

.garage-step-card {
	padding: clamp(1.25rem, 2vw, 1.6rem);
}

.garage-step-card::after {
	content: none;
}

.garage-brand-panel {
	gap: 1.2rem;
}

.garage-brand-panel__image {
	width: min(14rem, 52%);
	height: auto;
	margin-inline: auto;
	object-fit: contain;
}

.garage-cta-banner {
	display: grid;
	gap: 1rem;
	padding: clamp(1.3rem, 2vw, 1.8rem);
	align-items: center;
}

.garage-story-hero__copy,
.garage-home-hero__content,
.garage-service-summary {
	display: grid;
	gap: 1rem;
}

.garage-story-hero__media {
	min-height: 28rem;
}

.garage-history-timeline {
	display: grid;
	gap: var(--garage-section-gap);
}

.garage-history-card {
	position: relative;
	padding: clamp(1.3rem, 2vw, 1.7rem);
}

.garage-year-badge {
	margin-bottom: 0.75rem;
}

.garage-pricing-hero {
	align-items: start;
}

.garage-price-calculator,
.garage-tier-card,
.garage-contact-form,
.garage-contact-card {
	padding: clamp(1.2rem, 2vw, 1.65rem);
}

.garage-total-display {
	font-size: clamp(2rem, 4vw, 3rem);
}

.garage-addon-grid,
.garage-contact-card-grid {
	display: grid;
	gap: var(--garage-section-gap);
}

.garage-addon-card {
	cursor: pointer;
}

.garage-addon-card input {
	margin: 0;
}

.garage-faq-shell {
	padding: clamp(1.15rem, 2vw, 1.5rem);
	border-radius: var(--garage-shell-radius);
	border: 1px solid rgba(245, 245, 245, 0.1);
	background: rgba(0, 0, 0, 0.7);
}

:root[data-theme="light"] .garage-faq-shell {
	border-color: rgba(245, 245, 245, 0.1);
	background: rgba(0, 0, 0, 0.7);
}

.garage-accordion__item {
	background: rgba(193, 18, 31, 0.08);
}

.garage-rent-hero {
	min-height: 32rem;
	border-radius: var(--garage-shell-radius);
	padding-block: 0;
}

.garage-rent-hero__overlay {
	background: linear-gradient(180deg, rgba(193, 18, 31, 0.12), rgba(0, 0, 0, 0.86));
}

.garage-rent-hero__content {
	padding-block: clamp(3rem, 8vw, 5rem);
}

.garage-filter-bar {
	padding: 1rem;
}

.garage-vehicle-grid {
	display: grid;
	gap: var(--garage-section-gap);
}

.garage-vehicle-card {
	padding: 1rem;
}

.garage-vehicle-card__media {
	min-height: 11rem;
}

.garage-vehicle-card__visual {
	display: grid;
	align-content: end;
	gap: 0.6rem;
	min-height: 11rem;
	padding: 1rem;
	border-radius: calc(var(--garage-shell-radius) - 0.35rem);
	background:
		linear-gradient(135deg, rgba(245, 245, 245, 0.08), rgba(193, 18, 31, 0.08)),
		linear-gradient(160deg, rgba(193, 18, 31, 0.12), rgba(0, 0, 0, 0.9));
	color: var(--clr-accent-400);
}

:root[data-theme="light"] .garage-vehicle-card__visual {
	background:
		linear-gradient(135deg, rgba(245, 245, 245, 0.08), rgba(193, 18, 31, 0.08)),
		linear-gradient(160deg, rgba(193, 18, 31, 0.12), rgba(0, 0, 0, 0.9));
	color: var(--text-strong);
}

.garage-vehicle-card__quick {
	opacity: 1;
	transform: none;
}

.garage-contact-map-shell {
	min-height: 26rem;
}

[data-contact-map] {
	background:
		radial-gradient(circle at 20% 25%, var(--garage-page-glow), transparent 16%),
		linear-gradient(145deg, rgba(193, 18, 31, 0.12), rgba(0, 0, 0, 0.9));
}

.garage-location-cards {
	padding: 1rem;
	align-content: end;
	height: 100%;
}

.garage-floating-field label {
	background: transparent;
}

:root[data-theme="light"] .garage-floating-field label {
	background: #000;
}

.garage-contact-card:hover {
	transform: none;
}

.garage-proof-grid,
.garage-contact-card-grid,
.garage-history-timeline,
.garage-step-grid,
.garage-service-grid,
.garage-addon-grid,
.garage-pricing-tiers {
	grid-template-columns: 1fr;
}

.garage-process-flow--services {
	display: grid;
	gap: var(--garage-section-gap);
}

.garage-process-flow--services::before {
	content: none;
}

.garage-process-step {
	padding: 1rem 1.1rem;
	gap: 0.8rem;
}

.garage-process-step::before {
	display: none;
}

.garage-service-summary {
	padding: clamp(1.2rem, 2vw, 1.6rem);
}

.garage-table {
	width: 100%;
	border-collapse: collapse;
}

.garage-table th,
.garage-table td {
	padding: 0.85rem 1rem;
	border-bottom: 1px solid rgba(245, 245, 245, 0.08);
	text-align: left;
}

:root[data-theme="light"] .garage-table th,
:root[data-theme="light"] .garage-table td {
	border-bottom-color: rgba(245, 245, 245, 0.08);
}

@media (min-width: 768px) {
	.garage-hero-grid,
	.garage-story-hero,
	.garage-dual-grid--story,
	.garage-pricing-hero,
	.garage-contact-hero {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.garage-service-grid,
	.garage-proof-grid,
	.garage-contact-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.garage-step-grid,
	.garage-stat-grid--compact,
	.garage-addon-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.garage-history-timeline {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.garage-pricing-tiers {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.garage-cta-banner {
		grid-template-columns: 1.2fr auto;
	}

	.garage-vehicle-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.garage-site-footer__inner {
		grid-template-columns: 1.1fr 0.9fr;
	}

	.garage-header-contact {
		display: inline-flex;
	}

	.garage-service-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.garage-service-grid .garage-service-card--detailed {
		grid-column: span 2;
	}

	.garage-proof-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.garage-vehicle-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.garage-brand__text {
		display: none;
	}

	.garage-header-contact {
		display: none;
	}

	.garage-site-footer__inner {
		grid-template-columns: 1fr;
	}

	.garage-home-hero__visual,
	.garage-story-hero__media,
	.garage-rent-hero {
		min-height: 20rem;
	}

	.garage-hero-card,
	.garage-story-hero__badge {
		position: relative;
		left: auto;
		right: auto;
		bottom: auto;
		margin: 1rem;
	}
}
