/* Sicurezza sul lavoro — la struttura di QUESTA pagina (04/10/2026).
   Caricato solo da /servizi/sicurezza-sul-lavoro/, dopo style.css: la linea grafica (colori di :root,
   Archivo e Instrument Sans, cornice del logo, segno sopra i titoli, pulsanti, fascia navy, movimento)
   resta quella di style.css; qui cambiano solo l'impaginazione e il ritmo (Design/STRUTTURE-PAGINE.md):
   · apertura: la foto (kit 04) a tutta larghezza, il velo navy che sale dal basso, titolo e pulsanti
     ancorati in basso a sinistra sopra la foto (a 390 il titolo resta sulla foto, niente pannello sotto);
   · modulo-firma: «Cosa serve per essere in regola» come checklist a 6 tasselli numerati, con la spunta
     del kit che si segna una voce dopo l'altra;
   · DVR come foglio-documento · rischi in tabella a righe · RSPP e RLS come schede contrapposte ·
     emergenza su una linea del tempo · DUVRI come riquadro-esempio · ispezioni in fascia navy ·
     lavori recenti come registro, col comune in evidenza · prezzi in un listino compatto. */

/* testo per chi legge con lo screen reader e per i motori, nascosto alla vista
   (le virgole e le parentesi che separano le colonne della tabella e del registro) */
.sl-nascosto{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ── apertura: la foto 04 si legge a tutta larghezza (le due persone e il magazzino), il velo navy
      sale dal basso e lascia libera la parte alta; titolo e pulsanti stanno in basso a sinistra,
      sopra la foto, con la cornice del logo su tutto il bordo ── */
.hero.sl-apertura{--marker:var(--coastal);position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:clamp(640px,58vw,880px);
  padding:clamp(160px,15vw,240px) 0 clamp(44px,4.2vw,64px);background:var(--navy);overflow:hidden}
.sl-apertura__foto{position:absolute;inset:0;z-index:-2;overflow:hidden}
.sl-apertura__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
/* il velo: sale dal basso, fitto sotto il testo e trasparente in alto; un filo d'ombra in testa
   stacca la foto dall'header bianco */
.hero.sl-apertura::before{z-index:-1;-webkit-mask:none;mask:none;
  background:linear-gradient(0deg,rgba(15,37,71,.94) 0%,rgba(15,37,71,.86) 20%,rgba(23,58,88,.62) 38%,rgba(23,58,88,.26) 54%,rgba(23,58,88,0) 68%),
             linear-gradient(180deg,rgba(15,37,71,.26) 0%,rgba(15,37,71,0) 16%)}
/* la cornice sottile del logo, dentro tutta l'apertura */
.hero.sl-apertura::after{content:"";position:absolute;inset:clamp(12px,1.3vw,20px);border:1px solid rgba(255,255,255,.26);border-radius:var(--r-xs);pointer-events:none}
.sl-apertura__inner{position:relative}
.sl-apertura__testo{max-width:min(1140px,100%)}
.sl-apertura .h1{color:var(--white);font-size:clamp(38px,4vw,58px);line-height:1.03;font-stretch:var(--wide);max-width:17.5em;margin-bottom:clamp(22px,2.1vw,30px);
  text-shadow:0 2px 22px rgba(15,37,71,.38)}
.sl-apertura .accent{color:var(--coastal)}
/* sotto il titolo, su un filo: le parole a sinistra, i due pulsanti uno sull'altro accanto */
.sl-apertura__riga{display:grid;grid-template-columns:minmax(0,35em) auto;justify-content:start;align-items:end;gap:24px clamp(36px,4vw,64px);
  padding-top:clamp(20px,1.9vw,28px);border-top:1px solid rgba(255,255,255,.24)}
.sl-apertura__lead{color:var(--white);max-width:30em;margin-bottom:10px}
.sl-apertura__sub{color:var(--on-navy);font-size:clamp(15.5px,1.15vw,17px);line-height:1.6;max-width:33em;margin:0}
.actions.sl-apertura__azioni{display:grid;grid-auto-rows:auto;gap:12px;min-width:min(272px,100%)}
.sl-apertura__azioni .btn{justify-content:space-between}
.sl-btn-bordo{background:transparent;color:var(--white);border-color:rgba(255,255,255,.62)}
.sl-btn-bordo:hover{background:rgba(255,255,255,.1);border-color:var(--white)}
.sl-btn-bordo:hover .icon{transform:translateX(3px)}
.sl-apertura :focus-visible{outline-color:var(--white)}
/* la foto entra piano sotto il velo: niente salto verso l'alto, solo dissolvenza e assestamento */
.js .sl-apertura__foto.reveal{transform:none;transition:opacity 1.2s var(--ease-out)}
.js .sl-apertura__foto.reveal img{transform:scale(1.06);transition:transform 2.2s var(--ease-out)}
.js .sl-apertura__foto.reveal.in img{transform:none}

/* ── modulo-firma: la checklist a 6 tasselli ── */
.sl-regola__titolo{margin-bottom:clamp(26px,2.6vw,40px)}
.sl-checklist{counter-reset:adempimento;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--border);
  border:1px solid var(--border);border-bottom:0;border-radius:var(--r) var(--r) 0 0;overflow:hidden}
