html {
	overflow-x:clip;
}

html, body {
	font-family:'Nunito';
	font-weight:400;
	color:var(--text);
	line-height:1.5;
	max-width:2560px;
	margin:0 auto;
	background-color:white;
	min-height:100%;
}

/* Pagina nascosta finché non è tutto caricato */
body {
	opacity: 0;
}
body.ap-ready {
	opacity: 1;
	transition: opacity 0.35s ease;
}
/* Safety net: se il JS non gira, dopo 3s la pagina compare comunque */
@keyframes ap-failsafe {
	to { opacity: 1; }
}
body {
	animation: ap-failsafe 0.35s ease 3s both;
}
body.ap-ready {
	animation: none;
}
@media (prefers-reduced-motion: reduce) {
	body,
	body.ap-ready {
		transition: none;
		animation: none;
		opacity: 1;
	}
}
/**/

::-moz-selection {
  background-color: var(--accent);
  color:white;
  text-shadow: none;
}
::selection {
  background-color: var(--accent);
  color:white;
  text-shadow: none;
}

/* HELPERS */
.mb-0 { margin-bottom:0 !important; }
.mb-1 { margin-bottom:1rem !important; }
.mb-2 { margin-bottom:2rem !important; }
.mb-3 { margin-bottom:3rem !important; }
.mb-4 { margin-bottom:4rem !important; }
.mb-5 { margin-bottom:5rem !important; }
.mt-0 { margin-top:0 !important; }
.mt-1 { margin-top:1rem !important; }
.mt-2 { margin-top:2rem !important; }
.mt-3 { margin-top:3rem !important; }
.mt-4 { margin-top:4rem !important; }
.mt-5 { margin-top:5rem !important; }
.pb-0 { margin-bottom:0 !important; }
.pb-1 { padding-bottom:1rem !important; }
.pb-2 { padding-bottom:2rem !important; }
.pb-3 { padding-bottom:3rem !important; }
.pb-4 { padding-bottom:4rem !important; }
.pb-5 { padding-bottom:5rem !important; }
.pt-0 { padding-top:0 !important; }
.pt-1 { padding-top:1rem !important; }
.pt-2 { padding-top:2rem !important; }
.pt-3 { padding-top:3rem !important; }
.pt-4 { padding-top:4rem !important; }
.pt-5 { padding-top:5rem !important; }

.align-left { text-align:left !important; }
.align-right { text-align:right !important; }
.align-center { text-align:center !important; }
.align-justify { text-align:justify !important; }

cite {
	display:inline-block;
	color:var(--main);
	font-size:2rem;
	text-align:center;
	font-family:'Nunito', Arial;
	font-style:normal;
	padding:1rem;
	line-height:1.2;
	margin-block:2rem;
}

hr {
	display:inline-block;
	border:none;
	height:0.25rem;
	width:10rem;
	background-color:var(--accent);
	margin-block:2rem;
}

h1 {
	font-size:clamp(2.5rem, 4rem, 4vw);
	line-height:1;
	margin-bottom:2rem;
	font-weight:300;
}
h2 {
	font-size:clamp(2rem, 3rem, 3vw);
	line-height:1.1;
	margin-bottom:1.5rem;
	font-weight:300;
}
h3 {
	font-weight:700;
	font-size:1.5rem;
	line-height:1.2;
}

a {
	text-decoration:none;
	transition:all 0.3s ease;

	i {
		transition:all 0.3s ease;
	}

	&:hover {
		color:var(--accent);

		i {
			color: var(--accent);
		}
	}
}

p, ul, ol, h3, h4, h5, h6 {
	margin-bottom:1rem;
}

b, strong { font-weight:700; }
i, em { font-style:italic; }

.bg-accent { background-color:var(--accent) !important;	}
.bg-secondary { background-color:var(--secondary) !important;	}
.bg-menu { background-color:var(--gray) !important;	}
.accent { color:var(--accent) !important; }
.secondary { color:var(--secondary) !important; }
.menu { color:var(--menu) !important; }

img {
	width:100%;
	height:auto;
}

.wrapper {
	margin: 0 auto;
	width: min(92vw, var(--wrapper));
	padding: 0 4vw;
	box-sizing: content-box;
}

/**/

/* HEADER */
#logo {
	width:150px;
	display:flex;
	justify-content:center;
	align-items:center;
	transition:all 0.3s ease;
	position:absolute;
	z-index:3;
	top:3rem;
	left:4vw;

	img {
		width: 150px;
		height:auto;
	}
}

.header-bg {
	height:15vw;
	position:relative;
	top:0;
	width:100%;
	background-color:#555;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
}
.page-title {
	height: 100%;
	display: flex;
	align-items: center;
	
	h1 {
		color:#fff;
	}
}

.normalheader {
	background: #1d1d1d;
	height:min(6rem, 100vw);
	padding-top:1.5rem;
	color:white;
	text-align:center;
}
.error404 main,
.page-template-default main {
	padding-block:clamp(2rem, 5rem, 5vw);
}

/* MENU */
#mobile-menu { display:none; }

