/* home.css · foglio di stile condiviso per home-c.html e home-b.html (mock-up uso e getta) */
:root{
  --navy:#042B3A; --navy-800:#073648;
  --teal:#1F7A8C; --teal-dark:#17606f; --teal-soft:#dcecef;
  --cyan:#00B9DF;
  --ink:#0b1a20; --muted:#53656d;
  --paper:#ffffff; --mist:#eef4f6; --line:#d5e1e6;
  --radius:14px;
  --max:1200px;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:"Manrope","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  interpolate-size:allow-keywords;
}
*,*::before,*::after{box-sizing:border-box}
/* niente barra di scorrimento sul viewport: la pagina scorre, la barra no */
html{scroll-behavior:smooth;scrollbar-width:none;scrollbar-color:transparent transparent}
html::-webkit-scrollbar{width:0;height:0;display:none}
body{
  margin:0;font-family:var(--font-body);
  color:var(--ink);background:var(--paper);line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;caret-color:var(--teal);
}
::selection{background:var(--cyan);color:var(--navy)}
/* barre di scorrimento nascoste in tutto il mock-up: pagina e caroselli scorrono lo stesso */
::-webkit-scrollbar{width:0;height:0;display:none}
h1,h2,h3,.display{font-family:var(--font-display);line-height:1.12;letter-spacing:-.02em;margin:0;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-underline-offset:3px}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:6px}
/* focus ring sui fondi chiari: il ciano su carta/foschia scende sotto i 3:1 di WCAG 1.4.11,
   il teal regge (4.97:1 su carta, 4.48:1 su foschia). Sui fondi petrolio il ciano sta a 6.5:1 e resta.
   Vale anche per le regole specifiche piu sotto, che avrebbero il ciano per specificita:
   .ins-item summary, .dir-link, .faqm-list summary. */
.trust :focus-visible,.reviews :focus-visible,.fleet :focus-visible,.ins :focus-visible,.blocks :focus-visible,
.faq :focus-visible,.contatti :focus-visible,.detailing :focus-visible,.pickup :focus-visible,
.flotta-band :focus-visible,.cars-row :focus-visible,.pdp :focus-visible,.map-embed :focus-visible,
.ins-acc :focus-visible,.faqm-grid :focus-visible,.flotta-band-body :focus-visible{outline-color:var(--teal)}
/* ma dentro i riquadri petrolio immersi nelle sezioni chiare il ciano è ancora sopra 3:1: lì resta ciano */
.review-card :focus-visible,.fleet-feature :focus-visible,.fleet-row-media :focus-visible,
.car-tile :focus-visible,.flotta-band-media :focus-visible,.pdp-media :focus-visible{outline-color:var(--cyan)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.icon{width:18px;height:18px;flex:none;fill:currentColor}

.btn{
  display:inline-flex;align-items:center;gap:9px;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:.95rem;
  padding:13px 22px;border-radius:10px;text-decoration:none;border:1.5px solid transparent;
  cursor:pointer;transition:transform .18s cubic-bezier(.16,1,.3,1),background .18s ease,color .18s ease,border-color .18s ease,box-shadow .22s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--teal);color:#fff}
.btn-primary:hover{background:var(--teal-dark)}
.btn-cyan{background:var(--cyan);color:var(--navy)}
.btn-cyan:hover{background:#33c9e8}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-outline{background:transparent;color:var(--navy);border-color:#c3d3da}
.btn-outline:hover{border-color:var(--navy)}
.link-wa{
  display:inline-flex;align-items:center;gap:7px;
  font-weight:600;font-size:.85rem;color:var(--teal-dark);text-decoration:none;
  border-bottom:1px solid rgba(31,122,140,.35);padding-bottom:1px;
}
.link-wa:hover{color:var(--navy);border-bottom-color:var(--navy)}
/* versione compatta dei bottoni: serve dove prima c'erano i link di testo */
.btn-sm{padding:9px 15px;font-size:.84rem;border-radius:9px;gap:8px}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--navy);border-bottom:1px solid rgba(255,255,255,.10)}
/* header: hamburger a sinistra, logo al centro, contatti a destra.
   Il menu vero vive nel pannello .main-menu, così su telefono non serve un secondo header. */
.header-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;height:78px}
.nav-toggle{justify-self:start;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:46px;min-width:124px;padding:12px 18px;background:transparent;border:1px solid rgba(255,255,255,.22);border-radius:10px;color:#fff;font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;transition:background .18s ease,border-color .18s ease}
.nav-toggle:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.42)}
.nav-toggle:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.nav-toggle-bars{display:inline-flex;flex-direction:column;gap:4px;width:16px}
.nav-toggle-bars span{height:2px;border-radius:2px;background:currentColor;transition:transform .22s cubic-bezier(.16,1,.3,1),opacity .16s ease}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.brand{display:flex;align-items:center;justify-content:center;flex:none;grid-column:2}
.brand img{height:46px;width:auto}
/* stessa altezza e stessa larghezza dell'hamburger: i due comandi dell'header pesano uguale */
.header-cta{justify-self:end;height:46px;min-width:124px;padding:12px 18px;font-size:.9rem}

/* pannello del menu: scende dall'header, sopra tutto, chiude con ESC o cliccando fuori */
.main-menu{position:absolute;left:0;right:0;top:100%;background:var(--navy-800);border-bottom:1px solid rgba(255,255,255,.12);box-shadow:0 34px 60px -30px rgba(0,0,0,.85);opacity:0;transform:translateY(-10px);transition:opacity .2s ease,transform .26s cubic-bezier(.16,1,.3,1)}
.main-menu[hidden]{display:none}
.main-menu.is-open{opacity:1;transform:none}
/* due colonne esattamente a metà: il divisore cade al centro del contenitore */
.main-menu-inner{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:22px 0 26px;align-items:start}
/* cinque voci a sinistra e cinque auto a destra: stessa altezza di riga,
   così le due colonne restano allineate una all'altra */