.sl-checklist__voce{counter-increment:adempimento;position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:start;gap:clamp(18px,1.8vw,26px) 16px;
  min-height:clamp(200px,16vw,232px);padding:clamp(24px,2.3vw,34px) clamp(22px,2.2vw,32px) clamp(26px,2.4vw,34px);background:var(--white);transition:background-color .3s ease}
/* il numero grande, in Archivo */
.sl-checklist__voce::before{content:counter(adempimento,decimal-leading-zero);grid-column:1;grid-row:1;align-self:start;font-family:var(--font-display);font-stretch:112%;
  font-size:clamp(48px,4.6vw,70px);font-weight:640;line-height:.84;letter-spacing:-.035em;color:var(--primary);font-variant-numeric:tabular-nums lining-nums;transition:color .3s ease}
.sl-checklist__voce:hover{background:var(--card-soft)}
.sl-checklist__voce:hover::before{color:var(--navy)}
/* la spunta del kit dentro il quadrato del logo */
.sl-checklist__spunta{--sq:46px;grid-column:2;grid-row:1}
.sl-checklist__spunta .icon{stroke-width:2.1;stroke-dasharray:24;stroke-dashoffset:0}
.sl-checklist__testo{grid-column:1/-1;grid-row:2;align-self:end;font-size:clamp(16px,1.2vw,18px);line-height:1.45;color:var(--heading);max-width:21em}
.sl-checklist__testo a{color:var(--heading);text-decoration:underline;text-decoration-color:rgba(53,104,154,.4);text-underline-offset:3px;transition:color .2s ease,text-decoration-color .2s ease}
.sl-checklist__testo a:hover{color:var(--primary);text-decoration-color:currentColor}
/* la riga del totale, attaccata sotto la griglia */
.sl-checklist__totale{display:flex;align-items:center;gap:16px;padding:clamp(18px,1.7vw,22px) clamp(22px,2.2vw,32px);background:var(--navy);border-radius:0 0 var(--r) var(--r);
  color:var(--white);font-family:var(--font-display);font-stretch:var(--wide);font-size:clamp(16px,1.25vw,19px);font-weight:600;line-height:1.4;letter-spacing:-.005em}