.nav-btn {
	width: 48px;
	height: 48px;
	transform: rotate(0deg);
	cursor: pointer;
	border-radius: 50%;
	cursor:pointer;
	top:3rem;
	right:4vw;
	position:absolute;
	z-index:9999;
}
.nav-btn span {
	display: block;
	position: absolute;
	height: 2px;
	width: 50%;
	border-radius: 1px;
	opacity: 1;
	left: 12px;
	transform: rotate(0deg);
	background: #fff;
	transition:all 0.3s ease;
}
.nav-btn span:nth-child(1) {
	top:16px;
	left:9px;
}
.nav-btn span:nth-child(2) {
	top:26px;
	left:9px;
}
.page-template-page-showroom .nav-btn span,
.page-template-page-contact .nav-btn span {
	background:var(--text);
}
.nav-btn.is-active {
	position:fixed;
}
.nav-btn.is-active span {
	background:var(--text);
}
.nav-btn.is-active span:nth-child(1) {
	top: 23px;
	left: 12px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	background: var(--text);
}
.nav-btn.is-active span:nth-child(2) {
	top: 23px;
	left: 12px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	background: var(--text);
}

#mobile-menu {
	--modal-bg: #ffffff;
	--modal-fg: #1d1d1d;
	--dash-width: 1.9rem;      /* lunghezza del trattino a riposo */

	position: fixed;
	inset: 0;
	z-index: 9990;             /* sotto #nav-btn */
	display: grid;
	grid-template-columns: 1fr 2fr;   /* immagine 1/3, contenuto 2/3 */
	background: var(--modal-bg);
	color: var(--modal-fg);

	opacity: 0;
	visibility: hidden;
	transition: opacity .45s ease, visibility 0s linear .45s;
}

#mobile-menu.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity .45s ease, visibility 0s;
}

#mobile-menu[hidden] { display: none; }

.menu-modal-media {
	background-image: url('/wp-content/uploads/2026/08/mercedes_menu_autopatavium.jpg');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	height: 100vh;
	height: 100dvh;
}
.menu-modal-body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100vh;
	height: 100dvh;
	padding: 12rem 6rem 4.5rem;
	overflow-y: auto;
}

.menu-modal-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
}
.menu-modal-list a {
	position: relative;
	display: inline-block;
	font-size: clamp(1.75rem, 2.2vw, 2.6rem);
	line-height: 1.1;
	text-transform: uppercase;
	text-decoration: none;
	color: inherit;
	padding-bottom: 0.2rem;
  	margin-bottom: 0.5rem;
}
.menu-modal-list a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height:2px;
	width: var(--dash-width);
	background: var(--accent);
	transition: width .4s cubic-bezier(.4, 0, .2, 1);
}
.menu-modal-list a:hover::after{
	width: 100%;
	background: var(--accent);
}
.menu-modal-list .current-menu-item > a::after {
	width: 100%;
	background: var(--secondary);
}
.menu-modal-list .current-menu-item > a {
	color:var(--seconday);
	pointer-events:none;
}

/* social */
.menu-modal-social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .55rem;
}
.menu-modal-social a {
	display: inline-flex;
	align-items: center;
	gap: .85rem;
	font-size: .8rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	color: inherit;
	opacity: .85;
	transition: opacity .3s ease;
}
.menu-modal-social a:hover { opacity: 1; }
.menu-modal-social i {
	font-size: 1rem;
	width: 1.1rem;
	text-align: center;
}
/* blocco scroll pagina */
body.menu-modal-open { overflow: hidden; }

@media (max-width: 1024px) {
	#mobile-menu { grid-template-columns: 1fr; }
	.menu-modal-media { display: none; }
	.menu-modal-body { padding: 7rem 2rem 3rem; }
}
@media (prefers-reduced-motion: reduce) {
	#mobile-menu,
	.menu-modal-list a::after,
	.nav-btn span { transition: none; }
}


/* MAIN */
main a {
	color:var(--text);
	border-bottom:1px solid var(--text);
	transition:all 0.3s ease;

	&:hover {
		border-bottom:3px solid var(--text);
	}
}

.row {
	padding-block:clamp(1rem, 6rem, 5vw);
}
.row50 {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:clamp(2rem, 10rem, 10vw);
	align-items:center;
}
.row33 {
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	gap:clamp(1rem, 5rem, 5vw);
}

