/* ==========================================================================
   Carini Rent - stile "Studio" (Personalizza > Carini Rent > Aspetto > Stile grafico, predefinito).
   Si carica dopo main.css e skin-kinto.css: stessi colori, font Toyota, titoli con una parola in petrolio,
   navigazione a capsula, riquadri arrotondati, fasce scure e animazioni leggere.
   I moduli cambiano solo dentro .studio-content (tutte le pagine tranne la scheda prodotto);
   header, footer e menu cambiano ovunque.
   ========================================================================== */

/* Font del marchio: "Toyota Type" quando i file del dealer sono in assets/fonts (vedi inc/assets.php),
   altrimenti Source Sans 3, già caricato dallo stile KINTO. Vale per titoli e testo, scheda prodotto compresa. */
:root {
	--font-brand: "Toyota Type", "ToyotaType", "Source Sans 3", "Segoe UI", ui-sans-serif, system-ui, -apple-system, Roboto, sans-serif;
	--font: var(--font-brand);
	--font-display: var(--font-brand);
	--font-mono: var(--font-brand);
	--teal: #8fd4da;
	--teal-solid: #d7eff1;
	--panel: #edf1f2;
	--panel-2: #e8eef0;
	--grad-slate: linear-gradient(160deg, #1b252c 0%, #2b383f 58%, #47555d 100%);
	--grad-petrol: linear-gradient(155deg, #0a86a6 0%, #00708d 48%, #00566c 100%);
	--r-xl: 22px;
	--r-2xl: 28px;
	--ease-out: cubic-bezier(.22, 1, .36, 1);
}

/* --- Titoli: font Toyota, parola chiave in petrolio ------------------------- */
.studio-content :is(.section__title, .hero__title, .page-head__title, .catalog__title, .cta__title, .entry-title, .bento-hero__title) {
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.08;
}
.studio-content .section__title { font-size: clamp(1.875rem, 3.8vw, 3.125rem); }
.studio-content :is(.section__title, .hero__title, .page-head__title, .catalog__title, .cta__title, .bento-hero__title, .stack-card__title) em { font-style: normal; color: var(--accent); }
.studio-content :is(.bg--slate, .section--hero:not(.hero--bento), .section--steps) :is(.section__title, .hero__title) em { color: var(--teal); }
.studio-content .section__text { color: var(--ink-2); font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); font-weight: 400; line-height: 1.55; }
.studio-content :is(.bg--slate, .bg--accent) .section__text { color: rgb(255 255 255 / 78%); }
.studio-content .space--l { padding-block: clamp(4rem, 9vw, 7.5rem); }
.studio-content .space--m { padding-block: clamp(3rem, 6vw, 5rem); }

/* --- Pulsanti a pillola ------------------------------------------------------ */
.studio-content .btn, .site-header .btn, .site-footer .btn, .sheet--menu .btn { border-radius: 999px; }
.studio-content .btn--lg { min-height: 52px; padding-inline: 1.5rem; }
.studio-content .btn .icon { transition: translate .4s var(--ease-out); }
.studio-content .btn:hover .icon { translate: 3px 0; }
.studio-content .btn--primary { box-shadow: 0 12px 26px -14px rgb(0 112 141 / 85%); }
.studio-content .btn--primary:hover { translate: 0 -1px; }
.studio-content .btn--ghost { border-color: var(--line-2); background: #fff; color: var(--ink); }
.studio-content .btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.studio-content .link-arrow { text-decoration: none; }
.studio-content .link-arrow:hover { text-decoration: underline; }
.studio-content .link-arrow .icon { display: inline-block; }

/* --- Header: capsula sospesa, più compatta quando si scorre ------------------ */
.site-header {
	position: sticky; top: 0; z-index: 50;
	padding: calc(12px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px));
	background: transparent; border: 0;
	pointer-events: none;
	animation: none !important;
}
.site-header__bar {
	display: flex; align-items: center; gap: .35rem;
	width: 100%; max-width: 1140px; height: auto; min-height: 58px;
	margin-inline: auto; padding: 6px 6px 6px 18px;
	border: 1px solid rgb(255 255 255 / 85%); border-radius: 999px;
	background: rgb(255 255 255 / 80%);
	-webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
	box-shadow: 0 10px 30px -14px rgb(29 39 46 / 25%), 0 2px 6px rgb(29 39 46 / 5%);
	pointer-events: auto;
	animation: none !important;
	transition: scale .6s var(--ease-out), box-shadow .5s, background-color .5s;
}
.site-header.is-compact .site-header__bar { scale: .97; background: rgb(255 255 255 / 90%); box-shadow: 0 14px 34px -14px rgb(29 39 46 / 32%), 0 2px 6px rgb(29 39 46 / 6%); }
.site-header .brand { margin-right: auto; }
.site-header .brand__mark { width: 32px; height: 32px; border-radius: 9px; }
.site-header .brand__name { font-size: 1.1875rem; letter-spacing: -.015em; }
.site-header__menu { order: 5; width: 44px; height: 44px; margin: 0 0 0 .15rem; border: 1px solid var(--line-2); border-radius: 50%; background: #fff; }
.site-header__tools { gap: .15rem; }
.site-header__tools .icon-btn { border-radius: 50%; }
.site-header__tools .btn--primary { min-height: 44px; padding: 0 1.15rem; font-size: .9375rem; box-shadow: 0 10px 22px -12px rgb(0 112 141 / 80%); }
@media (min-width: 1024px) {
	.site-header__bar { gap: .5rem; }
	.site-header .brand { margin-right: 0; }
	.site-nav { flex: 1; display: flex; justify-content: center; }
	.site-nav a { padding: .6rem .8rem; border-radius: 999px; font-size: .9375rem; font-weight: 500; transition: background-color .25s, color .25s; }
	.site-nav a:hover { background: rgb(0 112 141 / 8%); color: var(--accent); }
}

/* Menu mobile: pannello che scende dalla capsula dell'header (stessa riga in cima, stessi margini dallo schermo). */
html[data-style="studio"] dialog.sheet--menu {
	inset: calc(12px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) auto max(12px, env(safe-area-inset-left, 0px));
	width: auto; max-width: 1140px;
	/* A tutta altezza: 12 px di margine dallo schermo su tutti e quattro i lati. */
	height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); max-height: none;
	margin: 0 auto; overflow: auto;
	border: 1px solid rgb(255 255 255 / 85%); border-radius: 29px;
	background: #fff; box-shadow: 0 30px 60px -24px rgb(29 39 46 / 45%), 0 2px 6px rgb(29 39 46 / 6%);
	transform: none;
	/* Chiuso: si vede solo la riga alta quanto l'header; aperto: il pannello intero. */
	clip-path: inset(0 0 calc(100% - 58px) 0 round 29px);
	transition: clip-path .5s var(--ease-out), overlay .5s allow-discrete, display .5s allow-discrete;
}
html[data-style="studio"] dialog.sheet--menu[open] { display: flex; flex-direction: column; clip-path: inset(0 round 29px); }
@starting-style { html[data-style="studio"] dialog.sheet--menu[open] { clip-path: inset(0 0 calc(100% - 58px) 0 round 29px); } }
html[data-style="studio"] dialog.sheet--menu::backdrop { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
html[data-style="studio"] dialog.sheet--menu[open]::backdrop { background: rgb(12 18 24 / 30%); }
.sheet--menu .sheet__head { gap: .35rem; min-height: 56px; padding: 5px 5px 5px 17px; border-bottom: 0; border-radius: 28px 28px 0 0; background: #fff; }
.sheet--menu .sheet__head .brand { margin-right: auto; }
.sheet--menu .sheet__head .brand__mark { width: 32px; height: 32px; border-radius: 9px; }
.sheet--menu .sheet__head .brand__name { font-size: 1.1875rem; letter-spacing: -.015em; }
.sheet--menu .sheet__head .icon-btn { border-radius: 50%; }
.sheet--menu .sheet__close { width: 44px; height: 44px; border: 1px solid var(--line-2); background: #fff; }
.sheet--menu .sheet__body { flex: 1; display: flex; flex-direction: column; gap: 1rem; padding: .5rem 17px 17px; }
/* Selettore Privati / Aziende: voce attiva piena in petrolio e riga di conferma sotto. */
.menu-persona { display: grid; gap: .5rem; }
.sheet--menu .persona { padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); }
.sheet--menu .persona button { min-height: 44px; border-radius: 999px; color: var(--ink-2); font-weight: 600; transition: background-color .25s, color .25s, box-shadow .25s; }
html[data-persona="private"] .sheet--menu .persona [data-persona-set="private"],
html[data-persona="business"] .sheet--menu .persona [data-persona-set="business"] { background: var(--accent); color: #fff; box-shadow: 0 8px 18px -10px rgb(0 112 141 / 85%); }
.sheet--menu .persona .icon { display: inline-block; }
/* Le due frasi occupano la stessa cella: l'altezza è sempre quella della più lunga, così le voci sotto non si spostano. */
.menu-persona__note { display: grid; margin: 0; padding-inline: 4px; color: var(--ink-2); font-size: .875rem; text-align: center; }
.menu-persona__note > span { grid-area: 1 / 1; }
html[data-persona="private"] .menu-persona__note [data-note="business"],
html[data-persona="business"] .menu-persona__note [data-note="private"] { visibility: hidden; }
.sheet--menu .menu-list a { padding: .85rem 0; font: 600 clamp(1.125rem, 5.4vw, 1.375rem)/1.2 var(--font-display); letter-spacing: -.01em; }
.sheet--menu .menu-list li:last-child > a { border-bottom: 0; }
.sheet--menu .menu-list .current-menu-item > a, .sheet--menu .menu-list .current_page_item > a { color: var(--accent); }
/* Voce del profilo scelto nel selettore: evidenziata in petrolio con l'etichetta "Il tuo profilo". */
/* Voci con una variante per profilo: le due varianti nella stessa cella, l'altra resta invisibile ma tiene lo spazio. */
.sheet--menu .menu-item--pair { display: grid; }
.sheet--menu .menu-item--pair > a, .sheet--menu .menu-pair > span { grid-area: 1 / 1; }
.sheet--menu .menu-pair { display: grid; }
html[data-persona="private"] .sheet--menu [data-for="business"],
html[data-persona="business"] .sheet--menu [data-for="private"] { visibility: hidden; }
.sheet--menu .menu-list .menu-item--profile > a { align-items: center; gap: .75rem; margin-block: 4px; padding-inline: 14px; border-bottom: 0; border-radius: 16px; background: var(--teal-solid); color: var(--accent-strong); }
.sheet--menu .menu-list .menu-tag { flex: none; padding: 5px 10px; border-radius: 999px; background: #fff; color: var(--accent); font: 600 .75rem/1 var(--font); letter-spacing: .02em; }
.sheet--menu .menu-list .menu-item--shortcut > a { font-weight: 500; }
.sheet--menu .menu-contacts { margin-top: auto; }
.sheet--menu .menu-contacts .btn { min-height: 50px; }
@media (prefers-reduced-motion: reduce) { html[data-style="studio"] dialog.sheet--menu { transition: none; } }

/* --- Hero Studio: titolo centrato e tre riquadri ------------------------------ */
.section--hero.hero--bento { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(3rem, 7vw, 6rem) 0; background: none; color: var(--ink); text-align: center; }
.section--hero.hero--bento::before {
	content: ""; display: block; position: absolute; z-index: -1; inset: -140px 0 auto; height: 980px; pointer-events: none;
	background: radial-gradient(42% 42% at 50% 34%, rgb(143 212 218 / 42%), rgb(143 212 218 / 0%) 72%), radial-gradient(26% 26% at 82% 16%, rgb(0 112 141 / 8%), rgb(0 112 141 / 0%) 70%);
	-webkit-mask-image: none; mask-image: none;
}
.section--hero.hero--bento::after { display: none; }
.bento-hero__kicker { display: inline-flex; align-items: center; gap: .5rem; margin: 0; padding: 7px 14px 7px 8px; border: 1px solid var(--line); border-radius: 999px; background: rgb(255 255 255 / 80%); color: var(--ink-2); font-size: .875rem; font-weight: 500; line-height: 1.2; text-align: left; }
.bento-hero__kicker b { display: inline-grid; place-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--teal-solid); color: var(--accent-strong); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.section--hero .bento-hero__title { max-width: 17ch; margin: 1.6rem auto 0; color: var(--ink); font-size: clamp(2.375rem, 5.4vw, 4.5rem); line-height: 1.04; letter-spacing: -.025em; }
.bento-hero__text { max-width: 33em; margin: 1.5rem auto 0; color: var(--ink-2); font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.55; }
.bento-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2.1rem; }
.section--hero .bento-hero__actions .btn--primary { background: var(--accent); -webkit-backdrop-filter: none; backdrop-filter: none; }
.section--hero .bento-hero__actions .btn--primary:hover { background: var(--accent-strong); }
.bento-hero__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; list-style: none; margin: 1.75rem 0 0; padding: 0; }
.bento-hero__chips li { display: inline-flex; align-items: center; gap: .45rem; min-height: 32px; padding: 0 .9rem; border: 1px solid var(--line); border-radius: 999px; background: rgb(255 255 255 / 75%); color: var(--ink-2); font-size: .875rem; font-weight: 500; }
.bento-hero__chips li:first-child { color: var(--ink); }
.bento-hero__chips .icon { width: 14px; height: 14px; color: var(--accent); }

.bento { display: grid; gap: 16px; margin-top: clamp(5rem, 8vw, 6.25rem); text-align: left; }
.bento__card { position: relative; min-height: 280px; border-radius: var(--r-xl); }
.bento__claim { display: flex; flex-direction: column; overflow: hidden; padding: 28px; background: var(--grad-slate); color: #fff; }
.bento__label { margin: 0; color: var(--teal); font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.bento__claim-text { margin: 1rem 0 0; font: 600 clamp(1.5rem, 2.1vw, 1.875rem)/1.15 var(--font-display); letter-spacing: -.015em; }
.bento__claim-text em { font-style: normal; color: var(--teal); }
.bento__tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: auto 0 0; padding: 26px 0 0; }
.bento__tags li { padding: 8px 11px; border: 1px solid rgb(255 255 255 / 12%); border-radius: 999px; background: rgb(255 255 255 / 7%); color: #dcf0f2; font-size: .8125rem; font-weight: 500; line-height: 1; }
.bento__car {
	order: -1; display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; padding: 24px;
	background: radial-gradient(80% 60% at 50% 18%, rgb(143 212 218 / 38%), rgb(143 212 218 / 0%) 62%), var(--grad-petrol);
	color: #fff; text-decoration: none;
}
.bento__car:hover { color: #fff; }
.bento__car::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: repeating-linear-gradient(90deg, rgb(255 255 255 / 3.5%) 0 1px, transparent 1px 64px); }
.bento__car-img { position: absolute; z-index: 2; top: -13%; left: 0; right: 0; width: min(100%, 560px); margin-inline: auto; pointer-events: none; translate: 0 var(--py, 0px); }
.bento__car-img::after { content: ""; position: absolute; z-index: -1; left: 12%; right: 10%; bottom: 3%; height: 12%; border-radius: 50%; background: radial-gradient(closest-side, rgb(0 24 32 / 55%), rgb(0 24 32 / 0%)); filter: blur(4px); }
.bento__car-img img { width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 22px 20px rgb(0 30 40 / 32%)); }
.bento__car-info { position: relative; z-index: 3; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.bento__car-name { display: grid; gap: .35rem; min-width: 0; }
.bento__brand { color: var(--teal); font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.bento__model { font: 600 clamp(1.375rem, 1.9vw, 1.75rem)/1.1 var(--font-display); letter-spacing: -.01em; }
.bento__ver { color: rgb(255 255 255 / 78%); font-size: .875rem; line-height: 1.35; }
.bento__price { display: grid; justify-items: end; gap: .35rem; text-align: right; white-space: nowrap; }
.bento__amount { display: flex; align-items: baseline; gap: 2px; font: 600 clamp(2.125rem, 2.9vw, 2.75rem)/1 var(--font-display); letter-spacing: -.02em; }
.bento__amount small { color: rgb(255 255 255 / 82%); font: 500 .9375rem/1 var(--font); }
.bento__terms { color: var(--teal); font-size: .78rem; font-weight: 600; }
.bento__photo { overflow: hidden; background: #cfd8db; }
.bento__photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 68% 50%; }
.bento__photo::after { content: ""; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(to top, rgb(17 27 33 / 35%), rgb(17 27 33 / 0%)); pointer-events: none; }
.glass-chip {
	position: absolute; z-index: 2; left: 16px; bottom: 16px; display: grid; gap: 6px; padding: 13px 16px 14px;
	border: 1px solid rgb(255 255 255 / 70%); border-radius: 16px; background: rgb(255 255 255 / 76%);
	-webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
	box-shadow: 0 18px 36px -18px rgb(17 27 33 / 55%); color: var(--ink); text-decoration: none;
}
.glass-chip:hover { color: var(--ink); background: rgb(255 255 255 / 88%); }
.glass-chip__label { color: var(--ink-2); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.glass-chip__price { font-size: .9375rem; font-weight: 500; }
.glass-chip__price strong { font: 700 1.625rem/1 var(--font-display); color: var(--accent); letter-spacing: -.02em; }
@media (min-width: 760px) {
	.bento { grid-template-columns: 1fr 1fr; gap: 20px; }
	.bento__car { grid-column: 1 / -1; min-height: 360px; }
	.bento__car-img { width: min(66%, 560px); top: -16%; }
	.bento__claim, .bento__photo { min-height: 320px; }
}
@media (min-width: 1024px) {
	.bento { grid-template-columns: 1fr 1.45fr 1fr; gap: 24px; }
	.bento__car { grid-column: auto; order: 0; }
	.bento__card { min-height: 380px; }
	.bento__car-img { width: 100%; top: -14%; }
}

/* Striscia scorrevole */
.marquee { overflow: hidden; margin-top: clamp(4rem, 7vw, 6rem); padding-block: 22px; border-block: 1px solid var(--line); }
.marquee__track { display: flex; width: max-content; animation: st-marquee 70s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__list { display: flex; flex-shrink: 0; list-style: none; margin: 0; padding: 0; }
.marquee__list li { display: flex; align-items: center; color: var(--ink); font: 600 clamp(1.25rem, 2vw, 1.75rem)/1 var(--font-display); letter-spacing: -.01em; white-space: nowrap; }
.marquee__list li:nth-child(even) { color: var(--ink-2); font-weight: 400; }
.marquee__list li::after { content: ""; width: 7px; height: 7px; margin: 0 clamp(22px, 3vw, 44px); border-radius: 50%; background: var(--accent); opacity: .75; }
@keyframes st-marquee { to { transform: translateX(-50%); } }

/* --- In breve ----------------------------------------------------------------- */
.studio-content .answer { margin-inline: auto; border: 1px solid var(--line); border-radius: var(--r-2xl); background: radial-gradient(70% 90% at 0% 0%, rgb(143 212 218 / 22%), transparent 60%), #fff; }
.studio-content .answer__q { font: 600 clamp(1.5rem, 2.4vw, 2rem)/1.15 var(--font-display); letter-spacing: -.015em; }

/* --- Tre ragioni: schede impilate --------------------------------------------- */
.solutions--stack .section__head { display: block; max-width: 860px; margin: 0 auto clamp(3rem, 6vw, 5rem); text-align: center; }
.solutions--stack .section__text { margin-inline: auto; }
.stack { display: grid; gap: 20px; }
.stack-card { position: relative; z-index: calc(var(--i) + 1); }
.stack-card__inner {
	position: relative; display: flex; flex-direction: column; overflow: hidden;
	border: 1px solid var(--line); border-radius: var(--r-2xl); background: #fff;
	box-shadow: 0 1px 2px rgb(29 39 46 / 4%), 0 40px 80px -50px rgb(29 39 46 / 50%);
	transform-origin: 50% 0; scale: var(--stack-scale, 1); filter: brightness(var(--stack-dim, 1));
}
.stack-card:nth-child(3n+2) .stack-card__inner { border-color: rgb(0 112 141 / 12%); background: var(--teal-solid); }
.stack-card:nth-child(3n+3) .stack-card__inner { border-color: transparent; background: var(--grad-slate); color: #fff; }
.stack-card__media { position: relative; margin: 0; padding: 10px 10px 0; }
.stack-card__frame { position: relative; overflow: hidden; aspect-ratio: 16 / 11; border-radius: 20px; }
.stack-card__frame img { width: 100%; height: 100%; object-fit: cover; scale: var(--stack-zoom, 1); }
.stack-card__text { display: flex; flex-direction: column; align-items: flex-start; padding: 26px 24px 30px; }
.stack-card__num { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--ink-2); font-size: .8125rem; font-weight: 600; letter-spacing: .12em; }
.stack-card__num::after { content: ""; width: 40px; height: 1px; background: currentColor; opacity: .45; }
.stack-card__num span { order: 2; letter-spacing: .08em; text-transform: uppercase; }
.stack-card:nth-child(3n+3) .stack-card__num { color: var(--teal); }
.stack-card__title { margin: 1.1rem 0 0; font: 600 clamp(1.75rem, 2.9vw, 2.625rem)/1.1 var(--font-display); letter-spacing: -.02em; text-wrap: balance; }
.stack-card:nth-child(3n+3) .stack-card__title { color: #fff; }
.stack-card:nth-child(3n+3) .stack-card__title em { color: var(--teal); }
.stack-card__desc { max-width: 46ch; margin: 1rem 0 0; color: var(--ink-2); }
.stack-card:nth-child(3n+3) .stack-card__desc { color: rgb(255 255 255 / 76%); }
.checks { display: grid; gap: 10px; list-style: none; margin: 1.4rem 0 0; padding: 0; }
.checks li { display: flex; align-items: center; gap: 12px; font-weight: 500; line-height: 1.3; }
.checks .icon { flex: none; box-sizing: border-box; width: 26px; height: 26px; padding: 6px; border-radius: 50%; background: var(--teal-solid); color: var(--accent); }
.stack-card:nth-child(3n+2) .checks .icon { background: #fff; }
.stack-card:nth-child(3n+3) .checks .icon { background: rgb(143 212 218 / 16%); color: var(--teal); }
.stack-card__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }
@media (min-width: 900px) {
	.stack-card__inner { flex-direction: row; min-height: clamp(460px, calc(100vh - 200px), 580px); }
	.stack-card__text { flex: 1 1 52%; justify-content: center; padding: clamp(36px, 4vw, 56px); }
	.stack-card__media { flex: 1 1 48%; order: 2; padding: 0; }
	.stack-card__frame { position: absolute; inset: 14px; aspect-ratio: auto; border-radius: 18px; }
}
/* Su desktop alto abbastanza le schede si fermano una sopra l'altra mentre si scorre */
@media (min-width: 900px) and (min-height: 620px) {
	.stack-card { position: sticky; top: calc(96px + var(--i) * 22px); }
}

/* --- Offerte: schede chiare stile prodotto ----------------------------------- */
.studio-content .section--vehicles .section__head { align-items: flex-end; }
.studio-content .vehicles__tabs { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-bottom: .5rem; }
.studio-content .persona--seg { padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.studio-content .persona--seg button { border-radius: 999px; }
html[data-persona] .studio-content .persona--seg [aria-pressed="true"] { box-shadow: 0 8px 18px -10px rgb(0 112 141 / 85%); }
/* Sulle fasce scure il selettore resta scuro con la voce attiva bianca. */
.studio-content .bg--slate .persona--seg { border-color: rgb(255 255 255 / 16%); background: rgb(255 255 255 / 8%); }
.studio-content .bg--slate .persona--seg button { color: rgb(255 255 255 / 82%); }
html[data-persona="private"] .studio-content .bg--slate .persona--seg [data-persona-set="private"],
html[data-persona="business"] .studio-content .bg--slate .persona--seg [data-persona-set="business"] { background: #fff; color: var(--ink); box-shadow: none; }
.studio-content .section--vehicles .rail { grid-auto-columns: clamp(280px, 82vw, 400px); gap: 18px; padding-block: 1.75rem 2.5rem; }
@media (min-width: 1024px) { .studio-content .section--vehicles .rail { grid-auto-columns: calc((100% - var(--gutter) * 2 - 54px) / 3.3); } }
.studio-content .rail-nav .icon-btn { width: 48px; height: 48px; border: 1px solid var(--line-2); border-radius: 50%; background: #fff; transition: background-color .3s, color .3s, border-color .3s; }
.studio-content .rail-nav .icon-btn:hover { border-color: var(--ink); background: var(--ink); color: #fff; }

.studio-content .vcard {
	display: flex; flex-direction: column; overflow: hidden; padding: 22px;
	border: 0; border-radius: 26px; background: var(--panel); box-shadow: none;
	transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out), background-color .4s;
}
@media (hover: hover) {
	.studio-content .vcard:hover { translate: none; transform: translateY(-8px); border: 0; background: var(--panel-2); box-shadow: 0 34px 60px -36px rgb(29 39 46 / 45%); }
	.studio-content .vcard:hover .vimg { scale: 1.05; translate: 10px 0; }
}
.studio-content .vcard__media { margin: 1.4rem -10px .5rem; background: none; aspect-ratio: 1.9 / 1; }
.studio-content .vcard__media .vimg { filter: drop-shadow(0 16px 14px rgb(29 39 46 / 16%)); transition: scale .8s var(--ease-out), translate .8s var(--ease-out); }
.studio-content .vcard__badges { top: 18px; left: 18px; }
.studio-content .vcard__badges .badge { border-radius: 999px; }
.studio-content .vcard__fav { top: 14px; right: 14px; border-radius: 50%; background: #fff; }
.studio-content .vcard__body { display: grid; flex: 1; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr auto auto; align-content: start; column-gap: 0; padding: 0; }
.studio-content .vcard__title { grid-column: 1 / -1; order: 1; margin: 0; padding: 0; border: 0; font: 600 clamp(1.25rem, 1.7vw, 1.5rem)/1.15 var(--font-display); letter-spacing: -.01em; }
.studio-content .vcard__version { grid-column: 1 / -1; order: 2; margin-top: .3rem; color: var(--ink-2); font-size: .9375rem; }
.studio-content .vcard__specs { grid-column: 1 / -1; order: 3; align-self: start; gap: 6px; margin: .9rem 0 1.4rem; }
.studio-content .vcard__specs li { padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink-2); font-size: .8125rem; font-weight: 500; line-height: 1; }
.studio-content .vcard__specs .icon { display: none; }
.studio-content .vcard__price { grid-column: 1; order: 4; align-self: end; padding-top: 1.1rem; border-top: 1px solid var(--line-2); }
.studio-content .vcard__amount strong { font: 600 2.375rem/1 var(--font-display); letter-spacing: -.025em; color: var(--ink); }
.studio-content .vcard__amount span { color: var(--ink-2); font-size: .9375rem; font-weight: 500; }
.studio-content .vcard__terms { margin-top: .4rem; color: var(--accent); font-size: .8125rem; font-weight: 600; }
.studio-content .vcard__plan { margin-top: .15rem; color: var(--ink-2); font: 400 .8125rem var(--font); }
.studio-content .vcard__actions { grid-column: 2; order: 5; align-self: stretch; align-items: flex-end; gap: .4rem; margin: 0; padding: 1.1rem 0 0 .75rem; border-top: 1px solid var(--line-2); }
.studio-content .vcard__note { grid-column: 1 / -1; order: 6; }
/* "Richiedi preventivo" diventa la freccia rotonda; il testo resta per i lettori di schermo */
.studio-content .vcard__actions .btn {
	position: relative; flex: none; width: 50px; min-height: 0; height: 50px; padding: 0;
	border-radius: 50%; background: var(--ink); color: transparent; font-size: 0; box-shadow: none;
	transition: background-color .3s, transform .5s var(--ease-out);
}
.studio-content .vcard__actions .btn::after {
	content: ""; position: absolute; inset: 0; margin: auto; width: 17px; height: 17px; background: #fff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.studio-content .vcard:hover .vcard__actions .btn, .studio-content .vcard__actions .btn:focus-visible { background: var(--accent); transform: rotate(-45deg); }
.studio-content .vcard__compare { width: 42px; height: 42px; margin-bottom: 4px; border-radius: 50%; background: #fff; }

/* --- Come funziona: fascia scura, numeri grandi, linea di avanzamento --------- */
.studio-content .section--steps {
	margin-inline: clamp(0px, 1.2vw, 20px); padding-block: clamp(5rem, 10vw, 8.75rem);
	overflow: hidden; border-radius: clamp(0px, 2.6vw, 40px); background: var(--grad-slate); color: #fff;
}
.studio-content .section--steps::before { content: ""; position: absolute; top: -300px; right: -260px; width: 760px; height: 760px; border-radius: 50%; background: radial-gradient(closest-side, rgb(143 212 218 / 16%), rgb(143 212 218 / 0%)); pointer-events: none; }
.studio-content .section--steps .container { position: relative; display: grid; gap: 3rem; }
.studio-content .section--steps .section__head { display: block; margin: 0; }
.studio-content .section--steps .section__title { color: #fff; }
.studio-content .section--steps .section__text { max-width: 40ch; color: rgb(255 255 255 / 74%); }
.studio-content .section--steps .steps { position: relative; grid-template-columns: minmax(0, 1fr); gap: 0; padding-left: 36px; }
.studio-content .steps::before, .studio-content .steps::after { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 1px; background: rgb(255 255 255 / 14%); }
.studio-content .steps::after { background: var(--teal); transform-origin: 50% 0; scale: 1 var(--progress, 1); }
.studio-content .section--steps .step {
	display: grid; gap: .6rem; padding: 30px 0; border: 0; border-top: 1px solid rgb(255 255 255 / 10%);
	border-radius: 0; background: none; box-shadow: none; color: #fff;
}
.studio-content .section--steps .step:last-child { border-bottom: 1px solid rgb(255 255 255 / 10%); }
.studio-content .section--steps .step::before {
	content: ""; position: absolute; left: -36px; top: calc(30px + clamp(28px, 3vw, 46px)); width: 9px; height: 9px; margin-top: -4.5px;
	border: 1px solid var(--teal); border-radius: 50%; background: var(--teal); transition: background-color .5s, border-color .5s, box-shadow .5s;
}
.studio-content .section--steps .step__num { display: block; width: auto; height: auto; padding-bottom: .04em; border-radius: 0; background: none; box-shadow: none; color: var(--teal); font: 300 clamp(3rem, 5vw, 4.5rem)/1 var(--font-display); letter-spacing: -.03em; transition: color .6s; }
.studio-content .section--steps .step__title { margin: 0; color: #fff; font: 600 clamp(1.375rem, 2vw, 1.75rem)/1.2 var(--font-display); letter-spacing: -.01em; }
.studio-content .section--steps .step p { max-width: 44ch; color: rgb(255 255 255 / 72%); font-size: 1rem; }
.studio-content .steps.is-live .step::before { border-color: rgb(255 255 255 / 35%); background: #2b383f; }
.studio-content .steps.is-live .step__num { color: rgb(255 255 255 / 22%); }
.studio-content .steps.is-live .step.is-active::before { border-color: var(--teal); background: var(--teal); box-shadow: 0 0 0 6px rgb(143 212 218 / 16%); }
.studio-content .steps.is-live .step.is-active .step__num { color: var(--teal); }
.studio-content .section--steps .steps__cta { margin: 0; }
.studio-content .section--steps .btn--primary { background: #fff; color: var(--ink); box-shadow: none; }
.studio-content .section--steps .btn--primary:hover { background: var(--teal-solid); color: var(--ink); }
@media (min-width: 640px) {
	.studio-content .section--steps .step { grid-template-columns: clamp(110px, 12vw, 170px) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 24px; align-items: start; }
	.studio-content .section--steps .step__num { grid-row: span 2; }
	.studio-content .section--steps .step__title { padding-top: clamp(10px, 1.2vw, 18px); }
}
@media (min-width: 960px) {
	.studio-content .section--steps .container { grid-template-columns: 5fr 7fr; grid-template-rows: auto 1fr; gap: 2rem 72px; align-items: start; }
	.studio-content .section--steps .section__head { grid-column: 1; grid-row: 1; }
	.studio-content .section--steps .steps { grid-column: 2; grid-row: 1 / span 2; }
	.studio-content .section--steps .steps__cta { grid-column: 1; grid-row: 2; }
}

/* --- Sedi: schede chiare con la città in grande ------------------------------- */
.studio-content .section--sedi .section__head { display: grid; gap: 1.25rem; align-items: end; }
@media (min-width: 960px) { .studio-content .section--sedi .section__head { grid-template-columns: 1.15fr 1fr; gap: 64px; } .studio-content .section--sedi .section__intro { display: contents; } }
.studio-content .sedi { grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 640px) { .studio-content .sedi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .studio-content .sedi { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.studio-content .sede { min-height: 250px; border: 1px solid var(--line); border-radius: var(--r-xl); background: #fff; box-shadow: none; transition: transform .5s var(--ease-out), border-color .4s, box-shadow .5s; }
@media (hover: hover) { .studio-content .sede:hover { transform: translateY(-5px); border-color: rgb(0 112 141 / 35%); box-shadow: 0 26px 50px -32px rgb(29 39 46 / 40%); } }
.studio-content .sede__media--empty { display: none; }
.studio-content .sede__media { margin: 10px 10px 0; border-radius: 16px; overflow: hidden; }
.studio-content .sede__body { display: flex; flex: 1; flex-direction: column; gap: 0; padding: 26px 26px 24px; }
.studio-content .sede__title { margin: 0; font: 600 clamp(1.625rem, 2.4vw, 2.125rem)/1.1 var(--font-display); letter-spacing: -.02em; }
.studio-content .sede__pre { display: block; margin-bottom: 1.4rem; color: var(--ink-2); font: 600 .78rem/1 var(--font); letter-spacing: .12em; text-transform: uppercase; }
.studio-content .sede__address { margin-top: .65rem; }
.studio-content .sede__brands { margin-top: auto; padding-top: 1.4rem; }
.studio-content .sede__brands li { padding: 8px 12px; border-radius: 999px; background: var(--teal-solid); color: var(--accent-strong); font-size: .8125rem; line-height: 1; }
.studio-content .sede__actions { margin-top: 1rem; }
.studio-content .sede--cta { border-color: transparent; background: radial-gradient(70% 60% at 85% 10%, rgb(143 212 218 / 30%), rgb(143 212 218 / 0%) 70%), var(--grad-petrol); color: #fff; }
.studio-content .sede--cta .sede__title { color: #fff; font-size: clamp(1.5rem, 2.1vw, 1.875rem); }
.studio-content .sede--cta p { margin: .75rem 0 0; color: rgb(255 255 255 / 84%); }
.studio-content .sede--cta .sede__actions { margin-top: auto; padding-top: 1.5rem; }
.studio-content .sede--cta .btn--light { background: #fff; color: var(--ink); }
.studio-content .sede--cta .btn--light:hover { background: var(--teal-solid); color: var(--ink); }

/* --- Domande frequenti: titolo fisso a sinistra, risposte in schede ----------- */
@media (min-width: 960px) {
	.studio-content .section--faq .faq { grid-template-columns: 5fr 7fr; gap: 72px; }
	.studio-content .section--faq .faq__aside { position: sticky; top: 120px; align-self: start; }
}
.studio-content .faq__list { gap: 12px; align-content: start; }
.studio-content .faq__item { padding: 0; border: 1px solid var(--line); border-radius: var(--r-xl); background: #fff; box-shadow: none; transition: border-color .3s, box-shadow .4s; }
.studio-content .faq__item[open] { border-color: rgb(0 112 141 / 30%); box-shadow: 0 24px 50px -38px rgb(29 39 46 / 45%); }
.studio-content .faq__item summary { gap: 20px; padding: 22px 22px 22px 26px; }
.studio-content .faq__item summary:focus-visible { outline-offset: -3px; border-radius: var(--r-xl); }
.studio-content .faq__q { margin: 0; font: 600 clamp(1.125rem, 1.6vw, 1.375rem)/1.3 var(--font-display); letter-spacing: -.01em; }
.studio-content .faq__item summary .icon { display: none; }
.studio-content .faq__item summary::after {
	content: ""; flex: none; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%;
	background: linear-gradient(var(--ink), var(--ink)) center / 14px 1.6px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1.6px 14px no-repeat, var(--bg);
	transition: rotate .5s var(--ease-out), background-color .3s, border-color .3s;
}
.studio-content .faq__item[open] summary::after {
	rotate: 45deg; border-color: var(--accent);
	background: linear-gradient(#fff, #fff) center / 14px 1.6px no-repeat, linear-gradient(#fff, #fff) center / 1.6px 14px no-repeat, var(--accent);
}
.studio-content .faq__answer { padding: 0 26px 24px; color: var(--ink-2); }
.studio-content .faq__answer p { max-width: 60ch; }
.studio-content .faq__aside .link-arrow { margin-top: 1rem; }

/* --- Invito finale: pannello chiaro con titolo grande e auto ------------------- */
.studio-content .section--cta .cta {
	display: block; overflow: hidden; padding: clamp(4rem, 9vw, 7.5rem) clamp(1.25rem, 5vw, 5rem) clamp(1.25rem, 3vw, 2.25rem);
	border: 1px solid rgb(0 112 141 / 10%); border-radius: clamp(24px, 3vw, 40px); text-align: center; color: var(--ink);
	background: radial-gradient(70% 55% at 50% 0%, rgb(143 212 218 / 55%), rgb(143 212 218 / 0%) 70%), linear-gradient(180deg, #e6f4f5 0%, #f3f9f9 100%);
}
.studio-content .section--cta .cta__copy { max-width: none; }
.studio-content .section--cta .cta__title { max-width: 20ch; margin: 0 auto; color: var(--ink); font-size: clamp(2.125rem, 4.8vw, 4rem); line-height: 1.06; letter-spacing: -.025em; }
.studio-content .section--cta .cta p { max-width: 38em; margin: 1.5rem auto 0; color: var(--ink-2); font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); }
.studio-content .section--cta .cta__actions { justify-content: center; margin-top: 2.1rem; }
.studio-content .section--cta .btn--light { background: var(--accent); color: #fff; box-shadow: 0 12px 26px -14px rgb(0 112 141 / 85%); }
.studio-content .section--cta .btn--light:hover { background: var(--accent-strong); color: #fff; }
.studio-content .section--cta .btn--outline-light { border-color: var(--line-2); background: #fff; color: var(--ink); }
.studio-content .section--cta .btn--outline-light:hover { border-color: var(--accent); color: var(--accent); }
.studio-content .section--cta .cta__media { position: relative; width: min(660px, 96%); margin: clamp(2.5rem, 5vw, 4rem) auto 0; translate: 0 var(--rise, 0px); }
.studio-content .section--cta .cta__media::after { content: ""; position: absolute; z-index: -1; left: 10%; right: 8%; bottom: 2%; height: 12%; border-radius: 50%; background: radial-gradient(closest-side, rgb(29 39 46 / 32%), rgb(29 39 46 / 0%)); }
.studio-content .section--cta .cta__media img { border-radius: 20px; filter: drop-shadow(0 26px 24px rgb(29 39 46 / 20%)); }
.studio-content .section--cta .cta__sedi { margin: .4rem 0 0; color: var(--ink-2); font-size: .875rem; letter-spacing: .02em; }

/* --- Footer scuro con il marchio grande --------------------------------------- */
.site-footer { padding-top: clamp(4rem, 8vw, 6.25rem); border-top: 0; background: var(--slate-1); color: rgb(255 255 255 / 72%); font-size: 1rem; }
.site-footer a { color: rgb(255 255 255 / 82%); }
.site-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.site-footer .brand { color: #fff; }
.site-footer .brand__name { color: #fff; }
.site-footer .brand__name b { color: var(--teal); }
.site-footer__brand > p { color: rgb(255 255 255 / 72%); }
.site-footer__title { color: var(--teal); font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.site-footer__contacts .icon { color: var(--teal); }
.site-footer .icon-btn { color: #fff; }
.site-footer .icon-btn:hover { background: rgb(255 255 255 / 10%); }
.site-footer__mark { margin-top: clamp(3rem, 7vw, 5.6rem); margin-bottom: 0; overflow: hidden; color: rgb(255 255 255 / 7%); font: 700 clamp(3.25rem, 13vw, 12.5rem)/.9 var(--font-display); letter-spacing: -.045em; white-space: nowrap; user-select: none; }
.site-footer__mark em { color: rgb(143 212 218 / 17%); font-style: normal; }
.site-footer__legal { margin-top: 0; border-top-color: rgb(255 255 255 / 10%); color: rgb(255 255 255 / 62%); font-size: .875rem; }
.site-footer__note { color: rgb(255 255 255 / 50%); }
.site-footer__sedi strong { margin-bottom: .5rem; color: var(--teal); font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

/* ==========================================================================
   Movimento: solo se l'utente non ha chiesto di ridurlo (classe "motion" su <html>, messa nel <head>).
   Senza JavaScript o con "riduci movimento" la pagina è completa e ferma.
   ========================================================================== */
@keyframes st-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes st-fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes st-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

@media (prefers-reduced-motion: no-preference) {
	/* Intro dell'hero */
	.motion .hero--bento [data-intro] { animation: st-fade .8s var(--ease-out) both; }
	.motion .hero--bento .bento-hero__kicker { animation-delay: .05s; }
	.motion .hero--bento .bento-hero__text { animation-delay: .45s; }
	.motion .hero--bento .bento-hero__actions { animation-delay: .55s; }
	.motion .hero--bento .bento-hero__chips { animation-delay: .65s; }
	.motion .hero--bento .bento__card { animation: st-up 1s var(--ease-out) both; }
	.motion .hero--bento .bento__claim { animation-delay: .7s; }
	.motion .hero--bento .bento__car { animation-delay: .8s; }
	.motion .hero--bento .bento__photo { animation-delay: .9s; }
	.motion .hero--bento .bento__car-img img { animation: st-up 1.2s var(--ease-out) 1s both; }
	.glass-chip { animation: st-float 6s ease-in-out infinite; }

	/* Titoli che salgono parola per parola (parole avvolte da studio.js) */
	.is-split .w { display: inline-block; overflow: hidden; padding: .04em .02em .12em; margin: -.04em -.02em -.12em; vertical-align: top; }
	.is-split .w > span { display: inline-block; transform: translateY(108%); transition: transform 1s var(--ease-out); transition-delay: calc(var(--d, 0) * 55ms + 80ms); }
	.is-split.is-inview .w > span { transform: none; }

	/* Comparsa allo scorrimento (browser con scroll-driven animations) */
	@supports (animation-timeline: view()) {
		.studio-content :is(.sede, .faq__item, .section--vehicles .vcard, .answer, .section__head) { animation: cr-reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 30%; }
	}
}

@media (prefers-reduced-motion: reduce) {
	.marquee__track { width: 100%; justify-content: center; padding-inline: 16px; animation: none; }
	.marquee__list { flex-shrink: 1; flex-wrap: wrap; justify-content: center; row-gap: 14px; }
	.marquee__list[aria-hidden="true"] { display: none; }
	.stack-card__inner { scale: none; filter: none; }
}