.sl-checklist__totale .icon{width:28px;height:28px;color:var(--coastal);stroke-width:1.6}
/* spuntata: quadrato navy e spunta bianca (senza JavaScript resta così) */
.sl-checklist__spunta{background:var(--navy);color:var(--white)}
.sl-checklist__spunta::after{border-color:rgba(255,255,255,.36)}
/* le spunte si segnano una dopo l'altra quando la checklist entra nello schermo */
.js .sl-checklist .sl-checklist__spunta{transition:background-color .35s ease calc(.45s + var(--i,0) * .16s),color .35s ease calc(.45s + var(--i,0) * .16s)}
.js .sl-checklist .sl-checklist__spunta::after{transition:border-color .35s ease calc(.45s + var(--i,0) * .16s)}
.js .sl-checklist .sl-checklist__spunta .icon{transition:stroke-dashoffset .5s var(--ease-out) calc(.5s + var(--i,0) * .16s)}
.js .sl-checklist:not(.in) .sl-checklist__spunta{background:var(--icon-bg);color:var(--navy)}
.js .sl-checklist:not(.in) .sl-checklist__spunta::after{border-color:var(--line-steel)}
.js .sl-checklist:not(.in) .sl-checklist__spunta .icon{stroke-dashoffset:24}

/* ── DVR: il foglio-documento, con la barra in testa, su carta millimetrata ── */
.sl-dvr{position:relative;isolation:isolate;background:var(--soft);overflow:hidden}
.sl-dvr::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(53,104,154,.08) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(53,104,154,.08) 1px,transparent 1px) 0 0/48px 48px;
  -webkit-mask:radial-gradient(60% 90% at 76% 50%,#000 0%,transparent 78%);mask:radial-gradient(60% 90% at 76% 50%,#000 0%,transparent 78%)}
.sl-dvr__grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(40px,5.6vw,100px);align-items:center}
.sl-dvr__intro .lead{max-width:23em}
/* il foglio e, dietro, la stessa cornice del logo spostata (.photo-wrap di style.css) */
.sl-foglio-cornice{--fx:20px;--fy:20px;justify-self:end;width:min(100%,600px);margin:0 20px 20px 0}
.sl-foglio{position:relative;padding:0 clamp(24px,3vw,44px) clamp(30px,3vw,44px);background:var(--white);
  border:1px solid var(--border);border-top:8px solid var(--navy);border-radius:var(--r);box-shadow:var(--sh-3)}
.sl-foglio__testata{display:flex;align-items:center;gap:16px;padding:clamp(22px,2.2vw,28px) 0 clamp(18px,1.8vw,22px);border-bottom:1px solid var(--border)}
.sl-foglio__testata .sq{--sq:52px}
.sl-foglio__sigla{font-family:var(--font-display);font-stretch:112%;font-size:clamp(26px,2.2vw,32px);font-weight:700;letter-spacing:.02em;color:var(--heading);line-height:1}
/* i campi del modulo, solo disegnati */
.sl-foglio__testata::after{content:"";flex:1;align-self:stretch;margin-left:clamp(8px,2vw,28px);
  background:linear-gradient(var(--icon-bg),var(--icon-bg)) right 30%/72% 8px no-repeat,linear-gradient(var(--icon-bg),var(--icon-bg)) right 72%/46% 8px no-repeat}
.sl-foglio__corpo{counter-reset:clausola;display:grid;gap:18px;padding-top:clamp(22px,2.2vw,30px)}
.sl-foglio__clausola{counter-increment:clausola;position:relative;padding-left:46px;font-size:clamp(16px,1.2vw,18px);line-height:1.55;color:var(--heading)}
.sl-foglio__clausola::before{content:counter(clausola);position:absolute;left:0;top:-1px;display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--line-steel);border-radius:var(--r-xs);
  font-family:var(--font-display);font-size:14px;font-weight:650;color:var(--primary);font-variant-numeric:tabular-nums}
/* la riga della firma, in fondo al foglio */
.sl-foglio__corpo::after{content:"";justify-self:end;width:min(46%,240px);height:34px;margin-top:10px;
  background:linear-gradient(var(--input),var(--input)) left bottom/100% 1px no-repeat,linear-gradient(var(--icon-bg),var(--icon-bg)) left 30%/62% 7px no-repeat}