.ap-button {
	position: relative;
	isolation: isolate;        /* stacking context per il ::before */
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	height: 3rem;
	padding:0.25rem 0.5rem 0.25rem 1.25rem;
	border: 1px solid var(--text);
	border-radius: 1.5rem;
	background:white;
	text-decoration: none;
	cursor: pointer;
	min-width:240px;
	margin-block:1rem;

	&:hover {
		border: 1px solid var(--text);
	}
}
.ap-button::before {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: -1;
	background:var(--text);
	border-radius: inherit;
	clip-path: inset(0 100% 0 0 round 1.5rem);
	transition: clip-path 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.ap-button:hover::before {
	clip-path: inset(0 0 0 0 round 1.5rem);
}
.ap-button i {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 2.2rem;
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 50%;
	background:var(--text);
	color:white;
	font-size: 0.8rem;
}
.ap-button-label {
	color:var(--text);
	font-size: 1rem;
	line-height: 1;
	text-transform: uppercase;
	transition: color 0.35s ease;
}
.ap-button:hover .ap-button-label {
	color:white;
}
.ap-button:hover i {
	color:white !important;
}

@media (prefers-reduced-motion: reduce) {
	.ap-button::before,
	.ap-button-label {
		transition-duration: 0.01ms;
	}
}
/* ==========================================================================
   VARIANTE BOLLA: lo sfondo dell'icona si espande a tutto il pulsante
   Aggiungi class="ap-button-bubble" nello shortcode
   ========================================================================== */
/* icona a sinistra (default) */
.ap-button-bubble::before {
	clip-path: circle(1rem at 1.5rem 50%);
	transition: clip-path 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.ap-button-bubble:hover::before {
	clip-path: circle(175% at 1.5rem 50%);
}
/* icona a destra: il centro della bolla si sposta da solo */
.ap-button-bubble:has(i:last-child)::before {
	clip-path: circle(1rem at calc(100% - 1.5rem) 50%);
}
.ap-button-bubble:has(i:last-child):hover::before {
	clip-path: circle(175% at calc(100% - 1.5rem) 50%);
}
.ap-button-white {
	background-color:transparent;
	color:white;
	border-color:white;

	.ap-button-label {
		color:white;
	}

	i {
		background-color:white;
		color:var(--text);
	}

	&::before {
		background:white;
	}

	&:hover {
		background-color:white;

		.ap-button-label {
			color:var(--text) !important;
		}

		i {
			color:var(--text) !important;
		}
	}
}

/* HOME */
.home-hero {
	aspect-ratio:16/9;
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
	position:relative;
	display:flex;
	justify-content:center;
	align-items:center;

	.home-title {
		position:absolute;
		top:15rem;
		left:5rem;
		z-index:2;

		h1, h3 {
			color:white;
		}
	}

	.home-hero-button {
		position: absolute;
		bottom:2rem;
		right:5rem;
	}
}

/* ==========================================================================
   Video verticale 9:16
   ========================================================================== */
.ap-video {
	position: relative;
	width: 100%;
	max-width: 450px;
	margin-inline: auto; /* centra il video nella colonna */
	aspect-ratio: 9 / 16; /* rapporto verticale, calcolato sulla larghezza reale */
	overflow: hidden;
	background:var(--text);
	border-radius: 1rem; /* opzionale */
}
.ap-video-player {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover; /* usa "contain" se non vuoi mai tagliare i bordi */
	display: block;
}
/**/
/* ============
	   Carousel
   ============
*/
.acfc{position:relative;--acfc-h:600px;--acfc-gap:2rem;--acfc-radius:1rem;--acfc-spacer:25vw;--acfc-mask:#fff}
.acfc--full{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.acfc__viewport{position:relative;overflow:hidden}
.acfc__track{display:flex;align-items:flex-start;gap:var(--acfc-gap);padding-left:var(--acfc-spacer);will-change:transform;transform:translate3d(0,0,0);transition:transform .7s cubic-bezier(.22,1,.36,1)}
.acfc.is-ready .acfc__track{transition:transform .7s cubic-bezier(.22,1,.36,1)}
.acfc:not(.is-ready) .acfc__track{transition:none}
.acfc__mask{position:absolute;top:0;bottom:0;left:0;width:var(--acfc-spacer);background:var(--acfc-mask);pointer-events:none;z-index:2}
.acfc__slide{flex:0 0 auto;height:var(--acfc-h)}
.acfc__img{display:block;height:var(--acfc-h)!important;width:auto!important;max-width:none;border-radius:var(--acfc-radius);object-fit:cover;user-select:none;-webkit-user-drag:none}

/* Frecce + barra: spostale dove serve agendo solo su questo blocco */
.acfc__nav{display:flex;align-items:center;gap:1rem;justify-content:flex-end;padding:1.75rem clamp(1.5rem,4vw,4rem) 0}
.acfc__btn{width:1.75rem;height:1.75rem;display:grid;place-items:center;border:0;border-radius:0;background:transparent;color:inherit;cursor:pointer;padding:0;transition:opacity .2s ease,transform .2s ease}
.acfc__btn svg{width:1.25rem;height:1.25rem}
.acfc__btn--prev:hover:not(:disabled){transform:translateX(-2px)}
.acfc__btn--next:hover:not(:disabled){transform:translateX(2px)}
.acfc__btn:focus-visible{outline:1px solid currentColor;outline-offset:4px}
.acfc__btn:disabled{opacity:.3;cursor:default}
.acfc__progress{position:relative;width:5.5rem;height:2px;margin-left:.75rem;background:rgba(0,0,0,.18)}
.acfc__progress-fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--accent);transition:width .7s cubic-bezier(.22,1,.36,1)}

@media (prefers-reduced-motion: reduce){.acfc__track{transition:none}}
@media (max-width:781px){.acfc{--acfc-h:60vw;--acfc-gap:1rem;--acfc-spacer:12vw}.acfc__nav{padding:1rem}}
/**/

.greysxbg {
	position:relative;
	background-color:#eee;
	padding:2rem 2rem 2rem 10rem;
	border-top-right-radius:1rem;
	border-bottom-right-radius:1rem;

	img {
		display:block;
		border-radius:1rem;
	}

	&:before {
		position:absolute;
		content:'';
		top:0;
		right:100%;
		width:50vw;
		height:100%;
		background-color:#eee;
	}
}

.intro-services {
	width:50%;
}
.home-services {
	padding-top:clamp(2rem, 4rem, 4vw);

	.number {
		color: var(--secondary);
		font-weight: 700;
		font-size: 64px;
		transform: rotate(-90deg);
		display: inline-block;
		height: 5rem;
		margin-top: 0px;
		margin-left: -1.5rem;
		font-family:'Open Sans';
	}
}

/* PAGE */
.page-hero {
	aspect-ratio:16/9;
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
	position:relative;
	display:flex;
	justify-content:center;
	align-items:center;
	background-color:#1d1d1d;

	.page-title {
		position:absolute;
		top:15rem;
		left:5rem;
		display:flex;
		flex-direction:column;
		gap:1rem;
		width:min(700px, 92%);
		height:auto;

		h1, h3 {
			color:white;
		}
	}

	.page-hero-button {
		position: absolute;
		bottom:2rem;
		right:5rem;
	}
}
.error404 .page-hero,
.page-template-default .page-hero {
	aspect-ratio:auto;
	min-height:10rem;

	.page-title {
		position:relative;
		top:1.5rem;
		left:0;
	}
	.page-hero-button {
		display:none;
	}
}

/* AZIENDA */
.story {
	/* --- misure base del layout --- */
	--page-max: 1920px;   /* larghezza massima della pagina */
	--wrapper: 1400px;    /* contenitore del corpo testo */
	--edge: 4vw;          /* distanza delle immagini dal bordo destro */
	--gap: 32px;          /* spazio tra le due immagini */
	--text-width: 540px;  /* larghezza della colonna di testo */
	--pad-mobile: 24px;
	/* Margine sinistro calcolato: allinea il testo al wrapper da 1400px.
	   Sotto i 1400px + padding, ripiega sul padding mobile. */
	--wrapper-pad: max(
		var(--pad-mobile),
		calc((min(100vw, var(--page-max)) - var(--wrapper)) / 2)
	);
	max-width: var(--page-max);
	margin-inline: auto;
	padding-block: 80px;
	display: grid;
	/* colonna 1 = metà pagina esatta, colonna 2 = tutto il resto */
	grid-template-columns: 50% minmax(0, 1fr);
	align-items: start;
}
.story__text {
	padding-left: var(--wrapper-pad);
	padding-right: 40px;
	max-width: calc(var(--text-width) + var(--wrapper-pad) + 40px);
}
.story__media {
	padding-right: var(--edge);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gap);
	align-items: start;
}
.story__figure {
	margin: 0;
}
.story__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: center;
	border-radius:1rem;
}
.story__caption {
	margin-top: 18px;
	line-height: 1.4;
	color: #555;
	br {
		display: none;
	}
}
/* Prima riga della didascalia (il nome) in maiuscolo e in grassetto:
   basta andare a capo nel campo ACF, oppure usare <strong> nel campo. */
