/* CVF Autotrasporti. Token, tipografia, hero, sezioni, motion. Nessun framework. */

:root {
  --canvas: #1C2126;
  --canvas-deep: #15191D;
  --panel: #252B31;
  --accent: #E39A2E;
  --accent-hover: #F0AB45;
  --accent-muted: #6E4E1F;
  --text-secondary: #C5CFD6;
  --text-primary: #EDEFF0;
  --line: #8C969C;
  --line-soft: rgba(140, 150, 156, 0.28);
  --scrim: rgba(21, 25, 29, 0.40);
  --scrim-strong: rgba(21, 25, 29, 0.60);
  --fleet-red: #B4262C;
  --fleet-red-deep: #8E1D22;
  --fleet-white: #E9ECEE;

  --display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --body: "Source Sans 3", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --tshadow: 0 1px 2px rgba(5, 5, 10, .95), 0 3px 12px rgba(5, 5, 10, .78), 0 10px 44px rgba(5, 5, 10, .8);

  --header-h: 64px;
  --gutter: clamp(16px, 5vw, 72px);
  --maxw: 1240px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  overflow-x: hidden;
  overflow-x: clip;
  scroll-behavior: smooth;
  /* un solo offset per le ancore (header 64px piu 8): niente scroll-margin-top sugli id, altrimenti i due si sommano */
  scroll-padding-top: 72px;
  -webkit-text-size-adjust: 100%;
  background: var(--canvas);
}
body {
  margin: 0;
  overflow-x: hidden;
  overflow-x: clip;
  background: var(--canvas);
  color: var(--text-secondary);
  font: 400 18px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
  animation: page-in .6s var(--ease-out) both;
}
@keyframes page-in { from { opacity: 0 } to { opacity: 1 } }
/* l'attributo hidden vince su qualsiasi display d'autore (il modulo con display:block sparirebbe solo a parole) */
[hidden] { display: none !important; }
img, svg, video { max-width: 100%; }
a { color: var(--text-primary); }
h1, h2, h3, p, figure, ol, ul { margin: 0; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--accent); color: var(--canvas); padding: 10px 14px; border-radius: 4px;
  font-weight: 600; text-decoration: none; transition: top .2s;
}
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
main:focus { outline: none; }

/* ---------- tipografia ---------- */
.h1 {
  font: 700 clamp(48px, 7.2vw, 108px)/.92 var(--display);
  letter-spacing: -.005em; color: var(--text-primary);
}
.h2 {
  font: 600 clamp(36px, 5vw, 64px)/.98 var(--display);
  color: var(--text-primary); max-width: 18ch;
}
.h3 { font: 600 28px/1.1 var(--display); color: var(--text-primary); }
.lead { font: 600 21px/1.4 var(--body); color: var(--text-primary); max-width: 52ch; }
.body { font: 400 18px/1.55 var(--body); color: var(--text-secondary); max-width: 62ch; }
.mono { font-family: var(--mono); font-weight: 400; font-size: 14px; }
.label { font: 500 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--line); }
.small { font-size: 13px; }
.kicker { font: 500 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); }
.section-head { display: grid; gap: 16px; margin-bottom: clamp(32px, 4vw, 56px); }
.section-head .lead { margin-top: 4px; }
.section-head .quick-line { color: var(--text-primary); }

/* ---------- bottoni e chip ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px; border-radius: 4px; border: 0;
  font: 600 16px/1 var(--body); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.btn-primary { background: var(--accent); color: var(--canvas); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: transparent; border: 1px solid var(--line); color: var(--text-primary); }
.btn-secondary:hover { border-color: var(--text-primary); }
/* icone di contatto (cornetta, fumetto): tratto 1.5, colore del testo */
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* vie rapide sull'hero: bordo chiaro, fondo trasparente, stesso raggio e altezza del primario */
.btn-quick { border-color: rgba(237, 239, 240, .55); }
.btn-quick:hover { border-color: var(--text-primary); background: rgba(237, 239, 240, .08); }
/* link telefono e WhatsApp dentro il testo */
.contact-link { color: var(--text-primary); white-space: nowrap; text-underline-offset: 3px; transition: color .2s var(--ease-out); }
.contact-link:hover { color: var(--accent-hover); }
.btn-small { min-height: 36px; padding: 8px 14px; font-size: 14px; border: 1px solid var(--line); color: var(--text-primary); background: transparent; }
.btn-small:hover { border-color: var(--text-primary); }
.btn-header { min-height: 40px; padding: 10px 16px; font-size: 15px; }
.chip {
  display: inline-block; padding: 6px 10px; border-radius: 10px;
  background: rgba(8, 8, 15, .55); border: 1px solid rgba(96, 96, 126, .3);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  text-shadow: 0 1px 3px rgba(5, 5, 10, .85); color: var(--text-primary);
}
.chip .dim { color: var(--text-secondary); opacity: .8; }
/* Sopra il video niente backdrop-filter: ogni chip col blur e una superficie che rifiltra i pixel del video a ogni
   nuovo frame (round 2, sezione C, misurato). Fondo pieno un po' piu scuro al posto del blur; il blur resta ai chip fuori dall'hero. */
.hero-stage .chip { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(8, 8, 15, .72); }

