/* Landing di Milano Service, direzione "Essenziale".
   Le scelte e il loro perche' stanno in ../DIREZIONE.md; i colori e le misure in token.css. */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.lenis { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--inchiostro);
  font-family: var(--font-testo);
  font-size: var(--fs-6);
  line-height: var(--lh-normale);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
::selection { background: var(--accento); color: var(--fondo-scheda); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.2em; }
p, ul, ol, figure, blockquote, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
:focus-visible { outline: var(--x-focus-sp) solid var(--inchiostro); outline-offset: var(--x-focus-off); }
.scuro :focus-visible { outline-color: var(--fondo); }
section, footer { scroll-margin-top: var(--x-altezza-testata); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.salta { position: absolute; left: -9999px; top: 0; z-index: 100; padding: var(--sp-1) var(--sp-2); background: var(--fondo); font-weight: 500; }
.salta:focus { left: var(--sp-2); top: var(--sp-1); }
.contenitore { max-width: var(--max-w); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }

/* i fondi: chiaro, grigio, nero, alternati lungo la pagina */
.fondo-grigio { background: var(--fondo-2); }
.scuro { background: var(--fondo-3); color: var(--x-su-scuro); }

/* il segno: il taglio obliquo in piccolo */
.segno { display: inline-block; flex: none; width: var(--x-segno); height: var(--x-segno-h); background: var(--accento); clip-path: var(--x-sagoma-segno); }

/* il segnaposto per il cliente: si toglie prima della pubblicazione */
.da-confermare { color: var(--da-confermare); font-family: var(--font-da-confermare); font-style: italic; font-weight: 400; letter-spacing: 0; white-space: nowrap; }
.scuro .da-confermare { color: #B9A2EE; }

/* ---------- titoli ---------- */
.titolo-1, .titolo-2 { font-family: var(--font-titolo); line-height: var(--lh-stretta); letter-spacing: var(--x-tracking-titolo); text-wrap: balance; }
.titolo-1 { font-size: var(--fs-1); font-weight: var(--peso-apertura); }
.titolo-2 { font-size: var(--fs-2); font-weight: var(--peso-titolo); max-width: 16ch; }
.con-filetto { position: relative; padding-bottom: var(--x-filetto-spazio); }
.con-filetto::after { content: ""; position: absolute; left: 0; bottom: 0; width: var(--x-filetto-titolo-l); height: var(--x-filetto-titolo); background: var(--accento); transform-origin: 0 50%; }
.lead { font-size: var(--fs-5); color: var(--inchiostro-tenue); max-width: var(--misura); }
.scuro .lead { color: var(--x-su-scuro-tenue); }
.testa-sezione { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }

/* ---------- pulsanti e collegamenti ---------- */
.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1);
  min-height: var(--x-btn-h);
  padding: 0 calc(var(--x-btn-pad) + var(--x-taglio-s) / 2) 0 var(--x-btn-pad);
  border: 0; background: transparent; color: var(--fondo-scheda);
  font: var(--peso-etichetta) var(--fs-7)/1 var(--font-etichetta);
  letter-spacing: var(--x-tracking-btn); text-transform: uppercase; text-decoration: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.btn::before, .btn::after { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: var(--x-sagoma-btn); }
.btn::before { background: var(--accento); }
.btn::after { background: var(--accento-2); opacity: 0; transition: opacity var(--dur-1) linear; }
.btn:hover::after, .btn:active::after { opacity: 1; }
.btn:active { transform: translateY(var(--x-premuto)); }
.btn .freccia { width: var(--x-icona-freccia); height: var(--x-icona-freccia); flex: none; transition: transform var(--dur-2) var(--curva-uscita); }
.btn:hover .freccia { transform: translateX(var(--x-sposta-freccia)); }
.btn-s { min-height: var(--x-btn-h-s); padding: 0 calc(var(--x-btn-pad-s) + var(--x-taglio-s) / 2) 0 var(--x-btn-pad-s); }
.btn[disabled] { cursor: progress; opacity: .75; }
.link-sec { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--x-btn-h-s); font: 500 var(--fs-7)/1.2 var(--font-testo); text-decoration: none; justify-self: start; }
.link-sec span { border-bottom: var(--filetto-sp) solid currentColor; padding-bottom: var(--x-sp-mini); transition: border-color var(--dur-1) linear; }
.link-sec svg { width: var(--x-icona); height: var(--x-icona); flex: none; transition: transform var(--dur-2) var(--curva-uscita); }
.link-sec:hover span { border-bottom-color: var(--accento); }
.link-sec:hover svg { transform: translateX(var(--x-sposta-freccia)); }

