/* ==================================================================
   LDL — strato chiaro.

   Non riscrive il sito: lo veste. Carica Manrope al posto di Jura,
   schiarisce le intestazioni che erano blu notte e lascia scuri solo
   gli elementi che devono staccare: le schede dei servizi, il
   configuratore, il piede di pagina.
   ================================================================== */
@font-face{font-family:'Manrope';src:url('../fonts/manrope-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Manrope';src:url('../fonts/manrope-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Manrope';src:url('../fonts/manrope-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Manrope';src:url('../fonts/manrope-800.woff2') format('woff2');font-weight:800;font-display:swap}

:root{
  --inchiostro:#0B2E3D; --corpo:#44636F; --tenue:#3A5B67;
  --acqua:#007A8A; --acqua-scuro:#00525E; --filo:#D3E3EA; --carta:#F2F8FB;
}
body,h1,h2,h3,h4,.eyebrow,button,input,select,textarea,.btn{
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Arial,sans-serif}
body{color:var(--corpo);letter-spacing:0}
h1,h2,h3,h4{color:var(--inchiostro);font-weight:800;letter-spacing:-.02em}
.lead{color:var(--corpo)}
.eyebrow{color:var(--acqua-scuro);font-weight:800;letter-spacing:.18em}

/* ---------------------------------------- il marchio, solo logo ---
   Niente casetta e niente scritta HOME: resta il logo, allineato al
   bordo sinistro del contenuto, con la barretta che compare al
   passaggio del mouse a dire che e' un comando. */
/* ---------------------------------------- il marchio, solo logo ---
   Nessun riquadro: c'e' solo il logo, nella sua versione per fondo
   chiaro. Al passaggio del mouse si solleva, si accende di un alone
   ciano e compare la barretta che dichiara il comando. */
.brand{background:none !important;border:0 !important;box-shadow:none !important;
  padding:8px 4px !important;margin-left:-4px;position:relative;border-radius:10px;
  transition:transform .3s cubic-bezier(.22,1,.3,1), filter .32s ease}
.brand img{width:clamp(136px,9.2vw,168px) !important;
  transition:filter .32s ease}
.brand-home{display:none !important}
/* la retroilluminazione: un alone ciano dietro al logo, senza
   riquadro. Il logo e' scuro, quindi l'alone si vede per differenza. */
.brand::before{content:"";position:absolute;inset:-10px -14px;z-index:-1;border-radius:22px;
  background:radial-gradient(60% 150% at 50% 50%, rgba(0,233,250,.60), rgba(0,233,250,0) 72%);
  opacity:0;transition:opacity .34s ease}
.brand::after{content:"";position:absolute;left:4px;right:4px;bottom:0;height:2px;
  background:var(--acqua);transform:scaleX(0);transform-origin:left;
  transition:transform .34s cubic-bezier(.22,1,.3,1)}
@media (hover:hover){
  .brand:hover{transform:translateY(-3px)}
  .brand:hover::before{opacity:1}
  .brand:hover::after{transform:scaleX(1)}
}
.brand:focus-visible{outline:3px solid var(--acqua);outline-offset:4px}

/* le voci del menu: maiuscoletto spaziato e, al passaggio, lo stesso
   sollevamento del marchio */
.nav a,.nav button{text-transform:uppercase;letter-spacing:.09em;font-weight:700;
  font-size:clamp(.76rem,.84vw,.92rem);color:var(--inchiostro);
  transition:transform .28s cubic-bezier(.22,1,.3,1), color .28s ease}
@media (hover:hover){
  .nav a:hover,.nav button:hover{color:var(--acqua);transform:translateY(-3px)}
  .nav-cta:hover{transform:translateY(-3px)}
}
.nav-cta{letter-spacing:.07em;
  transition:transform .28s cubic-bezier(.22,1,.3,1), background .28s ease}
.lang-switch{letter-spacing:.06em}

/* ------------------------------- le intestazioni interne, schiarite */
.page-hero,
.hero-chi,
.hero-appr{
  background:
    radial-gradient(1100px 740px at 8% 2%, #FFFFFF 0%, rgba(255,255,255,0) 62%),
    radial-gradient(900px 680px at 88% 94%, #DCEFF7 0%, rgba(220,239,247,0) 64%),
    linear-gradient(146deg,#FBFDFE 0%,#EDF6FA 46%,#E2EFF6 100%) !important;
  color:var(--corpo) !important;
}
.page-hero h1,.hero-chi h1,.hero-appr h1{color:var(--inchiostro) !important}
.page-hero .lead,.hero-chi .lead,.hero-appr .lead{color:var(--corpo) !important}
.breadcrumbs{color:var(--tenue) !important}
.breadcrumbs a{color:var(--acqua-scuro) !important;font-weight:700}
.page-hero .eyebrow{color:var(--acqua-scuro) !important}

/* il velo delle due intestazioni animate era scuro: ora e' chiaro, e
   la trama di triangoli va tenuta bassa per non sporcare il bianco */
.hero-chi::after,.hero-appr::after{
  background:linear-gradient(100deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.72) 42%,
                                     rgba(255,255,255,.34) 72%, rgba(255,255,255,0) 94%) !important}
.hero-chi .trama,.hero-appr .trama{opacity:.30 !important}
.hero-chi .campo,.hero-appr .campo{opacity:.55}
.hero-chi .disc li{border-color:rgba(0,122,138,.35) !important;color:var(--inchiostro) !important;
  background:rgba(255,255,255,.72) !important;font-family:'Manrope',sans-serif !important}
.hero-chi .disc li::before{border-bottom-color:var(--acqua) !important}
.hero-appr .freccia{border-color:rgba(0,122,138,.5) !important;color:var(--acqua) !important;
  background:rgba(255,255,255,.7) !important}
.hero-appr .freccia-testo{color:var(--acqua-scuro) !important}

/* ------------------------------------- le fasce scure di contenuto */
.section-dark{background:var(--carta) !important;color:var(--corpo) !important}
.section-dark h1,.section-dark h2,.section-dark h3{color:var(--inchiostro) !important}
.section-dark .lead{color:var(--corpo) !important}
.section-dark .eyebrow{color:var(--acqua-scuro) !important}

/* i numeri: fondo chiaro e linee sottili al posto del blocco blu */
.stats-band{background:transparent !important;border-top:1px solid var(--filo) !important}
.stats .stat b{color:var(--inchiostro)}
.stats .stat span{color:var(--tenue)}

/* restano scuri, e devono: sono gli accenti del sito */
.service-card,.configurator,.footer,.scheda .faccia{}


/* ==================================================================
   LA SEQUENZA: bianco, sfumatura, blu, sfumatura, bianco.

   La fascia non comincia di colpo: sopra e sotto due raccordi alti
   una novantina di pixel portano il bianco della sezione precedente
   dentro il blu, e il blu dentro il bianco della successiva. Senza i
   raccordi il taglio sarebbe netto e il blu sembrerebbe incollato.

   Il contenuto comincia SOTTO il raccordo: diversamente l'occhiello
   finirebbe su un fondo ancora chiaro e perderebbe contrasto.
   ================================================================== */
.section.banda{
  position:relative;isolation:isolate;color:#EAF3F6 !important;
  --sopra:255,255,255; --sotto:255,255,255;
  --raccordo:clamp(150px,14vw,215px);
  padding-top:calc(var(--raccordo) + clamp(40px,4vw,62px)) !important;
  padding-bottom:calc(var(--raccordo) + clamp(34px,3.6vw,54px)) !important;
  background:
    radial-gradient(900px 540px at 16% 10%, rgba(0,170,195,.17), transparent 62%),
    radial-gradient(780px 500px at 88% 92%, rgba(0,105,140,.20), transparent 64%),
    linear-gradient(168deg,#002A3D 0%,#00202E 54%,#001A26 100%),
    #00202E !important;
}
/* I due chiari sono diventati uno: il vicino e' sempre bianco, quindi
   da-soft e a-soft non devono piu' cambiare il colore d'arrivo. Le
   classi restano sulle pagine, innocue, per non toccare il marcatore
   in tutti i file. */
.section.banda.da-soft{--sopra:255,255,255}
.section.banda.a-soft{--sotto:255,255,255}

/* ------------------------------------------------------------------
   Il raccordo fra il chiaro e il blu.

   Due cose lo rendevano visibile. La prima: finiva in bianco puro
   anche quando la sezione accanto era grigio-azzurra, e quel salto di
   una decina di livelli disegnava una riga netta. Ora il colore
   d'arrivo e' quello reale del vicino, passato come terna rgb.

   La seconda: la rampa era lineare, e una rampa lineare che incontra
   un colore piatto crea uno spigolo che l'occhio legge come una linea
   anche quando i colori combaciano (bande di Mach). Gli stop qui sotto
   seguono 3t^2-2t^3: pendenza nulla a tutti e due i capi, quindi il
   raccordo nasce e muore senza spigoli. Partendo piano, tiene anche
   piu' a lungo il blu prima di schiarire.
   ------------------------------------------------------------------ */
.section.banda::before,
.section.banda::after{content:"";position:absolute;left:0;right:0;
  height:var(--raccordo);pointer-events:none;z-index:0}
.section.banda::before{top:0;background:linear-gradient(to top,
  rgba(var(--sopra),0)     0%,
  rgba(var(--sopra),.018)  8%,
  rgba(var(--sopra),.069) 16%,
  rgba(var(--sopra),.156) 25%,
  rgba(var(--sopra),.255) 33%,
  rgba(var(--sopra),.381) 42%,
  rgba(var(--sopra),.500) 50%,
  rgba(var(--sopra),.619) 58%,
  rgba(var(--sopra),.745) 67%,
  rgba(var(--sopra),.844) 75%,
  rgba(var(--sopra),.931) 84%,
  rgba(var(--sopra),.982) 92%,
  rgba(var(--sopra),1)   100%)}
.section.banda::after{bottom:0;background:linear-gradient(to bottom,
  rgba(var(--sotto),0)     0%,
  rgba(var(--sotto),.018)  8%,
  rgba(var(--sotto),.069) 16%,
  rgba(var(--sotto),.156) 25%,
  rgba(var(--sotto),.255) 33%,
  rgba(var(--sotto),.381) 42%,
  rgba(var(--sotto),.500) 50%,
  rgba(var(--sotto),.619) 58%,
  rgba(var(--sotto),.745) 67%,
  rgba(var(--sotto),.844) 75%,
  rgba(var(--sotto),.931) 84%,
  rgba(var(--sotto),.982) 92%,
  rgba(var(--sotto),1)   100%)}
.section.banda > *{position:relative;z-index:1}

.section.banda h2,.section.banda h3{color:#FFFFFF !important}
.section.banda .lead{color:#D2E3EA !important}
.section.banda p{color:#C9DDE4}
.section.banda .eyebrow{color:#63E8F7 !important}
.section.banda .mini-card,.section.banda .fact{
  background:rgba(255,255,255,.055) !important;border-color:rgba(255,255,255,.16) !important}
.section.banda .mini-card h3,.section.banda .fact b{color:#fff !important}
.section.banda .btn-ghost{border-color:rgba(255,255,255,.45);color:#fff}
.section.banda .btn-primary{background:var(--ciano,#00E9FA);color:#00202E;border-color:#00E9FA}


/* ---------------------------- le schede, quando cadono dentro una fascia
   Le schede dei servizi sono blu notte su bianco; dentro una fascia blu
   sparirebbero. Qui diventano vetro chiaro con il bordo ciano, come le
   schede delle pagine di area. Stessa cosa per gli approfondimenti, che
   invece sono bianchi. */
.section.banda .service-card{
  background:rgba(255,255,255,.055) !important;
  border-color:rgba(255,255,255,.18) !important}
.section.banda .service-card:hover{
  background:rgba(0,233,250,.10) !important;border-color:var(--ciano,#00E9FA) !important}
.section.banda .service-card h3,
.section.banda .service-card .service-link{color:#fff !important}
.section.banda .service-card p,.section.banda .service-card span{color:#C9DDE4 !important}
.section.banda .service-num{color:#63E8F7 !important}

.section.banda .insight{
  background:rgba(255,255,255,.055) !important;
  border-color:rgba(255,255,255,.18) !important}
.section.banda .insight:hover{border-color:var(--ciano,#00E9FA) !important}
.section.banda .insight h3,.section.banda .insight h3 a{color:#fff !important}
.section.banda .insight p{color:#C9DDE4 !important}
/* a #9FC2CB le fonti si fermavano a 3,54:1 sul vetro chiaro */
.section.banda .insight small{color:#C8DEE5 !important;
  border-top-color:rgba(255,255,255,.16) !important}
.section.banda .insight-meta{color:#63E8F7 !important}
.section.banda .config-note{color:#AFCBD4 !important}


/* ============================================================ pulsanti
   Il ciano pieno era troppo acceso per un pulsante grande: diventa blu
   notte con la scritta bianca. Dentro una fascia blu prende un filo di
   bordo ciano, altrimenti il blu sul blu sparirebbe. */
.btn-primary{background:var(--navy,#00202E) !important;color:#fff !important;
  border-color:var(--navy,#00202E) !important}
.btn-primary:hover{background:#00334A !important;
  box-shadow:0 10px 30px rgba(0,32,46,.26) !important}
.section.banda .btn-primary{border-color:rgba(0,233,250,.55) !important}
.section.banda .btn-primary:hover{border-color:#00E9FA !important;
  box-shadow:0 0 0 3px rgba(0,233,250,.18), 0 12px 30px rgba(0,22,32,.35) !important}

/* il pulsante chiaro: la pastiglia era bianco pieno e la scritta ciano.
   Bianco meno acceso, scritta quasi nera. */
.btn-outline{background:#EDF3F6 !important;color:#0B2E3D !important;
  border-color:#C6D7DE !important}
.btn-outline:hover{background:#fff !important;border-color:var(--acqua) !important;
  color:#0B2E3D !important}
.section.banda .btn-outline{background:#E8F0F3 !important;color:#0B2E3D !important;
  border-color:rgba(255,255,255,.5) !important}
.section.banda .btn-outline:hover{background:#fff !important;color:#0B2E3D !important}

/* la regola generica sui collegamenti dentro la fascia tingeva anche i
   pulsanti: ora li salta */
.section.banda a:not(.btn):not(.service-card):not(.insight-link){color:#9BE9F3}
.section.banda .btn,.section.banda .btn *{color:inherit}


/* ==================================================================
   IL PIEDE DI PAGINA

   Due cose sole. Il colore: era #001822, un blu cosi' scuro da leggersi
   quasi nero e da staccare dal resto del sito; ora e' lo stesso blu del
   marchio, con la stessa leggera diagonale delle fasce.

   E il raccordo: sopra il piede correva un taglio netto fra il bianco
   della pagina e il blu. Ora c'e' la stessa dissolvenza delle fasce, su
   tutte le pagine, perche' il piede e' lo stesso ovunque.
   ================================================================== */
.footer{
  position:relative;z-index:3;
  /* Sfumatura verticale pura: cosi' la PRIMA riga del piede e' esattamente
     #00293B su tutta la larghezza, ed e' il colore su cui muore il
     raccordo che arriva da sopra. L'alone diagonale che c'era prima
     cambiava tinta da sinistra a destra e lasciava una riga visibile
     all'attacco, diversa a ogni ascissa. */
  background:linear-gradient(180deg,#00293B 0%,#00202E 56%,#001C28 100%),
             #00202E !important;
  color:#CBDDE3}
.footer::before{content:"";position:absolute;left:0;right:0;
  top:calc(-1 * var(--raccordo-piede));height:var(--raccordo-piede);
  --raccordo-piede:clamp(150px,14vw,215px);pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(0,41,59,0)     0%, rgba(0,41,59,.018)  8%, rgba(0,41,59,.069) 16%,
    rgba(0,41,59,.156) 25%, rgba(0,41,59,.255) 33%, rgba(0,41,59,.381) 42%,
    rgba(0,41,59,.500) 50%, rgba(0,41,59,.619) 58%, rgba(0,41,59,.745) 67%,
    rgba(0,41,59,.844) 75%, rgba(0,41,59,.931) 84%, rgba(0,41,59,.982) 92%,
    rgba(0,41,59,1)   100%)}
.footer h4{color:#fff}
.footer a{color:#CBDDE3}
.footer a:hover{color:var(--ciano,#00E9FA)}
.footer-legale{color:#9FBAC3}

/* Se la pagina finisce con una fascia blu, il raccordo non deve passare
   dal bianco: fra due blu comparirebbe una striscia grigia. La fascia
   sfuma direttamente nel colore del piede, e il raccordo del piede si
   toglie di mezzo. */
main > .banda:last-child{--sotto:0,41,59}
body.fine-blu .footer::before{display:none}


/* ==================================================================
   LE SCHEDE DEGLI APPROFONDIMENTI DENTRO LA FASCIA BLU

   Erano blu notte su bianco. Ora che la sezione e' blu si ribaltano:
   vetro chiaro, sfumato dal bianco all'azzurrino come i raccordi delle
   fasce, e scritte quasi nere. Vale per tutte e due le facce, perche'
   la scheda si gira.
   ================================================================== */
.banda .scheda .faccia{
  background:linear-gradient(158deg,#FFFFFF 0%,#F2F8FB 46%,#DFEDF4 100%) !important;
  border-color:rgba(255,255,255,.65) !important;
  color:#0B2E3D !important;
  box-shadow:0 14px 34px rgba(0,16,26,.26) !important}
/* l'alone interno era ciano acceso: sul chiaro si fa appena percepire */
.banda .scheda .faccia::before{
  background:radial-gradient(circle, rgba(0,122,138,.20), transparent 70%) !important;
  opacity:.55 !important}
.banda .scheda h3{color:#07222E !important}
.banda .scheda .sintesi,
.banda .scheda .retro p{color:#2F5465 !important}
.banda .scheda .insight-meta{color:#00606E !important}
/* sul punto piu' scuro della sfumatura le fonti stavano a 4,79:1:
   poco margine per un testo di quindici pixel */
.banda .scheda small{color:#3E5D6A !important;
  border-top-color:rgba(0,32,46,.14) !important}
.banda .scheda .gira{color:#00525E !important;background:rgba(0,122,138,.08) !important;
  border-color:rgba(0,122,138,.42) !important}
.banda .scheda .fronte:hover .gira,
.banda .scheda .gira:hover{background:rgba(0,122,138,.16) !important;
  border-color:#00606E !important;color:#00353E !important}
.banda .scheda .apri{color:#07222E !important;
  border-bottom-color:rgba(0,122,138,.55) !important}
.banda .scheda .torna{color:#3A5B67 !important;border-color:rgba(0,32,46,.22) !important;
  background:transparent !important}
.banda .scheda .fronte:hover{border-color:#fff !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.7), 0 18px 42px rgba(0,16,26,.30) !important}

/* la riga che spiega che le schede si girano, ora su fondo blu */
.banda .schede-intro{color:#D2E3EA !important}
.banda .schede-intro svg{stroke:#63E8F7 !important}

/* I passi del metodo non portano piu' il numero: senza, il margine
   che lo staccava dal titolo lascerebbe un vuoto. */
.method-step b{display:none}
.method-step h3{margin-top:0}

/* ==================================================================
   NIENTE PIU' STACCHI FRA I FONDI CHIARI

   Il sito aveva due chiari quasi uguali — il bianco e il #F4F8F9 delle
   sezioni "soft" — che si toccavano di netto. Undici livelli di
   differenza bastano a disegnare una riga orizzontale perfettamente
   visibile, e si vedeva su quasi tutte le pagine.

   La soluzione non e' sfumare fra i due: e' smettere di averne due.
   Il ritmo della pagina lo danno gia' le fasce blu, e le schede hanno
   bordo e ombra propri, quindi non perdono stacco. I moduli e le
   schede che usano --surface restano come sono: li' il contrasto e'
   voluto e sta dentro un riquadro, non a tutta larghezza.
   ================================================================== */
.section-soft,
.section.compact.section-dark{background:transparent !important}

/* ------------------------------------------------------------------
   IL PIEDE DELLE INTESTAZIONI INTERNE
   L'intestazione chiara finiva su un azzurrino e sotto ricominciava il
   bianco: trenta e passa livelli di salto. Un velo bianco con la
   stessa curva delle fasce la riporta al bianco senza bordo. E' un
   elemento vero e non uno pseudo, perche' ::after su queste
   intestazioni e' gia' occupato dal velo del contrasto.
   ------------------------------------------------------------------ */
.page-hero,.hero-chi,.hero-appr{--sfumo:clamp(120px,11vw,176px)}
.page-hero{padding-bottom:calc(70px + var(--sfumo)) !important}
.hero-appr{padding-bottom:calc(clamp(84px,9vw,116px) + var(--sfumo)) !important}
.page-hero > .sfumo{position:absolute;left:0;right:0;bottom:0;z-index:1;
  height:var(--sfumo);pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(255,255,255,0)     0%, rgba(255,255,255,.018)  8%,
    rgba(255,255,255,.069) 16%, rgba(255,255,255,.156) 25%,
    rgba(255,255,255,.255) 33%, rgba(255,255,255,.381) 42%,
    rgba(255,255,255,.500) 50%, rgba(255,255,255,.619) 58%,
    rgba(255,255,255,.745) 67%, rgba(255,255,255,.844) 75%,
    rgba(255,255,255,.931) 84%, rgba(255,255,255,.982) 92%,
    rgba(255,255,255,1)   100%)}
.page-hero > .container{position:relative;z-index:2}

/* ------------------------------------------------------------------
   L'ULTIMO BLOCCO NON DEVE FINIRE DENTRO IL RACCORDO DEL PIEDE
   Il testo di chiusura cadeva proprio dove il bianco comincia a
   scurire, e si leggeva male. Qui gli si lascia tutto il raccordo di
   margine, cosi' resta centrato sul chiaro.
   ------------------------------------------------------------------ */
:root{--raccordo-piede:clamp(150px,14vw,215px)}
main > section:last-child{
  padding-bottom:calc(var(--raccordo-piede) + clamp(24px,3vw,46px)) !important}
/* Se la pagina si chiude con una fascia blu, questa sfuma direttamente
   nel piede: il raccordo del piede va spento, altrimenti se ne
   sovrappongono due. Il riempimento resta quello normale, cosi' il
   testo di chiusura non finisce dentro la sfumatura. */
body:has(main > section.banda:last-child) .footer::before{display:none}

/* ------------------------------------------------------------------
   IL PULSANTE PRINCIPALE DENTRO UNA FASCIA BLU
   Era blu su blu: il testo si leggeva benissimo, ma del pulsante si
   vedeva solo il filo di contorno. Sulla fascia si riempie di bianco
   con il testo in inchiostro, l'esatto rovescio di come sta sul chiaro.
   ------------------------------------------------------------------ */
.section.banda .btn-primary{background:#FFFFFF !important;
  color:var(--inchiostro,#0B2E3D) !important;border-color:#FFFFFF !important}
@media (hover:hover){
  .section.banda .btn-primary:hover{background:#E4F2F7 !important;
    border-color:#E4F2F7 !important}
}

/* ==================================================================
   LA PAGINA SERVIZI ENTRA IN SCENA
   Era l'unica pagina che si apriva di colpo. Le righe
   dell'intestazione salgono una dopo l'altra, poi le quattro schede
   si avvicinano. Tutto in CSS: parte con la pagina e non dipende da
   nessuno script.
   ================================================================== */
body.pag-servizi .page-hero > .container > *{
  animation:svSale .8s cubic-bezier(.22,1,.3,1) both}
body.pag-servizi .page-hero > .container > *:nth-child(1){animation-delay:.05s}
body.pag-servizi .page-hero > .container > *:nth-child(2){animation-delay:.14s}
body.pag-servizi .page-hero > .container > *:nth-child(3){animation-delay:.24s}
body.pag-servizi .page-hero > .container > *:nth-child(4){animation-delay:.34s}
@keyframes svSale{from{opacity:0;transform:translate3d(0,16px,0)} to{opacity:1;transform:none}}

body.pag-servizi .section-head{animation:svSale .8s cubic-bezier(.22,1,.3,1) .40s both}
body.pag-servizi .service-card{
  animation:svAvvicina .82s cubic-bezier(.22,1,.3,1) both}
body.pag-servizi .service-card:nth-child(1){animation-delay:.50s}
body.pag-servizi .service-card:nth-child(2){animation-delay:.60s}
body.pag-servizi .service-card:nth-child(3){animation-delay:.70s}
body.pag-servizi .service-card:nth-child(4){animation-delay:.80s}
@keyframes svAvvicina{from{opacity:0;transform:translate3d(0,22px,0) scale(.965)}
                      to  {opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  body.pag-servizi .page-hero > .container > *,
  body.pag-servizi .section-head,
  body.pag-servizi .service-card{animation:none !important;opacity:1 !important;
    transform:none !important}
}

/* ------------------------------------------------------------------
   LA FOTOGRAFIA NELLA SCHEDA DEL TEAM
   Dove c'e' una fotografia riempie il riquadro al posto delle iniziali;
   dove non c'e', restano le iniziali su fondo blu come prima.
   ------------------------------------------------------------------ */
.person-photo{overflow:hidden;position:relative}
.person-photo picture,.person-photo img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 22%;display:block}

/* ==================================================================
   IL MENU SU SCHERMO STRETTO
   Il pannello delle quattro aree era semplicemente spento: il pulsante
   "Servizi" c'era, ma non apriva niente. Ora il pannello sta dentro il
   menu e si apre a fisarmonica sotto al pulsante.
   ================================================================== */
@media(max-width:1000px){
  .nav.mobile-open{gap:2px;padding:14px 20px 18px}
  .nav.mobile-open > a,
  .nav.mobile-open > button{width:100%;padding-block:13px;font-size:1rem}
  .nav.mobile-open > .nav-cta{margin-top:10px;text-align:center;padding-block:15px}
  .nav.mobile-open > .lang-switch{width:auto;padding-inline:16px;margin-top:6px}

  .nav .mega{display:block !important;position:static;opacity:1;transform:none;
    pointer-events:auto;background:transparent;border-top:0;box-shadow:none;
    width:100%;max-height:0;overflow:hidden;
    transition:max-height .34s cubic-bezier(.3,.9,.25,1)}
  .nav .mega.open{max-height:620px}
  .nav .mega .mega-grid{display:block;width:100%;padding:4px 0 10px}
  .nav .mega .mega-card{display:block;padding:13px 15px;margin-bottom:8px;
    border-radius:13px;background:#F3F9FB;border-color:var(--filo,#D3E3EA)}
  /* il maiuscolo vale per le voci del menu, non per le descrizioni
     delle aree: li' rende il testo pesante e lento da leggere */
  .nav .mega .mega-card,
  .nav .mega .mega-card strong,
  .nav .mega .mega-card span{text-transform:none;letter-spacing:0}
  .nav .mega .mega-card strong{font-size:.97rem;margin-bottom:3px;font-weight:800}
  .nav .mega .mega-card span{font-size:.82rem;line-height:1.45;font-weight:400}
  /* il pulsante va allineato a sinistra come gli altri: da solo si centra */
  .nav.mobile-open > button{text-align:left;display:flex;align-items:center;gap:8px}
}
@media(max-width:1000px) and (prefers-reduced-motion:reduce){
  .nav .mega{transition:none}
}

/* ==================================================================
   RITOCCHI PER LO SCHERMO DEL TELEFONO
   ================================================================== */
@media(max-width:1000px){
  /* Il velo scuro sulle fotografie dei progetti si fermava al 62%
     dell'altezza. Su schermo stretto il testo e' molto piu' alto e
     finiva sulla parte chiara dell'immagine: l'occhiello azzurro sul
     cielo era praticamente illeggibile. */
  .project-overlay{
    background:linear-gradient(0deg,
      rgba(0,32,46,.95) 0%, rgba(0,32,46,.90) 42%,
      rgba(0,32,46,.62) 68%, rgba(0,32,46,.22) 86%, rgba(0,32,46,0) 100%);
    padding:24px 20px}
  .project-main,.project-side{min-height:430px}
  .project-overlay h3{font-size:1.18rem;line-height:1.26}
  .project-overlay p{font-size:.92rem;line-height:1.5}

  /* Nella vetrina le schede erano centrate in verticale dentro un
     telaio alto quanto la piu' lunga: le piu' corte lasciavano un
     vuoto in cima. Su telefono partono dall'alto. */
  .quadro{justify-content:flex-start}
  .telaio{align-items:start}
}

@media(max-width:620px){
  /* il carosello del team e le schede si guardano una alla volta */
  .team-grid{grid-template-columns:1fr}
  .quadro{padding:24px 20px}
  .quadro h3{font-size:1.32rem}
  .quadro .voci li{font-size:.8rem;padding:6px 11px}
  .rail{gap:4px}
  .tasto{padding:12px 14px 14px}
}

/* ==================================================================
   LA GRIGLIA DELLA SQUADRA: tre in alto, quattro sotto.

   Sette persone su quattro colonne davano tre piu' quattro solo per
   caso, con la quarta scheda appesa in cima. Qui le colonne diventano
   ventiquattro sottili: ogni scheda ne occupa sei, cosi' la larghezza
   e' identica a prima, ma la prima riga puo' partire dalla quarta
   colonna e restare centrata sotto le quattro di sotto.

   Il resto si sistema da solo: la quarta scheda non entra piu' nella
   prima riga e scende, portandosi dietro le altre tre.
   ================================================================== */
@media(min-width:1001px){
  .team-grid{grid-template-columns:repeat(24,1fr)}
  .team-grid .person{grid-column:span 6}
  .team-grid .person:first-child{grid-column:4 / span 6}
}
/* sotto i 1000px tornano due colonne, poi una: le schede si rimettono
   in fila da sole e la regola di sopra non deve seguirle */
@media(max-width:1000px){ .team-grid .person{grid-column:auto} }

/* ==================================================================
   LA VETRINA DELLA HOME, PIU' COMPATTA.

   Con due paragrafi e nove etichette la scheda piu' lunga portava il
   telaio a 630px, e tutte le altre si trovavano dentro un riquadro
   mezzo vuoto. Qui si stringe quello che si puo' stringere senza
   togliere respiro al testo: interlinea, margini fra i blocchi,
   dimensione delle etichette.
   ================================================================== */
.quadro{padding:clamp(20px,2.1vw,30px) clamp(22px,2.3vw,34px) !important}
.quadro .testa{margin-bottom:7px}
.quadro h3{margin-bottom:9px;line-height:1.1;
  font-size:clamp(1.3rem,1.92vw,1.7rem)}
.quadro .dice{line-height:1.52;max-width:66ch;
  font-size:clamp(.93rem,1vw,1rem)}
.quadro .voci{margin-top:13px;gap:6px}
.quadro .voci li{font-size:.78rem;padding:4px 10px;line-height:1.3}
.quadro .voci + .dice{margin-top:13px}
.quadro .vai{margin-top:17px;font-size:.93rem}

/* Il riquadro della vetrina segue la scheda accesa: ogni scheda prende
   la sua altezza naturale invece di stare tutte nella cella della piu'
   lunga. L'altezza vera la mette il JavaScript; qui c'e' solo il modo
   in cui ci arriva. */
html.ha-vetrina .quadro{align-self:start}
html.ha-vetrina .telaio{transition:height .55s cubic-bezier(.22,1,.3,1)}
@media (prefers-reduced-motion:reduce){
  html.ha-vetrina .telaio{transition:none}
}

/* ==================================================================
   IL METODO LDL, SEI FASI.

   Erano cinque e stavano su una riga sola. Con sei passaggi e testi
   piu' lunghi una riga di sei colonne stringerebbe troppo: due righe
   da tre tengono le descrizioni leggibili e il blocco compatto.
   ================================================================== */
@media(min-width:1001px){
  .method-grid{grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,34px) clamp(20px,2.4vw,40px)}
}
@media(min-width:651px) and (max-width:1000px){
  .method-grid{grid-template-columns:repeat(2,1fr);gap:22px 26px}
}