/* Round 4: niente nebbia di sfondo, niente particelle. Il fondo e il canvas pieno. */
.site-header, main, .site-footer { position: relative; z-index: 1; }

/* ---------- header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; height: var(--header-h); z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 0 var(--gutter);
  background-clip: padding-box; background-repeat: no-repeat;
  transition: background-color .4s var(--ease-out), border-color .4s var(--ease-out);
  border-bottom: 1px solid transparent;
}
/* Sopra il girato diurno: il velo scuro dell'header sta in un ::before alto il doppio dell'header (128px), cosi il testo del menu
   e il numero di telefono (y 24-38) stanno ancora nella parte densa del gradiente; sparisce quando l'header diventa pieno. */
.site-header::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 128px; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(21, 25, 29, .80) 0, rgba(21, 25, 29, .58) 64px, rgba(21, 25, 29, 0) 128px);
}
.site-header.is-solid::before { display: none; }
.site-header:not(.is-solid) :is(.site-nav a, .header-phone) { text-shadow: 0 1px 2px rgba(5, 5, 10, .8), 0 2px 10px rgba(5, 5, 10, .6); }
.site-header.is-solid {
  background: rgba(28, 33, 38, .92);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom-color: var(--line-soft);
}
.brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--text-primary); flex: none; }
.brand-logo { display: block; height: 40px; width: auto; }
@media (min-width: 1200px) { .brand-logo { height: 44px; } }
.site-nav { display: flex; gap: 28px; }
.site-nav a { font: 600 15px/1 var(--body); color: var(--text-primary); text-decoration: none; opacity: .9; transition: opacity .2s; }
.site-nav a:hover { opacity: 1; color: var(--accent-hover); }
.header-actions { display: flex; align-items: center; gap: 20px; flex: none; }
/* il numero di telefono in evidenza (richiesta del cliente): stesso bianco del menu, non il grigio secondario */
.header-phone {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  color: var(--text-primary); font: 600 15px/1 var(--body); text-decoration: none; white-space: nowrap;
  transition: color .2s var(--ease-out);
}
.header-phone:hover { color: var(--accent-hover); }
.header-phone .ico { width: 20px; height: 20px; }

/* ---------- hero: stage sticky con scrub ---------- */
.hero { position: relative; height: 640vh; }
.hero-stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  background: var(--canvas-deep);
}
.hero-poster {
  position: absolute; inset: 0; background: var(--canvas-deep) center / cover no-repeat;
}
.no-js .hero-poster { background-image: url("hero-poster.jpg"); }
#hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .6s var(--ease-out); transform: translateZ(0); will-change: transform;
}
.hero-stage.video-ready #hero-video { opacity: 1; }
.hero-stage.video-failed #hero-video { display: none; }
/* Scrim di base (round 4): vignetta leggera ai bordi, invariata. Round 6 (il cliente: "quell'ombra nera dietro alla scritta"):
   niente piu macchia scura per banda. Durante la discesa la leggibilita la fa una sfumatura FISSA da sinistra, come una luce
   di ripresa, in un livello separato (::before) che hero.js spegne con --grad nel tratto senza testo prima della banda 6
   (1 fino a p 0.70, 0 da p 0.82): sul frame finale le auto del piano alto a sinistra (auto nera, Porsche, Countach) restano a alfa 0. */
.hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 120% 90% at 50% 45%, rgba(10, 10, 18, 0) 45%, rgba(10, 10, 18, .42) 100%);
}
/* Sfumatura fissa: da sinistra, muore al 52% (il muso della Ferrari del frame finale sta a x 52%, la cabina con la scritta a 89-96%),
   piu una vignetta leggera in alto a sinistra dove stanno le frasi delle bande 1, 2 e 3 (y 16-45%). Opacita = --grad, scritta da
   hero.js sullo stage con la stessa scrittura delta-gated delle bande; will-change la tiene sul compositor durante la dissolvenza. */
.hero-scrim::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: var(--grad, 1); will-change: opacity;
  background:
    linear-gradient(to right, rgb(5 5 10 / .62) 0%, rgb(5 5 10 / .52) 16%, rgb(5 5 10 / .36) 30%, rgb(5 5 10 / .16) 42%, rgb(5 5 10 / 0) 52%),
    radial-gradient(ellipse 40% 42% at 18% 26%, rgb(5 5 10 / .30) 0%, rgb(5 5 10 / .18) 55%, rgb(5 5 10 / 0) 100%);
}
.hero-bands { position: absolute; inset: 0; }
/* Round 6: il blocco della banda aderisce all'inchiostro, largo quanto la riga piu lunga e non quanto la corsia (468px invece di
   720 a 1440). La seconda frase (.nb) e una riga propria: dai 1024px in su e gia cosi a ogni larghezza (la frase intera non entra
   mai nella corsia), quindi nessuna riga cambia. Ombra del testo piu decisa: bordo stretto e alone medio, al posto di --tshadow. */
