/* Pagine dei servizi: stesse variabili e stessi pezzi di style.css (menu, schede beige, pillole, domande, contatti).
   Qui c'è solo quello che hanno in più. La forma di particelle sta a destra, il testo a sinistra. */
html{scroll-behavior:smooth}
html.modal-open,html.modal-open body{overflow:hidden}

/* testata: come quella della pagina principale, ancorata in basso */
.s-testa{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:100vh;min-height:100svh;padding:112px var(--pad) clamp(36px,8vh,84px)}
.s-testa>*{max-width:min(760px,54vw)}
.briciole{display:flex;flex-wrap:wrap;gap:6px 9px;margin-bottom:auto;font-family:var(--mono);font-size:12px;color:var(--muted)}
.briciole a{transition:color .3s}
.briciole a:hover{color:var(--ink)}
.s-testa .unit{margin-top:32px}
.s-testa h1{font-size:clamp(40px,5.5vw,96px);line-height:1;font-weight:300;letter-spacing:-.04em;margin-bottom:24px}
.s-testa h1 b{font-weight:700}
.s-intro{max-width:620px;font-size:clamp(16px,1.35vw,20px);font-weight:300;color:var(--muted)}
.s-testa .c-actions{margin-top:30px}
.s-testa .kicker{margin-bottom:12px}

/* le schede beige senza etichetta accanto al numero */
.s-cosa .j-top{margin-bottom:10px}
.s-cosa .j-card h3{font-size:clamp(19px,1.5vw,23px)}
.s-cosa .j-desc{font-size:14.5px}
a.j-card{color:inherit}
a.j-card .j-desc{margin-bottom:12px}
.j-card .freccia{margin-top:auto;font-family:var(--mono);font-size:12px;color:#9a5b22}
a.j-card:hover .freccia{color:#2b2b2b}

/* quando serve: frasi grandi, una per riga */
.s-quando{position:relative;display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(28px,6vw,96px);align-items:start;max-width:1520px;margin:0 auto;padding:13vh var(--pad) 8vh}
.s-quando .h2,.s-strumenti .h2,.s-altri .h2{font-size:clamp(34px,4.2vw,62px)}
.s-lista{list-style:none;counter-reset:q;border-bottom:1px solid var(--line)}
.s-lista li{counter-increment:q;position:relative;padding:20px 0 20px 54px;border-top:1px solid var(--line);font-size:clamp(18px,1.75vw,27px);font-weight:300;line-height:1.3;letter-spacing:-.015em}
.s-lista li::before{content:"0" counter(q);position:absolute;left:0;top:27px;font-family:var(--mono);font-size:12px;letter-spacing:0;color:rgb(var(--tint))}

/* strumenti */
.s-strumenti{position:relative;max-width:1520px;margin:0 auto;padding:6vh var(--pad)}
.s-strumenti .p-tags{max-width:820px;margin-top:30px}
.s-strumenti .p-tags li{font-size:13px;padding:8px 15px}

/* gli altri servizi */
.s-altri{position:relative;max-width:1520px;margin:0 auto;padding:6vh var(--pad) 4vh}
.s-link{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(20px,3vw,48px);margin-top:28px}
.s-link a{display:flex;justify-content:space-between;align-items:center;gap:14px;height:100%;padding:17px 0;border-top:1px solid var(--line);font-size:15px;transition:color .3s}
.s-link a span{color:var(--amber);transition:transform .35s}
.s-link a:hover{color:var(--amber)}
.s-link a:hover span{transform:translateX(4px)}

/* contatti in fondo: più bassi di quelli della pagina principale */
.s-cta{min-height:0;padding-top:12vh}
.s-cta .contact-title{font-size:clamp(38px,6.4vw,112px)}

/* 404 */
.errore .s-testa{justify-content:center}
.errore .s-testa h1{margin-bottom:16px}
.errore .hero-cmd{margin-bottom:18px}

/* i blocchi salgono piano quando arrivano sullo schermo */
.anima [data-sale]{opacity:0;transform:translateY(34px);transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.anima [data-sale].dentro{opacity:1;transform:none}

@media (max-width:1100px){
  .s-link{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .s-quando{grid-template-columns:minmax(0,1fr);gap:18px}
}
@media (max-width:759px){
  html{scroll-behavior:auto}
  /* telefono: la forma sta in alto e il testo sotto, senza sovrapporsi */
  .s-testa{padding:84px 16px 40px}
  .s-testa>*{max-width:none}
  .s-testa .unit{margin-top:38svh}
  .s-testa h1{font-size:clamp(34px,10vw,46px);margin-bottom:16px}
  .s-intro{font-size:15.5px}
  .s-quando{padding:9vh 16px 5vh}
  .s-lista li{padding:15px 0 15px 40px;font-size:17px}
  .s-lista li::before{top:20px}
  .s-strumenti,.s-altri{padding:5vh 16px}
  .s-link{grid-template-columns:minmax(0,1fr)}
  .s-cta{padding:10vh 16px 7vh}
  .s-cta .contact-title{font-size:clamp(32px,9.5vw,40px)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}