/* ── valutazioni: la tabella a righe, con l'icona del kit ── */
.sl-valutazioni__testa{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px clamp(28px,5vw,88px);align-items:end;margin-bottom:clamp(28px,2.8vw,42px)}
.sl-valutazioni__testa .h2{margin-bottom:0}
.sl-valutazioni__testa .lead{max-width:28em;padding-bottom:4px}
.sl-rischi{border-top:2px solid var(--navy);border-bottom:1px solid rgba(53,104,154,.22)}
.sl-rischi__riga{display:grid;grid-template-columns:48px minmax(0,.7fr) minmax(0,1fr);align-items:center;column-gap:clamp(18px,2.6vw,40px);padding:14px clamp(10px,1.4vw,22px);
  border-top:1px solid rgba(53,104,154,.14);transition:background-color .25s ease}
.sl-rischi__riga:first-child{border-top:0}
.sl-rischi__riga:nth-child(even){background:var(--card-soft)}
.sl-rischi__riga:hover{background:var(--soft)}
.sl-rischi__icona{--sq:48px}
.sl-rischi__riga:hover .sl-rischi__icona{background:var(--navy);color:var(--white)}
.sl-rischi__riga:hover .sl-rischi__icona::after{border-color:rgba(255,255,255,.36)}
.sl-rischi__nome{font-family:var(--font-display);font-stretch:var(--wide);font-size:clamp(16.5px,1.32vw,19.5px);font-weight:620;line-height:1.3;letter-spacing:-.01em;color:var(--heading)}
.sl-rischi__nome--intero{grid-column:2/-1}
.sl-rischi__metodo{font-size:clamp(15px,1.15vw,17px);line-height:1.5;color:var(--body)}

/* ── RSPP e RLS: due schede contrapposte, una navy e una bianca, sfalsate ── */
.sl-incarichi{background:var(--trust)}
.sl-incarichi .h2{margin-bottom:clamp(28px,2.8vw,42px)}
.sl-incarichi__coppia{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px);align-items:start}
.sl-incarico{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:clamp(24px,2.6vw,38px);padding:clamp(28px,3.4vw,54px);border-radius:var(--r)}
.sl-incarico--navy{background:var(--navy);box-shadow:var(--sh-3)}
.sl-incarico--navy::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(80% 90% at 100% 0%,rgba(53,104,154,.34),transparent 62%)}
.sl-incarico--bianca{margin-top:clamp(40px,5vw,84px);background:var(--white);border:1px solid var(--border);box-shadow:var(--sh-2)}
.sl-incarico__testa{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding-bottom:clamp(20px,2vw,28px);border-bottom:1px solid var(--border)}
.sl-incarico--navy .sl-incarico__testa{border-bottom-color:var(--navy-line)}
.sl-incarico__sigla{font-family:var(--font-display);font-stretch:112%;font-size:clamp(58px,6.6vw,100px);font-weight:700;line-height:.8;letter-spacing:-.035em;color:var(--navy)}
.sl-incarico--navy .sl-incarico__sigla{color:var(--white)}
.sl-incarico__testa .sq{--sq:64px}
.sl-incarico__testa .sq--band{--sq:64px}
.sl-incarico__testo{font-size:clamp(17px,1.38vw,20.5px);line-height:1.5;color:var(--heading);max-width:26em}
.sl-incarico--navy .sl-incarico__testo{color:var(--on-navy)}