.story__caption strong {
	display: block;
	font-weight: 700;
	text-transform: uppercase;
	line-height:1;
	color:var(--text);
}
/* Sotto i 1400px il wrapper non esiste più: le immagini restano
   a destra ma il testo si stacca dal bordo con il padding mobile. */
@media (max-width: 1400px) {
	.story {
		--text-width: 100%;
		padding-block: 60px;
	}
}
/* Impilamento verticale */
@media (max-width: 1024px) {
	.story {
		grid-template-columns: 1fr;
		row-gap: 48px;
		padding-block: 48px;
	}

	.story__text {
		padding-left: var(--pad-mobile);
		padding-right: var(--pad-mobile);
		max-width: none;
	}

	.story__media {
		padding-inline: var(--pad-mobile);
		--gap: 20px;
	}
}
@media (max-width: 560px) {
	.story__media {
		grid-template-columns: 1fr;
		row-gap: 36px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.story * {
		animation: none !important;
		transition: none !important;
	}
}
.rounded {
	display:inline-block;
	border-radius:1rem;
}

/* TIMELINE */
.ptv-timeline {
	--ptv-line: var(--text);
	--ptv-ink: #16181a;
	--ptv-body: var(--text);
	--ptv-gap: 60px;
	--ptv-speed: 480ms;
	--ptv-ease: cubic-bezier(.22, .61, .36, 1);

	padding: 60px 0 80px;
}
.ptv-timeline__wrap {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 20px;
}
.ptv-timeline__nav {
	display: grid;
	grid-template-columns: repeat(var(--ptv-count, 5), minmax(0, 1fr));
	border-bottom: 2px solid var(--accent);
}
.ptv-timeline__tab {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	background: none;
	border: 0;
	border-left: 2px solid var(--ptv-line);
	border-radius: 0;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
	padding: 2px 55px 26px 20px;
	transition: border-color var(--ptv-speed) var(--ptv-ease);
}
.ptv-timeline__tab:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: -2px;
}
.ptv-timeline__tab.is-active {
	border-left-color: var(--accent);
	cursor: default;
}
.ptv-timeline__tab-year {
	display: block;
	font-size: clamp(28px, 2.5rem, 3vw);
	font-weight: 700;
	line-height: 1.05;
	color: var(--ptv-ink);
	margin-bottom: 12px;
	transition: color var(--ptv-speed) var(--ptv-ease);
	font-family:'Open Sans';
}
.ptv-timeline__tab:hover .ptv-timeline__tab-year {
	color: var(--accent);
}
.ptv-timeline__tab.is-active .ptv-timeline__tab-year {
	color: var(--accent);
}
.ptv-timeline__tab-intro {
	display: block;
}
.ptv-timeline__panels {
	position: relative;
	overflow: hidden;
	height: auto;
	transition: height var(--ptv-speed) var(--ptv-ease);
}
.ptv-timeline__panel {
	position: absolute;
	inset: 0 0 auto 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ptv-gap);
	align-items: start;
	padding-top: 64px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translate3d(var(--ptv-shift, 40px), 0, 0);
	transition:
		opacity var(--ptv-speed) var(--ptv-ease),
		transform var(--ptv-speed) var(--ptv-ease),
		visibility 0s linear var(--ptv-speed);
}
.ptv-timeline__panel.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate3d(0, 0, 0);
	transition:
		opacity var(--ptv-speed) var(--ptv-ease),
		transform var(--ptv-speed) var(--ptv-ease),
		visibility 0s;
}
.ptv-timeline__panel.ptv-no-transition {
	transition: none !important;
}
.ptv-timeline__col--media {
	align-self: start;
}
.ptv-timeline__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius:1rem;
}
.ptv-timeline__col--text > :first-child {
	margin-top: 0;
}
.ptv-timeline__col--text > :last-child {
	margin-bottom: 0;
}
.ptv-timeline__col--text h2 {
	font-weight:700;
}
.ptv-timeline__col--text p {
	max-width: 58ch;
}
@media (max-width: 1024px) {
	.ptv-timeline {
		--ptv-gap: 40px;
	}

	.ptv-timeline__nav {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.ptv-timeline__nav::-webkit-scrollbar {
		display: none;
	}

	.ptv-timeline__tab {
		flex: 0 0 auto;
		width: 240px;
		scroll-snap-align: start;
	}
}
@media (max-width: 768px) {
	.ptv-timeline {
		padding: 40px 0 56px;
	}

	.ptv-timeline__panel {
		grid-template-columns: 1fr;
		gap: 32px;
		padding-top: 40px;
	}

	.ptv-timeline__tab {
		width: 200px;
		padding-bottom: 20px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.ptv-timeline__panels,
	.ptv-timeline__panel,
	.ptv-timeline__tab,
	.ptv-timeline__tab-year {
		transition-duration: 1ms !important;
	}

	.ptv-timeline__panel {
		transform: none !important;
	}
}

/* ============ SHOWROOM ============ */
.ap-showroom{
	--ap-sidebar: 27%;
	--ap-accent: #3fc7ba;
	--ap-intro-color: #ffffff;

	display: flex;
	align-items: flex-start;
	width: 100%;
	max-width: 2560px;
	margin: 0 auto;
}
.ap-showroom__intro{
	flex: 0 0 var(--ap-sidebar);
	width: var(--ap-sidebar);
	position: sticky;
	top: 0;
	height: 100vh;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	overflow: hidden;
}
.ap-showroom__intro-inner{
	position: relative;
	z-index: 2;
	width: 100%;
	padding:8rem 3rem 3rem 3.5rem;
}
.ap-showroom__title,
.ap-showroom__text,
.ap-showroom__text *{
	color: var(--ap-intro-color);
}
.ap-showroom__title {
	text-transform:uppercase;
}
.ap-showroom__list{
	flex: 1 1 auto;
	min-width: 0;
	padding: 6rem 4rem;
}
.ap-vetture-grid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3rem 2.5rem;
}
.ap-vettura__media{
	display: block;
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 1rem;
	overflow: hidden;
	isolation: isolate;
	background: #111;
}
.ap-vettura__img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(1);
	transition: transform .7s cubic-bezier(.2,.7,.3,1), filter .5s ease;
}