.band {
  position: absolute; left: var(--lane-x, 7%); top: var(--lane-y, 16%); width: fit-content;
  max-width: min(var(--lane-w, 50%), 760px); opacity: 0; color: var(--text-primary);
  text-shadow: 0 1px 2px rgb(5 5 10 / .95), 0 2px 6px rgb(5 5 10 / .65), 0 0 28px rgb(5 5 10 / .5);
  --halo: .30;
  will-change: opacity;
}
.band .h1 .nb, .band .caption .nb, .band .closing .nb, .band .support .nb { display: block; }
.band:not(.is-active) { visibility: hidden; }
.band-1 { opacity: 1; }
.no-js .band-1 { visibility: visible; --k: 1; }
/* Alone per banda (round 6): ellisse piccola centrata sulla frase, che muore DENTRO il box (nessuno spigolo): picco pieno fino al
   64% del raggio, dissolvenza a S fino al 95%. Il picco e --halo, inline nell'HTML: .30 sulle bande 2, 3 e 4 (alone minimo, sopra
   la sfumatura fissa), .68 sulla banda 6 (sul frame finale la sfumatura fissa e spenta e l'alone lavora da solo). Bande 2-4: box
   centrato sulla frase, il chip resta fuori dal picco; banda 6: box centrato sulla riga di chiusura, finisce sopra il chip.
   A 1440 la zona con alfa > .10 sporge dall'inchiostro di 100-120px a destra e di 75-85px sopra e sotto (tools/verify.mjs
   controlla i limiti 130 e 90 e i bordi del box a zero). Audit sull'inchiostro, tre frame per banda, in index.html. */
.band::before {
  content: ""; position: absolute; inset: -63% -33% -29% -33%; pointer-events: none; z-index: -1;
  opacity: calc(.25 + .75 * var(--k, 1));
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
    rgb(5 5 10 / var(--halo)) 0%,
    rgb(5 5 10 / var(--halo)) 64%,
    rgb(5 5 10 / calc(var(--halo) * .94)) 70%,
    rgb(5 5 10 / calc(var(--halo) * .78)) 76%,
    rgb(5 5 10 / calc(var(--halo) * .52)) 82%,
    rgb(5 5 10 / calc(var(--halo) * .28)) 87%,
    rgb(5 5 10 / calc(var(--halo) * .11)) 91%,
    rgb(5 5 10 / 0) 95%);
}
/* banda 6: il box sporge di piu solo a sinistra (-40%), verso il bordo dello schermo: l'angolo in basso a sinistra della seconda riga
   sta sul cielo chiaro del frame finale del round 6 e in rampa (k .8) leggeva 3.47; a destra e in basso il box non cambia. */
.band-6::before { inset: -37% -31% 17% -40%; }
/* Banda 1: il blocco e grande (652x475 a 1440: etichetta, H1, riga di supporto, bottoni, riga mono) e un'ellisse stretta non ne
   copre gli angoli senza tornare larga 1400px. Rettangolo morbido: box interno pieno (inchiostro meno 100px per lato) piu ombra
   gaussiana con bordo a inchiostro + 45px e sfumatura di 60px (alfa sotto .10 a circa 77px dall'inchiostro), al picco minimo .35. */
.band-1::before {
  inset: 100px;
  background: rgb(5 5 10 / var(--halo));
  box-shadow: 0 0 60px 145px rgb(5 5 10 / var(--halo));
}
.band .btn { text-shadow: none; }
.band .kicker { margin-bottom: 18px; color: var(--text-primary); }
.band .support { font: 600 clamp(17px, 1.5vw, 21px)/1.4 var(--body); margin-top: 22px; max-width: 46ch; color: var(--text-primary); }
.band .cta-row { margin-top: 26px; }
.band .counter { margin-top: 18px; }
.band .caption { font: 600 clamp(28px, 3.2vw, 46px)/1.04 var(--display); color: var(--text-primary); }
.band .closing { font: 700 clamp(32px, 3.8vw, 58px)/1 var(--display); color: var(--text-primary); }
/* Un gruppo di senso che non si spezza (hero, titoli di sezione, lead): niente parola sola sull'ultima riga */
.nb { white-space: nowrap; }
.band .nb { white-space: nowrap; }
/* Bande 2, 3 e 4 (round 3): la seconda frase sta in un .nb, cosi la riga si spezza tra le due frasi.
   Sotto i 1024px la corsia e stretta e il gruppo torna libero di andare a capo. */
@media (max-width: 1023px) { .band .caption .nb { white-space: normal; } }

/* Entrate delle bande (round 4): solo dissolvenze semplici, opacita e 8px, scrubbate su --k.
   Niente parole che si assemblano, niente sfocature, niente scale. */
.band > * { opacity: var(--kf, 0); transform: translateY(calc((1 - var(--kf, 0)) * 8px)); }

/* banda 1: si assembla al caricamento (una dissolvenza dopo l'altra), poi lo scroll comanda */
.band-1 .kicker { --kf: clamp(0, var(--k, 0) * 2.2, 1); }
.band-1 .h1 { --kf: clamp(0, (var(--k, 0) - .15) * 2.2, 1); }
.band-1 .support { --kf: clamp(0, (var(--k, 0) - .45) * 3, 1); }
.band-1 .cta-row { --kf: clamp(0, (var(--k, 0) - .62) * 3, 1); }
/* vie rapide della banda 1: arrivano dopo il primario, stessa corsia */
.band .quick-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.band .quick-note { margin-top: 14px; font-size: 13px; color: var(--text-primary); }
.band-1 .quick-row, .band-1 .quick-note { --kf: clamp(0, (var(--k, 0) - .72) * 3.6, 1); }
@media (max-width: 480px) {
  .band .quick-row { flex-direction: column; }
  .band .quick-row .btn { width: 100%; }
}