/* ── emergenza: la linea del tempo orizzontale, che si disegna ── */
.sl-emergenza .h2{margin-bottom:clamp(30px,3vw,48px)}
.sl-tempo{--nodo:14px;--icona:56px;--sopra:calc(var(--icona) + 24px);counter-reset:tappa;margin:0;padding:0;list-style:none;position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
/* il binario e la linea che lo percorre */
.sl-tempo::before,.sl-tempo::after{content:"";position:absolute;left:0;right:calc(-1 * min(var(--gutter),40px));top:calc(var(--sopra) + var(--nodo) / 2 - 1px);height:2px}
.sl-tempo::before{background:var(--border)}
.sl-tempo::after{background:linear-gradient(90deg,var(--primary),var(--navy));transform-origin:left;transform:scaleX(1)}
.js .sl-tempo::after{transform:scaleX(0);transition:transform 1.8s var(--ease-out) .35s}
.js .sl-tempo.in::after{transform:scaleX(1)}
.sl-tempo__tappa{counter-increment:tappa;position:relative;display:flex;flex-direction:column;align-items:flex-start}
.sl-tempo__icona{--sq:var(--icona)}
.sl-tempo__nodo{position:relative;z-index:1;width:var(--nodo);height:var(--nodo);margin:24px 0 22px;border:2px solid var(--primary);border-radius:2px;background:var(--navy);box-shadow:0 0 0 5px var(--white)}
.js .sl-tempo .sl-tempo__nodo{background:var(--white);transition:background-color .3s ease calc(.6s + var(--i,0) * .5s)}
.js .sl-tempo.in .sl-tempo__nodo{background:var(--navy)}
.sl-tempo__testo{font-size:clamp(15.5px,1.15vw,17px);line-height:1.58;color:var(--heading);max-width:22em}
.sl-tempo__testo::before{content:counter(tappa,decimal-leading-zero);display:block;margin-bottom:8px;font-family:var(--font-display);font-stretch:var(--wide);font-size:13px;font-weight:650;letter-spacing:.14em;color:var(--primary)}
.sl-emergenza__caso{margin-top:clamp(30px,3vw,44px)}

/* ── DUVRI: il testo e, accanto, il riquadro-esempio ── */
.sl-duvri{background:var(--soft)}
.sl-duvri__griglia{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);grid-template-rows:auto auto 1fr;
  grid-template-areas:"titolo esempio" "quando esempio" "cosa esempio";column-gap:clamp(40px,5.6vw,100px);align-items:start}
.sl-duvri__titolo{grid-area:titolo}
.sl-duvri__quando{grid-area:quando;color:var(--heading);font-size:clamp(16.5px,1.28vw,19px);line-height:1.5}
.sl-duvri__cosa{grid-area:cosa;margin-top:14px}
.sl-esempio{grid-area:esempio;align-self:center;position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:20px;
  margin-top:14px;padding:clamp(40px,3.4vw,52px) clamp(24px,2.6vw,40px) clamp(28px,2.8vw,40px);background:var(--white);
  border:1.5px dashed rgba(53,104,154,.5);border-radius:var(--r)}
.sl-esempio__icona{--sq:56px}
.sl-esempio__testo{font-size:clamp(17px,1.36vw,20px);line-height:1.5;color:var(--heading)}
/* «Un caso tipico:» diventa la linguetta sul bordo del riquadro */
.sl-esempio__etichetta{position:absolute;top:0;left:clamp(22px,2.4vw,38px);transform:translateY(-50%);padding:7px 14px 6px;background:var(--navy);color:var(--white);border-radius:var(--r-sm);
  font-family:var(--font-display);font-stretch:var(--wide);font-size:12.5px;font-weight:640;letter-spacing:.14em;text-transform:uppercase;line-height:1.3;white-space:nowrap}

/* ── ispezioni: la fascia navy, col 7 su 7 nel quadrato del logo ── */
.sl-ispezioni .training__mail + .training__mail{margin-top:12px}
.sl-ispezioni .training__mail strong{font-size:clamp(16px,1.2vw,18px)}
.sl-ispezioni__segno{position:relative;display:grid;place-items:center;align-content:center;gap:10px;align-self:center;justify-self:end;width:clamp(150px,13vw,196px);aspect-ratio:1;
  border-radius:var(--r-sm);background:rgba(255,255,255,.07);color:var(--white)}