/* effetto vetro / riflesso */
.ap-vettura__glare{
	position: absolute;
	inset: -20%;
	pointer-events: none;
	background: linear-gradient(
		115deg,
		rgba(255,255,255,0)   30%,
		rgba(255,255,255,.18) 44%,
		rgba(255,255,255,.55) 50%,
		rgba(255,255,255,.18) 56%,
		rgba(255,255,255,0)   70%
	);
	transform: translateX(-130%);
	opacity: 0;
	transition: transform 0s;
}
.ap-vettura__media::after{
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.18));
	opacity: 0;
	transition: opacity .45s ease;
}
.ap-vettura:hover .ap-vettura__media .ap-vettura__img{
	transform: scale(1.06);
	filter: brightness(1.05) contrast(1.03);
}
.ap-vettura:hover .ap-vettura__media::after{ opacity: 1; }
.ap-vettura:hover .ap-vettura__media .ap-vettura__glare{
	opacity: 1;
	transform: translateX(130%);
	transition: transform 1s cubic-bezier(.25,.6,.3,1), opacity .2s ease;
}
.ap-vettura__badge{
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	z-index: 3;
	padding: .35em 1.1em;
	border-radius: 2rem;
	background: var(--ap-accent);
	color: #fff;
	line-height: 1.4;
	white-space: nowrap;
}
.ap-vettura__caption{
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 1rem;
	text-decoration: none;
	color: inherit;

	&:hover {
		color:var(--text) !important;
	}
}
.ap-vettura__icon{
	flex: 0 0 auto;
	width:3rem;
	height:2rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius:1rem;
	border: 1px solid currentColor;
	transition: background-color .3s ease, color .3s ease, transform .3s ease;
}
.ap-vettura:hover .ap-vettura__icon{
	background: currentColor;
}
.ap-vettura:hover .ap-vettura__icon i,
.ap-vettura:hover .ap-vettura__icon svg{
	color: #fff;
}
.ap-vettura__meta{
	display: block;
	border-left: 2px solid rgba(0,0,0,.25);
	padding-left: 1rem;
}
.ap-vettura__marca{
	display: block;
	text-transform: uppercase;
	&:hover {
		color:var(--text) !important;
	}
}
.ap-vettura__nome{
	display: block;
	&:hover {
		color:var(--text) !important;
	}
}