/* bande 2, 3 e 4: la frase si dissolve, il contatore mono un attimo dopo */
.band-2 .caption, .band-3 .caption, .band-4 .caption { --kf: var(--k, 0); }
.band-2 .counter, .band-3 .counter, .band-4 .counter { --kf: clamp(0, (var(--k, 0) - .5) * 2, 1); }

/* banda 6: si posa sul frame finale fermo, bottone dopo la riga. Il blocco sta nel cielo e sulla parete del capannone in alto
   a sinistra, sopra le auto del piano alto: la riga va a capo dopo "scritto." e il chip mono si piega su due righe. */
.band-6 .closing { --kf: var(--k, 0); }
.band-6 .cta-row { --kf: clamp(0, (var(--k, 0) - .3) / .7, 1); margin-top: 22px; }
.band-6 .counter { --kf: clamp(0, (var(--k, 0) - .55) / .45, 1); margin-top: 14px; }
.band-6 .counter .chip { font-size: 12px; line-height: 1.4; max-width: 144px; white-space: normal; padding: 6px 9px; }
/* finestra bassa: il frame e ritagliato sopra e sotto, il blocco si stringe per restare sopra le auto del piano alto */
@media (max-height: 640px) {
  .band-6 { top: 11%; }
  .band-6 .closing { font-size: 32px; }
  .band-6 .cta-row { margin-top: 12px; }
  .band-6 .cta-row .btn { min-height: 40px; padding: 10px 16px; font-size: 15px; }
  .band-6 .counter { margin-top: 8px; }
}

/* anello di caricamento, poi cue di scroll onesto */
.hero-cue {
  position: absolute; right: 24px; bottom: 24px; display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 12px; color: var(--text-primary); font-size: 12px;
  transition: opacity .3s var(--ease-out), visibility 0s linear 0s;
}
/* da nascosto sparisce davvero (visibility), cosi non resta un layer trasparente sopra il video: la visibility cambia a dissolvenza finita */
.hero-cue.is-hidden { opacity: 0; visibility: hidden; transition: opacity .3s var(--ease-out), visibility 0s linear .3s; }
.hero-cue .ring { width: 28px; height: 28px; transform: rotate(-90deg); }
.hero-cue .ring circle { transition: stroke-dashoffset .15s linear; }
/* cue di scroll statico (round 4: nessuna animazione che pulsa) */
.hero-cue .chev { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- hero statico ---------- */
/* overflow hidden: lo scrim della copy (::before) sporge del 10% a destra e senza questo allarga il body sui telefoni */
.hero-static { display: none; position: relative; min-height: 100svh; overflow: hidden; background: var(--canvas-deep) url("hero-poster-mobile.jpg") center / cover no-repeat; }
/* Round 6, telefono: niente macchia dietro ai testi (il cliente la trovava "un'ombra nera bloccata"). Come sul computer,
   una sola sfumatura naturale: scura in alto, dove stanno i testi sul cielo e sui campi, che si spegne dove iniziano
   la flotta e il capannone (dal 70% in giu la foto e pulita), piu un filo di vignetta in fondo. Ombra del testo decisa. */
.hero-static::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(5, 5, 10, .74) 0%, rgba(5, 5, 10, .72) 48%, rgba(5, 5, 10, .64) 64%, rgba(5, 5, 10, .46) 76%, rgba(5, 5, 10, .20) 86%, rgba(5, 5, 10, 0) 94%, rgba(5, 5, 10, .30) 100%);
}
.hero-static-copy {
  position: relative; z-index: 1; padding: max(12svh, 80px) 6% 10svh 8%; max-width: 760px;
  text-shadow: 0 1px 2px rgb(5 5 10 / .95), 0 2px 6px rgb(5 5 10 / .65), 0 0 28px rgb(5 5 10 / .5); color: var(--text-primary);
}
.hero-static-copy::before { content: none; }
/* ritmo verticale stretto: il blocco chiude entro il 60% dell'altezza a 812 e il 72% a 667, la foto resta sotto */
.hero-static-copy .kicker { margin-bottom: 12px; color: var(--text-primary); }
.hero-static-copy .h1 { font-size: clamp(48px, 11vw, 88px); }
.hero-static-copy .support { font: 600 17px/1.45 var(--body); margin-top: 12px; max-width: 42ch; }
/* sottotitolo dell'hero statico (round 3): seconda riga, più leggera della riga di supporto */
.hero-static-copy .support-sub { font-weight: 400; font-size: 16px; margin-top: 10px; }
/* sotto i 360px la seconda frase della riga di supporto non sta su una riga sola: torna libera di andare a capo */
@media (max-width: 359px) { .hero-static-copy .support .nb { white-space: normal; } }
.hero-static-copy .cta-row { margin-top: 22px; }
/* primario e vie rapide in colonna, larghi uguali (la griglia inline prende la larghezza del più largo) */
.hero-static-copy .cta-stack { display: inline-grid; justify-items: stretch; gap: 8px; margin-top: 16px; max-width: 100%; }
.hero-static-copy .cta-stack .btn { width: 100%; white-space: normal; text-align: center; }
/* la riga mono sta in basso, dove la sfumatura e gia spenta e la foto e chiara: ha il suo chip scuro, come il contatore delle bande */
.hero-static-copy .small { display: inline-block; margin-top: 14px; padding: 6px 10px; border-radius: 4px; background: rgb(5 5 10 / .92); color: var(--text-primary); }
.hero-static-copy .btn { text-shadow: none; }

