/* Collaudo e start-up v2 — FILE GENERATO da tools/collaudo-v2/monta.mjs: i pezzi sono in tools/collaudo-v2/parti/ */

/* ================= 00-base.css ================= */
/* =============================================================
   Collaudo e start-up v2 — BASE COMUNE (non modificare: e' di tutti)
   Carta bianca, grigio #f5f5f7, inchiostro blu notte, un solo blu.
   Nessun blocco scuro. Nessun carattere monospaziato fuori dal foglio
   della hero (che e' un documento): le etichette piccole hanno tutte la
   voce dell'occhiello (.cs-eyebrow / .cs-label).
   ============================================================= */
.page-cs {
  --cs-ink: var(--corp-navy, #0b1220);
  --cs-soft: var(--corp-secondary, #475569);
  --cs-copy: #56627a;
  --cs-gray: #7b889c;
  --cs-quiet: #b6bfcc;
  --cs-muted: var(--corp-muted, #64748b);
  --cs-accent: #2563eb;
  --cs-accent-ink: #1d4ed8;
  --cs-accent-deep: #1e3a8a;
  --cs-mist: #f5f5f7;
  --cs-rule: rgba(15, 23, 42, 0.1);
  --cs-hair: rgba(15, 23, 42, 0.08);
  --cs-open: #b45309;
  --cs-done: #15803d;
  --cs-bad: #c2352b;
  /* Agganciato al token globale: la barra e' 50px (54 su telefono). */
  --cs-nav: var(--nav-height, 50px);
  --cs-pad: clamp(96px, 11vw, 168px);
  --cs-radius: 28px;
  /* una misura per ruolo, uguale in tutte le sezioni */
  --cs-h2b: clamp(1.9rem, 4.1vw, 3.5rem); /* titolo di secondo livello dentro una sezione */
  --cs-h3: clamp(1.45rem, 2.1vw, 1.9rem); /* titolino */
  --cs-head-gap: clamp(56px, 7vw, 100px); /* dalla testata al contenuto */
  /* SOLO per il foglio della hero (.cs-sheet): e' un documento. Vietato altrove. */
  --cs-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --cs-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* .page-home-corporate impone main{overflow:hidden}: romperebbe sticky */
body.page-cs main {
  overflow-x: clip;
  overflow-y: visible;
  background: #ffffff;
}

.cs-wrap {
  width: min(100% - 40px, var(--max-width, 1200px));
  margin-inline: auto;
}

.page-cs section[id] { scroll-margin-top: 72px; }
.page-cs main :is(a, button):focus-visible {
  outline: 3px solid var(--cs-accent);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ---------- tipografia comune ---------- */
/* occhiello di sezione e, con lo stesso identico carattere, ogni etichetta piccola */
.cs-eyebrow,
.cs-label {
  margin: 0;
  color: var(--cs-accent-deep);
  font-family: inherit;
  font-size: var(--fs-eyebrow);
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
}
.cs-label { display: block; }
.cs-label--quiet { color: var(--cs-gray); }

.cs-head {
  max-width: 940px;
  margin-inline: auto;
  text-align: center;
}
.cs-title {
  margin: 0.42em 0 0;
  color: var(--cs-ink);
  font-size: clamp(2.5rem, 5.6vw, 4.9rem);
  font-weight: 790;
  letter-spacing: -0.048em;
  line-height: 1.01;
  text-wrap: balance;
}
.cs-title span { color: var(--cs-gray); }
.cs-lede {
  margin: 26px auto 0;
  max-width: 44ch;
  color: var(--cs-copy);
  font-size: clamp(1.1rem, 1.45vw, 1.32rem);
  line-height: 1.5;
  text-wrap: balance;
}
/* nota piccola sotto un oggetto (didascalia): grigia, carattere del sito */
.cs-note {
  margin: 0;
  color: var(--cs-gray);
  font-size: var(--fs-caption);
  line-height: 1.5;
}
/* link di testo */
.cs-link {
  color: var(--cs-accent-ink);
  font-weight: 650;
  text-decoration: none;
}
.cs-link:hover { text-decoration: underline; }

/* le sezioni entrano quando arrivano in vista (00-base.js mette .is-in) */
.reveal-ready .cs-in {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s var(--cs-ease), transform 0.8s var(--cs-ease);
}
.reveal-ready .cs-in.is-in {
  opacity: 1;
  transform: none;
}

@media (max-width: 860px) {
  .page-cs { --cs-pad: clamp(72px, 13vw, 104px); --cs-radius: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-ready .cs-in,
  .reveal-ready .cs-in.is-in { opacity: 1; transform: none; transition: none; }
}

/* ---------- ritocchi dopo la revisione (2/10): aggiunte piccole, nessuna regola tolta ---------- */
/* le ancore arrivano a filo della barra: style.css mette gia' scroll-padding-top = barra + 20px,
   che con i 72px qui sopra faceva atterrare il bersaglio 92px sotto la barra */
.page-cs main section[id] { scroll-margin-top: -20px; }
/* fuoco da tastiera ben visibile anche sui pulsanti */
.page-cs main .button:focus-visible { outline-color: var(--cs-accent); }
/* testi piccoli: il grigio dei titoli a due toni (--cs-gray) sotto i 16 px non ha contrasto
   (3,3–3,6:1); per etichette «quiet» e note vale il grigio del testo corrente (5,6–6,1:1) */
.cs-label--quiet,
.cs-note { color: var(--cs-copy); }

/* ================= 10-hero.css ================= */
/* 10 · HERO — la lista punti aperti si svuota. APPROVATA dal titolare: non si tocca. */
/* =============================================================
   1. HERO — la lista punti aperti si svuota
   Con lo script: il foglio resta fermo, le righe si chiudono una
   alla volta e il contatore scende. Senza script: lista già chiusa.
   ============================================================= */
.cs-hero {
  position: relative;
  height: 460vh;
  background: #ffffff;
}
.cs-hero__stage {
  position: sticky;
  top: var(--cs-nav);
  z-index: 0;
  height: calc(100vh - var(--cs-nav));
  height: calc(100svh - var(--cs-nav));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.8vh, 20px);
  padding: clamp(12px, 2.6vh, 32px) clamp(16px, 3vw, 48px);
  overflow: hidden;
}

/* il foglio */
.cs-sheet {
  --cs-row: clamp(21px, 3.1vh, 36px);
  --cs-sheet-fs: clamp(0.56rem, 1.42vh, 0.82rem);
  position: relative;
  width: min(100%, 1120px);
  padding: clamp(14px, 2.2vh, 26px) clamp(14px, 2vw, 30px) clamp(12px, 1.8vh, 22px);
  border: 1px solid var(--cs-rule);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 40px 80px -46px rgba(15, 23, 42, 0.5);
  font-family: var(--cs-mono);
  font-size: var(--cs-sheet-fs);
  opacity: var(--cs-sheet-o, 1);
  transform: translateY(var(--cs-sheet-y, 0px));
}
.cs-hero__stage.is-live .cs-sheet { will-change: opacity, transform; }

.cs-sheet__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: clamp(10px, 1.6vh, 18px);
  border-bottom: 1px solid var(--cs-ink);
}
.cs-sheet__id b {
  display: block;
  color: var(--cs-ink);
  font-size: 1.15em;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cs-sheet__id span {
  display: block;
  margin-top: 4px;
  color: var(--cs-gray);
  letter-spacing: 0.04em;
}
.cs-sheet__count {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--cs-open);
}
.cs-sheet__count b {
  font-size: clamp(1.6rem, 4.4vh, 2.9rem);
  font-weight: 760;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 0.9;
  transition: color 0.5s ease;
}
.cs-sheet__count span {
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.cs-sheet.is-clear .cs-sheet__count { color: var(--cs-done); }

/* la griglia delle righe */
.cs-sheet__cols,
.cs-row {
  display: grid;
  grid-template-columns: 2.2em minmax(0, 1fr) 13em 5.8em 6.4em;
  align-items: center;
  gap: 0 clamp(8px, 1vw, 18px);
}
.cs-sheet__cols {
  padding: clamp(7px, 1.1vh, 13px) 0;
  border-bottom: 1px solid var(--cs-rule);
  color: var(--cs-quiet);
  font-size: 0.86em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.cs-sheet__rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.cs-row {
  position: relative;
  height: var(--cs-row);
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
  color: var(--cs-ink);
  line-height: 1.2;
  opacity: var(--cs-row-o, 1);
}
.cs-row > * { min-width: 0; }
.cs-row__n {
  color: var(--cs-quiet);
  font-variant-numeric: tabular-nums;
}
.cs-row__what {
  position: relative;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color 0.4s ease;
}
/* la riga chiusa si barra: il tratto cresce da sinistra */
.cs-row__what::after {
  content: "";
  position: absolute;
  left: 0;
  top: 52%;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(var(--cs-strike, 0));
  transform-origin: 0 50%;
  transition: transform 0.5s var(--cs-ease);
}
.cs-row.is-closed { --cs-strike: 1; }
.cs-row__hit,
.cs-row__who {
  color: var(--cs-gray);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cs-row__who { letter-spacing: 0.04em; }
.cs-row__state {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cs-row__state i {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.cs-row__state svg {
  flex: none;
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cs-row__open {
  color: var(--cs-open);
  transition: opacity 0.35s ease, visibility 0.35s;
}
.cs-row__done {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--cs-done);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s;
}
.cs-row.is-closed .cs-row__open { opacity: 0; visibility: hidden; }
.cs-row.is-closed .cs-row__done { opacity: 1; visibility: visible; }
.cs-row.is-closed .cs-row__what { color: var(--cs-gray); }
/* senza script la lista si legge già chiusa */
.cs-hero__stage:not(.is-live) .cs-row { --cs-strike: 1; }
.cs-hero__stage:not(.is-live) .cs-row__open { opacity: 0; visibility: hidden; }
.cs-hero__stage:not(.is-live) .cs-row__done { opacity: 1; visibility: visible; }
.cs-hero__stage:not(.is-live) .cs-row__what { color: var(--cs-gray); }

.cs-sheet__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 20px;
  padding-top: clamp(9px, 1.5vh, 16px);
  margin-top: clamp(6px, 1vh, 12px);
  border-top: 1px solid var(--cs-ink);
  color: var(--cs-gray);
  letter-spacing: 0.04em;
  opacity: var(--cs-foot-o, 1);
}
.cs-sheet__foot b { color: var(--cs-ink); font-weight: 700; }
.cs-sheet__foot em {
  color: var(--cs-done);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s;
}
.cs-sheet.is-clear .cs-sheet__foot em { opacity: 1; visibility: visible; }
.cs-hero__stage:not(.is-live) .cs-sheet__foot em { opacity: 1; visibility: visible; }

.cs-hero__cap {
  margin: 0;
  opacity: var(--cs-sheet-o, 1);
  max-width: 64ch;
  color: #94a3b8;
  font-size: 0.78rem;
  line-height: 1.5;
  text-align: center;
}

/* la prima schermata: solo il titolo */
.cs-hero__screen {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 1;
  height: calc(100vh - var(--cs-nav));
  height: calc(100svh - var(--cs-nav));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.cs-hero__copy {
  pointer-events: auto;
  background: radial-gradient(56% 58% at 50% 46%, rgba(255, 255, 255, 0.93) 36%, rgba(255, 255, 255, 0) 100%);
}
.cs-hero h1 {
  margin: 0.34em auto 0;
  max-width: 17ch;
  color: var(--cs-ink);
  font-size: clamp(2.7rem, 5.6vw, 5rem);
  font-weight: 790;
  letter-spacing: -0.05em;
  line-height: 1;
  text-wrap: balance;
}
.cs-hero h1 span { color: var(--cs-gray); }
.cs-hero__lead {
  margin: 24px auto 0;
  max-width: 50ch;
  color: var(--cs-soft);
  font-size: var(--fs-lead);
  line-height: 1.6;
}
.cs-hero__actions {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.cs-hero__reassure {
  margin: 16px 0 0;
  color: var(--cs-muted);
  font-size: var(--fs-caption);
}
.cs-hero__hint {
  margin: clamp(26px, 5vh, 54px) 0 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #94a3b8;
  font-size: 0.78rem;
  transition: opacity 0.45s ease;
}
.cs-hero__hint svg { width: 12px; height: 12px; animation: cs-nudge 2.2s ease-in-out infinite; }
@keyframes cs-nudge {
  0%, 100% { transform: translateY(-1px); }
  50% { transform: translateY(2px); }
}
.cs-hero__stage.is-live ~ .cs-hero__screen .cs-hero__copy { opacity: var(--cs-copy-o, 1); }
.cs-hero__stage.is-live ~ .cs-hero__screen .cs-hero__copy[data-gone] { pointer-events: none; }

@media (max-width: 760px) {
  .cs-sheet {
    --cs-row: clamp(26px, 3.6vh, 34px);
    --cs-sheet-fs: clamp(0.58rem, 1.32vh, 0.72rem);
  }
  .cs-sheet__cols,
  .cs-row { grid-template-columns: 1.9em minmax(0, 1fr) 6em; }
  .cs-sheet__count b { font-size: clamp(1.5rem, 3.4vh, 2.1rem); }
  .cs-row__hit,
  .cs-row__who,
  .cs-sheet__cols span[data-col="hit"],
  .cs-sheet__cols span[data-col="who"] { display: none; }
  .cs-hero { height: 420vh; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-hero { height: auto; display: flex; flex-direction: column; }
  .cs-hero__stage {
    position: static;
    height: auto;
    padding-block: clamp(30px, 5vh, 60px) 0;
  }
  .cs-hero__screen {
    position: static;
    height: auto;
    order: -1;
    padding-block: clamp(48px, 9vh, 110px) 0;
  }
  .cs-hero__hint { display: none; }
}

/* ================= 20-due-volte.css ================= */
/* =============================================================
   20 · due-volte — «Lo stesso quadro, provato due volte» (#fat-sat)

   L'oggetto e' il quadro: grande, fermo, a fuoco, su carta bianca.
   I due render (fat, sat) hanno il quadro negli stessi pixel.

   - DI BASE (senza script, «riduci movimento», finestra altissima
     o bassissima): due figure in fila, ognuna con la sua didascalia.
   - CON LO SCRIPT (.cs-two.is-live): le due figure stanno una
     sull'altra dentro un palco sticky; lo scroll cambia solo
     l'opacita' del secondo render e la didascalia accesa.
       · finestra larga (>= 3:2): il quadro al centro, piu' alto del
         palco (il bianco del fotogramma esce, tagliato dal palco);
         la frase a sinistra e i fatti a destra, in alto, attaccati
         al quadro, sopra sgabello / motoriduttore e sopra il carrello;
       · finestra stretta: il quadro sopra, la didascalia sotto
         (sul telefono il ritaglio quadrato -q-).
   Le misure dell'immagine dipendono SOLO dalla finestra (mai dal
   testo): cosi' i due render combaciano al pixel.

   Dove stanno le cose nel fotogramma 3:2 (misurato sui render):
   quadro ad ante aperte x 30%–70,5%, y 14%–79% (ruote/piedi fino a
   80%, spina e ombra fino a 90%); sgabello x 22%–29% sotto il 64%;
   motoriduttore x 21%–32% sotto il 74%; carrello x 68%–80% sotto
   il 55%. Sopra queste quote, fuori dal quadro, c'e' solo bianco.

   Niente riquadro, bordo, raggio, ombra: bianco 255 su bianco.
   ============================================================= */
.cs-two {
  padding: var(--cs-pad) 0;
  background: #ffffff;
}

/* ---------- di base: due figure in fila ---------- */
.cs-two__track {
  /* larghezza e altezza del render in fila: mai piu' alto della finestra */
  --two-sw: min(100vw, 1380px, (100vh - var(--cs-nav) - 16px) * 1.5);
  --two-sh: calc(var(--two-sw) / 1.5);
  /* il fotogramma ha il 14% di bianco sopra il quadro: lo tolgo dal respiro,
     cosi' fra sommario e quadro restano i --cs-head-gap di tutte le sezioni */
  margin-top: max(0px, calc(var(--cs-head-gap) - var(--two-sh) * 0.14));
}
.cs-two__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(48px, 6vw, 96px);
}
.cs-two__fig {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  row-gap: 0;
  margin: 0;
}

/* il render: nessuna cornice, e' una fotografia di prodotto su carta bianca */
.cs-two__shot {
  display: block;
  width: var(--two-sw);
  max-width: 100%;
  aspect-ratio: 3 / 2;
}
.cs-two__shot img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}

/* la didascalia: etichetta + una frase grande | righe corte */
.cs-two__cap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
  column-gap: clamp(32px, 6vw, 88px);
  align-items: start;
  align-content: start;
  width: min(100% - 40px, 860px);
  /* sotto il quadro il fotogramma ha ancora un 10% di bianco: la didascalia ci sale sopra */
  margin-top: calc(var(--two-sh) * -0.05);
}
.cs-two__place { color: var(--cs-copy); }
.cs-two__say h3 {
  margin: 12px 0 0;
  color: var(--cs-ink);
  font-size: var(--cs-h3);
  font-weight: 780;
  letter-spacing: -0.034em;
  line-height: 1.1;
  text-wrap: balance;
}
.cs-two__facts {
  display: grid;
  row-gap: 12px;
  margin: calc(var(--fs-eyebrow) * 1.2 + 12px) 0 0; /* parte alla stessa altezza della frase */
  padding: 0;
  list-style: none;
}
.cs-two__facts li {
  margin: 0;
  color: var(--cs-copy);
  font-size: var(--fs-lead);
  line-height: 1.42;
}

/* la chiusura: tipografia grande, due toni */
.cs-two__end {
  margin: clamp(56px, 7vw, 104px) auto 0;
  color: var(--cs-ink);
  font-size: var(--cs-h2b);
  font-weight: 790;
  letter-spacing: -0.045em;
  line-height: 1.05;
  text-align: center;
  text-wrap: balance;
}
.cs-two__end span { color: var(--cs-gray); }

@media (max-width: 699px) {
  .cs-two__track {
    /* il ritaglio quadrato -q-; telefono coricato: mai piu' alto della finestra */
    --two-sw: min(100vw, 100vh - var(--cs-nav) - 16px);
    --two-sh: var(--two-sw);
  }
  .cs-two__shot { aspect-ratio: 1 / 1; }
  .cs-two__cap {
    grid-template-columns: minmax(0, 1fr);
    margin-top: calc(var(--two-sh) * -0.03);
  }
  .cs-two__facts {
    row-gap: 8px;
    margin-top: 14px;
  }
  .cs-two__facts li { font-size: 0.95rem; }
}
@media (max-width: 520px) {
  /* due righe pulite, senza vedove: «Al FAT si risparmiano giornate. / Al SAT si risparmia fermo linea.» */
  .cs-two__end { font-size: clamp(1.4rem, 6.3vw, 1.9rem); }
}

/* =============================================================
   IL GESTO — solo con lo script (.is-live la mette e la toglie
   20-due-volte.js: mai in finestra bassissima, mai in finestra
   altissima). Il @media e' una seconda sicura per il robot.
   ============================================================= */
@media (max-height: 2399px) {
  .cs-two.is-live .cs-two__track {
    --two-vh: 100vh;
    --two-box: calc(var(--two-vh) - var(--cs-nav));
    --two-pad: clamp(10px, 2.4vh, 26px);
    /* telefono: quadrato sopra, didascalia sotto (altezza riservata, fissa) */
    --two-cap: 240px;
    --two-fit: min(100vw, calc(var(--two-box) - var(--two-cap) - 2 * var(--two-pad)));
    --two-h: var(--two-fit);
    --two-w: var(--two-h);
    /* a che altezza del palco comincia il quadro (il 14% del fotogramma e' bianco) */
    --two-top: calc((var(--two-box) - var(--two-cap)) / 2 - var(--two-h) * 0.36);
    height: 260vh;
    /* fra sommario e quadro restano i --cs-head-gap; la pista puo' salire sotto la testata
       solo per la fascia vuota (trasparente) che il palco ha sopra il render */
    margin-top: max(
      min(0px, calc((var(--two-box) - var(--two-cap) - var(--two-h)) / -2)),
      calc(var(--cs-head-gap) - var(--two-top))
    );
  }
  @supports (height: 100svh) {
    .cs-two.is-live .cs-two__track { --two-vh: 100svh; }
  }
  .cs-two.is-live .cs-two__stage {
    position: sticky;
    top: var(--cs-nav);
    height: var(--two-box);
    /* la riga e' alta quanto il palco, non quanto il render: cosi' il render piu' alto
       del palco resta CENTRATO e il bianco esce in parti uguali sopra e sotto */
    grid-template-rows: minmax(0, 1fr);
    row-gap: 0;
    overflow: hidden;
  }

  /* le due figure negli stessi pixel */
  .cs-two.is-live .cs-two__fig {
    grid-area: 1 / 1;
    grid-template-rows: var(--two-fit) var(--two-cap);
    align-content: center;
    row-gap: 0;
  }
  .cs-two.is-live .cs-two__shot {
    z-index: 0;
    justify-self: center;
    align-self: center;
    width: var(--two-w);
    max-width: none;
    height: var(--two-h);
    aspect-ratio: auto;
    /* i due render passano dallo stesso percorso di disegno: restano gemelli al pixel */
    will-change: opacity;
  }
  /* il secondo render si dissolve sul primo: l'opacita' la scrive lo script */
  .cs-two.is-live .cs-two__fig--sat .cs-two__shot { opacity: 0; }
  /* una didascalia alla volta: quella spenta esce in fretta, quella accesa entra dopo */
  .cs-two.is-live .cs-two__cap {
    margin-top: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s;
  }
  .cs-two.is-live .cs-two__fig.is-on .cs-two__cap {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease 0.16s, visibility 0s;
  }
  @media (max-width: 699px) {
    .cs-two.is-live .cs-two__cap { padding-top: 2px; }
  }
  @media (max-width: 359px) {
    .cs-two.is-live .cs-two__track { --two-cap: 296px; }
  }

  /* finestra stretta ma non telefono: render 3:2 piu' alto della sua riga (esce solo bianco),
     didascalia su due colonne sotto */
  @media (min-width: 700px) {
    .cs-two.is-live .cs-two__track {
      --two-cap: 204px;
      --two-fit: min(calc(100vw - 40px), calc(var(--two-box) - var(--two-cap) - 2 * var(--two-pad)));
      /* 0,98: sgabello e carrello (dal 19,7% all'83,1% del fotogramma) restano a 25–30 px dai bordi */
      --two-h: min(calc(var(--two-fit) * 1.2), calc((100vw - 40px) * 0.98), 1000px);
      --two-w: calc(var(--two-h) * 1.5);
    }
  }
  @media (min-width: 960px) {
    .cs-two.is-live .cs-two__track { --two-cap: 172px; }
    .cs-two.is-live .cs-two__cap {
      grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
      width: min(100% - 40px, 980px);
    }
  }

  /* finestra larga: il quadro piu' alto del palco, il testo in alto ai due lati, attaccato al quadro */
  @media (min-aspect-ratio: 3 / 2) {
    .cs-two.is-live .cs-two__track {
      --two-cap: 0px;
      --two-fit: var(--two-box);
      --two-gap: clamp(20px, 2.33vw, 40px);
      /* x1,2: del fotogramma esce dal palco solo bianco (sopra il 6%, sotto il 94%);
         ai lati deve restare posto per una colonna di testo di almeno 248 px */
      --two-h: min(
        calc((var(--two-box) - 2 * var(--two-pad)) * 1.2),
        calc((50vw - 268px - var(--two-gap)) / 0.31),
        1000px
      );
      --two-w: calc(var(--two-h) * 1.5);
      /* quanto resta fra il quadro (mezza larghezza = 0,31 x altezza) e il bordo della finestra */
      --two-free: calc(50vw - 20px - var(--two-gap) - var(--two-h) * 0.31);
      /* ...e fra il quadro e il bordo della COLONNA della pagina: il testo non ne esce */
      --two-col: calc(min(50vw - 20px, var(--max-width, 1200px) / 2) - var(--two-gap) - var(--two-h) * 0.31);
      --two-sl: min(clamp(216px, 17.5vw, 264px), var(--two-free), var(--two-col));
      --two-sr: min(clamp(248px, 22vw, 328px), var(--two-free), var(--two-col));
    }
    .cs-two.is-live .cs-two__fig {
      grid-template-rows: minmax(0, 1fr);
      align-content: stretch;
    }
    .cs-two.is-live .cs-two__shot,
    .cs-two.is-live .cs-two__cap {
      grid-area: 1 / 1;
    }
    .cs-two.is-live .cs-two__cap {
      grid-template-columns:
        minmax(0, 1fr)
        calc(var(--two-h) * 0.62 + 2 * var(--two-gap))
        minmax(0, 1fr);
      column-gap: 0;
      align-self: start;
      width: 100%;
      /* la prima riga del testo sulla linea alta delle ante (20% del fotogramma) */
      padding-top: calc(var(--two-box) / 2 - var(--two-h) * 0.298);
    }
    .cs-two.is-live .cs-two__say {
      grid-column: 1;
      justify-self: end;
      width: var(--two-sl);
    }
    .cs-two.is-live .cs-two__facts {
      grid-column: 3;
      justify-self: start;
      width: var(--two-sr);
      row-gap: clamp(10px, 1.9vh, 16px);
      margin-top: 0;
    }
    /* nella colonna stretta l'etichetta va su due righe pulite: FAT / dove */
    .cs-two.is-live .cs-two__dot { display: none; }
    .cs-two.is-live .cs-two__place {
      display: block;
      margin-top: 5px;
      text-wrap: balance; /* «In stabilimento, / sulla linea»: mai una parola sola a capo */
    }
    .cs-two.is-live .cs-two__say h3 { margin-top: 14px; }
  }
  /* finestra larga ma bassa: i fatti un filo piu' piccoli, restano sopra il carrello */
  @media (min-aspect-ratio: 3 / 2) and (max-height: 700px) {
    .cs-two.is-live .cs-two__facts { row-gap: 9px; }
    .cs-two.is-live .cs-two__facts li { font-size: 0.94rem; line-height: 1.38; }
  }
}

/* ================= 30-segnali.css ================= */
/* =============================================================
   30 · SEGNALI — il check I/O: 336 segnali, uno per uno. Fondo grigio.
   Con lo script (.is-live): il banco resta fermo, i quadratini si
   accendono uno per uno, il n. 201 torna rosso, la corsa si ferma,
   viene corretto (verde) e si riparte fino a 336. Una didascalia alla
   volta, il contatore e' la cifra grande.
   Senza script, con «riduci movimento» e in finestra altissima: griglia
   tutta provata, contatore a 336, le due didascalie finali.
   Sotto: le tre prove, ognuna col suo primo piano, tre misure diverse.
   ============================================================= */
.cs-sig {
  position: relative;
  padding-block: var(--cs-pad);
  background: var(--cs-mist);
}

/* ---------- il banco: griglia + contatore + didascalia ---------- */
.cs-sig__track {
  position: relative;
  margin-top: var(--cs-head-gap);
}
.cs-sig.is-live .cs-sig__track {
  height: 340vh;
  /* il palco e' alto quanto la finestra e il banco sta al centro: lo script misura
     il vuoto sopra e sotto e lo riassorbe, cosi' fra testata e griglia (e fra griglia
     e prove) resta il respiro di sempre e non mezza finestra vuota */
  margin-block: calc(-1 * var(--cs-sig-lift, 0px));
}
.cs-sig.is-live .cs-sig__stage {
  position: sticky;
  top: var(--cs-nav);
  height: calc(100vh - var(--cs-nav));
  height: calc(100svh - var(--cs-nav));
  display: flex;
  align-items: center;
  pointer-events: none;
}

.cs-sig__bench {
  display: grid;
  row-gap: clamp(14px, 2.4vh, 24px);
}
.cs-sig__board { min-width: 0; }

.cs-sig__cells {
  --cs-sig-cols: 24;
  display: grid;
  grid-template-columns: repeat(var(--cs-sig-cols), minmax(0, 1fr));
  gap: 5px;
}
.cs-sig__cells > i {
  aspect-ratio: 1;
  border-radius: 4px;
  background: #d9dee7;
  transition: background-color 0.35s ease;
}
.cs-sig__cells > i.is-ok { background: var(--cs-accent); }
.cs-sig__cells > i.is-bad {
  background: var(--cs-bad);
  animation: cs-sig-beat 1.1s ease-in-out infinite;
}
.cs-sig__cells > i.is-fixed { background: var(--cs-done); }
@keyframes cs-sig-beat {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
/* senza script la prova si legge gia' fatta: tutti provati, quello corretto in verde */
.cs-sig:not(.is-live) .cs-sig__cells > i { background: var(--cs-accent); }
.cs-sig:not(.is-live) .cs-sig__cells > i:nth-child(201) { background: var(--cs-done); }

.cs-sig__legend { margin-top: clamp(12px, 1.6vh, 16px); }

/* il contatore: una cifra, grande */
.cs-sig__count {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.cs-sig__count b {
  color: var(--cs-ink);
  font-size: clamp(3.6rem, 15vw, 6rem);
  font-weight: 790;
  letter-spacing: -0.055em;
  line-height: 0.86;
  transition: color 0.35s ease;
}
.cs-sig__stage.is-bad .cs-sig__count b { color: var(--cs-bad); }

/* la didascalia: una alla volta, in dissolvenza sul posto */
.cs-sig__says { display: grid; }
.cs-sig__say {
  margin: 0;
  max-width: 34rem;
  color: var(--cs-copy);
  font-size: var(--fs-lead);
  line-height: 1.5;
}
.cs-sig__say b {
  display: block;
  margin-bottom: 0.42em;
  color: var(--cs-ink);
  font-size: var(--cs-h3);
  font-weight: 780;
  letter-spacing: -0.034em;
  line-height: 1.1;
  text-wrap: balance;
}
/* la sigla del segnale sta sulla sua riga, nel colore dello stato */
.cs-sig__say b span { display: block; }
.cs-sig__say--bad b span { color: var(--cs-bad); }
.cs-sig__say--fixed b span { color: var(--cs-done); }
.cs-sig.is-live .cs-sig__say {
  grid-area: 1 / 1;
  align-self: start;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s;
}
.cs-sig.is-live .cs-sig__say.is-on {
  opacity: 1;
  visibility: visible;
}
.cs-sig:not(.is-live) .cs-sig__says { row-gap: 22px; }
.cs-sig:not(.is-live) .cs-sig__say[data-sig-say="0"],
.cs-sig:not(.is-live) .cs-sig__say[data-sig-say="1"] { display: none; }

/* in colonna (telefono e tavoletta in piedi): cifra, griglia, didascalia */
.cs-sig__side { display: contents; }
.cs-sig__count { order: 1; }
.cs-sig__board { order: 2; }
.cs-sig__says { order: 3; margin-top: clamp(4px, 1vh, 12px); }

@media (max-width: 700px) {
  /* 21 x 16: la griglia resta bassa e il palco entra anche nei telefoni corti */
  .cs-sig__cells { --cs-sig-cols: 21; gap: 3px; }
  .cs-sig__cells > i { border-radius: 3px; }
  .cs-sig__count b { font-size: clamp(3.6rem, 17vw, 4.6rem); }
}
/* telefono corto (le barre del browser mangiano l'altezza): una dozzina di px in meno */
@media (max-width: 700px) and (max-height: 600px) {
  .cs-sig__bench { row-gap: 10px; }
  .cs-sig__count b { font-size: 3.2rem; }
  .cs-sig__says { margin-top: 0; }
}

/* affiancati: la griglia a sinistra, a destra la cifra in alto e la didascalia in basso */
@media (min-width: 1000px) {
  .cs-sig__bench {
    grid-template-columns: minmax(0, 1fr) clamp(240px, 29vw, 372px);
    column-gap: clamp(28px, 5.4vw, 84px);
    align-items: stretch;
  }
  .cs-sig__board { position: relative; order: 0; }
  /* la griglia non supera mai l'altezza utile del palco */
  .cs-sig__cells {
    gap: clamp(4px, 0.42vw, 6px);
    width: min(100%, calc((100vh - var(--cs-nav) - 120px) * 24 / 14));
    width: min(100%, calc((100svh - var(--cs-nav) - 120px) * 24 / 14));
  }
  .cs-sig__legend {
    position: absolute;
    top: 100%;
    left: 0;
  }
  .cs-sig__side {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    min-width: 0;
  }
  .cs-sig__count { display: block; order: 0; }
  .cs-sig__count b {
    display: block;
    margin: -0.075em 0 0 -0.04em;
    font-size: clamp(4.6rem, 9.4vw, 8.6rem);
  }
  .cs-sig__count .cs-label { margin-top: 16px; }
  .cs-sig__says { order: 0; margin-top: 0; }
  .cs-sig.is-live .cs-sig__say { align-self: end; }
}

/* finestra media e bassa (tavoletta coricata, finestra del computer ristretta) e telefono
   coricato: in colonna il banco non entrerebbe nel palco, quindi affiancati: griglia a
   sinistra a misura di finestra, cifra e didascalia a destra */
@media (min-width: 701px) and (max-width: 999px) and (max-height: 900px),
  (min-width: 560px) and (max-width: 999px) and (orientation: landscape) and (max-height: 560px) {
  .cs-sig__bench {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: clamp(24px, 4vw, 44px);
    align-items: stretch;
  }
  .cs-sig__board { position: relative; order: 0; }
  .cs-sig__cells {
    --cs-sig-cols: 24;
    gap: 3px;
    width: min(56vw, calc((100vh - var(--cs-nav) - 92px) * 24 / 14));
    width: min(56vw, calc((100svh - var(--cs-nav) - 92px) * 24 / 14));
  }
  .cs-sig__legend {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 10px;
  }
  .cs-sig__side {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
  }
  .cs-sig__count { display: block; order: 0; }
  .cs-sig__count b { display: block; font-size: clamp(3.4rem, 8.6vw, 5.2rem); }
  .cs-sig__count .cs-label { margin-top: 12px; }
  .cs-sig__says { order: 0; margin-top: 0; }
  .cs-sig.is-live .cs-sig__say { align-self: end; }
}
/* telefono coricato: testi piccoli, il banco deve stare in poco piu' di 300 px */
@media (min-width: 560px) and (max-width: 999px) and (orientation: landscape) and (max-height: 560px) {
  .cs-sig__count { display: flex; justify-content: flex-start; }
  .cs-sig__count b { display: inline; font-size: 3.4rem; }
  .cs-sig__count .cs-label { margin-top: 0; }
  .cs-sig__say { font-size: 0.94rem; line-height: 1.42; }
  .cs-sig__say b { font-size: 1.18rem; }
}

/* ---------- le tre prove: una riga per prova, tre misure diverse ---------- */
.cs-sig__proofs {
  margin-top: clamp(84px, 10vw, 150px);
  display: grid;
  row-gap: clamp(64px, 9.5vw, 136px);
}
.cs-sig.is-live .cs-sig__proofs { margin-top: clamp(28px, 3.6vw, 52px); }

.cs-sig__proof {
  display: grid;
  row-gap: 26px;
}
.cs-sig__view { margin: 0; }
.cs-sig__view img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: var(--cs-radius);
  background: #e3e7ed;
}
.cs-sig__text { max-width: 34rem; }
.cs-sig__name {
  margin: 14px 0 0;
  color: var(--cs-ink);
  font-size: var(--cs-h2b);
  font-weight: 790;
  letter-spacing: -0.045em;
  line-height: 1.02;
}
.cs-sig__name span { color: var(--cs-gray); }
.cs-sig__text > p:last-child {
  margin: 16px 0 0;
  color: var(--cs-copy);
  font-size: var(--fs-lead);
  line-height: 1.55;
}

/* in colonna le tre immagini non hanno la stessa misura: la prima esce dal margine a
   destra, la seconda a sinistra ed e' piu' stretta, la terza sta dentro */
@media (max-width: 860px) {
  .cs-sig__proof--in .cs-sig__view { margin-right: -20px; }
  .cs-sig__proof--in .cs-sig__view img { border-radius: var(--cs-radius) 0 0 var(--cs-radius); }
  .cs-sig__proof--out .cs-sig__view { margin-left: -20px; margin-right: 12%; }
  .cs-sig__proof--out .cs-sig__view img { border-radius: 0 var(--cs-radius) var(--cs-radius) 0; }
}

@media (min-width: 861px) {
  .cs-sig__proof {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(18px, 2.2vw, 28px);
    row-gap: 0;
    align-items: end;
  }
  .cs-sig__view,
  .cs-sig__text { grid-row: 1; }
  .cs-sig__name span { display: block; }
  .cs-sig__text { padding-bottom: 6px; }

  /* ingresso: a sinistra, misura di mezzo */
  .cs-sig__proof--in .cs-sig__view { grid-column: 1 / span 7; }
  .cs-sig__proof--in .cs-sig__text { grid-column: 8 / -1; padding-left: clamp(16px, 2.6vw, 40px); }

  /* uscita: lo specchio (dal PLC al campo), a destra. E' la piu' leggibile delle tre
     (morsetti numerati, «24.0 V» sul display): e' la piu' grande */
  .cs-sig__proof--out .cs-sig__view { grid-column: 5 / -1; }
  .cs-sig__proof--out .cs-sig__text { grid-column: 1 / span 4; padding-right: clamp(0px, 1.2vw, 16px); }

  /* analogico: rientrata, la piu' raccolta */
  .cs-sig__proof--an .cs-sig__view { grid-column: 2 / span 6; }
  .cs-sig__proof--an .cs-sig__text { grid-column: 8 / -1; padding-left: clamp(16px, 2.6vw, 40px); }
}

/* telefono coricato: il primo piano non deve superare la finestra */
@media (orientation: landscape) and (max-height: 560px) {
  .cs-sig__view {
    width: min(100%, calc((100vh - var(--cs-nav) - 24px) * 4 / 3));
  }
  /* cosi' stretta non arriva piu' al bordo dello schermo: niente uscita dal margine,
     quattro angoli tondi */
  .cs-sig__proof--in .cs-sig__view,
  .cs-sig__proof--out .cs-sig__view { margin-inline: 0; }
  .cs-sig__proof--in .cs-sig__view img,
  .cs-sig__proof--out .cs-sig__view img { border-radius: var(--cs-radius); }
}

/* finestra altissima (il robot di Google): niente palco fermo, la sezione resta corta */
@media (min-height: 2400px) {
  .cs-sig.is-live .cs-sig__track {
    height: auto;
    margin-block: var(--cs-head-gap) 0;
  }
  .cs-sig.is-live .cs-sig__stage {
    position: static;
    height: auto;
    display: block;
  }
  .cs-sig.is-live .cs-sig__proofs { margin-top: clamp(84px, 10vw, 150px); }
}

@media (prefers-reduced-motion: reduce) {
  .cs-sig__cells > i,
  .cs-sig__cells > i.is-bad,
  .cs-sig__say,
  .cs-sig__count b { animation: none; transition: none; }
}

/* ================= 40-avvio.css ================= */
/* =============================================================
   40 · START-UP — «gira» non vuol dire «produce»   (.cs-go, fondo BIANCO)
   Il render "marcia" (fondo 255) sta sulla carta senza riquadro, bordo,
   angoli ne' ombra. Sotto, i tre punti come manifesto: due frasi grandi a
   sinistra, una cifra enorme a destra. Nessun filetto, nessuna colonna
   gemella. Nessuno script: tutto e' visibile anche senza JavaScript.
   ============================================================= */
.cs-go {
  padding-block: var(--cs-pad);
  background: #ffffff;
}

/* ---------- il quadro, terzo stato ----------
   Il protagonista e' il quadro, non il fotogramma: nel 3:2 il quadro chiuso occupa solo
   x 35%–63% (motoriduttore da 21%), y 11% (colonnina) – 85%; tutto il resto e' bianco 255.
   Quindi il fotogramma e' dimensionato sull'OGGETTO e puo' uscire dalla colonna: il bianco
   in testa non viene dipinto (clip-path), quello al piede passa sotto la riga di testo,
   quello ai lati e' bianco su bianco (main ha overflow-x: clip). */
.cs-go__shot {
  --go-vh: 100vh;
  /* quadro + la sua riga in una schermata; mai piu' largo di quanto serve al motoriduttore */
  --go-h: min(
    1000px,
    calc((100vw - 40px) / 1.05),
    max(400px, calc((var(--go-vh) - var(--cs-nav) - 104px) / 0.82))
  );
  --go-w: calc(var(--go-h) * 1.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* fra sommario e colonnina restano i --cs-head-gap di tutte le sezioni */
  margin: calc(var(--cs-head-gap) - var(--go-h) * 0.02) 0 0;
  padding: 0;
}
@supports (height: 100svh) {
  .cs-go__shot { --go-vh: 100svh; }
}
/* l'oggetto grande non si sposta: entra solo in dissolvenza */
.reveal-ready .cs-go__shot.cs-in { transform: none; }
.cs-go__shot picture {
  display: block;
  flex: none;
  width: var(--go-w);
  height: var(--go-h);
  margin: calc(var(--go-h) * -0.09) 0 calc(var(--go-h) * -0.095);
}
.cs-go__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  clip-path: inset(9% 0 0 0);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
}
.cs-go__state {
  position: relative;
  z-index: 1;
  margin: 14px auto 0;
  color: var(--cs-ink);
  font-size: var(--cs-h3);
  font-weight: 780;
  letter-spacing: -0.034em;
  line-height: 1.1;
  text-align: center;
  text-wrap: balance;
}
.cs-go__state span { display: block; color: var(--cs-gray); }

/* ---------- i tre punti: le parole grandi sono il disegno ---------- */
.cs-go__points {
  margin: clamp(88px, 11vw, 160px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
  column-gap: clamp(40px, 7vw, 112px);
  row-gap: clamp(72px, 8vw, 120px);
  align-items: start;
}
.cs-go__pt { margin: 0; padding: 0; min-width: 0; }
.cs-go__pt--stuff { grid-column: 1; grid-row: 1; }
.cs-go__pt--crew { grid-column: 1; grid-row: 2; }
.cs-go__pt--pace { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

.cs-go__say {
  margin: 20px 0 0;
  color: var(--cs-ink);
  font-size: var(--cs-h2b);
  font-weight: 790;
  letter-spacing: -0.045em;
  line-height: 1.03;
}
.cs-go__p {
  margin: 22px 0 0;
  max-width: 38ch;
  color: var(--cs-copy);
  font-size: var(--fs-lead);
  line-height: 1.55;
}

/* la cifra: «8 ore di fila» */
.cs-go__fig {
  margin: 14px 0 0;
  display: flex;
  align-items: flex-end;
  align-items: last baseline;
  gap: 0.2em;
  color: var(--cs-gray);
  font-size: clamp(2rem, 4.5vw, 4rem);
  font-weight: 780;
  letter-spacing: -0.046em;
  line-height: 0.98;
}
.cs-go__fig b {
  color: var(--cs-ink);
  font-size: clamp(11rem, 25vw, 22.5rem);
  font-weight: 790;
  letter-spacing: -0.06em;
  line-height: 0.74;
  font-variant-numeric: lining-nums;
  /* la cifra tonda sporge a sinistra: la riallineo al filo delle etichette */
  margin-left: -0.045em;
}
.cs-go__fig span { display: block; }
.cs-go__pt--pace .cs-go__p { margin-top: 30px; }

/* ---------- fra 701 e 1100: stesse due colonne, piu' strette ---------- */
@media (max-width: 1100px) {
  .cs-go__points { column-gap: clamp(28px, 5vw, 56px); }
}

/* ---------- una colonna: materiale, cifra, persone ---------- */
@media (max-width: 860px) {
  .cs-go__points {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(64px, 13vw, 96px);
  }
  .cs-go__pt--stuff,
  .cs-go__pt--pace,
  .cs-go__pt--crew { grid-column: 1; grid-row: auto; align-self: start; }
  .cs-go__fig b { font-size: clamp(10rem, 44vw, 17rem); }
  .cs-go__fig { font-size: clamp(2rem, 8.6vw, 3.4rem); }
  .cs-go__p { max-width: 42ch; }
}

/* ---------- telefono: il ritaglio quadrato -q- (x 16,7%–83,3% del fotogramma) ----------
   Nel quadrato il contenuto sta fra il 3% e il 79% della larghezza (a destra e' bianco):
   quella fascia riempie lo schermo, cosi' il quadro e' largo piu' di meta' telefono.
   Telefono coricato: l'altezza comanda, il quadro resta intero. */
@media (max-width: 699px) {
  .cs-go__shot {
    --go-h: min(131.6vw, 640px, max(280px, calc((var(--go-vh) - var(--cs-nav) - 96px) / 0.815)));
    --go-w: var(--go-h);
  }
  .cs-go__shot picture {
    position: relative;
    left: calc(var(--go-h) * 0.09); /* il centro del contenuto (41%) al centro dello schermo */
  }
}

/* ================= 50-servizio.css ================= */
/* =============================================================
   50 · IL SERVIZIO — «Quando la linea parte, non spariamo.»
   Fondo grigio, nessuna tessera, nessuna illustrazione, nessuna cifra:
   il disegno e' la durata. Tre promesse, tre tempi scritti per esteso
   (le prime ore, il primo anno, sempre) e la parola cresce con il tempo
   che promette, a passi regolari. L'ultima, «Sempre», ha un tratto
   sottile che parte dalla parola ed esce dal bordo della pagina: non
   finisce. Il tratto si traccia con lo scroll (50-servizio.js); senza
   script e' gia' tracciato. Su telefono il tratto non c'e'.
   ============================================================= */
.cs-serv {
  /* da bordo colonna a bordo finestra: il tratto di «Sempre» ci passa sopra */
  --serv-gutter: max(20px, calc((100vw - var(--max-width, 1200px)) / 2));
  padding-block: var(--cs-pad);
  background: var(--cs-mist);
}

.cs-serv__steps {
  margin-top: var(--cs-head-gap);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 24px);
  align-items: start;
}
.cs-serv__step { min-width: 0; }
.cs-serv__step--a { grid-column: 1 / span 5; }
/* la seconda promessa scende di un gradino e sta sulla stessa verticale del telefono */
.cs-serv__step--b {
  grid-column: 7 / span 6;
  margin-top: clamp(72px, 7.4vw, 108px);
}
.cs-serv__step--c {
  grid-column: 1 / -1;
  margin-top: clamp(64px, 7.4vw, 108px);
}

/* ---------- la parola: cresce con la durata ---------- */
.cs-serv__word {
  margin: 0;
  color: var(--cs-ink);
  font-weight: 790;
  letter-spacing: -0.05em;
  line-height: 0.96;
  white-space: nowrap;
}
/* la prima sta sotto il titolo della sezione (misura dei titoli di secondo livello),
   poi ogni passo e' circa una volta e mezza il precedente */
.cs-serv__step--a .cs-serv__word { font-size: var(--cs-h2b); letter-spacing: -0.045em; }
.cs-serv__step--b .cs-serv__word { font-size: clamp(2.9rem, 6vw, 5.4rem); }

.cs-serv__h {
  margin: clamp(18px, 2vw, 28px) 0 0;
  color: var(--cs-ink);
  font-size: var(--cs-h3);
  font-weight: 780;
  letter-spacing: -0.034em;
  line-height: 1.1;
}
.cs-serv__p {
  margin: clamp(10px, 1vw, 14px) 0 0;
  max-width: 36ch;
  color: var(--cs-copy);
  font-size: var(--fs-lead);
  line-height: 1.55;
  text-wrap: balance; /* due righe pari: mai una parola sola a capo */
}

/* ---------- «Sempre» e il tratto che non finisce ---------- */
.cs-serv__ever {
  display: flex;
  align-items: center;
  gap: 0.11em;
  margin-left: -0.026em; /* la S ha piu' aria a sinistra della P di «Presidio»: allineamento ottico */
  font-size: clamp(4.4rem, 9.6vw, 8.6rem);
  letter-spacing: -0.056em;
  line-height: 0.92;
}
.cs-serv__word .cs-serv__dash {
  position: relative;
  top: 0.085em; /* a meta' dell'occhio delle minuscole, non a meta' riga */
  flex: 1 1 0;
  min-width: 0;
  height: max(3px, 0.036em); /* un filo, non una barra */
  margin-right: calc(-1 * var(--serv-gutter));
  background: var(--cs-accent);
  transform-origin: 0 50%;
}
/* armato dallo script: il tratto parte da zero e segue lo scroll */
.cs-serv__ever.is-live .cs-serv__dash {
  transform: scaleX(0);
  will-change: transform;
}

.cs-serv__last {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 24px);
  align-items: end;
  margin-top: clamp(20px, 2.4vw, 36px);
}
.cs-serv__last > div { grid-column: 1 / span 6; }
.cs-serv__last .cs-serv__h { margin-top: 0; }
.cs-serv__tel {
  grid-column: 7 / span 6;
  justify-self: start;
  color: var(--cs-ink);
  font-size: var(--cs-h2b);
  font-weight: 790;
  letter-spacing: -0.048em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.25s ease;
}
.cs-serv__tel:hover { color: var(--cs-accent-ink); }

.cs-serv__note {
  max-width: 62ch;
  margin-top: clamp(64px, 6.6vw, 96px);
  color: var(--cs-copy);
  font-size: var(--fs-body);
  line-height: 1.6;
}
.cs-serv__note .cs-link { white-space: nowrap; }

/* ---------- colonna unica ---------- */
@media (max-width: 760px) {
  .cs-serv__steps { display: block; }
  .cs-serv__step--b { margin-top: clamp(52px, 13vw, 72px); }
  .cs-serv__step--c { margin-top: clamp(60px, 15vw, 84px); }
  .cs-serv__step--a .cs-serv__word { font-size: clamp(2rem, 9.4vw, 2.5rem); }
  .cs-serv__step--b .cs-serv__word { font-size: clamp(2.5rem, 12.4vw, 3.3rem); }
  .cs-serv__ever { font-size: clamp(3.6rem, 19vw, 4.8rem); }
  /* su telefono il tratto sarebbe un trattino attaccato alla parola: non c'e' */
  .cs-serv__word .cs-serv__dash { display: none; }
  .cs-serv__h { margin-top: 14px; }
  .cs-serv__p { margin-top: 10px; }
  .cs-serv__last { display: block; margin-top: 18px; }
  .cs-serv__tel {
    display: block;
    width: fit-content;
    margin-top: 18px;
    font-size: clamp(1.9rem, 9.2vw, 2.4rem);
  }
  .cs-serv__note { margin-top: clamp(56px, 14vw, 80px); }
}

@media (prefers-reduced-motion: reduce) {
  .cs-serv__ever.is-live .cs-serv__dash { transform: none !important; }
  .cs-serv__tel { transition: none; }
}

/* ================= 60-consegna.css ================= */
/* =============================================================
   60 · LA CONSEGNA — cosa resta in mano   (.cs-hand, fondo bianco)
   Il disegno e' l'IMMAGINE: le sei cose consegnate, sul banco (render
   3:2 con il suo sfondo: angoli tondi come i primi piani, niente ombra,
   niente bordo). Sta intera in una schermata: larga quanto la colonna,
   o quanto l'altezza della finestra consente.
   I sei nomi con la loro riga sono la didascalia dell'immagine: testo
   piccolo, tre colonne larghe quanto lei, senza filetti ne' riquadri
   (non la tabella di prima, non sei frasi giganti). La nota chiude al
   centro, come il sommario apre.
   Nessuno script: l'unico movimento e' il tratto che barra «aperti».
   ============================================================= */
.cs-hand {
  padding-block: var(--cs-pad);
  background: #ffffff;
}

/* ---------- l'immagine + la sua didascalia: una sola colonna, la stessa larghezza ---------- */
.cs-hand__fig {
  --hand-vh: 100vh;
  width: min(100%, max(420px, calc((var(--hand-vh) - var(--cs-nav) - 28px) * 1.5)));
  margin: var(--cs-head-gap) auto 0;
  padding: 0;
}
@supports (height: 100svh) {
  .cs-hand__fig { --hand-vh: 100svh; }
}
.cs-hand__img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 2000 / 1333;
  border: 0;
  border-radius: var(--cs-radius);
  box-shadow: none;
  background: #e3e7ed;
}
/* l'oggetto grande non si sposta: entra solo in dissolvenza */
.reveal-ready .cs-hand__img.cs-in { transform: none; }

/* ---------- la didascalia: sei nomi, ognuno con la sua riga ---------- */
.cs-hand__fig figcaption {
  margin: 0;
  padding: 0;
}
.cs-hand__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: clamp(24px, 3.6vw, 52px);
  row-gap: 22px;
  margin: clamp(26px, 3vw, 40px) 0 0;
  /* il testo comincia dove finisce la curva dell'angolo dell'immagine */
  padding: 0 clamp(4px, 1vw, 14px);
  list-style: none;
}
.cs-hand__list > li {
  margin: 0;
  padding: 0;
  min-width: 0;
}
.cs-hand__list h3 {
  margin: 0;
  color: var(--cs-ink);
  /* il nome nella didascalia: un passo sopra la sua riga (16 px), molto sotto i titolini */
  font-size: clamp(1.1rem, 1.36vw, 1.22rem);
  font-weight: 780;
  letter-spacing: -0.022em;
  line-height: 1.25;
}
.cs-hand__list p {
  margin: 5px 0 0;
  max-width: 40ch;
  color: var(--cs-copy);
  font-size: var(--fs-body);
  line-height: 1.5;
  text-wrap: pretty;
}

/* «aperti» barrato: come le righe chiuse della lista in cima alla pagina */
.cs-hand__list s {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 58% / 100% 0.09em;
}
.reveal-ready .cs-hand__list .cs-in s {
  background-size: 0 0.09em;
  transition: background-size 0.7s var(--cs-ease) 0.55s;
}
.reveal-ready .cs-hand__list .cs-in.is-in s { background-size: 100% 0.09em; }

/* due colonne da 560 px, tre quando la figura e' abbastanza larga */
@media (min-width: 560px) {
  .cs-hand__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: clamp(24px, 2.8vw, 34px);
  }
}
@media (min-width: 900px) and (min-height: 620px) {
  .cs-hand__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- la nota finale ---------- */
.cs-hand__foot {
  margin: clamp(52px, 6vw, 84px) auto 0;
  max-width: 54ch;
  color: var(--cs-copy);
  font-size: var(--fs-lead);
  line-height: 1.55;
  text-align: center;
  text-wrap: balance;
}
.cs-hand__foot .cs-link { white-space: nowrap; }

/* telefono stretto: «quando andiamo via.» deve stare su una riga */
@media (max-width: 430px) {
  #cs-hand-title { font-size: 8.6vw; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-ready .cs-hand__list .cs-in s,
  .reveal-ready .cs-hand__list .cs-in.is-in s { background-size: 100% 0.09em; transition: none; }
}

/* ================= 80-contatto.css ================= */
/* =============================================================
   80 · IL PRIMO PASSO — «Hai una data? Partiamo da quella.»
   L'oggetto e' la data: otto spazi da riempire (giorno / mese / anno)
   grandi quanto un titolo, come sulla riga «data» di un verbale.
   Nessuna data vera, nessun calendario, nessun campo da applicazione:
   solo tratti sottili e due barre, e tutto il blocco e' un collegamento
   alla richiesta. I tratti si tracciano uno dopo l'altro con lo scroll
   (80-contatto.js); senza script sono gia' tracciati.
   ============================================================= */
.cs-date {
  padding-block: var(--cs-pad);
  background: var(--cs-mist);
}

/* ---------- la data da scrivere ---------- */
.cs-date__slot {
  /* misura unica: tutto il resto e' in em. 13.2vw fa stare gli otto spazi in 320 px */
  font-size: min(13.2vw, 9rem);
  margin: var(--cs-head-gap) auto 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  color: var(--cs-ink);
  line-height: 1;
  text-decoration: none;
}
.cs-date__slot:hover { color: var(--cs-accent-deep); text-decoration: none; }
.page-cs main .cs-date__slot:focus-visible { outline-offset: 14px; border-radius: 8px; }
.cs-date__part {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cs-date__blanks {
  display: flex;
  align-items: flex-end;
  gap: 0.14em;
  position: relative;
  top: 0.05em; /* i tratti stanno al piede delle due barre, come il trattino basso battuto a macchina */
  height: 1em;
}
.cs-date__blanks i {
  display: block;
  width: 0.56em;
  height: max(4px, 0.05em); /* un rigo su cui scrivere, non una casella */
  background: currentColor;
  transform-origin: 0 50%;
  transition: background-color 0.25s ease;
}
.cs-date__bar {
  display: block;
  height: 1em;
  margin: 0 0.075em 0 0.185em; /* la barra e' inclinata: al piede ha piu' aria a destra, si compensa */
  color: var(--cs-quiet);
  font-size: 1em;
  font-weight: 790;
  line-height: 1;
}
.cs-date__slot .cs-label {
  margin-top: clamp(18px, 2.1vw, 30px);
  /* la spaziatura larga lascia un vuoto a destra dell'ultima lettera: si compensa */
  padding-left: 0.16em;
}
/* armato dallo script: ogni tratto parte da zero e segue lo scroll */
.cs-date__slot.is-live .cs-date__blanks i {
  transform: scaleX(0);
  will-change: transform;
}

/* ---------- cosa ne facciamo, e il passo ---------- */
.cs-date .cs-date__lede {
  max-width: 50ch;
  margin-top: clamp(40px, 4.6vw, 64px);
  text-align: center;
}
.cs-date__act {
  margin-top: clamp(30px, 3.2vw, 44px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}

.cs-date__act .cs-note { font-size: 0.95rem; text-wrap: balance; }
.cs-date__help {
  max-width: 620px;
  margin: clamp(56px, 6.4vw, 92px) auto 0;
  color: var(--cs-copy);
  font-size: 0.95rem;
  line-height: 1.62;
  text-align: center;
  text-wrap: balance;
}
.cs-date__help b {
  display: block;
  margin-bottom: 4px;
  color: var(--cs-ink);
  font-size: var(--fs-body);
  font-weight: 700;
}
.cs-date__help .cs-link { white-space: nowrap; }

@media (max-width: 520px) {
  .cs-date__act { align-items: stretch; }
  .cs-date__act .button { width: 100%; justify-content: center; text-align: center; }
  /* le tre etichette restano nella voce di tutte le altre (stesso corpo, stessa spaziatura) */
  .cs-date__slot .cs-label { margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-date__slot.is-live .cs-date__blanks i { transform: none !important; }
}