@media (max-width: 1280px){
	.ap-showroom{ --ap-sidebar: 34%; }
	.ap-vetture-grid{ grid-template-columns: repeat(2, 1fr); }
	.ap-showroom__list{ padding: 4rem 2.5rem; }
}
@media (max-width: 900px){
	.ap-showroom{ flex-direction: column; }
	.ap-showroom__intro{
		position: static;
		width: 100%;
		flex: 0 0 auto;
		height: auto;
		min-height: 55vh;
	}
	.ap-showroom__intro-inner{ padding:7rem 1.75rem 2rem; }
	.ap-showroom__list{ padding: 3rem 1.75rem; }
}
@media (max-width: 600px){
	.ap-vetture-grid{
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
	.ap-showroom__intro{ min-height: auto; }
}

/* PAGE SERVICES */
.services-cols {
	display: grid;
	grid-template-columns: 3fr 4fr;
	gap: clamp(2rem, 5rem, 5vw);
	align-items: start;

	.services-cols__intro {
		padding: clamp(2.5rem, 4rem, 4vw);
		background-color:var(--secondary);
		overflow:clip;
		position: sticky;
		top: 0;
		height:100vh;

		.dark-block {
			color:white;
			position:relative;
			margin-top:3rem;
			padding-block: clamp(2.5rem, 4rem, 4vw);

			h3 {
				position:relative;
				z-index:2;
			}

			&:before {
				content:'';
				position:absolute;
				background-color: #1d1d1d;
				width:150%;
				top:0;
				left:-25%;
				height:1000%;
			}
		}
	}

	.services-cols__list {
		display: flex;
		flex-direction: column;
		gap: clamp(2.5rem, 4rem, 4vw);
		padding-block: clamp(2.5rem, 4rem, 4vw);

		.services-block {
			display: grid;
			grid-template-columns: 5rem 1fr;
			gap: 1rem;
			align-items: start;
		}

		.services-block__num {
			font-family: 'Open Sans';
			font-weight: 700;
			font-size:4rem;
			line-height: 1;
			color: var(--secondary);
			transform: rotate(-90deg);
			transform-origin: center;
			white-space: nowrap;
			justify-self: center;
			margin-top:0.25rem;
		}

		.services-block__text > *:first-child {
			margin-top: 0;
		}
	}
}

@media (max-width: 781px) {
	.services-cols {
		grid-template-columns: 1fr;
	}

	.services-cols__intro {
		position: static;
		top: auto;
	}

	.services-block {
		grid-template-columns: 3.5rem 1fr;
	}

	.services-block__num {
		font-size: 44px;
	}
}


/* SINGLE VETTURA */
.single-vetture {
	background-color:#1d1d1d;
	color:var(--secondary);

	h2 {
		text-transform:uppercase;
	}

	.page-title {
		border-left:3px solid var(--secondary);
		text-align:left;
		align-items: start;
		height:auto;
		padding-left:2rem;
		left:10rem;
		top:10rem;

		h1 {
			font-size: 1.5rem;
			font-weight:700;
			margin-bottom:0;
			line-height:0.8;
		}
		h3 {
			font-size:4rem;
			text-transform:uppercase;
			font-weight:400;
			margin-bottom:0;
			line-height:0.8;
		}
	}

	.info-car {
		background-color:rgba(0,0,0,0.3);
		display:flex;
		justify-content:center;
		align-items:center;
		text-align:center;
		padding-inline:2rem;
		border-radius:2rem;
		position:absolute;
		bottom:3rem;
		left:50%;
		transform:translateX(-50%);

		div {
			padding-block:1.25rem;
			min-width:18rem;
			border-right:1px solid rgba(255,255,255,0.3);
			color:var(--secondary);
			font-weight:700;

			&:last-of-type {
				border-right: 0;
			}
		}

		span {
			position:absolute;
			bottom:-0.75rem;
			width:1.5rem;
			height:1.5rem;
			background-color:#999;
			color:var(--text);
			font-size:0.8rem;
			line-height:1.5rem;
			border-radius:50%;
			left:50%;
			transform:translateX(-50%);
			z-index:2;
			cursor:pointer;
			transition:all 0.3s ease;
			outline: 5px solid rgba(0,0,0,0.25);

			&:hover {
				background-color:var(--secondary);
			}
		}
	}

	.presentazione {
		display:grid;
		grid-template-columns:1fr 2fr;
		gap:5rem;
		padding-block:5rem;
	}

	.acfc {
		--acfc-mask:#1d1d1d !important;
	}

	.col3-wrap {
		--collapsed-height: 15rem;   /* quante righe restano visibili */
		--fade-height: 9rem;         /* altezza della sfumatura */
		position: relative;
		padding-block: 5rem;         /* spostato qui da .col3 */
	}

	.col3 {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 4rem;
		/* padding-block rimosso: ora sta sul wrapper */
		position: relative;
		overflow: hidden;
		max-height: var(--collapsed-height);
		transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);

		h3 { text-transform: uppercase; }

		.auto-list {
			display: flex;
			justify-content: space-between;
			gap: 1rem;
			border-bottom: 1px solid #707070;
			padding-block: 0.5rem;
		}
	}

	/* sfumatura verso il colore di sfondo */
	.col3::after {
		content: "";
		position: absolute;
		inset: auto 0 0 0;
		height: var(--fade-height);
		background: linear-gradient(to bottom, rgba(29,29,29,0) 0%, #1d1d1d 90%);
		pointer-events: none;
		opacity: 1;
		transition: opacity 0.4s ease;
	}

	.col3-wrap.is-open .col3::after {
		opacity: 0;
	}

	/* riga con + / − */
	.col3-toggle {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 4rem;
		align-items: center;
		width: 100%;
		margin-top: 1.5rem;
		padding: 0;
		background: none;
		border: 0;
		color: var(--secondary);
		cursor: pointer;
		position: relative;
		z-index: 1;
	}

	.col3-toggle-icon {
		grid-column: 1;
		justify-self: end;
		position: relative;
		width: 1.75rem;
		height: 1.75rem;
		margin-right: -2.5rem; /* lo porta dentro il gap, come nell'immagine */
	}

	.col3-toggle-icon::before,
	.col3-toggle-icon::after {
		content: "";
		position: absolute;
		background: currentColor;
		transition: transform 0.35s ease;
	}

	.col3-toggle-icon::before {   /* barra orizzontale */
		inset: 50% 0 auto 0;
		height: 1px;
	}

	.col3-toggle-icon::after {    /* barra verticale */
		inset: 0 auto 0 50%;
		width: 1px;
		transform: scaleY(1);
	}

	.col3-wrap.is-open .col3-toggle-icon::after {
		transform: scaleY(0);
	}

	.col3-toggle-icon:hover::before,
	.col3-toggle-icon:hover::after{
		background:var(--accent) !important;
	}

	.col3-toggle-line {
		grid-column: 2 / -1;
		height: 1px;
		background: currentColor;
	}

	.screen-reader-text {
		position: absolute;
		width: 1px; height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

}

@media (max-width: 900px) {
	.single-vetture .col3 { grid-template-columns: 1fr; gap: 2rem; }
	.single-vetture .col3-wrap { --collapsed-height: 22rem; }
	.single-vetture .col3-toggle { grid-template-columns: auto 1fr; gap: 1.5rem; }
	.single-vetture .col3-toggle-icon { justify-self: start; margin-right: 0; }
	.single-vetture .col3-toggle-line { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
	.single-vetture .col3, .single-vetture .col3::after, 
	.single-vetture .col3-toggle-icon::before, .single-vetture .col3-toggle-icon::after {
		transition: none;
	}
}

/* CF7 */
input[type="text"], input[type="email"], input[type="tel"] {
	border:0 none;
	border-bottom:1px solid var(--text);
	background:transparent;
	color:var(--text);
	font-size:1rem;
	font-family:'Nunito';
	transition:all 0.3s ease;
	width:100%;
	padding-block:0.5rem;

	&:focus {
		outline:none;
		border-bottom:1px solid var(--accent);
	}
} 
textarea {
	border:0 none;
	border-bottom:1px solid var(--text);
	background:transparent;
	font-size:1rem;
	font-family:'Nunito';
	transition:all 0.3s ease;
	width:100%;
	padding-block:0.5rem;
	height:5rem;
	color:var(--text);

	&:focus {
		outline:none;
		border-bottom:1px solid var(--accent);
	}
}
.wpcf7-control-wrap {
	width:100%;
}

/* Checkbox custom: cerchio con check al centro */
.wpcf7-acceptance .wpcf7-list-item {
	margin:0;
	font-size:0.8rem;

	a {
		color:var(--text);
		border-bottom:1px solid var(--accent);
	}

	label {
		display: flex;
		align-items: flex-start;
		gap: 0.65rem;
		cursor: pointer;
		/* iOS: evita l'evidenziazione grigia al tap */
		-webkit-tap-highlight-color: transparent;
	}

	/* Reset dello stile nativo (Safari/iOS lo forza) */
	input[type="checkbox"] {
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;

		/* Dimensioni fisse: niente shrink dentro il flex */
		flex: 0 0 auto;
		width: 1.15rem;
		height: 1.15rem;
		margin: 0;
		padding: 0;

		border: 1px solid var(--text);
		border-radius: 50%;
		background: transparent;
		cursor: pointer;
		transition: border-color 0.3s ease, background-color 0.3s ease;

		/* Allinea il cerchio alla prima riga di testo */
		position: relative;
		top: 0.15rem;

		/* Safari <15.4 non supporta :has(), il segno di spunta va qui */
		display: grid;
		place-content: center;

		&::before {
			content: '';
			width: 0.6rem;
			height: 0.6rem;
			transform: scale(0);
			transition: transform 0.15s ease-in-out;
			background-color: var(--accent);

			/* Glifo di spunta disegnato in CSS, nessuna icona esterna */
			clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 82% 0%, 37% 62%);
		}

		&:checked {
			border-color: var(--accent);

			&::before {
				transform: scale(1);
			}
		}

		&:focus-visible {
			outline: 2px solid var(--accent);
			outline-offset: 2px;
		}
	}

	/* Stato di errore CF7 */
	&.wpcf7-not-valid input[type="checkbox"],
	.wpcf7-not-valid & input[type="checkbox"] {
		border-color: #d33;
	}
}
.wpcf7-not-valid-tip {
	position: absolute;
	right: 0;
	top: 0.1rem;
	font-size: 0.9rem;
}
/* Pulsante di invio CF7.
   Il markup è generato da bk_cf7_submit_button() in functions.php con le classi
   .ap-button .ap-button-bubble: colori, icona ed effetto hover arrivano da lì.
   Qui restano solo le correzioni specifiche del <button> di CF7. */
.wpcf7-submit {
	font-family: inherit;
	border-radius: 1.5rem !important; /* batte il reset sui form */

	&:disabled {
		opacity: 0.3;
		pointer-events:none;
	}
}
.wpcf7-spinner {
	position:absolute;
}

/* ============ PAGE CONTATTI ============ */
.ap-contact{
	--ap-sidebar: 27%;
	--ap-intro-color: #ffffff;

	display: flex;
	align-items: flex-start;
	width: 100%;
	max-width: 2560px;
	margin: 0 auto;
}
.ap-contact__intro{
	flex: 0 0 var(--ap-sidebar);
	width: var(--ap-sidebar);
	position: sticky;
	top: 0;
	height: 100vh;
	background-color: #555;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	overflow: hidden;
}
.ap-contact__intro-inner{
	position: relative;
	z-index: 2;
	width: 100%;
	padding: 8rem 3rem 3rem 3.5rem;
	color:white;

	.contact-info {
		margin-top:3rem;

		span {
			display:flex;
			gap:0.5rem;
			flex-wrap:nowrap;

			p {
				margin-bottom:0.5rem;
			}

			i {
				color: var(--accent);
				line-height:1.5;
			}

			a {
				color:white;
				transition:all 0.3s ease;
				border-bottom:2px solid transparent;

				&:hover {
					border-bottom:2px solid var(--secondary);
				}
			}
		}

		.ap-button {
			margin-block:0.5rem;
		}

		.dati a {
			color:white;
				transition:all 0.3s ease;
				border-bottom:2px solid transparent;

				&:hover {
					border-bottom:2px solid var(--secondary);
				}
		}
	}
}
.ap-contact__title{
	color: var(--ap-intro-color);
	text-transform: uppercase;
}
.ap-contact__body{
	flex: 1 1 auto;
	min-width: 0;
	background: #fff;
	padding:8rem;

	display:grid;
	grid-template-columns:1fr 2fr;
	grid-column-gap:6rem;
	grid-row-gap:2rem;

	h2 {
		text-transform:uppercase;
		grid-column-start:1;
		grid-column-end:3;
	}

	.contact-right {



	}
}

#map {
	padding:0;
	margin:0;
	border-radius:1rem;
	aspect-ratio:3/4;
	width:min(430px, 100%);
}

@media (max-width: 1280px){
	.ap-contact{ --ap-sidebar: 34%; }
	.ap-contact__body{ padding: 4rem 2.5rem; }
}
@media (max-width: 900px){
	.ap-contact{ flex-direction: column; }
	.ap-contact__intro{
		position: static;
		width: 100%;
		flex: 0 0 auto;
		height: auto;
		min-height: 55vh;
	}
	.ap-contact__intro-inner{ padding: 3rem 1.75rem; }
	.ap-contact__body{ padding: 3rem 1.75rem; }
}
@media (max-width: 600px){
	.ap-contact__intro{ min-height: auto; }
}

/* FOOTER */
#newsletter {
	padding-block:2rem 0.75rem;
	display:flex;
	justify-content:center;
	align-items:center;
	z-index:3;
	width:100%;
	color:white;
	background-color:#1d1d1d;
	border-bottom:1px solid var(--secondary);

	input[type="email"] {
		color:white;
		width:min(300px, 100%);
		height: 3rem;
		padding: 0.25rem 3rem 0.25rem 1.25rem;
		border: 1px solid white;
		border-radius: 1.5rem;
		text-decoration: none;
		cursor: pointer;
		min-width: 240px;
		margin-block:0;
	}

	p a {
		color: white;
	}

	.wpcf7-form {
		h3 {
			display:inline-block;
			margin-right:3.5rem;
		}

		& > p:first-of-type {
			display:inline-block;
			position:relative;
			max-width:300px;
			margin-bottom: 0;
		}
	}
	.wpcf7-submit {
		span {
			display: none;
		}
		&:before {
			display: none;
		}
	}

	.newsletter {
		display:inline-block;
		width:auto;
		position:relative;
	}
	.ap-button {
		width:auto !important;
		background:none !important;
		padding:0 !important;
		margin:0 !important;
		border:0 none !important;
		min-width:auto !important;
		position:absolute;
		left:257px;
		top:0;

		i {
			background-color:white;
			color:var(--text);
			transition:all 0.3s ease;
		}

		&:hover i {
			background:var(--secondary);
			color:var(--text) !important;
		}
	}

	.wpcf7-not-valid-tip {
	  display:none;
	}
	.wpcf7-not-valid {
		border-color:red !important;
	}

	.wpcf7-acceptance .wpcf7-list-item input[type="checkbox"] {
	   border: 1px solid white;
	}
	.wpcf7 form.invalid .wpcf7-response-output,
	.wpcf7 form.sent .wpcf7-response-output {
		display: inline-block;
		margin: 0;
		border-radius: 1rem;
	}
}