/* I cinque gate dell'hero statico: identici in hero.js */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px), (prefers-reduced-motion: reduce) {
  .hero { height: auto; }
  .hero-stage { display: none; }
  .hero-static { display: block; }
}
/* Ogni hero statico in landscape (telefono di traverso, reduced motion, paracadute) prende il frame 0 del video (16:9):
   il poster verticale 9:16 ritagliato in cover su un viewport largo mostrerebbe solo una striscia di cemento */
@media (orientation: landscape) {
  .hero-static { background-image: url("hero-poster.jpg"); }
}
@media (prefers-reduced-motion: reduce) and (min-width: 721px) and (orientation: landscape) {
  .hero-static { min-height: 92vh; }
  .hero-static-copy { max-width: 920px; padding: 16vh 6% 10vh 8%; }
}
/* Paracadute del gate 5 (hero.js): se la mediana dei primi 24 seek supera i 120 ms, la classe is-static sul .hero
   fa esattamente quello che fanno i cinque gate, col poster desktop sulle finestre larghe */
.hero.is-static { height: auto; }
.hero.is-static .hero-stage { display: none; }
.hero.is-static .hero-static { display: block; }
@media (min-width: 721px) and (orientation: landscape) {
  .hero.is-static .hero-static { min-height: 92vh; }
  .hero.is-static .hero-static-copy { max-width: 920px; padding: 16vh 6% 10vh 8%; }
}
@media (max-height: 560px) {
  .hero-cue { display: none; }
  .hero-static-copy { padding-top: 88px; }
  .hero-static-copy .h1 { font-size: clamp(40px, 8vw, 64px); }
}

/* ---------- sezioni ---------- */
.section { position: relative; padding: clamp(72px, 10vw, 140px) 0; }
.wrap { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
/* divisori statici (round 4): il segno ambra e sempre acceso, niente respiro */
.divider { position: relative; height: 1px; background: var(--line-soft); margin: 0 var(--gutter); }
.divider .amber { position: absolute; left: 0; top: -1px; width: 24px; height: 3px; background: var(--accent); }

/* pittogrammi dei servizi: gia disegnati */
.pic { width: 48px; height: 48px; fill: none; stroke: var(--line); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* fiducia: subito sotto l'hero. Tre foto reali orizzontali, una sotto l'altra, larghe quanto la colonna (metà della griglia a 1440,
   sopra il 45% chiesto dal round 3), didascalia mono sotto ognuna; niente sticky, niente zoom al passaggio. Sotto i 900px le foto
   passano sopra l'elenco, a tutta larghezza, una per riga. */
/* Aree: le foto occupano la colonna di sinistra per intero; a destra prima la testa (etichetta, titolo, lead) e sotto l'elenco.
   Sotto i 900px le aree vanno in colonna: testa, foto, elenco. */
.trust-grid {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "media head" "media list";
  column-gap: clamp(32px, 5vw, 72px); row-gap: 0; align-items: start;
}
.trust-head { grid-area: head; display: grid; gap: 16px; margin-bottom: 28px; }
.trust-media { grid-area: media; display: grid; gap: 20px; align-content: start; }
.trust-list { grid-area: list; }
.photo-fig { margin: 0; }
.photo { margin: 0; border-radius: 6px; overflow: hidden; border: 1px solid var(--line-soft); background: var(--panel); }
.photo img { display: block; width: 100%; height: auto; }
.photo-cap { display: block; margin-top: 10px; }
.trust-lead { font-weight: 600; color: var(--text-primary); }
.ledger { list-style: none; padding: 0; margin: 36px 0 0; }
.trust-list .ledger { margin-top: 0; }
.ledger-row { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 26px 0; border-top: 1px solid var(--line-soft); }
.ledger-row .num { color: var(--line); padding-top: 7px; }
.ledger-row .h3 { font-size: 26px; }
.ledger-row .body { margin-top: 8px; }

/* chi siamo (round 4, 4bis e 7): scheletro diverso dai vicini (fiducia: foto a sinistra ed elenco a destra; servizi: griglia di card).
   Titolo e lead centrati, due card sotto (Vincenzo, Flavio), stessa larghezza e altezza naturale (1502 e 1462 su 1200: la differenza
   si assorbe allineando le didascalie in basso, mai ritagliando). Larghezza massima 880 come il modulo, centrata, cosi le due card
   verticali non diventano enormi. Nessun effetto al passaggio. Sotto i 720px una per riga. */
.team-head { text-align: center; justify-items: center; }
.team-head .h2 { max-width: none; }
.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; align-items: end; max-width: 880px; margin: 0 auto; }
/* le card dei fratelli senza il filo chiaro intorno (il cliente lo vedeva come un bordino bianco) */
.team-grid .photo { border: none; background: transparent; }

/* servizi: cinque card, 3 + 2 con le due dell'ultima riga centrate (griglia a sei colonne, ogni card ne prende due) */
.cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.card { grid-column: span 2; background: var(--panel); border: 1px solid var(--line-soft); border-radius: 6px; padding: 28px 24px 30px; transition: border-color .3s var(--ease-out); }
.card:nth-child(4) { grid-column: 2 / span 2; }
.card:nth-child(5) { grid-column: 4 / span 2; }
.card:hover { border-color: var(--line); }
.card .pic { margin-bottom: 20px; }
.card .h3 { font-size: 28px; }
.card .body { margin-top: 10px; font-size: 17px; }
.cta-line { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line-soft); }
.cta-line .body { color: var(--text-primary); }

