/* =====================================================
   REGINALDI NCC
   Main stylesheet
===================================================== */


/* =========================
   RESET
========================= */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: "Inter", sans-serif;
	background: #f3f3f1;
	color: #171717;
	line-height: 1.6;
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	max-width: 100%;
	display: block;
}


/* =========================
   VARIABLES
========================= */

:root {

	--black: #111111;
	--dark: #191919;
	--dark-soft: #242424;

	--white: #f5f5f3;
	--gray: #a9a9a9;

	--chrome: #c8c8c8;
	--border: rgba(255,255,255,0.12);

	--max-width: 1200px;
}


/* =========================
   GLOBAL
========================= */

.container {
	width: min(90%, var(--max-width));
	margin: auto;
}

.section {
	padding: 120px 0;
}

.dark-section {
	background: var(--dark);
	color: var(--white);
}

.section-label {
	display: inline-block;

	font-family: "Montserrat", sans-serif;
	font-size: 11px;
	font-weight: 600;

	letter-spacing: 3px;

	color: #888;

	margin-bottom: 25px;
}

.dark-section .section-label {
	color: #999;
}


/* =========================
   NAVBAR
========================= */

.navbar {
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;

	z-index: 100;

	color: white;
}

.nav-container {
	height: 100px;

	display: flex;
	align-items: center;
	justify-content: space-between;
}

.logo {
	display: flex;
	align-items: center;
height: 65px;
transform: translateY(6px);

}

.logo img {
	width: 180px;
	height: auto;
	display: block;
}