.sl-ispezioni__segno::after{content:"";position:absolute;inset:clamp(9px,.9vw,12px);border:1px solid rgba(255,255,255,.28);border-radius:2px;pointer-events:none}
.sl-ispezioni__sette{font-family:var(--font-display);font-stretch:112%;font-size:clamp(56px,5.2vw,80px);font-weight:700;line-height:.9;letter-spacing:-.04em;font-variant-numeric:lining-nums}
.sl-ispezioni__sette span{color:var(--on-navy-muted);font-weight:600}
.sl-ispezioni__segno .icon{width:26px;height:26px;color:var(--on-navy-muted);stroke-width:1.5}

/* ── lavori recenti: il registro, col comune in evidenza ── */
.sl-lavori .h2{margin-bottom:clamp(26px,2.6vw,40px)}
.sl-registro{border-top:2px solid var(--navy)}
.sl-registro__riga{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.4fr) auto;grid-template-areas:"comune lavoro anno";align-items:center;gap:6px clamp(20px,3vw,52px);
  padding:clamp(15px,1.4vw,20px) clamp(6px,1vw,14px);border-bottom:1px solid rgba(53,104,154,.16);transition:background-color .25s ease}
.sl-registro__riga:hover{background:var(--soft)}
.sl-registro__comune{grid-area:comune;display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-stretch:var(--wide);font-size:clamp(19px,1.75vw,26px);
  font-weight:640;line-height:1.15;letter-spacing:-.018em;color:var(--heading)}
.sl-registro__comune .icon{width:20px;height:20px;color:var(--primary)}
.sl-registro__lavoro{grid-area:lavoro;font-size:clamp(15px,1.15vw,17px);line-height:1.5;color:var(--heading)}
.sl-registro__anno{grid-area:anno;justify-self:end;padding:5px 10px 4px;border:1px solid var(--line-steel);border-radius:var(--r-xs);font-family:var(--font-display);
  font-size:14.5px;font-weight:640;letter-spacing:.02em;color:var(--navy);font-variant-numeric:tabular-nums lining-nums;background:var(--white)}

/* ── prezzi: il listino compatto, con i puntini fino al prezzo ── */
.sl-prezzi{background:var(--soft)}
.sl-prezzi__testa{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 32px;margin-bottom:clamp(22px,2.2vw,32px)}
.sl-prezzi__testa .h2{margin-bottom:0}
.sl-listino{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,auto);grid-auto-flow:column;column-gap:clamp(32px,4.6vw,72px);
  padding:clamp(6px,.8vw,10px) clamp(22px,2.8vw,42px);background:var(--white);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh-2)}
.sl-listino::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;border-radius:var(--r) var(--r) 0 0;background:var(--primary)}
.sl-listino li{display:flex;align-items:flex-end;gap:12px;padding:17px 0 15px;border-bottom:1px solid var(--border)}
.sl-listino li:nth-child(3n){border-bottom:0}
.sl-listino li::after{content:"";order:1;flex:1 1 24px;min-width:24px;margin-bottom:.45em;border-bottom:2px dotted rgba(53,104,154,.32)}
.sl-listino__voce{flex:0 1 auto;max-width:78%;font-size:clamp(15.5px,1.14vw,17px);line-height:1.4;color:var(--heading)}
.sl-listino .price-card__price{order:2}
.sl-prezzi__piede{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;margin-top:clamp(24px,2.4vw,34px)}
.sl-prezzi__piede .prices__note{margin:0;max-width:30em}