/* come funziona: linea delle tappe statica, tutta piena, cinque punti accesi (round 4) */
.stages { position: relative; margin: 8px 0 36px; height: 56px; }
.stages-line { position: absolute; left: 0; top: 5px; width: 100%; height: 2px; display: block; overflow: visible; }
.stages-fill { stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.stages-dots { list-style: none; margin: 0; padding: 0; position: relative; height: 56px; }
.stage { position: absolute; top: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; transform: translateX(-50%); }
.stage:nth-child(1) { left: 0; transform: none; align-items: flex-start; }
.stage:nth-child(2) { left: 25%; }
.stage:nth-child(3) { left: 50%; }
.stage:nth-child(4) { left: 75%; }
.stage:nth-child(5) { left: 100%; transform: translateX(-100%); align-items: flex-end; }
.stage .mono { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--line); white-space: nowrap; }
.stage .dot { position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
.stage .dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; box-shadow: 0 0 12px 2px rgba(227, 154, 46, .45); }

.bolla { position: relative; background: var(--panel); border-radius: 4px; padding: 26px 32px 30px; }
.bolla-border { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.bolla-border rect { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 6; width: calc(100% - 2px); height: calc(100% - 2px); }
.bolla-head { display: flex; justify-content: space-between; gap: 16px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--line); padding-bottom: 16px; border-bottom: 1px solid var(--line-soft); }
.bolla-rows { list-style: none; margin: 0; padding: 0; }
/* numero e titolo sulla stessa riga in alto, come nel ledger della fiducia; il timbro resta centrato sull'altezza della riga */
.row { display: grid; grid-template-columns: 40px 1fr 150px; gap: 20px; align-items: start; padding: 26px 0; border-bottom: 1px solid var(--line-soft); }
.row:last-child { border-bottom: 0; padding-bottom: 6px; }
.row .num { color: var(--line); padding-top: 4px; }
.row .stamp { align-self: center; }
.row .h3 { font-size: 22px; letter-spacing: .06em; }
.row .body { margin-top: 8px; font-size: 17px; }
/* timbri statici (round 4): sono il verbale, stanno gia sulla riga */
.stamp {
  justify-self: end; width: 128px; height: 128px; border: 2px solid var(--accent); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--accent); text-align: center;
  transform: rotate(-8deg);
}
.stamp span { font: 700 21px/1.05 var(--display); letter-spacing: .04em; text-transform: uppercase; padding: 0 10px; }
.boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; }
.box { border: 1px solid var(--line-soft); border-radius: 4px; padding: 24px; }
.box .label { margin-bottom: 12px; display: block; }
.box .body { font-size: 17px; }

/* per chi */
.who-grid { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.who-grid .section-head { margin-bottom: 0; position: sticky; top: 96px; }
.who-list { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 40px; }
.who-item { border-left: 2px solid var(--line-soft); padding-left: 20px; transition: border-color .3s var(--ease-out); }
.who-item:hover { border-color: var(--accent); }
.who-item .body { margin-top: 10px; font-size: 17px; }

/* dal vero */
.media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.player { position: relative; aspect-ratio: 816 / 464; background: var(--canvas-deep); border-radius: 6px; overflow: hidden; border: 1px solid var(--line-soft); }
.player video { display: block; width: 100%; height: 100%; object-fit: cover; }
.play {
  position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px;
  background: rgba(21, 25, 29, .35); border: 0; border-radius: 50%; color: var(--text-primary); cursor: pointer; padding: 0;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: color .2s var(--ease-out), opacity .3s var(--ease-out), background-color .2s;
}
.play svg { width: 84px; height: 84px; display: block; fill: none; stroke: currentColor; stroke-width: 1.5; }
.play svg path { fill: currentColor; stroke: none; }
.play:hover { color: var(--accent); background: rgba(21, 25, 29, .5); }
.player.is-playing .play { opacity: 0; pointer-events: none; }
.player-tag { position: absolute; left: 12px; top: 12px; font-size: 12px; padding: 4px 8px; }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.faq-grid .section-head { margin-bottom: 0; position: sticky; top: 96px; }
.qa { border-top: 1px solid var(--line-soft); }
.qa:last-of-type { border-bottom: 1px solid var(--line-soft); }
.qa summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; cursor: pointer; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary .h3 { font-size: 24px; transition: color .2s; }
.qa summary:hover .h3 { color: var(--accent-hover); }
.plus { position: relative; width: 22px; height: 22px; flex: none; transition: transform .2s var(--ease-out); }
.plus::before, .plus::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--line); transform: translate(-50%, -50%); }
.plus::before { width: 22px; height: 1.5px; }
.plus::after { width: 1.5px; height: 22px; }
.qa[open] .plus { transform: rotate(45deg); }
.qa-body { padding: 0 0 24px; }
.faq-list .cta-line { margin-top: 32px; border-top: 0; padding-top: 0; }