.menu-nav{display:grid;gap:8px;align-content:start}
.menu-nav a{display:flex;align-items:center;justify-content:space-between;gap:16px;height:58px;padding:0 2px;color:#fff;text-decoration:none;font-family:var(--font-display);font-weight:600;font-size:1.06rem;border-bottom:1px solid rgba(255,255,255,.10)}
.menu-nav a:hover{color:var(--cyan)}
.menu-nav a[aria-current="page"]{color:var(--cyan)}
.menu-nav a[aria-current="page"]::after{content:"qui";font-family:var(--font-body);font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.menu-side{border-left:1px solid rgba(255,255,255,.12);padding-left:34px}
.menu-cars{display:grid;gap:8px;align-content:start}
.menu-cars a{display:flex;align-items:center;gap:14px;height:58px;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.10)}
.menu-cars a:hover{color:var(--cyan)}
/* le foto hanno proporzioni diverse tra loro: altezza fissa e box di larghezza
   fissa centrato, così le cinque auto si vedono della stessa dimensione */
.menu-car-thumb{width:112px;height:54px;flex:none;display:flex;align-items:center;justify-content:center}
.menu-car-thumb img{height:54px;width:auto;max-width:112px;filter:drop-shadow(0 8px 12px rgba(0,0,0,.45))}
.menu-car-name{font-family:var(--font-display);font-weight:700;font-size:.95rem}
.menu-note{margin-top:16px;font-size:.84rem;color:rgba(255,255,255,.72);max-width:34ch}
/* su telefono il pannello copre metà schermo: un velo scuro dietro lo rende leggibile.
   Su desktop resta il menu a tendina, senza velo. */
.menu-backdrop{position:fixed;inset:0;z-index:49;background:rgba(4,43,58,.58);opacity:0;transition:opacity .2s ease;pointer-events:none}
.menu-backdrop.is-on{opacity:1;pointer-events:auto}
@media (min-width:761px){.menu-backdrop{display:none}}
@media (prefers-reduced-motion:reduce){
  .main-menu{transition:none}
  .nav-toggle-bars span{transition:none}
}
/* l'header è sticky: senza questo, un salto a #assicurazioni o #punti
   lascerebbe il titolo della sezione sotto la barra */
main section[id],main [id]{scroll-margin-top:88px}

/* ---------- hero (varianti: .hero-c foto Milano · .hero-b fondo scuro, 3008 sotto il blocco) ---------- */
/* hero a tutta finestra: header in flow (78px), foto in cover che si ingrandisce, barra booking dentro l'hero */
.hero{position:relative;color:#fff;overflow:visible;scroll-margin-top:88px;
  display:flex;flex-direction:column;
  min-height:calc(100vh - 78px);min-height:calc(100svh - 78px)}
.hero-inner{position:relative;z-index:2;width:100%;flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.hero-title{font-weight:800;letter-spacing:-.03em;font-size:clamp(2.1rem,4.4vw,3.6rem)}
.hero-title em{font-style:normal;color:var(--cyan)}
.proof{display:inline-flex;align-items:center;gap:9px;font-size:.92rem;color:rgba(255,255,255,.86)}
.stars{display:inline-flex;gap:2px}
.stars svg{width:15px;height:15px;fill:var(--cyan)}
.stars .star-partial{fill:url(#star-cyan)}
.stars--gold{gap:2px;color:#e2a800}
.stars--gold svg{width:14px;height:14px;fill:currentColor}
.stars--gold .star-partial{fill:url(#star-gold)}
.ctas{display:flex;flex-wrap:wrap;gap:12px}

.hero-c{padding:52px 0 26px;background:
  linear-gradient(180deg, rgba(4,43,58,.86) 0%, rgba(4,43,58,.50) 42%, rgba(4,43,58,.92) 100%),
  url("../assets/photos/milano-duomo.webp") center 42%/cover no-repeat,
  var(--navy);
  color:#fff}
.hero-c .copy{max-width:640px;text-shadow:0 2px 10px rgba(0,0,0,.55)}
.hero-c .proof{margin-top:14px}
.hero-c .ctas{margin-top:20px}
.hero-c .form-wrap{margin-top:auto;padding-top:30px}

/* i tre aloni radiali del prototipo hero.html, sopra il navy */
/* gli aloni di questa hero vivono in .hero-b::after (sezione MOTION, in fondo):
   così possono accendersi una volta sola senza cambiare l'aspetto finale */
.hero-b{padding:44px 0 26px;background:var(--navy)}
.hero-b .copy{max-width:900px;margin:0 auto;text-align:center}
.hero-b .ctas{justify-content:center;margin-top:22px}
.hero-b .proof{justify-content:center;margin-top:16px}
.hero-b .car{width:min(100%,430px);margin:8px auto 0}
.hero-b .car img{
  width:100%;aspect-ratio:959/577;max-height:min(32vh,300px);
  object-fit:cover;object-position:50% 77%;
  filter:drop-shadow(0 26px 36px rgba(0,0,0,.5));
}
.hero-b .form-wrap{margin-top:auto;padding-top:24px}

/* ---------- barra booking: card chiara piena, sovrapposta al bordo inferiore dell'hero ---------- */
.form-wrap{position:relative;z-index:6}
.bar{
  background:var(--paper);color:var(--navy);
  border:1px solid #cddbe1;border-radius:18px;
  box-shadow:0 8px 16px -10px rgba(0,0,0,.45);
  padding:14px 16px;
}
.fields{display:grid;gap:12px;align-items:end;
  grid-template-columns:minmax(0,1.7fr) minmax(0,1.7fr) minmax(0,1.05fr) minmax(0,.85fr) minmax(0,1.05fr) minmax(0,.85fr) auto}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field label{font-size:.75rem;font-weight:600;color:var(--muted);letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.field-input{position:relative;display:block}
.field-icon{position:absolute;left:9px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--teal);fill:none;pointer-events:none}
.field-input select,.field-input input,.field-input textarea{
  font:inherit;font-size:.84rem;color:var(--ink);background:var(--paper);
  border:1.5px solid var(--line);border-radius:10px;padding:8px 10px 8px 30px;width:100%;min-width:0;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.field-input textarea{min-height:108px;padding:10px 12px;resize:vertical;line-height:1.5}
.field-input select:hover,.field-input input:hover,.field-input textarea:hover{border-color:#9fb9c2}
.field-input select:focus,.field-input input:focus,.field-input textarea:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px rgba(31,122,140,.16)}
.field-input input[type="date"],.field-input input[type="time"]{padding:8px 8px}
.field-input input::placeholder,.field-input textarea::placeholder{color:#5f7178;opacity:1}
.booking-cta{white-space:nowrap;padding:10px 18px;font-size:.9rem}

/* ---------- banda di fiducia (subito dopo la barra booking) ---------- */
.trust{background:var(--mist);border-bottom:1px solid var(--line);padding:54px 0 52px}
.trust-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 22px;margin-bottom:28px}
.trust h2{font-size:clamp(1.4rem,2.4vw,1.9rem);color:var(--navy)}
.trust-proof{display:inline-flex;align-items:center;gap:9px;font-size:.92rem;font-weight:600;color:var(--navy)}
.trust .stars svg{fill:var(--teal)}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border-top:1px solid var(--line);padding-top:26px}
.trust-item h3{display:flex;align-items:center;gap:10px;font-size:1rem;color:var(--navy)}
.trust-item svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--teal);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.trust-item p{margin-top:9px;font-size:.88rem;color:var(--muted)}

/* ---------- recensioni Google: banda carta, card blu di marca (24/9) ---------- */
.reviews{background:var(--paper);color:var(--ink);border-top:1px solid var(--line);padding:58px 0 52px}
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.review-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--navy);color:#fff;border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);padding:22px;
}
.review-google{position:absolute;top:18px;right:18px;width:20px;height:20px}
.review-person{display:flex;align-items:center;gap:12px;padding-right:36px}
.review-avatar{
  width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--teal-soft);color:var(--teal-dark);
  font-family:var(--font-display);font-weight:800;font-size:1.05rem;
}
.review-name{display:block;font-family:var(--font-display);font-weight:700;font-size:.95rem;color:#fff}
.review-when{display:block;margin-top:1px;font-size:.78rem;color:rgba(255,255,255,.72)}
.review-meta{display:flex;align-items:center;gap:7px;margin-top:14px}
.review-verified{width:15px;height:15px;flex:none;color:var(--cyan)}
.review-text{
  margin-top:12px;font-size:.92rem;line-height:1.55;color:rgba(255,255,255,.92);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}
.review-text[data-expanded="true"]{display:block;-webkit-line-clamp:none;overflow:visible}
.review-more{
  margin-top:10px;align-self:flex-start;background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--font-body);font-size:.82rem;font-weight:600;color:var(--cyan);
  text-decoration:underline;text-underline-offset:3px;
}
.review-more:hover{color:#fff}
.review-more:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}
.reviews-total{margin-top:26px;font-size:.85rem;color:var(--muted)}

/* ---------- flotta (scala ridotta: feature 3008 + quattro righe compatte) ---------- */
.fleet{padding:50px 0 54px}
.fleet-head{max-width:640px;margin-bottom:26px}
.fleet-head h2{font-size:clamp(1.55rem,3.2vw,2.05rem);line-height:1.06;font-weight:800;letter-spacing:-.035em}
.fleet-head h2 em{font-style:normal;color:var(--teal)}
.fleet-sub{margin-top:6px;color:var(--muted);font-size:.85rem}
.fleet-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:18px;align-items:stretch}
.fleet-feature{
  position:relative;background:var(--navy);color:#fff;border-radius:var(--radius);
  padding:16px 18px 18px;display:flex;flex-direction:column;overflow:hidden;
}
.fleet-feature::after{
  content:"";position:absolute;inset:auto -12% -32% 34%;height:70%;
  background:radial-gradient(closest-side, rgba(0,185,223,.20), transparent);pointer-events:none;
}
.fleet-tag{
  align-self:flex-start;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--navy);background:var(--cyan);border-radius:999px;padding:3px 10px;
}
.fleet-feature-media{position:relative;z-index:1;display:flex;justify-content:center;padding:8px 0 0}
.fleet-feature-media a{width:fit-content}
.fleet-feature-media img{
  width:min(100%,500px);aspect-ratio:1/1;object-fit:contain;
  display:block;margin-inline:auto;
  filter:drop-shadow(0 20px 26px rgba(0,0,0,.42));
}
.fleet-feature h3{font-size:1.05rem;font-weight:800;margin-top:4px}
.fleet-price{display:flex;align-items:baseline;gap:6px;margin-top:5px}
.fleet-price strong{font-family:var(--font-display);font-size:1.4rem;font-weight:800;line-height:1;color:var(--cyan);font-variant-numeric:tabular-nums}
.fleet-price span{font-size:.76rem;opacity:.72}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.chips li{
  font-size:.75rem;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20);border-radius:999px;padding:2px 8px;white-space:nowrap;
}
.chips--soft li{color:var(--teal-dark);background:var(--teal-soft);border-color:#c8e0e5}
.fleet-feature .btn{margin-top:14px;align-self:flex-start;position:relative;z-index:1;padding:9px 16px;font-size:.84rem}
.fleet-list{display:grid;grid-template-rows:repeat(4,1fr);gap:10px}
.fleet-row{
  display:grid;grid-template-columns:152px 1fr auto;gap:14px;align-items:center;
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:6px 14px 6px 6px;transition:border-color .16s ease,box-shadow .16s ease;
}
.fleet-row:hover{border-color:#b9ccd3;box-shadow:0 12px 26px -20px rgba(0,0,0,.35)}
.fleet-row-media{border-radius:9px;padding:4px;background:
  radial-gradient(130% 110% at 78% 14%, rgba(0,185,223,.20), transparent 62%),
  var(--navy)}
.fleet-row-media img{width:100%;aspect-ratio:1/1;object-fit:contain}
.fleet-row-media a,.fleet-feature-media a{display:block}
.fleet-row h3 a,.fleet-feature h3 a,.car-card h3 a{color:inherit;text-decoration:none}
.fleet-row h3 a:hover,.fleet-feature h3 a:hover,.car-card h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.fleet-more{display:inline-block;margin-top:10px;color:rgba(255,255,255,.9);font-size:.84rem;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.fleet-more:hover{color:#fff}
.fleet-row h3{font-size:.86rem;font-weight:700}
/* titolo in alto, pillole e prezzo sotto: il blocco non supera la foto */
.fleet-row-body{display:grid;gap:7px;align-content:center;min-width:0}
/* formato "prezzo in evidenza": titolo in alto, etichette sotto, pie' di riga con prezzo a sinistra e CTA a destra (25/9) */
.fleet-row--prezzo{grid-template-columns:auto minmax(0,1fr);align-items:center;padding:8px 18px 8px 8px}
.fleet-row--prezzo .fleet-row-media{width:164px;align-self:center}
.fleet-row--prezzo .fleet-row-body{gap:8px;padding:7px 0;grid-template-rows:auto auto 1fr;align-content:stretch}
.fleet-row--prezzo h3{font-size:1.05rem;line-height:1.22}
.fleet-row--prezzo .chips{margin:0}
.fleet-row--prezzo .fleet-price{margin:0;align-items:center}
.fleet-row--prezzo .fleet-price strong{color:var(--navy)}
/* prezzo e CTA chiudono sulla stessa linea: il prezzo cresce all'altezza del bottone e la cifra ci sta centrata */
.fleet-row-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;justify-content:space-between;gap:14px;align-self:end}
.fleet-row .link-wa{font-size:.74rem}
/* flotta.html: cinque bande a tutta larghezza, foto grande a sinistra e testo a destra (25/9) */
.flotta-band{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:48px 0;border-top:1px solid var(--line);min-height:clamp(480px,64svh,660px)}
.flotta-band:first-child{border-top:0;padding-top:0}
.flotta-band-media{
  border-radius:var(--radius);padding:20px;display:grid;place-items:center;aspect-ratio:1/1;
  width:100%;max-width:calc(100svh - 300px);margin-inline:auto;
  background:radial-gradient(130% 110% at 78% 12%, rgba(0,185,223,.22), transparent 62%),var(--navy);
}
.flotta-band-media img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 26px 34px rgba(0,0,0,.45))}
.flotta-band-media a{display:block}
.flotta-band-num{font-family:var(--font-display);font-weight:800;font-size:.82rem;letter-spacing:.14em;color:var(--teal);font-variant-numeric:tabular-nums}
.flotta-band-name{margin-top:10px;font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:800;letter-spacing:-.02em;line-height:1.12;color:var(--navy)}
.flotta-band-name a{color:inherit;text-decoration:none}
.flotta-band-name a:hover{text-decoration:underline;text-underline-offset:4px}
.flotta-band-tag{margin-top:12px;max-width:52ch;color:var(--muted);font-size:.96rem}
.flotta-band-price{display:flex;align-items:baseline;gap:8px;margin-top:18px}
/* prezzo a sinistra e Prenota a destra sulla stessa riga */
.flotta-band-row{display:flex;flex-wrap:nowrap;align-items:flex-end;justify-content:space-between;gap:18px;margin-top:18px}
.flotta-band-row .flotta-band-price{margin-top:0;flex-wrap:wrap;min-width:0}
.flotta-band-price strong{font-family:var(--font-display);font-size:1.7rem;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums}
.flotta-band-price span{font-size:.86rem;color:var(--muted)}
.flotta-band .chips{margin-top:16px}
.flotta-band-cta{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px}

/* ---------- come funziona ---------- */
.how{position:relative;color:#fff;padding:62px 0;background:var(--navy)}
.how--photo{background:
  linear-gradient(180deg, rgba(4,43,58,.88) 0%, rgba(4,43,58,.72) 100%),
  url("../assets/photos/milano-duomo.webp") center bottom/cover no-repeat,
  var(--navy)}
.how h2{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:800}
.how ol{margin-top:28px;counter-reset:step;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.how li{counter-increment:step;position:relative;padding-top:32px}
.how li::before{
  content:"0" counter(step);position:absolute;top:0;left:0;
  font-family:var(--font-display);font-weight:800;font-size:.8rem;color:var(--cyan);
  letter-spacing:.06em;font-variant-numeric:tabular-nums;
}
.how h3{font-size:1rem;font-weight:700}
.how p{margin-top:4px;font-size:.84rem;color:rgba(255,255,255,.78)}

/* ---------- assicurazioni: pacchetti ufficiali del sito (Base inclusa, Premium €30/g, Premium Plus+ €50/g) ---------- */
.ins{position:relative;overflow:hidden;padding:62px 0;background:linear-gradient(180deg,var(--mist) 0%,#fff 48%)}
.ins::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(58% 60% at 88% 2%, rgba(0,185,223,.13), transparent 70%),
    radial-gradient(52% 55% at 2% 98%, rgba(31,122,140,.11), transparent 72%),
    linear-gradient(115deg, rgba(4,43,58,.05), transparent 46%);
}
.ins .wrap{position:relative;z-index:1}
.ins-head{max-width:66ch;margin-bottom:30px}
.ins-head h2{font-size:clamp(1.5rem,2.7vw,2.15rem);color:var(--navy)}
.ins-lede{margin-top:12px;color:var(--muted);font-size:.98rem}
.ins-tag{
  display:inline-flex;align-items:center;gap:6px;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;background:var(--paper);color:var(--muted);border:1px solid var(--line);
}
.ins-tag-icon{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ins-text{margin-top:9px;font-size:.9rem;color:var(--ink)}
.ins-feat{margin-top:9px;display:grid;gap:6px}
.ins-feat li{position:relative;padding-left:16px;font-size:.86rem;color:var(--ink)}
.ins-feat li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--teal)}
.ins-warn{margin-top:22px;text-align:center;font-size:.88rem;color:var(--muted)}
.ins-warn strong{color:var(--navy)}

/* ---------- assicurazioni: menù a tendina, un pannello alla volta ---------- */
.ins-acc{display:grid;gap:12px}
.ins-item{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);transition:border-color .18s ease}
.ins-item[open]{border-color:var(--teal)}
.ins-item summary{display:grid;grid-template-columns:1fr auto 28px;align-items:center;gap:10px 16px;padding:17px 20px;cursor:pointer;list-style:none}
.ins-item summary::-webkit-details-marker{display:none}
.ins-item summary:focus-visible{outline:3px solid var(--teal);outline-offset:-3px}
.ins-item-head{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0}
.ins-item-name{font-family:var(--font-display);font-weight:700;font-size:1.06rem;color:var(--navy)}
.ins-item-cost{font-family:var(--font-display);font-weight:800;font-size:.98rem;color:var(--navy);white-space:nowrap}
.ins-item-plus{width:28px;height:28px;border-radius:50%;background:var(--paper);border:1.5px solid var(--teal);color:var(--teal-dark);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.05rem;line-height:1}
.ins-item-plus::before{content:"+"}
.ins-item[open] .ins-item-plus{background:var(--teal);border-color:var(--teal);color:#fff}
.ins-item[open] .ins-item-plus::before{content:"−"}
.ins-item-body{padding:0 20px 20px;border-top:1px solid var(--line)}
.ins-item-body .ins-text{margin-top:14px}
.ins-sub{margin-top:16px;font-size:.75rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.ins-acc .ins-tag--inc{background:rgba(31,122,140,.10);border-color:transparent;color:var(--teal-dark)}
@media (max-width:560px){
  .ins-item summary{grid-template-columns:1fr 28px;gap:8px 12px;padding:15px 16px}
  .ins-item-head{grid-column:1;grid-row:1}
  .ins-item-cost{grid-column:1;grid-row:2;font-size:.92rem}
  .ins-item-plus{grid-column:2;grid-row:1 / span 2;align-self:center}
  .ins-item-body{padding:0 16px 18px}
}

.ins-tag--inc{background:#fff;border-color:#fff;color:var(--teal-dark)}
.ins-foot{margin-top:26px;display:grid;grid-template-columns:1.5fr 1fr;gap:24px;align-items:start}
.ins-cond{border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;background:rgba(255,255,255,.72)}
.ins-cond p:first-child{font-family:var(--font-display);font-weight:700;font-size:.84rem;color:var(--navy);margin-bottom:8px}
.ins-cond li{position:relative;padding-left:18px;font-size:.84rem;color:var(--muted);margin-top:6px}
.ins-cond li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--cyan)}
.ins-cta{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.ins-cta .link{color:var(--teal-dark);font-weight:600;font-size:.84rem;text-decoration:underline;text-underline-offset:3px}

/* ---------- punti di ritiro (con mappa) ---------- */
.pickup{background:var(--mist);border-top:1px solid var(--line);padding:54px 0 58px}
.pickup-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.pickup h2{font-size:1.45rem;color:var(--navy)}
.pickup-lede{margin-top:8px;font-size:.9rem;color:var(--muted);max-width:60ch}
.pickup-list{margin-top:18px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px 22px}
.pickup-list li{font-size:.86rem;color:var(--muted)}
.pickup-list strong{display:block;color:var(--navy);font-family:var(--font-display);font-size:.88rem}
.pickup-map{width:100%;max-width:520px;margin-inline:auto}
.pickup-map img{border-radius:var(--radius);border:1px solid var(--line);width:100%;height:auto}

/* ---------- punti di ritiro: bottone indicazioni ---------- */
.dir-link{display:flex;width:fit-content;align-items:center;gap:.34em;margin-top:8px;padding:.30rem .68rem;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--teal-dark);font-size:.76rem;font-weight:600;line-height:1;text-decoration:none;transition:background .16s ease,border-color .16s ease,color .16s ease}
.dir-link svg{width:.9em;height:.9em;flex:none}
.dir-link:hover{border-color:var(--teal);background:var(--teal);color:#fff}
.dir-link:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
/* touch target: la pillola indicazioni su telefono alta almeno 44px, resta pillola */
@media (max-width:760px){.dir-link{min-height:44px}}
@media (prefers-reduced-motion:reduce){.dir-link{transition:none}}

/* ---------- car detailing ---------- */
.detailing{padding:58px 0}
.detailing-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.detailing-grid img{border-radius:var(--radius);width:100%;height:320px;object-fit:cover;min-width:0}
.detailing-grid h2{font-size:clamp(1.4rem,2.3vw,1.9rem);color:var(--navy)}
.detailing-grid p{margin-top:14px;color:var(--muted)}
.detailing-grid .btn{margin-top:22px}

/* ---------- footer (struttura del sito ufficiale, sul nostro petrolio) ---------- */
.site-footer{background:var(--navy);color:rgba(255,255,255,.72);font-size:.86rem;padding:44px 0 22px}
.footer-top{display:grid;grid-template-columns:1.15fr 1fr 1.1fr;gap:34px;align-items:start}
.footer-brand img{height:30px;width:auto}
.footer-brand p{margin-top:14px;max-width:40ch;font-size:.86rem;color:rgba(255,255,255,.66)}
.footer-title{font-family:var(--font-display);font-weight:700;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.52)}
.footer-nav{margin-top:14px;display:grid;gap:9px}
.footer-nav a{color:rgba(255,255,255,.86);text-decoration:none;font-size:.9rem}
.footer-nav a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.footer-info{margin-top:14px;display:grid;gap:9px;font-size:.88rem;color:rgba(255,255,255,.8)}
.footer-info a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.32)}
.footer-info a:hover{border-bottom-color:#fff}
.footer-bottom{margin-top:30px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;font-size:.78rem;color:rgba(255,255,255,.6)}
.footer-bottom a{color:rgba(255,255,255,.78);text-decoration:none}
.footer-bottom a:hover{text-decoration:underline;text-underline-offset:3px}
.footer-bottom .footer-demo{color:var(--cyan)}
.wa-fab{
  position:fixed;right:16px;bottom:16px;z-index:55;
  display:inline-flex;align-items:center;gap:8px;
  background:#25D366;color:#05341c;text-decoration:none;
  font-family:var(--font-display);font-weight:700;font-size:.82rem;
  padding:10px 15px;border-radius:999px;border:0;cursor:pointer;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.55);
}
.wa-fab .icon{width:16px;height:16px}
.wa-fab:hover{background:#1fbe5b}

/* bottone WhatsApp accettato in live mode (24/9): pillola stretta, etichetta su due righe,
   a destra della barra di prenotazione senza coprirla. 111x44 a 1440. */
.wa-fab--stack{
  right:12px;bottom:16px;
  padding:10px 11px;gap:7px;align-items:center;
  border-radius:14px;min-height:44px;
  box-shadow:0 10px 22px -12px rgba(0,0,0,.5);
}
.wa-fab--stack .icon{width:16px;height:16px}
.wa-fab--stack .wa-fab__label{
  display:flex;flex-direction:column;font-size:.64rem;line-height:1.2;
  text-align:left;white-space:nowrap;
}

/* ---------- motion: tutto nella sezione MOTION in fondo a questo foglio ---------- */

/* ---------- contatti: "hai un dubbio prima di prenotare?" come sul sito ufficiale (24/9) ---------- */
.contatti{background:var(--paper);border-top:1px solid var(--line);padding:58px 0 62px}
.contatti-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.contatti-title{font-size:clamp(1.5rem,2.7vw,2.15rem);color:var(--navy)}
.contatti-title em{font-style:normal;color:var(--teal)}
.contatti-lede{margin-top:14px;max-width:52ch;color:var(--muted);font-size:.98rem}
.contatti-list{margin-top:22px;display:grid;gap:11px}
.contatti-list li{display:flex;align-items:flex-start;gap:11px;font-size:.93rem;color:var(--navy)}
.contatti-list svg{width:17px;height:17px;flex:none;margin-top:2px;fill:none;stroke:var(--teal);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.contatti-list a{color:var(--teal-dark);text-decoration:none;border-bottom:1px solid rgba(31,122,140,.35)}
.contatti-list a:hover{border-bottom-color:var(--teal)}
.contatti-cta{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.contatti-tel{font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--navy);text-decoration:none;font-variant-numeric:tabular-nums}
.contatti-tel:hover{color:var(--teal-dark)}
.page-head .contatti-tel{color:#fff}
.page-head .contatti-tel:hover{color:var(--cyan)}
.contatti-form{
  background:var(--mist);border:1px solid var(--line);border-radius:var(--radius);padding:26px;
  display:flex;flex-direction:column;align-items:stretch;gap:14px;
}
.contatti-form .field{width:100%}
.contatti-form .field-input input,.contatti-form .field-input textarea{padding-left:12px}
.contatti-form .btn{align-self:flex-start;margin-top:4px}
.contatti-fine{font-size:.8rem;color:var(--muted)}
.contatti-nota{margin-top:2px;display:flex;gap:10px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;font-size:.84rem;color:var(--muted)}
.contatti-nota svg{width:16px;height:16px;flex:none;margin-top:2px;fill:none;stroke:#e2a800;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.contatti-nota b{color:var(--navy)}
.contatti a:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:999px}

/* ---------- intestazione delle pagine interne ---------- */
/* gli aloni vivono in .page-head::after (sezione MOTION, in fondo): si accendono una volta sola */
.page-head{position:relative;overflow:hidden;color:#fff;padding:46px 0 50px;background:var(--navy)}
.page-head > .wrap{position:relative;z-index:2}
.page-head .crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:.78rem;color:rgba(255,255,255,.62)}
.page-head .crumbs a{color:rgba(255,255,255,.82);text-decoration:none}
.page-head .crumbs a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.page-head h1{margin-top:14px;font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:800;letter-spacing:-.03em}
.page-head h1 em{font-style:normal;color:var(--cyan)}
.page-head .lede{margin-top:14px;max-width:64ch;color:rgba(255,255,255,.84);font-size:.98rem}
.page-head .ctas{margin-top:24px}
/* scheda auto: nella testata resta solo il percorso; il nome dell'auto è il titolo della colonna destra (25/9) */
.page-head--car{padding:18px 0 20px}
/* flotta.html: testata compatta, così la foto della prima banda sta tutta sopra la piega (25/9) */
.page-head--slim{padding:22px 0 12px}
.page-head--slim .crumbs{font-size:.74rem}
.page-head--slim h1{margin-top:4px;font-size:clamp(1.45rem,2.1vw,1.75rem)}
.page-head--slim h1 em{color:var(--cyan)}
.page-head--slim .lede{margin-top:6px;font-size:.9rem;max-width:100%}
.page-head--slim .ctas{margin-top:10px;align-items:center}
.page-head--slim .btn{padding:9px 16px;font-size:.86rem}
.blocks.blocks--flotta{padding-top:12px}

/* ---------- card auto (riga "altre auto" delle schede): auto ritagliata su fondo petrolio con gradiente ---------- */
.car-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:border-color .16s ease,box-shadow .16s ease}
.car-card:hover{border-color:#b9ccd3;box-shadow:0 12px 26px -20px rgba(0,0,0,.35)}
.car-tile{position:relative;display:flex;align-items:center;justify-content:center;padding:10px 12px;background:
  radial-gradient(130% 110% at 78% 12%, rgba(0,185,223,.21), transparent 62%),
  var(--navy)}
.car-tile img{width:100%;aspect-ratio:1/1;object-fit:contain;filter:drop-shadow(0 16px 22px rgba(0,0,0,.42))}
.car-body{padding:18px;display:flex;flex-direction:column;gap:9px;flex:1}
.car-body h3{font-size:1rem;font-weight:800;color:var(--navy)}
.car-specs{display:flex;flex-wrap:wrap;gap:5px}
.car-specs li{font-size:.75rem;color:var(--teal-dark);background:var(--teal-soft);border:1px solid #c8e0e5;border-radius:999px;padding:2px 8px;white-space:nowrap}
.car-price{display:flex;align-items:baseline;gap:6px}
.car-price strong{font-family:var(--font-display);font-size:1.35rem;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums}
.car-price span{font-size:.76rem;color:var(--muted)}
.car-actions{margin-top:auto;display:flex;flex-direction:column;align-items:stretch;gap:8px;padding-top:8px}
.car-actions .btn{padding:10px 16px;font-size:.86rem}
/* "altre auto" nella scheda: una riga sola che scorre in orizzontale (25/9) */
.cars-row{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 14px}
.cars-row>.car-card{flex:0 0 300px;scroll-snap-align:start}

/* ---------- scheda auto ---------- */
.pdp{display:grid;grid-template-columns:1fr 1.14fr;gap:40px;align-items:start;padding:2px 0 8px}
.pdp-media{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:
  radial-gradient(120% 100% at 74% 10%, rgba(0,185,223,.20), transparent 62%), var(--navy);
  padding:14px}
.pdp-media img{width:100%;aspect-ratio:1/1;object-fit:contain;filter:drop-shadow(0 22px 28px rgba(0,0,0,.45));max-height:calc(100svh - 320px)}
.pdp-title{margin:0;font-size:clamp(1.6rem,2.6vw,2.05rem);line-height:1.1;font-weight:800;letter-spacing:-.03em;color:var(--navy)}
.pdp-tagline{margin-top:8px;max-width:54ch;color:var(--muted);font-size:.95rem}
.pdp-price{display:flex;align-items:baseline;gap:8px;margin-top:14px}
.pdp-price strong{font-family:var(--font-display);font-size:1.35rem;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums}
.pdp-price span{font-size:.85rem;color:var(--muted)}
.pdp-lede{margin-top:24px;max-width:62ch;color:var(--muted);font-size:.94rem}
.spec-list{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:12px 26px}
.spec-list li{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:7px;font-size:.9rem;color:var(--navy)}
.spec-list span{color:var(--muted)}
.spec-list li{line-height:1.35}
.pdp-actions{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px}
.incl{margin-top:20px;display:grid;gap:10px;align-content:start}
.incl li{position:relative;padding-left:22px;font-size:.9rem;color:var(--muted);line-height:1.35}
.incl li::before{content:"";position:absolute;left:0;top:.42em;width:12px;height:7px;border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(-45deg)}

/* scheda auto: su schermi bassi la colonna destra stringe ancora, così le cinque spunte restano sopra la piega (25/9) */
@media (min-width:981px) and (max-height:780px){
  .spec-list li{padding-bottom:3px}
  .incl li{font-size:.85rem}
}

/* ---------- blocchi editoriali (chi siamo, car service) ---------- */
.blocks{padding:56px 0 18px}
.block{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;padding:26px 0}
.block--flip .block-media{order:-1}
.block--text{grid-template-columns:minmax(0,64ch)}
.block h2{font-size:clamp(1.4rem,2.5vw,2rem);color:var(--navy)}
.block p{margin-top:14px;color:var(--muted);font-size:.96rem}
.block-media img{border-radius:var(--radius);width:100%;height:320px;object-fit:cover}
.block .btn{margin-top:20px}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}
.svc{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.svc h3{display:flex;align-items:center;gap:10px;font-size:1.02rem;font-weight:800;color:var(--navy)}
.svc h3 svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--teal);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.svc p{margin-top:10px;font-size:.9rem;color:var(--muted)}
.cta-band{background:
  radial-gradient(760px 420px at 84% 8%, rgba(0,185,223,.16), transparent 62%),
  var(--navy);color:#fff;padding:46px 0}
.cta-band h2{font-size:clamp(1.4rem,2.5vw,2rem)}
.cta-band p{margin-top:12px;max-width:60ch;color:rgba(255,255,255,.82);font-size:.96rem}
.cta-band .ctas{margin-top:22px}

/* ---------- domande frequenti (testi dal sito ufficiale) ---------- */
.faq{background:var(--mist);border-top:1px solid var(--line);padding:58px 0 56px}

/* ---------- mappa: foto (home del sito ufficiale, pin Sede Centro + Sede Nord) ---------- */
.map-embed{position:relative;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--mist)}
.map-embed img{display:block;width:100%;height:auto}
.map-link{margin-top:8px;display:inline-block;font-size:.82rem;font-weight:600;color:var(--teal-dark);text-decoration:underline;text-underline-offset:3px}

/* ---------- responsive ---------- */
@media (max-width:1260px){
  .fields{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 14px}
  .booking-cta{grid-column:1 / -1;justify-self:start}
}
@media (max-width:980px){
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .fleet-grid{grid-template-columns:1fr}
  .how ol{grid-template-columns:repeat(2,1fr)}
  .ins-foot{grid-template-columns:1fr;gap:18px}
  .pickup-grid{grid-template-columns:1fr;gap:30px}
  .detailing-grid{grid-template-columns:1fr;gap:30px}
  .contatti-grid{grid-template-columns:1fr;gap:28px}
  .detailing-grid img{height:280px}
  .hero-c{padding-top:38px}
  .svc-grid{grid-template-columns:1fr 1fr}
  .footer-top{grid-template-columns:1fr 1fr;gap:26px}
  .block{grid-template-columns:1fr;gap:26px}
  .block--flip .block-media{order:0}
  .block-media img{height:260px}
  .pdp{grid-template-columns:1fr;gap:28px}
  .pdp-media img{max-height:none}
  .flotta-band{grid-template-columns:1fr;gap:24px;min-height:0;padding:34px 0}
  .flotta-band:first-child{padding-top:8px}
  .flotta-band-media{aspect-ratio:auto;min-height:248px;padding:16px;max-width:100%}
  .flotta-band-media img{height:auto;aspect-ratio:1/1;max-height:280px}
}
@media (max-width:860px){
  .reviews-grid{grid-template-columns:1fr;gap:16px}
}
@media (max-width:760px){
  .wrap{padding:0 18px}
  .header-inner{height:66px;gap:10px}
  /* su telefono i due comandi diventano gli stessi: due icone quadrate ai lati del logo */
  .nav-toggle,.header-cta{width:44px;height:44px;min-width:0;padding:0;justify-content:center}
  .nav-toggle-text,.header-cta .cta-text{display:none}
  .header-cta .icon{width:16px;height:16px}
  .brand img{height:36px}
  /* touch target: input e select della barra di prenotazione a minimo 44px di altezza (Apple HIG) */
  .field-input input,.field-input select,.field-input textarea{min-height:44px}
  .main-menu-inner{grid-template-columns:1fr;gap:0;padding:16px 0 22px}
  .menu-side{border-left:0;border-top:0;padding-left:0;padding-top:14px}
  .menu-nav a,.menu-cars a{height:auto;min-height:52px;padding:10px 0}
  .menu-car-thumb{width:88px;height:46px}
  .menu-car-thumb img{height:46px;max-width:88px}
  .menu-car-name{font-size:.88rem}
  .menu-nav a{font-size:1rem}
  .fields{grid-template-columns:1fr 1fr}
  .booking-cta{grid-column:1 / -1;width:100%}
  .hero{min-height:calc(100vh - 66px);min-height:calc(100svh - 66px)}
  .hero-b{padding-top:38px}
}
@media (max-width:560px){
  .fields{grid-template-columns:1fr}
  .how ol{grid-template-columns:1fr}
  .fleet-row{grid-template-columns:96px 1fr;row-gap:6px}
  .fleet-row--prezzo .fleet-row-media{width:88px}
  .fleet-row--prezzo .fleet-row-body{gap:6px;padding:0}
  .fleet-row--prezzo h3{font-size:.95rem}
  .fleet-row--prezzo .fleet-price{flex-wrap:wrap;row-gap:1px}
  .fleet-row--prezzo .fleet-price strong{font-size:1.05rem}
  .fleet-row--prezzo .fleet-price span{font-size:.72rem}
  .fleet-row--prezzo .fleet-row-foot{grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .fleet-row--prezzo .fleet-row-foot .btn{padding:9px 12px;font-size:.8rem;gap:6px}
  .pickup-list{grid-template-columns:1fr}
  .contatti-form{padding:22px}
  .svc-grid{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
  .spec-list{grid-template-columns:1fr}
  .incl{grid-template-columns:1fr}
  .flotta-band-media img{max-height:220px}
  .page-head{padding:32px 0 36px}
  .page-head--car{padding:22px 0 24px}
  .cars-row>.car-card{flex-basis:82%}
  .map-embed img{width:100%}
  .trust-grid{grid-template-columns:1fr;gap:22px}
  .wa-fab{right:12px;bottom:16px;padding:10px;border-radius:50%}
  .wa-fab .icon{width:20px;height:20px}
  .wa-fab span{font-size:0;position:absolute;width:1px;height:1px;overflow:hidden}
  .wa-fab--stack{padding:11px;border-radius:999px}
}
@media (max-width:420px){
  .wrap{padding:0 16px}
  .fields{grid-template-columns:1fr}
  .field{scroll-margin-bottom:120px}
  html{scroll-padding-bottom:130px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ---------- FAQ riorganizzata (accettata in live): titolo e WhatsApp a sinistra, elenco numerato a destra ---------- */
.faqm-grid{display:grid;grid-template-columns:minmax(230px,320px) 1fr;gap:46px;align-items:start}
.faqm-aside{position:sticky;top:90px}
.faqm-aside h2{font-size:clamp(1.6rem,2.6vw,2.1rem);color:var(--navy)}
.faqm-lede{margin-top:12px;font-size:.95rem;color:var(--muted);max-width:46ch}
.faqm-card{margin-top:24px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.faqm-card-title{font-family:var(--font-display);font-weight:700;font-size:.98rem;color:var(--navy)}
.faqm-card-text{margin-top:6px;font-size:.86rem;color:var(--muted)}
.faqm-cta{margin-top:14px;width:100%}
.faqm-phone{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:.85rem;font-weight:600;color:var(--teal-dark);text-decoration:none}
.faqm-phone:hover{color:var(--navy)}
.faqm-list{counter-reset:faqm}
.faqm-list details{border-top:1px solid var(--line)}
.faqm-list details:last-of-type{border-bottom:1px solid var(--line)}
.faqm-list summary{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:baseline;cursor:pointer;list-style:none;padding:16px 0;font-family:var(--font-display);font-weight:600;font-size:.98rem;line-height:1.35;color:var(--navy)}
.faqm-list summary::-webkit-details-marker{display:none}
.faqm-list summary::before{counter-increment:faqm;content:counter(faqm,decimal-leading-zero);font-size:.78rem;font-weight:700;color:var(--teal);font-variant-numeric:tabular-nums}
.faqm-list summary::after{content:"+";color:var(--teal);font-weight:700;line-height:1}
.faqm-list details[open] summary::after{content:"−"}
.faqm-list details[open] summary{color:var(--teal-dark)}
.faqm-list details[open] summary::before{color:var(--cyan)}
.faqm-a{padding:0 0 18px 34px;font-size:.9rem;color:var(--muted);max-width:64ch}
.faqm-a ul{margin-top:8px;display:grid;gap:5px}
.faqm-a li{position:relative;padding-left:15px}
.faqm-a li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--cyan)}
.faqm-list summary:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.faqm-list details::details-content{block-size:0;overflow:hidden;transition:block-size .32s cubic-bezier(.16,1,.3,1),content-visibility .32s;transition-behavior:allow-discrete}
.faqm-list details[open]::details-content{block-size:auto}
@media (max-width:860px){
  .faqm-grid{grid-template-columns:1fr;gap:26px}
  .faqm-aside{position:static}
}

/* ==========================================================================
   MOTION · una sola idea: la luce ciano si accende (round 5, 25/9/2026)

   Tesi: la hero del mondo Noleggio Auto è petrolio + aloni ciano, quindi il movimento
   che le appartiene è la luce che si accende, non un fade generico. Un solo
   momento autoriale per pagina (l'entrata della testata), le sezioni che entrano
   in vista una volta sola, la luce che risponde al puntatore e l'auto che resta
   la stessa quando passi dalla flotta alla scheda.

   Additivo: senza la classe .motion (motion.js non caricato) e con
   prefers-reduced-motion attivo la pagina è identica a prima di questa sezione.
   Vincoli rispettati: niente loop, niente animazione di width/height/top/left
   (l'unica altezza animata è l'accordion delle recensioni), stato e feedback
   sotto i 300 ms, entrata autoriale una volta sola per caricamento.
   ========================================================================== */

/* --- A · il momento autoriale: la testata si accende ---------------------- */
@keyframes hero-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes car-arrive{from{opacity:0;transform:translate3d(18px,10px,0)}to{opacity:1;transform:none}}
@keyframes light-bloom{from{opacity:0}to{opacity:1}}
@keyframes veil-lift{from{opacity:1}to{opacity:0}}

/* Gli aloni della hero B e delle intestazioni interne escono dal background e
   diventano un livello a sé: così si accendono una volta e restano identici
   all'aspetto di progetto quando l'animazione finisce. */
.hero-b::after,.page-head::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  animation:light-bloom .9s cubic-bezier(.16,1,.3,1) .06s both;
}
.hero-b::after{background:
  radial-gradient(900px 560px at 80% 16%, rgba(77,126,176,.34), transparent 62%),
  radial-gradient(700px 470px at 6% 88%, rgba(31,122,140,.30), transparent 68%),
  radial-gradient(520px 360px at 94% 94%, rgba(0,185,223,.14), transparent 72%)}
.page-head::after{background:
  radial-gradient(760px 420px at 86% 6%, rgba(0,185,223,.16), transparent 62%),
  radial-gradient(600px 380px at 4% 108%, rgba(31,122,140,.28), transparent 66%)}
/* hero C: sulla piazza la luce si alza, il velo sparisce e la foto del Duomo
   resta esattamente quella di prima */
.hero-c::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(4,43,58,.20) 0%, rgba(4,43,58,.40) 100%);
  animation:veil-lift 1s cubic-bezier(.16,1,.3,1) .06s both;
}

/* La sequenza della hero: titolo, copia, auto, barra di prenotazione. */
.hero .hero-title{animation:hero-in .5s cubic-bezier(.16,1,.3,1) both}
.hero .proof,.hero .ctas{animation:hero-in .5s cubic-bezier(.16,1,.3,1) .14s both}
.hero-b .car{animation:car-arrive .64s cubic-bezier(.16,1,.3,1) .2s both}
.hero .form-wrap{animation:hero-in .6s cubic-bezier(.16,1,.3,1) .32s both}

/* La stessa sequenza, in scala ridotta, sulle dieci intestazioni interne. */
.page-head .crumbs{animation:hero-in .42s cubic-bezier(.16,1,.3,1) both}
.page-head h1{animation:hero-in .5s cubic-bezier(.16,1,.3,1) .06s both}
.page-head .lede{animation:hero-in .5s cubic-bezier(.16,1,.3,1) .13s both}
.page-head .ctas{animation:hero-in .5s cubic-bezier(.16,1,.3,1) .2s both}

/* --- B · entrate in vista: testi che salgono, pannelli che emergono,
   liste che si aprono in fila (scarto 60 ms, tetto 240 ms) ------------------ */
.motion [data-m]{
  transition:opacity .46s cubic-bezier(.16,1,.3,1),transform .46s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--d,0ms);
}
.motion [data-m="rise"]{opacity:0;transform:translateY(10px)}
.motion [data-m="list"]{opacity:0;transform:translateY(12px)}
.motion [data-m="panel"]{opacity:0;transform:scale(.965);transition-duration:.62s}
.motion [data-m].is-in{opacity:1;transform:none}

/* --- C · la luce risponde al puntatore -------------------------------------
   L'alone ciano è l'unico materiale luminoso di questa direzione: al passaggio
   del mouse si accende sulla carrozzeria e l'auto si stacca di 3 px dal fondo.
   Solo su dispositivi con un puntatore vero. */
@property --glow{syntax:"<number>";inherits:true;initial-value:.2}
/* ogni riquadro tiene l'intensità di alone che aveva prima di questa sezione:
   il movimento cambia solo quando l'alone si accende, mai il disegno a riposo */
.fleet-row-media,.fleet-feature,.car-tile,.flotta-band-media,.pdp-media{transition:--glow .24s ease}
.fleet-row-media,.fleet-feature,.pdp-media{--glow:.2}
.car-tile{--glow:.21}
.flotta-band-media{--glow:.22}
.fleet-row-media{background:radial-gradient(130% 110% at 78% 14%, rgba(0,185,223,var(--glow)), transparent 62%),var(--navy)}
.fleet-feature::after{background:radial-gradient(closest-side, rgba(0,185,223,var(--glow)), transparent)}
.car-tile{background:radial-gradient(130% 110% at 78% 12%, rgba(0,185,223,var(--glow)), transparent 62%),var(--navy)}
.flotta-band-media{background:radial-gradient(130% 110% at 78% 12%, rgba(0,185,223,var(--glow)), transparent 62%),var(--navy)}
.pdp-media{background:radial-gradient(120% 100% at 74% 10%, rgba(0,185,223,var(--glow)), transparent 62%),var(--navy)}
.fleet-row-media img,.car-tile img,.flotta-band-media img,.pdp-media img,.fleet-feature-media img{
  transition:transform .24s cubic-bezier(.16,1,.3,1);
}
@media (hover:hover) and (pointer:fine){
  .fleet-row:hover .fleet-row-media,
  .fleet-feature:hover,
  .car-card:hover .car-tile,
  .flotta-band:hover .flotta-band-media,
  .pdp:hover .pdp-media{--glow:.36}
  .fleet-row:hover .fleet-row-media img,
  .fleet-feature:hover .fleet-feature-media img,
  .car-card:hover .car-tile img,
  .flotta-band:hover .flotta-band-media img{transform:translateY(-3px)}
}

/* --- D · stati: header, recensione, pulsanti ------------------------------- */
/* l'header guadagna profondità quando il contenuto gli passa sotto */
.site-header{transition:box-shadow .22s ease}
body.is-stuck .site-header{box-shadow:0 14px 28px -20px rgba(0,0,0,.8)}
/* la recensione si apre in continuità: l'altezza chiusa è esattamente le tre
   righe del clamp (3 × line-height), quindi l'aperta è "auto" e interpolabile
   grazie a interpolate-size in :root. Nessun pixel tagliato. */
.review-text:has(+ .review-more){
  height:calc(1.55em * 3);
  transition:height .3s cubic-bezier(.16,1,.3,1);
}
.review-text[data-expanded="true"]{height:auto}
.wa-fab,.review-more{transition:transform .18s cubic-bezier(.16,1,.3,1),background .16s ease,color .16s ease,border-color .16s ease}
.wa-fab{transition:transform .18s cubic-bezier(.16,1,.3,1),background .16s ease,color .16s ease,border-color .16s ease,box-shadow .24s ease}
.wa-fab:active,.review-more:active{transform:translateY(1px)}

/* --- E · continuità fra le pagine (View Transitions, progressive) ----------
   L'header petrolio resta al suo posto, il contenuto si scambia, e la foto
   dell'auto che hai scelto vola nella scheda: è la stessa auto, non un'altra. */
@view-transition{navigation:auto}
.site-header{view-transition-name:site-header}
::view-transition-old(site-header),::view-transition-new(site-header){animation:none}
@keyframes vt-in{from{opacity:0}to{opacity:1}}
@keyframes vt-out{to{opacity:0}}
::view-transition-old(root){animation:vt-out .18s ease both}
::view-transition-new(root){animation:vt-in .26s cubic-bezier(.16,1,.3,1) both}

.fleet-feature-media:has(img[src*="peugeot-208"]),
.fleet-row-media:has(img[src*="peugeot-208"]),
.car-tile:has(img[src*="peugeot-208"]),
.flotta-band-media:has(img[src*="peugeot-208"]),
.pdp-media:has(img[src*="peugeot-208"]){view-transition-name:car-208}
.fleet-feature-media:has(img[src*="peugeot-2008"]),
.fleet-row-media:has(img[src*="peugeot-2008"]),
.car-tile:has(img[src*="peugeot-2008"]),
.flotta-band-media:has(img[src*="peugeot-2008"]),
.pdp-media:has(img[src*="peugeot-2008"]){view-transition-name:car-2008}
.fleet-feature-media:has(img[src*="peugeot-3008"]),
.fleet-row-media:has(img[src*="peugeot-3008"]),
.car-tile:has(img[src*="peugeot-3008"]),
.flotta-band-media:has(img[src*="peugeot-3008"]),
.pdp-media:has(img[src*="peugeot-3008"]){view-transition-name:car-3008}
.fleet-feature-media:has(img[src*="seat-arona"]),
.fleet-row-media:has(img[src*="seat-arona"]),
.car-tile:has(img[src*="seat-arona"]),
.flotta-band-media:has(img[src*="seat-arona"]),
.pdp-media:has(img[src*="seat-arona"]){view-transition-name:car-arona}
.fleet-feature-media:has(img[src*="volkswagen-golf-8"]),
.fleet-row-media:has(img[src*="volkswagen-golf-8"]),
.car-tile:has(img[src*="volkswagen-golf-8"]),
.flotta-band-media:has(img[src*="volkswagen-golf-8"]),
.pdp-media:has(img[src*="volkswagen-golf-8"]){view-transition-name:car-golf}
::view-transition-group(car-208),::view-transition-group(car-2008),
::view-transition-group(car-3008),::view-transition-group(car-arona),
::view-transition-group(car-golf){
  animation-duration:.42s;animation-timing-function:cubic-bezier(.16,1,.3,1);
}

/* --- G · i bottoni si sollevano appena (25/9/2026) -------------------------
   Feedback di stato sul controllo: al passaggio del puntatore il bottone sale
   di 2 px e l'ombra si allunga sotto di lui, tinta navy: su questo mondo il
   nero puro non esiste, l'ombra è la stessa famiglia delle altre ombre del
   foglio. Due pixel si vedono, quattro sarebbero un salto. Premuto, il bottone
   scende di 1 px rispetto a riposo: la stessa distanza letta al contrario dice
   che il rilascio è avvenuto. Solo dove il puntatore è vero, così l'ultimo tap
   su touch non lascia il bottone sollevato. I link di lettura restano quieti:
   si muove chi agisce. */
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-2px)}
  /* premuto mentre il puntatore è sopra: dal punto sollevato il bottone scende
     fino a 1 px sotto il riposo, quindi il rilascio si legge come un ritorno */
  .btn:hover:active{transform:translateY(1px)}
  .btn-primary:hover{box-shadow:0 12px 22px -14px rgba(4,43,58,.55)}
  .btn-cyan:hover{box-shadow:0 12px 22px -14px rgba(4,43,58,.42)}
  .btn-ghost:hover{box-shadow:0 12px 24px -16px rgba(0,0,0,.62)}
  .btn-outline:hover{box-shadow:0 12px 22px -16px rgba(4,43,58,.34)}
  .wa-fab:hover{transform:translateY(-2px);box-shadow:0 18px 30px -14px rgba(0,0,0,.6)}
}

/* --- F · meno movimento, non zero: chi lo chiede resta senza spostamenti,
   ma con il feedback di colore e di stato intatto -------------------------- */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .hero-b::after,.page-head::after{animation:none!important;opacity:1!important}
  .hero-c::after{animation:none!important;opacity:0!important}
  .motion [data-m]{opacity:1!important;transform:none!important}
  .wa-fab:active,.review-more:active{transform:none}
  .btn:hover,.btn:active,.wa-fab:hover,.wa-fab:active{transform:none}
}