/* ═══ tablet ═══ */
@media (max-width:1099px){
  .sl-checklist{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sl-checklist__voce{min-height:0}
  .training.sl-ispezioni__fascia{grid-template-columns:minmax(0,1fr) auto;align-items:center}
}
@media (max-width:959px){
  /* apertura: la foto più alta, il testo tutto in colonna sotto i volti */
  .hero.sl-apertura{min-height:clamp(640px,104vw,820px)}
  .sl-apertura__foto img{object-position:56% 0}
  .sl-apertura__riga{grid-template-columns:minmax(0,1fr)}
  .actions.sl-apertura__azioni{display:flex;flex-wrap:wrap;min-width:0}
  .sl-dvr__grid,.sl-valutazioni__testa{grid-template-columns:minmax(0,1fr)}
  .sl-foglio-cornice{justify-self:start}
  .sl-incarichi__coppia{grid-template-columns:minmax(0,1fr)}
  .sl-incarico--bianca{margin-top:0;margin-left:clamp(24px,8vw,72px)}
  .sl-incarico--navy{margin-right:clamp(24px,8vw,72px)}
  .sl-duvri__griglia{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"titolo" "quando" "esempio" "cosa"}
  .sl-esempio{margin:44px 0 10px}
  .sl-duvri__cosa{margin-top:24px}
  .sl-registro__riga{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"comune anno" "lavoro lavoro"}
}

/* ═══ telefono ═══ */
@media (max-width:640px){
  /* apertura: una sola foto alta tutto lo schermo, il titolo sopra la foto (niente pannello sotto):
     il volto e il casco in alto, il velo sale dal basso e lascia vedere la foto dietro il testo */
  .hero.sl-apertura{min-height:860px;padding:300px 0 32px}
  .sl-apertura__foto img{object-position:55% 0}
  .hero.sl-apertura::before{background:linear-gradient(0deg,rgba(15,37,71,.94) 0%,rgba(15,37,71,.86) 28%,rgba(23,58,88,.7) 44%,rgba(23,58,88,.42) 53%,rgba(23,58,88,.12) 60%,rgba(23,58,88,0) 66%),
               linear-gradient(180deg,rgba(15,37,71,.22) 0%,rgba(15,37,71,0) 14%)}
  .hero.sl-apertura::after{inset:10px}
  .sl-apertura .h1{font-size:clamp(29px,7.9vw,33px);line-height:1.07;margin-bottom:16px}
  .sl-apertura__riga{padding-top:16px;gap:22px}
  .sl-apertura__lead{font-size:16.5px}
  .sl-apertura__sub{font-size:15.5px}
  .actions.sl-apertura__azioni{display:grid;gap:12px}
  .sl-apertura__azioni .btn{justify-content:center}

  /* checklist: una riga per voce, numero, testo e spunta */
  .sl-checklist{grid-template-columns:minmax(0,1fr)}
  .sl-checklist__voce{grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 14px 14px 16px}
  .sl-checklist__voce::before{grid-column:1;grid-row:1;align-self:center;font-size:27px;line-height:1}
  .sl-checklist__testo{grid-column:2;grid-row:1;align-self:center;font-size:15.5px;line-height:1.42}
  .sl-checklist__spunta{--sq:34px;grid-column:3;grid-row:1}
  .sl-checklist__totale{gap:12px;padding:15px 16px;font-size:15.5px}
  .sl-checklist__totale .icon{width:24px;height:24px}

  .sl-dvr__grid{gap:30px}
  .sl-foglio-cornice{--fx:10px;--fy:10px;margin:0 10px 10px 0}
  .sl-foglio{padding:0 18px 22px}
  .sl-foglio__testata{gap:12px;padding:18px 0 16px}
  .sl-foglio__testata .sq{--sq:44px}
  .sl-foglio__sigla{font-size:24px}
  .sl-foglio__clausola{padding-left:40px;font-size:15.5px}
  .sl-foglio__clausola::before{width:28px;height:28px;font-size:13px}

  .sl-rischi__riga{grid-template-columns:40px minmax(0,1fr);column-gap:14px;row-gap:2px;padding:13px 4px}
  .sl-rischi__icona{--sq:40px;grid-row:span 2;align-self:start}
  .sl-rischi__nome{font-size:16.5px}
  .sl-rischi__nome--intero{grid-column:2;grid-row:span 2;align-self:center}
  .sl-rischi__metodo{grid-column:2;font-size:15px;line-height:1.45}

  .sl-incarico{padding:24px 20px 26px;gap:20px}
  .sl-incarico--navy{margin-right:18px}
  .sl-incarico--bianca{margin-left:18px}
  .sl-incarico__sigla{font-size:52px}
  .sl-incarico__testa .sq,.sl-incarico__testa .sq--band{--sq:50px}
  .sl-incarico__testo{font-size:16px}

  /* emergenza: la linea del tempo diventa verticale, a sinistra */
  .sl-tempo{grid-template-columns:minmax(0,1fr);gap:0}
  .sl-tempo::before,.sl-tempo::after{left:calc(var(--nodo) / 2 - 1px);right:auto;top:8px;bottom:8px;width:2px;height:auto}
  .sl-tempo::after{background:linear-gradient(180deg,var(--primary),var(--navy));transform-origin:top}
  .js .sl-tempo::after{transform:scaleY(0)}
  .js .sl-tempo.in::after{transform:scaleY(1)}
  .sl-tempo__tappa{display:grid;grid-template-columns:var(--nodo) minmax(0,1fr);column-gap:18px;padding-bottom:22px}
  .sl-tempo__tappa:last-child{padding-bottom:0}
  .sl-tempo__icona{display:none}
  .sl-tempo__nodo{margin:4px 0 0}
  .sl-tempo__testo{font-size:15.5px;line-height:1.5}
  .sl-tempo__testo::before{margin-bottom:4px;font-size:12.5px}

  .sl-esempio{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:34px;padding:34px 18px 22px}
  .sl-esempio__icona{--sq:46px}
  .sl-esempio__testo{font-size:16.5px}
  .sl-esempio__etichetta{left:18px}

  .training.sl-ispezioni__fascia{grid-template-columns:minmax(0,1fr)}
  .sl-ispezioni__segno{order:-1;justify-self:start;width:auto;aspect-ratio:auto;grid-auto-flow:column;gap:14px;padding:14px 20px 14px 18px}
  .sl-ispezioni__sette{font-size:40px}
  .sl-ispezioni__segno .icon{width:22px;height:22px}

  .sl-registro__riga{gap:4px 12px;padding:13px 2px}
  .sl-registro__comune{font-size:18.5px;gap:8px}
  .sl-registro__comune .icon{width:17px;height:17px}
  .sl-registro__lavoro{font-size:15px;line-height:1.45;padding-left:25px}
  .sl-registro__anno{font-size:13.5px;padding:4px 8px 3px}

  .sl-listino{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row;padding:4px 16px}
  .sl-listino li{gap:10px;padding:14px 0 13px}
  .sl-listino li:nth-child(3n){border-bottom:1px solid var(--border)}
  .sl-listino li:last-child{border-bottom:0}
  .sl-listino__voce{font-size:15.5px}
  .sl-listino .price-card__price b{font-size:21px}
  .sl-prezzi__piede{flex-direction:column;align-items:stretch;gap:18px}
  .sl-prezzi__piede .actions .link{align-self:flex-start}
}

@media (prefers-reduced-motion:reduce){
  .js .sl-apertura__foto.reveal img{transform:none}
  .js .sl-checklist:not(.in) .sl-checklist__spunta .icon{stroke-dashoffset:0}
  .js .sl-checklist:not(.in) .sl-checklist__spunta{background:var(--navy);color:var(--white)}
  .js .sl-checklist:not(.in) .sl-checklist__spunta::after{border-color:rgba(255,255,255,.36)}
  .js .sl-tempo::after{transform:none}
  .js .sl-tempo .sl-tempo__nodo{background:var(--navy)}
}