/* preventivo: solo il modulo (round 4, niente momento interattivo accanto): il box tratteggiato prende tutta la larghezza
   del wrap, come la testa di sezione, le card e il footer (niente canvas vuoto a destra); il pannello di conferma e largo uguale */
.quote-grid { display: block; }
.form { display: block; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; padding-top: 24px; }
.field { position: relative; }
.field-wide { grid-column: 1 / -1; }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
.field label.mono, .field legend { display: block; font: 500 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 8px; padding: 0; }
.field input[type="text"], .field input[type="tel"], .field input[type="email"], .field input[type="date"], .field textarea {
  width: 100%; background: var(--canvas); border: 1px solid var(--line-soft); border-radius: 4px; color: var(--text-primary);
  font: 400 17px/1.4 var(--body); padding: 12px 14px; transition: border-color .2s var(--ease-out);
  color-scheme: dark;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-secondary); opacity: .7; }
.field input:focus, .field textarea:focus { border-color: var(--accent); outline: none; }
.field.is-invalid input, .field.is-invalid textarea, fieldset.is-invalid .radio input { border-color: var(--accent); }
.error { display: none; margin: 8px 0 0; font-size: 13px; color: var(--accent); }
.field.is-invalid .error { display: block; }
.help { margin: 8px 0 0; font-size: 12px; color: var(--line); letter-spacing: .04em; }
.radio, .check { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-size: 17px; color: var(--text-primary); cursor: pointer; }
.radio input, .check input {
  appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; flex: none; position: relative;
  border: 1.5px solid var(--line); border-radius: 50%; background: var(--canvas); cursor: pointer; transition: border-color .2s;
}
.check input { border-radius: 3px; }
/* Gruppi di radio (TIPO DI VEICOLO, CHI SEI): due colonne su desktop (CHI SEI 2x2, i veicoli 2 + 2 + 1), una colonna sotto i 700px */
.radio-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.radio input:checked, .check input:checked { border-color: var(--accent); }
.radio input:checked::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent); }
.check input:checked::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.check a { color: var(--text-primary); }
.radio input:focus-visible, .check input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-foot { margin-top: 30px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.form-foot .small { color: var(--line); }

/* pannello di successo: testo e area di copia a sinistra, citofono a destra (round 4: nessun disegno) */
.success { margin-top: 40px; }
.success-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 40px; padding-top: 8px; }
.success-text { display: grid; gap: 16px; }
.success-text .h2 { font-size: clamp(32px, 4vw, 52px); }
.success-body { width: 100%; background: var(--canvas); border: 1px solid var(--line-soft); border-radius: 4px; color: var(--text-secondary); font-size: 13px; line-height: 1.6; padding: 14px; resize: vertical; }
.success-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.back-link { color: var(--text-secondary); font-size: 16px; }
/* lavora con noi (14 ottobre): una casella sola, bordata come i box del verbale, testo a sinistra e due bottoni */
.careers-box { border: 1px solid var(--line-soft); border-radius: 4px; padding: clamp(28px, 4vw, 48px); max-width: 880px; }
.careers-box .label { display: block; margin-bottom: 14px; }
.careers-box .h2 { margin-bottom: 16px; }
.careers-box .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.careers-box .btn-quick .ico { width: 18px; height: 18px; margin-right: 8px; }
.intercom { border: 1px solid var(--line); border-radius: 4px; padding: 20px; }
.intercom p { margin: 0 0 10px; font-size: 13px; line-height: 1.6; color: var(--text-secondary); }
.intercom p:last-child { margin-bottom: 0; }
.intercom .label { margin-bottom: 14px; }

/* ---------- footer ---------- */
.site-footer { background: var(--canvas-deep); border-top: 1px solid var(--line-soft); padding: 64px 0 32px; }
.footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.footer-col p { margin: 0 0 8px; font-size: 13px; line-height: 1.6; }
.footer-col .body { font-size: 15px; }
.footer-col a { color: var(--text-secondary); }
.footer-col .contact-link:hover { color: var(--text-primary); }
.footer-wa { margin-left: 14px; }
.footer-logo { display: block; width: 260px; height: auto; margin: 0 0 18px -2px; }