footer {
	z-index:3;
	width:100%;
	color:white;
	font-size:90%;
	padding-block:0.75rem;
	background-color:#1d1d1d;

	a {
		color:white;
		border-bottom:1px solid white;
		transition:all 0.3s ease;

		&:hover {
			border-bottom:3px solid white;
			color:white;
		}
	}
}


/**/

@media screen and (max-width:1280px) {
	
}

@media screen and (max-width:1024px) {
	.intro-services {
		width:100%;
	}

	#newsletter {
		padding-inline:4vw;
	}
}

@media (max-width:900px) {
	.page-template-page-showroom .nav-btn span,
	.page-template-page-contact .nav-btn span {
		background:white;
	}
}

@media (max-width:768px) {
	.row50 {
		grid-template-columns: 1fr;
		gap:1rem;
	}
	.row33 {
		grid-template-columns:1fr;
		gap:1rem
	}
}

@media (max-width:600px) {
	.home-hero {
		.home-title {
			top:7rem;
			left:4vw;
		}

		& .home-hero-button {
			position: absolute;
			bottom: 0;
			right: 0;
			left:0;
			display:flex;
			justify-content:center;
		}
	}

	.nav-btn {
		top: 4vw;
	}
	#logo {
		width: 100px;
		top: 4vw;
		left: 4vw;
	}
	#logo img {
		width: 100px;
	}

	.page-hero {
	  & .page-title {
	    position: relative;
	    top:5rem;
	    left: 0;
	  }
	}
}