.logo-main {
	font-family: "Montserrat", sans-serif;

	font-size: 20px;
	font-weight: 700;

	letter-spacing: 5px;

	background: linear-gradient(
		120deg,
		#777,
		#f1f1f1,
		#888
	);

	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.logo-sub {
	font-size: 9px;

	letter-spacing: 6px;

	margin-top: 7px;

	color: #aaa;
}

.nav-menu {
	display: flex;
	align-items: center;

	gap: 35px;

	font-size: 13px;
}

.nav-menu > a:not(.nav-button) {
	color: #ddd;

	transition: color .3s ease;
}

.nav-menu > a:not(.nav-button):hover {
	color: white;
}

.nav-button {
	border: 1px solid rgba(255,255,255,.5);

	padding: 12px 18px;

	font-size: 11px;

	text-transform: uppercase;

	letter-spacing: 1.5px;

	transition: all .3s ease;
}

.nav-button:hover {
	background: white;
	color: #111;
}

.mobile-menu-button {
	display: none;

	background: none;
	border: none;

	color: white;

	font-size: 25px;

	cursor: pointer;
}


/* =========================
   HERO
========================= */

.hero {

	position: relative;

	min-height: 100vh;

	display: flex;
	align-items: center;

	color: white;

	overflow: hidden;

	background:
		linear-gradient(
			90deg,
			rgba(10,10,10,.9),
			rgba(10,10,10,.55),
			rgba(10,10,10,.35)
		),
		url("images/audi-q5.jpg")
		center center / cover no-repeat;

	background-color: #222;
}

.hero-overlay {
	position: absolute;

	inset: 0;

	background:
		linear-gradient(
			180deg,
			rgba(0,0,0,.45),
			transparent 50%,
			rgba(0,0,0,.65)
		);
}

.hero-content {
	position: relative;

	z-index: 2;

	padding-top: 80px;
}

.eyebrow {
	font-size: 11px;

	letter-spacing: 4px;

	color: #bbb;

	margin-bottom: 25px;
}

.hero-brand {

	font-family: "Montserrat", sans-serif;

	font-size: clamp(48px, 7vw, 90px);

	line-height: 1;

	letter-spacing: 2px;

	font-weight: 600;

	color: #d0d0d0;

	test-shadow:
	0 1px 2px rgba(0,0,0,.8),
	0 0 12px rgba(255,255,255,.08);
	
}

.hero-brand span {
	front-size: .42em;

	letter-spacing: 6px;

	margin-left: 8px;

	color:#aaa;
}

.hero-subtitle {

	font-family: "Montserrat", sans-serif;

	font-size: 17px;

	letter-spacing: 5px;

	margin-top: 35px;

	color: #ddd;
}

.hero-description {

	max-width: 500px;

	margin-top: 20px;

	color: #bbb;

	font-size: 15px;
}

.hero-buttons {

	display: flex;

	gap: 15px;

	margin-top: 40px;
}

.button {

	display: inline-flex;

	align-items: center;
	justify-content: center;

	min-height: 52px;

	padding: 0 27px;

	text-transform: uppercase;

	font-family: "Montserrat", sans-serif;

	font-size: 10px;

	letter-spacing: 2px;

	transition: all .3s ease;
}

.button-primary {

	background: white;

	color: #111;
}

.button-primary:hover {

	background: #ccc;

	transform: translateY(-2px);
}

.button-outline {

	border: 1px solid rgba(255,255,255,.6);

	color: white;
}

.button-outline:hover {

	background: white;

	color: #111;
}

.hero-location {

	position: absolute;

	bottom: 35px;
	right: 5%;

	z-index: 2;

	font-size: 9px;

	letter-spacing: 3px;

	color: #aaa;
}


/* =========================
   INTRO
========================= */

.intro-container {

	display: grid;

	grid-template-columns: 1fr 2fr;

	gap: 100px;
}

.intro h2,
.about h2,
.cta h2 {

	font-family: "Montserrat", sans-serif;

	font-size: clamp(38px, 5vw, 65px);

	line-height: 1.05;

	font-weight: 500;

	margin-bottom: 35px;
}

.intro h2 em,
.about h2 em,
.cta h2 em {

	font-family: Georgia, serif;

	font-weight: 400;

	color: #777;
}

.intro p {

	max-width: 650px;

	color: #555;

	font-size: 16px;

	margin-bottom: 20px;
}


/* =========================
   SERVICES
========================= */

.section-heading {
	margin-bottom: 70px;
}

.section-heading h2 {

	font-family: "Montserrat", sans-serif;

	font-size: clamp(40px, 5vw, 65px);

	line-height: 1.05;

	font-weight: 500;
}

.section-heading h2 em {

	font-family: Georgia, serif;

	font-weight: 400;

	color: #999;
}

.services-grid {

	display: grid;

	grid-template-columns: repeat(2, 1fr);

	border-top: 1px solid var(--border);
}

.service-card {

	position: relative;

	padding: 45px 35px;

	min-height: 230px;

	border-bottom: 1px solid var(--border);

	transition: background .3s ease;
}

.service-card:nth-child(odd) {

	border-right: 1px solid var(--border);
}

.service-card:hover {

	background: #202020;
}

.service-number {

	font-size: 11px;

	color: #777;

	letter-spacing: 2px;
}

.service-card h3 {

	font-family: "Montserrat", sans-serif;

	font-size: 22px;

	margin: 40px 0 15px;
}

.service-card p {

	color: #999;

	max-width: 430px;

	font-size: 14px;
}


/* =========================
   CAR
========================= */

.car-container {

	display: grid;

	grid-template-columns: 1.15fr 1fr;

	gap: 90px;

	align-items: center;
}

.car-image {

	min-height: 600px;

	overflow: hidden;

	background: #202020;
}

.car-placeholder {

	width: 100%;
	height: 600px;

	display: flex;

	align-items: center;
	justify-content: center;

	flex-direction: column;

	color: #aaa;

	background:
		radial-gradient(
			circle at center,
			#555,
			#1d1d1d 65%
		);
}

.car-placeholder span {

	font-size: 13px;

	letter-spacing: 8px;

	color: #aaa;
}

.car-placeholder strong {

	font-family: "Montserrat", sans-serif;

	font-size: 110px;

	font-weight: 500;

	background:
		linear-gradient(
			120deg,
			#666,
			#eee,
			#777
		);

	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.car-content h2 {

	font-family: "Montserrat", sans-serif;

	font-size: 60px;

	font-weight: 500;

	margin-bottom: 10px;
}

.large-text {

	font-family: Georgia, serif;

	color: #777;

	font-size: 30px;

	line-height: 1.2;

	margin-bottom: 30px;
}

.car-content > p:not(.large-text) {

	color: #555;

	font-size: 15px;

	max-width: 480px;
}

.car-features {

	margin-top: 45px;

	border-top: 1px solid #ddd;
}

.car-features div {

	display: flex;

	justify-content: space-between;

	gap: 20px;

	padding: 18px 0;

	border-bottom: 1px solid #ddd;

	font-size: 12px;
}

.car-features strong {

	font-family: "Montserrat", sans-serif;

	font-size: 10px;

	letter-spacing: 2px;
}

.car-features span {

	color: #777;
}


/* =========================
   ABOUT
========================= */

.about-container {

	display: grid;

	grid-template-columns: 1fr 2fr;

	gap: 100px;
}

.about-content {

	max-width: 700px;
}

.about-content p {

	color: #aaa;

	font-size: 16px;

	margin-bottom: 20px;
}


/* =========================
   CTA
========================= */

.cta {

	text-align: center;

	background: #e8e8e5;
}

.cta-content {

	max-width: 750px;
}

.cta p {

	color: #666;

	margin-bottom: 35px;
}


/* =========================
   CONTACT
========================= */

.contact-container {

	display: grid;

	grid-template-columns: 1fr 1fr;

	gap: 100px;
}

.contact-intro h2 {

	font-family: "Montserrat", sans-serif;

	font-size: clamp(40px, 5vw, 65px);

	line-height: 1.05;

	font-weight: 500;
}

.contact-intro h2 em {

	font-family: Georgia, serif;

	color: #999;

	font-weight: 400;
}

.contact-intro p {

	color: #999;

	margin-top: 30px;

	max-width: 400px;
}

.contact-details {

	border-top: 1px solid var(--border);
}

.contact-item {

	display: flex;

	flex-direction: column;

	gap: 8px;

	padding: 25px 0;

	border-bottom: 1px solid var(--border);

	transition: color .3s ease;
}

a.contact-item:hover strong {

	color: white;
}

.contact-item span {

	font-size: 9px;

	letter-spacing: 3px;

	color: #777;
}

.contact-item strong {

	font-family: "Montserrat", sans-serif;

	font-size: 16px;

	font-weight: 500;

	color: #ccc;

	transition: color .3s ease;
}


/* =========================
   FOOTER
========================= */

.footer {

	background: #0d0d0d;

	color: #888;

	padding: 40px 0;
}

.footer-container {

	display: flex;

	justify-content: space-between;

	align-items: flex-end;
}

.footer-logo {

	font-family: "Montserrat", sans-serif;

	font-size: 18px;

	letter-spacing: 4px;

	color: #ccc;
}

.footer-logo span {

	font-size: 9px;

	color: #777;

	letter-spacing: 3px;
}

.footer p {

	font-size: 11px;

	margin-top: 7px;
}

.footer-right {

	text-align: right;
}


/* =========================
   MOBILE
========================= */

@media (max-width: 800px) {

	.section {
		padding: 80px 0;
	}


	/* NAV */

	.nav-container {
		height: 80px;
	}

	.nav-menu {

		display: none;

		position: absolute;

		top: 80px;
		left: 0;

		width: 100%;

		padding: 30px 5%;

		background: #151515;

		flex-direction: column;

		align-items: flex-start;

		gap: 22px;
	}

	.nav-menu.mobile-open {
		display: flex;
	}

	.nav-button {
		width: 100%;

		text-align: center;
	}

	.mobile-menu-button {
		display: block;
	}


	/* HERO */

	.hero {
		min-height: 90vh;

		background-position: center;
	}

	.hero h1 {
		font-size: 60px;
		letter-spacing: -2px;
	}

	.hero-subtitle {
		font-size: 12px;

		letter-spacing: 3px;
	}

	.hero-buttons {

		flex-direction: column;

		width: 100%;
		max-width: 320px;
	}

	.hero-location {

		bottom: 20px;

		font-size: 8px;

		right: auto;
		left: 5%;
	}


	/* INTRO */

	.intro-container,
	.about-container,
	.contact-container,
	.car-container {

		grid-template-columns: 1fr;

		gap: 50px;
	}


	/* SERVICES */

	.services-grid {

		grid-template-columns: 1fr;
	}

	.service-card:nth-child(odd) {

		border-right: none;
	}


	/* CAR */

	.car-image,
	.car-placeholder {

		min-height: 400px;

		height: 400px;
	}

	.car-placeholder strong {

		font-size: 80px;
	}

	.car-content h2 {

		font-size: 48px;
	}


	/* CONTACT */

	.contact-details {
		margin-top: 20px;
	}


	/* FOOTER */

	.footer-container {

		flex-direction: column;

		align-items: flex-start;

		gap: 25px;
	}

	.footer-right {

		text-align: left;
	}
	@media (max-width: 768px) {
.car-photo {
	width: 100%;
	height: auto;
	max-height: 350px;
	object-fit: contain;
	object-position: center;
}
}

}

/* Selettore lingua IT / EN */
.language-switch { display:flex; align-items:center; gap:8px; margin-left:18px; color:#aaa; font-family:"Montserrat",sans-serif; font-size:12px; letter-spacing:1px; white-space:nowrap; }
.language-button { background:transparent; border:0; padding:8px 3px; color:#bbb; font:inherit; cursor:pointer; }
.language-button.active, .language-button:hover { color:#fff; font-weight:700; }
.language-button:focus-visible { outline:2px solid #fff; outline-offset:3px; }
@media (max-width: 800px) { .language-switch { margin-left:auto; margin-right:18px; } }
@media (max-width: 380px) { .logo img { width:145px; } .language-switch { margin-right:10px; gap:5px; } }