/* ---------- barra fissa in basso, solo telefono: Chiama, WhatsApp, Preventivo ---------- */
.quick-bar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  grid-template-columns: 1fr 1fr 1fr; padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(28, 33, 38, .94); border-top: 1px solid var(--line-soft);
  opacity: 0; pointer-events: none; transition: opacity .3s var(--ease-out);
}
.quick-bar.is-on { opacity: 1; pointer-events: auto; }
body.success-open .quick-bar { opacity: 0; pointer-events: none; }
.qb-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 56px; min-width: 0;
  font: 600 15px/1 var(--body); color: var(--text-primary); text-decoration: none; white-space: nowrap;
  border-left: 1px solid var(--line-soft);
}
.qb-btn:first-child { border-left: 0; }
.qb-btn.qb-primary { background: var(--accent); color: var(--canvas); border-left: 0; }
.qb-btn:focus-visible { outline-offset: -3px; }
@media (max-width: 720px), (orientation: portrait) and (pointer: coarse) {
  .quick-bar { display: grid; }
  body { padding-bottom: calc(57px + env(safe-area-inset-bottom, 0px)); }
}
.footer-notes { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line-soft); display: grid; gap: 10px; }
.footer-notes .label { margin-right: 12px; }
.footer-bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line-soft); }
.footer-bar .mono { font-size: 13px; }
.footer-links a { margin-right: 20px; color: var(--text-secondary); font-size: 15px; }

/* ---------- reveal (coreografia d'ingresso) ---------- */
.reveal .part { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.reveal.in .part { opacity: 1; transform: none; }
.reveal .part:nth-child(2) { transition-delay: .08s; }
.reveal .part:nth-child(3) { transition-delay: .16s; }
.reveal .part:nth-child(4) { transition-delay: .24s; }
.reveal .part:nth-child(5) { transition-delay: .32s; }
.reveal .part:nth-child(6) { transition-delay: .40s; }
.reveal .part:nth-child(7) { transition-delay: .48s; }
.reveal .part:nth-child(8) { transition-delay: .56s; }
.reveal .part:nth-child(9) { transition-delay: .64s; }
.reveal .part:nth-child(n+10) { transition-delay: .72s; }
.reveal.in.done .part { transition-delay: 0s !important; }

/* ---------- pointer coarse: target 44px ---------- */
@media (pointer: coarse) {
  .btn, .play, .back-link { min-height: 44px; }
  .btn, .back-link { display: inline-flex; align-items: center; justify-content: center; }
  .radio, .check, .qa summary, .site-nav a { min-height: 44px; }
  .site-nav a { display: inline-flex; align-items: center; }
  /* link tel e wa.me nel testo: area di tocco da 44px senza spostare la riga (padding e margine si annullano) */
  .contact-link { display: inline-block; padding: 12px 0; margin: -12px 0; }
  .header-phone { min-width: 44px; }
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .who-grid, .faq-grid, .success-grid { grid-template-columns: 1fr; }
  .who-grid .section-head, .faq-grid .section-head { position: static; margin-bottom: 32px; }
}
@media (max-width: 1100px) {
  /* fiducia tra 901 e 1100: piu larghezza alle foto, cosi la colonna non finisce molto sopra l'elenco */
  .trust-grid { grid-template-columns: 53fr 47fr; column-gap: 40px; }
}
@media (max-width: 900px) {
  /* fiducia: prima la testa (etichetta, titolo, lead), poi le tre foto a tutta larghezza una per riga, poi l'elenco */
  .trust-grid { grid-template-columns: 1fr; grid-template-areas: "head" "media" "list"; }
  .trust-head { margin-bottom: 24px; }
  .trust-media { gap: 16px; margin-bottom: 20px; }
  .site-nav { display: none; }
  /* header ridotto: logo, cornetta (44px) e bottone primario */
  .header-actions { gap: 10px; }
  .header-phone { width: 44px; min-width: 44px; justify-content: center; gap: 0; }
  .header-phone .ico { width: 22px; height: 22px; }
  .header-phone-num { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 700px) {
  .cards, .boxes, .who-list, .media-grid, .fields, .footer-grid, .radio-row { grid-template-columns: 1fr; }
  .cards .card { grid-column: auto; }
  .footer-logo { width: 200px; }
  .row { grid-template-columns: 36px 1fr; }
  .row .stamp { grid-column: 2; justify-self: start; width: 104px; height: 104px; margin-top: 6px; }
  .row .stamp span { font-size: 18px; }
  .bolla { padding: 22px 18px 24px; }
  .bolla-head { flex-direction: column; gap: 6px; }
  .stage .mono { font-size: 10px; letter-spacing: .05em; }
  .box { padding: 18px; }
  .cta-line { flex-direction: column; align-items: flex-start; }
  .ledger-row { grid-template-columns: 36px 1fr; }
  .h3 { font-size: 26px; }
}
@media (max-width: 600px) {
  body, .body { font-size: 17px; }
  .lead { font-size: 19px; }
  /* chi siamo: una card per riga, a tutta larghezza */
  .team-grid { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 480px) {
  /* linea delle tappe: restano i cinque punti, le etichette da 10px si toccherebbero */
  .stage .mono { display: none; }
  .btn-header { padding: 9px 12px; font-size: 14px; }
  .header-actions { gap: 4px; }
  .site-header { gap: 12px; }
  .brand-logo { height: 36px; }
  .footer-bar { flex-direction: column; align-items: flex-start; }
  .success-actions { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ---------- reduced motion: tutto allo stato finale, subito ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; transition-delay: 0s !important; }
  html { scroll-behavior: auto; }
  body { opacity: 1; }
  .reveal .part { opacity: 1; transform: none; }
  .hero-cue { display: none; }
}