/* ---------- testata ---------- */
.testata { position: sticky; top: 0; z-index: 60; background: var(--fondo); border-bottom: var(--filetto-sp) solid transparent; }
.testata-in { height: var(--x-altezza-testata); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.logo { display: inline-flex; align-items: center; min-height: var(--x-btn-h-s); color: var(--accento); }
.logo svg { height: var(--x-logo-h); width: auto; display: block; aspect-ratio: 3200 / 374; }
.testata .btn-lungo { display: none; }

/* ---------- ritagli ---------- */
.ritaglio { position: relative; overflow: clip; background: var(--fondo-2); clip-path: var(--x-sagoma-alto-sx); }
.fondo-grigio .ritaglio { background: var(--fondo); }
.ritaglio--basso-dx { clip-path: var(--x-sagoma-basso-dx); }
.ritaglio picture { display: contents; }
.ritaglio img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 01 apertura ---------- */
.apertura { position: relative; isolation: isolate; padding-top: var(--sp-4); padding-bottom: var(--sp-5); }
/* La trama di punti, come su ACT e T&T: si vede sui bordi e sparisce sotto il testo e la foto
   (scelta di Pasquale, 2026-11-04, fra pianta, tagli e punti). */
.apertura::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, #CBCAC5 1.2px, transparent 1.8px); background-size: 22px 22px;
  --punti-maschera: radial-gradient(ellipse 75% 20% at 100% 0%, #000 10%, transparent 70%), radial-gradient(ellipse 85% 16% at 0% 100%, #000 10%, transparent 70%);
  -webkit-mask-image: var(--punti-maschera); mask-image: var(--punti-maschera); }
/* sul computer il testo e la foto stanno al centro: i punti restano sui quattro bordi */
@media (min-width: 1100px) { .apertura::before { --punti-maschera: radial-gradient(ellipse 58% 62% at 50% 46%, transparent 38%, #000 100%); } }
/* La stessa trama su alcune sezioni bianche (Pasquale, 2026-11-05): piu' tenue che nell'apertura,
   con una maschera centrale ampia, cosi' i punti restano nelle fasce vuote e non finiscono sotto il testo. */
.con-punti { position: relative; isolation: isolate; }
.con-punti::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .6;
  background-image: radial-gradient(circle, #CBCAC5 1.2px, transparent 1.8px); background-size: 22px 22px;
  --punti-maschera: radial-gradient(ellipse 80% 5.5rem at 100% 0%, #000 10%, transparent 75%), radial-gradient(ellipse 80% 5.5rem at 0% 100%, #000 10%, transparent 75%);
  -webkit-mask-image: var(--punti-maschera); mask-image: var(--punti-maschera); }
@media (min-width: 1100px) { .con-punti::before { --punti-maschera: radial-gradient(ellipse 72% 84% at 50% 50%, transparent 80%, #000 92%); } }
.apertura-griglia { display: grid; gap: var(--sp-4); }
.apertura-foto .ritaglio { height: var(--x-foto-apertura-h); }
.apertura-foto .ritaglio img { object-position: 50% 62%; }
.apertura-testo { display: grid; gap: var(--sp-3); align-content: start; }
.domanda { display: flex; align-items: baseline; gap: 0.6em; font: var(--peso-etichetta) var(--fs-5)/1.3 var(--font-titolo); letter-spacing: -0.01em; }
.domanda .segno { transform: translateY(0.05em); }
.apertura .titolo-1 { max-width: 12ch; }
.apertura .lead { max-width: 60ch; }
.azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }

/* il regalo dei 15 giorni: accanto al pulsante, perche' e' il motivo per premerlo */
.regalo { display: inline-flex; align-items: center; gap: 0.6em; padding: 0.55rem 0.9rem 0.55rem 0.75rem; background: var(--fondo-scheda); border: var(--filetto-sp) solid color-mix(in srgb, var(--accento) 28%, transparent); font: 500 var(--fs-7)/1.25 var(--font-testo); }
.regalo svg { width: 1.35rem; height: 1.35rem; flex: none; color: var(--accento); }
.regalo strong { font-family: var(--font-titolo); font-weight: var(--peso-apertura); }

/* il riquadro delle recensioni, fatto come quelli di Google: nome, stelle, testo.
   Le voci stanno tutte nella stessa cella, cosi' l'altezza e' quella della piu' lunga e non salta. */
.google { max-width: 27rem; background: var(--fondo-scheda); border-radius: 8px; box-shadow: 0 1px 2px rgb(60 64 67 / .18), 0 2px 8px rgb(60 64 67 / .1); padding: 0.95rem 1.1rem 0.6rem; font-family: var(--font-testo); }
.google__voci { display: grid; }
.google__voce { grid-area: 1 / 1; margin: 0; visibility: hidden; opacity: 0; }
.google__voce.attiva { visibility: visible; opacity: 1; }
.google__chi { display: flex; align-items: center; gap: 0.6rem; font-size: var(--fs-7); font-weight: 500; color: #202124; }
.google__iniziale { display: grid; place-items: center; width: 1.85rem; height: 1.85rem; border-radius: 50%; background: var(--c); color: #fff; font-size: 0.85rem; font-weight: 500; }
.google__stelle { display: flex; gap: 1px; margin: 0.45rem 0 0.35rem; color: #FBBC04; }
.google__stelle svg { width: 0.9rem; height: 0.9rem; }
.google__testo { font-size: var(--fs-7); line-height: 1.5; color: #3C4043; }
.google__piede { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-1); margin-top: 0.4rem; padding-top: 0.4rem; border-top: 1px solid #E8EAED; font-size: var(--fs-8); color: #5F6368; }
.google__frecce { display: flex; gap: 0.15rem; }
.google__freccia { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; background: none; color: #5F6368; cursor: pointer; }
.google__freccia:hover { background: #F1F3F4; color: #202124; }
.google__freccia svg { width: 0.95rem; height: 0.95rem; }

/* la fascia nera dei vantaggi, subito sotto l'apertura */
.fascia { padding-top: var(--sp-4); padding-bottom: var(--sp-4); }
.fascia-griglia { display: grid; gap: var(--sp-3); }
.fascia__voce { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: start; }
.fascia__voce svg { width: 1.9rem; height: 1.9rem; color: #FF4B4B; }
.fascia__titolo { font: var(--peso-titolo) var(--fs-5)/1.25 var(--font-titolo); letter-spacing: -0.01em; color: var(--x-su-scuro); }
.fascia__riga { margin-top: 0.3rem; font-size: var(--fs-7); line-height: 1.5; color: var(--x-su-scuro-tenue); max-width: 34ch; }


/* ---------- sezioni: il ritmo verticale ---------- */
.problema, .recensioni, .servizi, .lavoro, .deposito, .preventivo, .domande, .altre, .chi { padding-top: var(--sp-6); padding-bottom: var(--sp-6); }

/* ---------- 02 il problema ---------- */
.problema-griglia { display: grid; gap: var(--sp-4); }
.problema-punti { display: grid; gap: var(--sp-4) var(--x-gutter); }
.punto { position: relative; padding-top: var(--sp-3); border-top: var(--filetto-sp) solid var(--filo); max-width: var(--misura); color: var(--inchiostro-tenue); }
.punto::before { content: ""; position: absolute; left: 0; top: calc(-1 * var(--x-filetto-riga) / 2); width: 2.5rem; height: var(--x-filetto-riga); background: var(--accento); transform-origin: 0 50%; }
.punto strong { display: block; margin-bottom: var(--x-sp-mini); color: var(--inchiostro); font: var(--peso-titolo) var(--fs-4)/var(--x-lh-media) var(--font-titolo); letter-spacing: -0.02em; }
/* la frase che porta dai problemi alla soluzione: centrata, piu' piccola di un titolo, col segno del marchio sulle parole che contano (Pasquale, 2026-11-05) */
.problema-chiusura { font: var(--peso-titolo) var(--fs-3)/1.3 var(--font-titolo); letter-spacing: -0.025em; text-align: center; text-wrap: balance; padding-top: var(--sp-3); }
/* il blocco rosso sulle parole che contano: due copie dello stesso testo, una sopra l'altra. Sotto il testo nero; sopra il blocco rosso col testo
   bianco, che lo scorrimento scopre da sinistra, cosi' ogni lettera diventa bianca nel momento esatto in cui il rosso la raggiunge (Pasquale, 2026-11-05).
   Senza movimento si vede subito il blocco intero. La copia sopra e' nascosta ai lettori di schermo. */
.segnato { position: relative; display: inline-block; padding: .08em .5em .1em .35em; background: none; color: inherit; white-space: nowrap; }
.segnato::after { content: attr(data-t); content: attr(data-t) / ""; position: absolute; inset: 0; padding: inherit; background: var(--accento); color: var(--fondo-scheda); white-space: nowrap; clip-path: polygon(0 0, 100% 0, 100% 62%, calc(100% - .4em) 100%, 0 100%); }

/* ---------- 03 e 11 recensioni ---------- */
.recensioni-griglia { display: grid; gap: var(--x-gutter); }
.recensione { display: grid; align-content: start; gap: var(--sp-2); padding: var(--x-scheda-pad); background: var(--fondo-scheda); clip-path: var(--x-sagoma-scheda); }
.recensione__testa { display: flex; align-items: center; gap: var(--sp-2); }
.iniziale { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--fondo-2); font: var(--peso-titolo) var(--fs-5)/1 var(--font-titolo); color: var(--inchiostro); }
.recensione__chi { font: var(--peso-titolo) var(--fs-6)/1.25 var(--font-titolo); color: var(--inchiostro); }
.stelle { display: flex; align-items: center; gap: 2px; margin-top: 2px; color: var(--accento); }
.stelle svg { width: 0.95rem; height: 0.95rem; }
.stelle span { margin-left: 0.45em; font-size: var(--fs-8); color: var(--inchiostro-tenue); }
.recensione__testo { white-space: pre-line; color: var(--inchiostro); }
.recensione__testo.chiusa { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
.leggi-tutta { justify-self: start; padding: 0; border: 0; background: none; color: inherit; font: 500 var(--fs-7)/1.2 var(--font-testo); border-bottom: var(--filetto-sp) solid currentColor; cursor: pointer; min-height: 1.5rem; }
.leggi-tutta:hover { border-bottom-color: var(--accento); }
.scuro .recensione { background: var(--fondo-3b); }
.scuro .recensione__chi, .scuro .recensione__testo { color: var(--x-su-scuro); }
.scuro .iniziale { background: var(--fondo-3); color: var(--x-su-scuro); }
.scuro .stelle { color: #FF4B4B; }
.scuro .stelle span { color: var(--x-su-scuro-tenue); }

/* ---------- 03 servizi: la foto ferma cambia col servizio attivo (Pasquale, 2026-11-05) ---------- */
.servizi-testa { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.servizi-corpo { display: grid; gap: var(--sp-4); }
.servizi-pila { position: relative; height: var(--x-foto-servizi-h); }
.scatto { position: absolute; inset: 0; }
.scatto:not(:first-child) { display: none; }
.scatto__num { position: absolute; left: 0; bottom: 0; padding: .3rem .6rem; background: var(--fondo); color: var(--accento); font: var(--peso-apertura) var(--fs-7)/1 var(--font-titolo); font-variant-numeric: tabular-nums; }
.servizi-elenco { border-top: var(--filetto-sp) solid var(--filo); }
.servizio { position: relative; isolation: isolate; display: grid; grid-template-columns: var(--x-col-num) minmax(0, 1fr); column-gap: var(--sp-2); row-gap: var(--x-sp-mini); padding: var(--sp-3) var(--sp-2); border-bottom: var(--filetto-sp) solid var(--filo); }
.servizio .num { grid-row: 1 / 3; font: var(--peso-apertura) var(--fs-4)/1.1 var(--font-titolo); color: var(--accento); font-variant-numeric: tabular-nums; }
.servizio .nome { font: var(--peso-titolo) var(--fs-4)/var(--x-lh-media) var(--font-titolo); letter-spacing: -0.02em; }
.servizio .desc { grid-column: 2; color: var(--inchiostro-tenue); font-size: var(--fs-7); max-width: 46ch; }
.servizi-azione { margin-top: var(--sp-1); }

/* ---------- 05 come funziona: le schede impilate ---------- */
.passi { --h: min(72vh, 36rem); --g: 22vh; --off: 1.1rem; --barra: 4.5rem; --sopra: calc(var(--x-altezza-testata) + (100vh - var(--x-altezza-testata) - var(--barra) - var(--h)) / 2); padding-top: var(--sp-6); padding-bottom: var(--sp-5); }
.passi-griglia { display: grid; gap: var(--sp-4); align-items: stretch; }
/* Le schede si fermano a meta' della parte visibile. Lo spazio fra una scheda e l'altra e' il margine sopra la successiva e quello
   finale e' un elemento vero: un elemento appiccicoso non esce dal contenuto del contenitore, e il padding o un margine sotto non contano. */
.pila { display: block; view-timeline: --pila block; }
.pila::after { content: ""; display: block; height: calc(var(--g) * 1.3); }
.scheda { --T: calc(var(--sopra) + (var(--i) - 1.5) * var(--off)); --S: calc(100vh + var(--i) * (var(--h) + var(--g)) - var(--T)); --p0: calc(var(--S) - var(--h) * .35); --p1: calc(var(--S) + var(--g) * .8); position: sticky; top: var(--T); height: var(--h); }
.scheda + .scheda { margin-top: var(--g); }
.scheda__in { display: flex; flex-direction: column; height: 100%; background: var(--fondo-2); color: var(--inchiostro); clip-path: var(--x-sagoma-scheda); transform-origin: 50% 0; }
.scheda__testo { padding: var(--sp-3) var(--sp-3) 0; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-2); row-gap: var(--sp-1); align-content: start; }
.scheda__num { grid-row: 1 / 3; font: var(--peso-apertura) var(--fs-2)/.9 var(--font-titolo); color: var(--accento); font-variant-numeric: tabular-nums; }
.scheda__testo h3 { font: var(--peso-titolo) var(--fs-4)/var(--x-lh-media) var(--font-titolo); letter-spacing: -0.02em; }
.scheda__testo p { grid-column: 2; color: var(--inchiostro-tenue); font-size: var(--fs-7); line-height: 1.5; max-width: 40ch; }
.scheda .da-confermare { color: #6B3FC4; }
.scheda__grafica { flex: 1; min-height: 0; padding: var(--sp-2); display: flex; align-items: center; justify-content: center; }
/* le grafiche dei quattro passi: disegnate in SVG, il loro stato fermo e' quello finale */
.g { width: 100%; height: 100%; }
.g text { font-family: var(--font-testo); }
.carta { fill: #fff; stroke: #141414; stroke-width: 1.5; }
.et { font-size: 11px; fill: #5E5E5E; } .campo { fill: #F3F3F2; stroke: #CBCAC5; } .val { font-size: 15px; font-weight: 500; fill: #141414; }
.ross { fill: var(--accento); } .nero { fill: #141414; } .bt { font: 600 13px var(--font-etichetta); letter-spacing: .08em; fill: #fff; }
.g .tit { font: 600 22px var(--font-titolo); fill: #141414; letter-spacing: -.02em; } .filo { stroke: #CBCAC5; stroke-dasharray: 2 4; }
.arco { fill: none; stroke: var(--accento); stroke-width: 5; stroke-linecap: round; } .spunta { fill: none; stroke: var(--accento); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; } .sp-b { stroke: #fff; }
.timbro rect { fill: #fff; stroke: var(--accento); stroke-width: 3; } .g .tb1 { font: 700 24px var(--font-titolo); fill: var(--accento); letter-spacing: .04em; } .tb2 { font-size: 12px; fill: var(--accento); }
.casa polygon { fill: #fff; stroke: #141414; stroke-width: 1.5; } .str { stroke: #CBCAC5; stroke-width: 3; } .str-r { stroke: var(--accento); stroke-width: 4; }
.g .tb3 { font: 700 13px var(--font-titolo); fill: var(--accento); }
.cam { transform: translate(242px, 182px); }

/* ---------- 06 galleria ---------- */
.lavoro .titolo-2 { margin-bottom: var(--sp-4); max-width: 18ch; }
/* il mosaico: fino a tre foto per riga, angoli arrotondati, nessuna didascalia e nessun taglio obliquo (Pasquale, 2026-11-05).
   Tre misure di tessera, che si incastrano e chiudono i bordi. Le foto oltre la prima parte si vedono col pulsante, come su T&T e ACT. */
.mosaico { --riga: 8rem; --spazio: 0.5rem; position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: var(--riga); grid-auto-flow: dense; gap: var(--spazio); }
.tessera { position: relative; overflow: clip; border-radius: var(--x-raggio-foto); background: var(--fondo-2); }
.tessera img, .tessera video { display: block; width: 100%; height: 100%; object-fit: cover; }
.tessera--grande { grid-column: span 2; grid-row: span 2; }
.tessera--alta { grid-row: span 2; }
/* clip e non hidden: hidden fa del mosaico un contenitore che scorre, e le foto misurerebbero la loro entrata li' dentro */
.mosaico.chiuso { max-height: calc(var(--riga) * 3.6 + var(--spazio) * 3); overflow: clip; }
.mosaico.chiuso::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--riga) * 1.1); background: linear-gradient(to bottom, color-mix(in srgb, var(--fondo) 0%, transparent), var(--fondo)); pointer-events: none; }
.lavoro__piede { display: flex; justify-content: center; margin-top: var(--sp-3); }
.lavoro__piede .btn[hidden] { display: none; }
.btn--scuro::before { background: var(--inchiostro); }
.btn--scuro::after { background: #3A3A38; }

/* ---------- 07 la frase ---------- */
.frase { padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
.motto { display: grid; gap: var(--sp-3); view-timeline: --frase block; }
.motto blockquote p { font: var(--peso-titolo) var(--fs-2)/1.08 var(--font-titolo); letter-spacing: var(--x-tracking-titolo); color: var(--inchiostro); text-wrap: balance; max-width: 18ch; }
/* i due tocchi di colore: la sottolineatura rossa e "Anche noi." in rosso (Pasquale, 2026-11-05) */
.sott { white-space: nowrap; background: linear-gradient(var(--accento), var(--accento)) no-repeat 0 96% / 100% .1em; padding-bottom: .05em; }
.motto .rosso { color: var(--accento); }
.motto figcaption { display: flex; align-items: center; gap: var(--sp-1); font: var(--peso-etichetta) var(--fs-7)/1 var(--font-etichetta); letter-spacing: var(--tracking-etichetta); text-transform: uppercase; }

/* ---------- 08 deposito ---------- */
.deposito-griglia { display: grid; gap: var(--sp-4); align-items: center; }
.deposito-foto .ritaglio { aspect-ratio: 16 / 10; }
.deposito-testo { display: grid; gap: var(--sp-3); }
.deposito .titolo-2 { max-width: 15ch; }
/* il bollino del regalo sulla foto: fra le due foto e il testo e' l'unica cosa che si muove (Pasquale, 2026-11-05) */
.deposito { overflow-x: clip; }
.deposito-foto { position: relative; }
.bollo { position: absolute; right: -0.5rem; top: -1.25rem; width: clamp(7.5rem, min(13vw, 22vh), 11.5rem); aspect-ratio: 1; display: grid; place-content: center; justify-items: center; gap: .1rem; background: var(--accento); color: #fff; rotate: 7deg; clip-path: polygon(0 0, 100% 0, 100% 78%, 78% 100%, 0 100%); text-align: center; font: var(--peso-titolo) var(--fs-7)/1.15 var(--font-titolo); }
.bollo svg { width: 1.7rem; height: 1.7rem; }
.bollo b { font: var(--peso-apertura) clamp(2.2rem, min(4vw, 7vh), 3.6rem)/1 var(--font-titolo); letter-spacing: -0.04em; }

/* ---------- 09 modulo ---------- */
.preventivo-griglia { display: grid; gap: var(--sp-4); }
.preventivo-testa { display: grid; gap: var(--sp-4); }
.preventivo-testa__testi { display: grid; gap: var(--sp-2); }
.foglio { display: none; }
.modulo { display: grid; gap: var(--x-modulo-gap); padding: var(--x-modulo-pad); background: var(--fondo-scheda); clip-path: var(--x-sagoma-scheda); }
.gruppo { display: grid; gap: var(--x-modulo-gap); min-width: 0; }
.modulo > .gruppo:first-of-type { padding-bottom: var(--x-modulo-gap); border-bottom: var(--filetto-sp) solid var(--filo); }
.gruppo__titolo { padding: 0; margin-bottom: var(--x-modulo-gap); font: var(--peso-titolo) var(--fs-4)/1.2 var(--font-titolo); letter-spacing: -0.015em; }
.campi-viaggio { display: grid; gap: var(--x-modulo-gap); }
.campo { display: grid; gap: var(--x-modulo-label); align-content: start; }
.campo label, .scelte legend { font: var(--peso-etichetta) var(--fs-7)/1.3 var(--font-etichetta); color: var(--inchiostro); padding: 0; }
.scelte legend { margin-bottom: var(--x-modulo-label); }
.facoltativo { color: var(--inchiostro-tenue); font-weight: 500; }
.campo input, .campo textarea {
  width: 100%; min-height: var(--x-modulo-campo-h); padding: 0 var(--sp-2);
  border: var(--filetto-sp) solid var(--x-bordo-campo); border-radius: 0; background: var(--fondo-scheda); color: var(--inchiostro);
  font: 400 var(--x-fs-campo)/1.3 var(--font-testo);
  transition: border-color var(--dur-1) linear;
}
.campo textarea { display: block; height: var(--x-modulo-area-h); min-height: var(--x-modulo-area-h); padding: 0.6rem var(--sp-2); resize: vertical; }
.campo textarea::placeholder { color: var(--inchiostro-tenue); }
.campo input:hover, .campo textarea:hover { border-color: var(--x-bordo-campo-hover); }
.campo input:focus-visible, .campo textarea:focus-visible { outline: var(--x-focus-sp) solid var(--inchiostro); outline-offset: 0; border-color: var(--inchiostro); }
.campo input[type="date"] { appearance: none; -webkit-appearance: none; }
.nota { color: var(--inchiostro-tenue); font-size: var(--fs-8); }
.nota-data { margin-top: calc(var(--x-modulo-gap) * -0.55); }
.errore { color: var(--accento-2); font: 500 var(--fs-8)/1.3 var(--font-testo); }
[aria-invalid="true"] { border-color: var(--accento-2) !important; }
.riga-cosa { display: grid; gap: var(--x-modulo-gap); }
.scelte { display: grid; min-width: 0; }
.scelte-riga { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-1); }
.scelte-riga--cosa { grid-template-columns: minmax(0, 1fr); }
/* La domanda dopo "Cosa devi traslocare?" compare col solo CSS, quindi funziona anche senza script */
.dopo { display: none; }
.riga-cosa:has(input[name="cosa"][value="casa"]:checked) .dopo[data-per="casa"],
.riga-cosa:has(input[name="cosa"][value="stanze"]:checked) .dopo[data-per="stanze"] { display: grid; }
.riga-cosa:has(input[name="cosa"][value="oggetti"]:checked) .dopo[data-per="oggetti"] { display: block; }
.scelta { position: relative; display: flex; align-items: center; gap: var(--sp-1); min-height: var(--x-modulo-scelta-h); padding: 0.3rem 0.75rem; border: var(--filetto-sp) solid var(--x-bordo-campo); cursor: pointer; font: 500 var(--fs-7)/1.15 var(--font-testo); transition: border-color var(--dur-1) linear, background-color var(--dur-1) linear; }
.scelta input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.scelta:hover { border-color: var(--x-bordo-campo-hover); }
.scelta:has(input:checked) { border-color: var(--inchiostro); background: var(--x-velo-scelta); box-shadow: inset 0 0 0 1px var(--inchiostro); }
.scelta:has(input:focus-visible) { outline: var(--x-focus-sp) solid var(--inchiostro); outline-offset: var(--x-focus-off); }
.scelta--extra { border-style: dashed; }
.scelta--extra:has(input:checked) { border-style: solid; }
.scelta--extra svg { position: absolute; top: 4px; right: 4px; width: 0.75rem; height: 0.75rem; flex: none; color: var(--accento); opacity: 0; transform: scale(.6); transition: opacity var(--dur-1) linear, transform var(--dur-2) var(--curva-uscita); }
.scelta--extra:has(input:checked) svg { opacity: 1; transform: none; }
.riga-invio { display: grid; gap: var(--x-modulo-gap); }
.riga-invio__consenso { display: grid; gap: var(--x-modulo-label); }
.consenso { display: flex; gap: var(--sp-1); align-items: flex-start; font-size: var(--fs-8); line-height: 1.35; color: var(--inchiostro-tenue); cursor: pointer; }
.consenso input { width: 1.15rem; height: 1.15rem; margin: 0.15rem 0 0; accent-color: var(--accento); flex: none; }
.consenso a { color: var(--inchiostro); }
.btn-invia { justify-self: stretch; justify-content: center; }
.esito { font-weight: 500; }
.esito.male { color: var(--accento-2); }
.trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- 10 domande ---------- */
.domande-griglia { display: grid; gap: var(--sp-4); }
.domande-elenco { border-top: var(--filetto-sp) solid var(--filo); }
.domanda-faq { border-bottom: var(--filetto-sp) solid var(--filo); }
.domanda-faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 4rem; padding: var(--sp-2) 0; cursor: pointer; list-style: none; font: var(--peso-titolo) var(--fs-4)/var(--x-lh-media) var(--font-titolo); letter-spacing: -0.02em; }
.domanda-faq summary::-webkit-details-marker { display: none; }
.domanda-faq summary svg { width: 1.1rem; height: 1.1rem; flex: none; color: var(--accento); transition: rotate var(--dur-2) var(--curva-uscita); }
.domanda-faq[open] summary svg { rotate: 45deg; }
.domanda-faq p { padding: 0 0 var(--sp-3); color: var(--inchiostro-tenue); max-width: 60ch; }

/* ---------- 12 chi siamo ---------- */
.chi-griglia { display: grid; gap: var(--sp-4); align-items: center; }
.chi-testo { display: grid; gap: var(--sp-2); }
.chi-testo .titolo-2 { margin-bottom: var(--sp-1); }
.chi-testo p { color: var(--inchiostro-tenue); max-width: var(--misura); font-size: var(--fs-5); }
.chi-foto .ritaglio { aspect-ratio: 3 / 2; }

/* ---------- chiusura e piede ---------- */
.chiusura { display: grid; gap: var(--sp-3); justify-items: start; padding-top: var(--sp-6); padding-bottom: var(--sp-5); border-bottom: var(--filetto-sp) solid var(--x-filo-scuro); }
.piede-griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-3); padding-top: var(--sp-5); padding-bottom: var(--sp-4); font-size: var(--fs-7); color: var(--x-su-scuro-tenue); }
.piede-marchio { grid-column: 1 / -1; display: grid; gap: var(--sp-2); }
.piede-logo { width: 13rem; height: auto; aspect-ratio: 3200 / 374; color: var(--x-su-scuro); }
.piede-etichetta { margin-bottom: var(--x-sp-mini); font: var(--peso-etichetta) var(--fs-8)/1.3 var(--font-etichetta); letter-spacing: var(--tracking-etichetta); text-transform: uppercase; color: var(--x-su-scuro); }
.piede-fondo { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: space-between; padding-top: var(--sp-2); padding-bottom: calc(var(--sp-3) + var(--x-barra-h)); font-size: var(--fs-8); color: var(--x-su-scuro-tenue); border-top: var(--filetto-sp) solid var(--x-filo-scuro); }

/* ---------- barra fissa sul telefono ---------- */
.barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; justify-content: center; padding: var(--sp-1) var(--pad-x) calc(var(--sp-1) + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--fondo) 94%, transparent); border-top: var(--filetto-sp) solid var(--filo); transform: translateY(110%); visibility: hidden; transition: transform var(--dur-3) var(--curva-uscita), visibility 0s linear var(--dur-3); }
.barra .btn { width: 100%; max-width: 26rem; }
.barra.vista { transform: none; visibility: visible; transition: transform var(--dur-3) var(--curva-uscita), visibility 0s; }

/* ---------- telefono largo e tablet ---------- */
@media (min-width: 700px) {
  .fascia-griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .problema-punti { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recensioni-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mosaico { --riga: 11rem; --spazio: 0.75rem; }
  .campi-viaggio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nota-data { grid-column: 1 / -1; text-align: right; }
  .scelte-riga { display: flex; flex-wrap: wrap; }
  .scelte-riga--cosa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .scelte-riga--extra .scelta { flex: 1 1 auto; padding-left: 0.65rem; padding-right: 0.65rem; }
  .riga-invio { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--sp-4); }
  .btn-invia { justify-self: end; }
  .piede-griglia { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .piede-marchio { grid-column: auto; }
}

/* ---------- computer: la composizione cambia davvero ---------- */
@media (min-width: 1100px) {
  .testata .btn-corto { display: none; }
  .testata .btn-lungo { display: inline-flex; }
  .barra { display: none; }
  .piede-fondo { padding-bottom: var(--sp-3); }
  .griglia { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--x-gutter); }
  .testa-sezione { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .testa-sezione .link-sec { margin-bottom: var(--x-filetto-spazio); }

  .apertura { padding-top: var(--sp-5); padding-bottom: var(--sp-5); }
  .apertura-griglia { align-items: center; }
  .apertura-testo { grid-column: 1 / 7; grid-row: 1; gap: var(--sp-3); }
  .apertura-foto { grid-column: 7 / -1; grid-row: 1; }
  .apertura-foto .ritaglio img { object-position: 26% 60%; }
  .apertura .titolo-1 { max-width: none; font-size: clamp(3rem, 1.4rem + 3.3vw, 4.6rem); white-space: nowrap; }
  .apertura .a-capo { display: block; }
  .fascia-griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--x-gutter); }
  .fascia__voce + .fascia__voce { border-left: 1px solid rgb(255 255 255 / .14); padding-left: var(--x-gutter); }

  .problema-griglia { row-gap: var(--sp-5); }
  .problema-griglia > .titolo-2 { grid-column: 1 / 6; grid-row: 1; align-self: start; }
  .problema-punti { grid-column: 6 / -1; grid-row: 1; }
  .problema-chiusura { grid-column: 1 / -1; grid-row: 2; font-size: clamp(1.6rem, min(2.5vw, 3.7vh), 3rem); }

  .recensioni-griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* servizi: titolo e sottotitolo in testa; la foto resta ferma al centro della parte visibile, accanto alla riga attiva */
  .servizi-testa { align-items: end; }
  .servizi-testa .titolo-2 { grid-column: 1 / 7; }
  .servizi-testa .lead { grid-column: 7 / -1; }
  .servizi-corpo { --foto-h: min(56vh, 36rem); --coda: calc(var(--sp-6) - 1.5rem); row-gap: var(--sp-4); align-items: start; grid-template-rows: auto auto var(--coda); margin-bottom: calc(-1 * var(--coda)); }
  .servizi-foto { grid-column: 1 / 7; grid-row: 1 / 4; }
  .servizi-pila { height: var(--foto-h); }
  .servizi-elenco { grid-column: 7 / -1; grid-row: 1; }
  .servizi-azione { grid-column: 7 / -1; grid-row: 2; margin: 0; }
  .servizio { padding-block: clamp(1.4rem, 3.2vh, 2.6rem); }
  .servizio .nome { font-size: var(--fs-3); }
  .servizio .desc { font-size: var(--fs-6); }

  /* come funziona: titolo fermo a sinistra, schede che si impilano a destra */
  /* come funziona: il titolo resta fermo al centro, le schede si impilano al centro accanto */
  .passi { --h: min(56vh, 29rem); --barra: 0px; --off: 1.4rem; }
  .passi-testa { grid-column: 1 / 5; position: sticky; top: var(--x-altezza-testata); height: calc(100vh - var(--x-altezza-testata)); display: flex; align-items: center; align-self: start; margin-bottom: calc(var(--sopra) + 1.5 * var(--off) + var(--h) - 100vh); }
  .pila { grid-column: 5 / -1; }
  .scheda__in { flex-direction: row; }
  .scheda__testo { width: 46%; flex: none; grid-template-columns: minmax(0, 1fr); align-content: center; row-gap: var(--sp-2); padding: var(--sp-4) 0 var(--sp-4) var(--sp-4); }
  .scheda__num { grid-row: auto; }
  .scheda__testo p { grid-column: 1; font-size: var(--fs-6); }
  .scheda__testo h3 { font-size: var(--fs-3); line-height: 1.1; }
  .scheda__grafica { padding: var(--sp-3); }

  .mosaico { --riga: clamp(11rem, 28vh, 17rem); --spazio: var(--x-gutter); grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .motto { margin-left: calc((100% + var(--x-gutter)) / 12); }

  .deposito-foto { grid-column: 1 / 7; }
  .bollo { right: -2.25rem; }
  .deposito-testo { grid-column: 8 / -1; }

  .preventivo { padding-top: var(--sp-5); padding-bottom: var(--sp-5); }
  /* Arrivando dai pulsanti, la scheda si ferma 1rem sotto la testata */
  section#preventivo { scroll-margin-top: calc(var(--x-altezza-testata) - var(--sp-5) + 1rem); }
  .preventivo-griglia { grid-template-columns: minmax(0, 1fr) min(48.5rem, 70%); column-gap: var(--x-gutter); align-items: start; }
  .preventivo-testa { align-content: start; }
  /* Il foglio che si compila: solo sul computer, sta fermo sotto il sottotitolo e non si sposta mentre il modulo si apre */
  .foglio { display: grid; gap: var(--x-modulo-gap); padding: var(--x-modulo-pad); background: var(--fondo-scheda); clip-path: var(--x-sagoma-scheda); }
  .foglio__titolo { font: var(--peso-etichetta) var(--fs-8)/1.3 var(--font-etichetta); letter-spacing: var(--tracking-etichetta); text-transform: uppercase; color: var(--inchiostro-tenue); }
  .foglio__rotta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); font: var(--peso-titolo) var(--fs-4)/1.2 var(--font-titolo); color: var(--x-foglio-vuoto); overflow-wrap: anywhere; }
  .foglio__rotta .pieno { color: var(--inchiostro); }
  .foglio__punto { width: 0.6rem; height: 0.6rem; flex: none; border: var(--x-focus-sp) solid var(--accento); border-radius: 50%; }
  .foglio__punto--pieno { background: var(--accento); }
  .foglio__linea { flex: 1 1 1.5rem; min-width: 1.5rem; height: var(--x-focus-sp); background: var(--filo); }
  .foglio__righe { display: grid; margin: 0; }
  .foglio__righe > div { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--sp-1); min-height: 2.4rem; padding: 0.6rem 0; border-top: var(--filetto-sp) solid var(--filo); font-size: var(--fs-7); }
  .foglio__righe dt { color: var(--inchiostro-tenue); }
  .foglio__righe dd { margin: 0; font-weight: 500; }
  .foglio__righe dd:empty::after { content: ""; display: block; width: 55%; height: 0.55rem; margin-top: 0.3rem; background: var(--fondo-2); }
  .foglio__timbro { justify-self: start; padding: 0.3rem 0.6rem; border: var(--x-focus-sp) solid var(--accento); color: var(--accento); font: var(--peso-etichetta) var(--fs-8)/1.2 var(--font-etichetta); letter-spacing: 0.08em; text-transform: uppercase; rotate: -3deg; opacity: 0; }
  .foglio-pronto .foglio__timbro { opacity: 1; }

  .domande-griglia > .titolo-2 { grid-column: 1 / 5; align-self: start; }
  .domande-elenco { grid-column: 6 / -1; }

  .chi-testo { grid-column: 1 / 6; }
  .chi-foto { grid-column: 7 / -1; }

  .chiusura { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .chiusura .lead { grid-column: 1; }
  .chiusura .btn { grid-column: 2; grid-row: 1 / 3; align-self: center; }
}

/* ---------- movimento: tutto legato allo scorrimento, nelle due direzioni ----------
   Niente entrate a tempo: ogni gesto segue la posizione nella pagina e si riavvolge tornando su.
   Intervalli in altezze di schermo e andamento lineare (landing-build, movimento.md).
   Col movimento ridotto, o senza animation-timeline, la pagina e' ferma al suo stato finale. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* testata: il filetto sotto compare nei primi 80 px di scorrimento */
    .testata { animation: m-testata linear both; animation-timeline: scroll(root); animation-range: 0 80px; }

    /* apertura: scorrendo via, il taglio della foto si allarga fino a due volte e mezzo */
    .apertura-foto .ritaglio { animation: m-taglio-apre linear both; animation-timeline: scroll(root); animation-range: 0 85vh; }

    /* titoli di sezione: la regola comune, piu' il filetto rosso che si traccia */
    main section:not(.apertura) .titolo-2, .chiusura .titolo-2 { animation: m-sale linear both; animation-timeline: view(); animation-range: cover calc(7rem + 4vh) cover calc(7rem + 36vh); }
    main section:not(.apertura) .con-filetto::after, .chiusura .con-filetto::after { animation: m-traccia linear both; animation-timeline: view(); animation-range: cover calc(5rem + 12vh) cover calc(5rem + 40vh); }

    /* problema: il segmento rosso di ogni punto corre sul suo filetto */
    .punto::before { animation: m-traccia linear both; animation-timeline: view(); animation-range: cover calc(5rem + 6vh) cover calc(5rem + 30vh); }

    /* recensioni: le stelle si accendono una dopo l'altra, appena entrano */
    .stelle svg { animation: m-stella linear both; animation-timeline: view(); animation-range: cover calc(5rem + 2vh + var(--s) * 2vh) cover calc(5rem + 6vh + var(--s) * 2vh); }

    /* servizi: ogni riga ha la sua linea del tempo, che corre mentre la riga attraversa la linea di lettura all'altezza della foto.
       Le righe si toccano, quindi ne e' attiva una sola: il grigio scende dalla riga che esce a quella che entra, e la foto cambia con lui. */
    .servizi-corpo { timeline-scope: --r0, --r1, --r2, --r3, --r4, --r5; --linea: 60vh; }
    .servizio:nth-child(1), .scatto:nth-child(1) { --t: --r0; } .servizio:nth-child(2), .scatto:nth-child(2) { --t: --r1; } .servizio:nth-child(3), .scatto:nth-child(3) { --t: --r2; }
    .servizio:nth-child(4), .scatto:nth-child(4) { --t: --r3; } .servizio:nth-child(5), .scatto:nth-child(5) { --t: --r4; } .servizio:nth-child(6), .scatto:nth-child(6) { --t: --r5; }
    .servizio { view-timeline-name: var(--t); view-timeline-axis: block; view-timeline-inset: var(--linea) calc(100vh - var(--linea)); }
    .servizio::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fondo-2); border-left: 3px solid var(--accento); animation: sv-fondo linear both; animation-timeline: var(--t); animation-range: cover 0% cover 100%; }
    .servizio .nome, .servizio .desc { animation: sv-testo linear both; animation-timeline: var(--t); animation-range: cover 0% cover 100%; }
    .servizio:first-child::before { animation-name: sv-fondo-primo; } .servizio:last-child::before { animation-name: sv-fondo-ultimo; }
    .servizio:first-child .nome, .servizio:first-child .desc { animation-name: sv-testo-primo; } .servizio:last-child .nome, .servizio:last-child .desc { animation-name: sv-testo-ultimo; }
    .servizi-foto { position: sticky; top: var(--x-altezza-testata); z-index: 2; background: var(--fondo); padding-bottom: var(--sp-2); }
    .scatto:not(:first-child) { display: block; animation: sv-scatto linear both; animation-timeline: var(--t); animation-range: cover 0% cover 24%; }

    /* come funziona: la scheda coperta da quella che arriva si rimpicciolisce e si vela */
    /* la pila in profondita': ogni scheda che ne copre un'altra la manda indietro di un livello, piu' piccola e piu' scura.
       Il punto fermo e' il bordo alto, cosi' i bordi delle schede dietro restano a distanza uguale e nessuna scavalca la successiva. */
    .scheda__in { scale: calc(1 - .05 * (var(--d1) + var(--d2) + var(--d3))); filter: brightness(calc(1 - .18 * (var(--d1) + var(--d2) + var(--d3)))); }
    .scheda { --A1: calc(100vh + (var(--h) + var(--g)) * (var(--i) + 1) - var(--sopra) - (var(--i) - .5) * var(--off)); --A2: calc(100vh + (var(--h) + var(--g)) * (var(--i) + 2) - var(--sopra) - (var(--i) + .5) * var(--off)); --A3: calc(100vh + (var(--h) + var(--g)) * (var(--i) + 3) - var(--sopra) - (var(--i) + 1.5) * var(--off)); }
    .scheda:nth-child(1) .scheda__in { animation: m-d1 linear both, m-d2 linear both, m-d3 linear both; animation-timeline: --pila, --pila, --pila; animation-range: cover calc(var(--A1) - var(--h)) cover var(--A1), cover calc(var(--A2) - var(--h)) cover var(--A2), cover calc(var(--A3) - var(--h)) cover var(--A3); }
    .scheda:nth-child(2) .scheda__in { animation: m-d1 linear both, m-d2 linear both; animation-timeline: --pila, --pila; animation-range: cover calc(var(--A1) - var(--h)) cover var(--A1), cover calc(var(--A2) - var(--h)) cover var(--A2); }
    .scheda:nth-child(3) .scheda__in { animation: m-d1 linear both; animation-timeline: --pila; animation-range: cover calc(var(--A1) - var(--h)) cover var(--A1); }
    /* le grafiche si animano mentre la loro scheda arriva e resta ferma: --x e --y dicono da dove a dove, in frazioni del tratto */
    .ap, .sale, .tr, .timbro, .cam, .str-r { animation-timeline: --pila; animation-timing-function: linear; animation-fill-mode: both; animation-range: cover calc(var(--p0) + (var(--p1) - var(--p0)) * var(--x)) cover calc(var(--p0) + (var(--p1) - var(--p0)) * var(--y)); }
    .ap { animation-name: g-ap; } .sale { animation-name: g-sale; } .tr { animation-name: g-tr; stroke-dasharray: 1; } .timbro { animation-name: g-timbro; transform-box: fill-box; transform-origin: center; } .cam { animation-name: g-cam; } .str-r { animation-name: g-str; transform-box: fill-box; transform-origin: 0 50%; }

    /* galleria e ritagli: la foto si apre a cuneo dall'angolo tagliato mentre entra */
    .chi-foto .ritaglio { animation: m-cuneo linear both; animation-timeline: view(); animation-range: cover calc(5rem + 2vh) cover calc(5rem + 40vh); }
    .chi-foto .ritaglio--basso-dx { animation-name: m-cuneo-dx; }
    /* deposito: la foto resta ferma, si posa solo il bollino; "in regalo" si colora subito dopo */
    .bollo { animation: m-bollo linear both; animation-timeline: view(); animation-range: cover calc(5rem + 14vh) cover calc(5rem + 36vh); }
    .deposito .segnato::after { animation: m-segna linear both; animation-timeline: view(); animation-range: cover calc(5rem + 14vh) cover calc(5rem + 34vh); }
    /* galleria: ogni foto sale e si apre mentre entra, sfalsata per colonna */
    .tessera { animation: m-tessera linear both; animation-timeline: view(); animation-range: cover calc(5rem + 3vh) cover calc(5rem + 30vh); }
    .tessera:nth-child(3n + 2) { animation-range: cover calc(5rem + 7vh) cover calc(5rem + 34vh); }
    .tessera:nth-child(3n) { animation-range: cover calc(5rem + 11vh) cover calc(5rem + 38vh); }

    /* la frase: le parole passano dal grigio al nero una dopo l'altra */
    .motto .parola { animation: m-parola linear both; animation-timeline: --frase; animation-range: cover calc(10vh + var(--p) * 4vh) cover calc(18vh + var(--p) * 4vh); }
    .motto .rosso .parola { animation-name: m-parola-rossa; }
    .sott { animation: m-sott linear both; animation-timeline: --frase; animation-range: cover 40vh cover 56vh; }

    /* chiusura: il pulsante non si muove; nel piede niente */
  }
}
@keyframes m-testata { to { border-bottom-color: var(--filo); } }
@keyframes m-taglio-apre { to { clip-path: polygon(calc(var(--x-taglio-x) * 2.5) 0, 100% 0, 100% 100%, 0 100%, 0 calc(var(--x-taglio-y) * 2.5)); } }
@keyframes m-sale { from { opacity: .7; translate: 0 2rem; } to { opacity: 1; translate: 0 0; } }
@keyframes m-traccia { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes m-tick { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes m-stella { from { opacity: .15; scale: .6; } to { opacity: 1; scale: 1; } }
@property --d1 { syntax: '<number>'; inherits: false; initial-value: 0; } @property --d2 { syntax: '<number>'; inherits: false; initial-value: 0; } @property --d3 { syntax: '<number>'; inherits: false; initial-value: 0; }
@keyframes m-d1 { to { --d1: 1; } } @keyframes m-d2 { to { --d2: 1; } } @keyframes m-d3 { to { --d3: 1; } }
@keyframes g-ap { from { opacity: 0; } } @keyframes g-sale { from { opacity: 0; transform: translateY(10px); } } @keyframes g-tr { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes g-timbro { from { opacity: 0; transform: scale(1.6); } 60% { opacity: 1; } } @keyframes g-cam { from { transform: translate(10px, 182px); } } @keyframes g-str { from { transform: scaleX(0); } }
@keyframes m-cuneo { from { clip-path: var(--x-sagoma-alto-sx-chiusa); } to { clip-path: var(--x-sagoma-alto-sx); } }
@keyframes m-cuneo-dx { from { clip-path: var(--x-sagoma-basso-dx-chiusa); } to { clip-path: var(--x-sagoma-basso-dx); } }
@keyframes m-tessera { from { opacity: .7; translate: 0 1.25rem; clip-path: inset(6% round var(--x-raggio-foto)); } to { opacity: 1; translate: 0 0; clip-path: inset(0 round var(--x-raggio-foto)); } }
@keyframes m-parola-rossa { from { color: #BDBDBA; } to { color: var(--accento); } }
@keyframes m-sott { from { background-size: 0% .1em; } to { background-size: 100% .1em; } }
@keyframes m-bollo { from { scale: 1.7; opacity: 0; rotate: -6deg; } 70% { opacity: 1; } to { scale: 1; opacity: 1; rotate: 7deg; } }
@keyframes m-segna { from { clip-path: polygon(0 0, 0 0, 0 62%, 0 100%, 0 100%); } to { clip-path: polygon(0 0, 100% 0, 100% 62%, calc(100% - .4em) 100%, 0 100%); } }
@keyframes m-parola { from { color: #BDBDBA; } to { color: var(--inchiostro); } }

/* Il timbro del foglio si posa quando la richiesta ha tutto: risponde a una scelta, non allo scorrimento */
@media (min-width: 1100px) and (prefers-reduced-motion: no-preference) {
  .foglio__timbro { scale: 1.4; transition: opacity var(--dur-2) linear, scale var(--dur-2) var(--curva-uscita); }
  .foglio-pronto .foglio__timbro { scale: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .google__voce { transition: opacity var(--dur-2) linear, visibility 0s linear var(--dur-2); }
  .google__voce.attiva { transition: opacity var(--dur-2) linear var(--dur-1), visibility 0s; }
}

/* ---------- apertura sul computer: misure fluide anche sull'altezza (Pasquale, 2026-11-04) ----------
   Ogni misura prende il valore piu' piccolo fra quello calcolato sulla larghezza e quello calcolato
   sull'altezza della finestra, dentro un minimo e un massimo: su uno schermo largo e basso, come il
   MacBook Air 13, vince l'altezza, e apertura piu' fascia nera stanno nella prima schermata con
   l'inizio della sezione dopo. La foto prende l'altezza della colonna del testo. */
@media (min-width: 1100px) {
  .apertura { padding-top: clamp(2rem, 6vh, 7rem); padding-bottom: clamp(2rem, 6vh, 7rem); }
  /* sugli schermi alti le misure arrivano al massimo prima che la finestra sia piena: la griglia
     cresce fino a lasciare sotto la fascia solo l'inizio della sezione dopo */
  .apertura-griglia { align-items: stretch; min-height: calc(100svh - var(--x-altezza-testata) - 7.5rem - 12vh); }
  .apertura-testo { gap: clamp(1.1rem, 3vh, 2.25rem); align-content: center; }
  .apertura-foto { display: grid; }
  .apertura-foto .ritaglio { align-self: center; height: 100%; min-height: 20rem; max-height: 40rem; }
  .domanda { font-size: clamp(0.95rem, min(1rem + 0.3vw, 2.15vh), 1.3rem); }
  .apertura .titolo-1 { font-size: clamp(2.5rem, min(1.4rem + 3.3vw, 6.4vh), 4.6rem); }
  .apertura .con-filetto { padding-bottom: clamp(0.9rem, 2.4vh, 1.4rem); }
  .apertura .lead { font-size: clamp(0.95rem, min(1rem + 0.3vw, 2.1vh), 1.3rem); }
  .apertura .btn { min-height: clamp(2.6rem, 6vh, 3.25rem); }
  .regalo { padding-top: clamp(0.4rem, 1.1vh, 0.55rem); padding-bottom: clamp(0.4rem, 1.1vh, 0.55rem); }
  .google { max-width: 34rem; padding: clamp(0.6rem, 1.6vh, 0.95rem) 1.1rem clamp(0.35rem, 1vh, 0.6rem); }
  .google__stelle { margin: clamp(0.25rem, 0.8vh, 0.45rem) 0 clamp(0.2rem, 0.6vh, 0.35rem); }
  .google__testo, .google__chi { font-size: clamp(0.8rem, 1.75vh, 0.875rem); }
  .google__piede { margin-top: clamp(0.2rem, 0.6vh, 0.4rem); padding-top: clamp(0.2rem, 0.6vh, 0.4rem); }
  .google__freccia { width: clamp(1.75rem, 3.6vh, 2.25rem); height: clamp(1.75rem, 3.6vh, 2.25rem); }
  .fascia { padding-top: clamp(1.5rem, 4vh, 3rem); padding-bottom: clamp(1.5rem, 4vh, 3rem); }
  .fascia__titolo { font-size: clamp(1rem, min(1rem + 0.3vw, 2.2vh), 1.3rem); }
  .fascia__riga { font-size: clamp(0.8rem, 1.75vh, 0.875rem); max-width: 44ch; }
}

/* ---------- servizi: i fotogrammi del grigio che passa da una riga all'altra ---------- */
@keyframes sv-fondo { 0% { clip-path: inset(0 0 100% 0); } 14%, 86% { clip-path: inset(0); } 100% { clip-path: inset(100% 0 0 0); } }
@keyframes sv-fondo-primo { 0%, 86% { clip-path: inset(0); } 100% { clip-path: inset(100% 0 0 0); } }
@keyframes sv-fondo-ultimo { 0% { clip-path: inset(0 0 100% 0); } 14%, 100% { clip-path: inset(0); } }
@keyframes sv-testo { 0% { color: #737373; } 14%, 86% { color: var(--inchiostro); } 100% { color: #737373; } }
@keyframes sv-testo-primo { 0%, 86% { color: var(--inchiostro); } 100% { color: #737373; } }
@keyframes sv-testo-ultimo { 0% { color: #737373; } 14%, 100% { color: var(--inchiostro); } }
@keyframes sv-scatto { from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } to { clip-path: polygon(0 0, 130% 0, 100% 100%, 0 100%); } }
@media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) {
  .problema-chiusura .segnato::after { animation: m-segna linear both; animation-timeline: view(); animation-range: cover calc(5rem + 6vh) cover calc(5rem + 34vh); }
  @media (min-width: 1100px) {
    .servizi-corpo { --linea: calc(50vh + var(--x-altezza-testata) / 2); }
    .servizi-foto { top: calc(var(--x-altezza-testata) + (100vh - var(--x-altezza-testata) - var(--foto-h)) / 2); background: none; padding: 0; z-index: auto; }
  }
} }