/* ================================================================== */
/* Home (dalla 2.5): una pagina che si legge scorrendo, nell'ordine     */
/* promessa -> esperienza -> problema -> metodo -> risultati ->         */
/* servizi -> persone -> articoli -> domande -> primo passo.            */
/* Si muovono solo il titolo, le schede dell'apertura e i numeri.       */
/* Con le animazioni ridotte tutto resta fermo e completo.              */
/* ================================================================== */
.page-home2{--h2-ice:#E8FBFF;--h2-mute:#93B9BC;--h2-line:rgba(211,243,238,.16)}

/* l'apertura sale sotto l'intestazione */
/* (!important: il tema azzera il margine dei blocchi di pagina con .wp-block-group.page > *) */
.wp-block-group.page-home2 > .h2{margin-top:calc(-1 * var(--hh))!important}
.page-home2 .h2{position:relative;background:var(--night)}
.page-home2 .h2s{position:relative}

/* apertura */
.h2-hero{min-height:100vh;min-height:100svh;display:flex;align-items:center;box-sizing:border-box;padding-top:calc(var(--hh) + 40px)!important;padding-bottom:clamp(150px,24vh,260px)!important}
.h2-hero .wrap{width:100%;position:relative;z-index:1}
.h2-copy{max-width:720px;min-width:0}
.h2-hero h1 .l1{display:block}
.h2-hero .lead{font-size:clamp(17px,1rem + .35vw,20px);max-width:36ch;margin-top:22px}
.h2-hero .btn-row{margin-top:32px}
/* dalla 2.20 il titolo arriva gia' diviso in parole dal tema e l'entrata parte col CSS, senza aspettare
   lo script. Se per qualche motivo non e' diviso, resta nascosto al massimo 2,5 secondi e poi compare. */
html.h-motion .h2 .h2-split:not(.is-split){opacity:0;animation:h2show 0s linear 2.5s forwards}
@keyframes h2show{to{opacity:1}}
.h2 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.h2 .h-done .w{overflow:visible}
.h2 .w > span{display:inline-block}
html.h-motion .h2 .h-anim .w > span{animation:h2-word 1s cubic-bezier(.16,.84,.24,1) var(--d,0s) both}
@keyframes h2-word{from{transform:translateY(112%)}}
/* etichetta e bottoni entrano in dissolvenza; il testo d'apertura si vede da subito e sale appena:
   e' l'elemento piu' grande della prima schermata (LCP), quindi conta come "dipinto" dal primo istante */
html.h-motion .h2 .h-anim .h-fade{animation:h2-fade .9s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
html.h-motion .h2 .h-anim .lead.h-fade{animation-name:h2-rise;animation-delay:.1s}
@keyframes h2-fade{from{opacity:0;transform:translateY(14px)}}
@keyframes h2-rise{from{transform:translateY(14px)}}

/* apertura: il reparto al lavoro (dalla 2.4). Tre schede in HTML accanto al titolo: le richieste dal
   sito che crescono, la risposta in un minuto, il report del mese che risponde ai tre problemi di
   "Ti riconosci?". Tutte le misure sono in em: per ingrandire o rimpicciolire basta il font-size di .h2-board.
   Con le animazioni ridotte si vedono ferme, nello stato finale. */
.h2-hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:clamp(28px,4vw,64px)}
@media(min-width:701px){.page-home2 .h2-hero h1{font-size:clamp(34px,1.2rem + 3vw,60px)}}
.page-home2 .h2-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(211,243,238,.2) 1px,transparent 1.5px);background-size:24px 24px;-webkit-mask-image:radial-gradient(40% 58% at 76% 46%,#000 0%,transparent 72%);mask-image:radial-gradient(40% 58% at 76% 46%,#000 0%,transparent 72%);pointer-events:none}
.h2-board{position:relative;width:34em;height:32.5em;font-size:clamp(11px,1.02vw,15px);margin-right:calc(-1 * clamp(0px,(100vw - 1240px) / 2,70px));line-height:1.4}
.hb-l{position:absolute}
.hb-l1{right:1.6em;top:6.6em;width:30.4em;z-index:1}
.hb-l2{right:0;bottom:0;width:18.6em;z-index:2}
.hb-l3{left:0;top:0;width:23.6em;z-index:3}
.hb-card{background:#fff;color:var(--ink);border-radius:1.15em;padding:1.15em 1.3em;box-shadow:0 2.2em 4.4em -1.4em rgba(0,0,0,.62),0 .1em .3em rgba(0,0,0,.2)}
.hb-h{display:flex;align-items:center;justify-content:space-between;gap:.8em;font-size:.93em}
.hb-h b{font-weight:600}
.hb-up{display:inline-flex;align-items:center;gap:.35em;padding:.2em .65em;border-radius:99em;background:#E3F6F1;color:var(--teal);font-size:.86em;font-weight:600;white-space:nowrap}
.hb-up svg{width:1.05em;height:1.05em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hb-sub{margin-top:.1em;font-size:.79em;color:var(--mute)}
.hb-plot{position:relative;margin-top:.8em}
.hb-plot svg{display:block;width:100%;height:auto;overflow:visible}
.hb-grid{fill:none;stroke:#E6EEEE;stroke-width:.8}
.hb-area{fill:url(#hb-grad)}
.hb-line{fill:none;stroke:var(--gold);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1.1;stroke-dashoffset:0}
.hb-dot{position:absolute;left:95.62%;top:10.64%;width:.8em;height:.8em;margin:-.4em 0 0 -.4em;border-radius:50%;background:var(--gold);box-shadow:0 0 0 .22em #fff}
.hb-dot::after{content:"";position:absolute;inset:-.22em;border-radius:50%;border:2px solid var(--gold);opacity:0;animation:hb-ping 2.6s 3.4s ease-out infinite}
@keyframes hb-ping{0%{transform:scale(.7);opacity:.75}100%{transform:scale(2.8);opacity:0}}
.hb-x{display:flex;justify-content:space-between;margin-top:.45em;padding-right:3%;font-size:.75em;color:var(--mute)}
.hb-rep .hb-h{margin-bottom:.45em}
.hb-m{color:var(--mute);font-weight:400}
.hb-rep dl{margin:0}
.hb-rep dl div{display:flex;justify-content:space-between;align-items:baseline;gap:.6em;padding:.5em 0;border-top:1px solid #E6EEEE;font-size:.86em}
.hb-rep dt{color:var(--ink-2)}
.hb-rep dd{margin:0;font-weight:700;font-size:1.1em;color:var(--ink);white-space:nowrap}
.hb-ref{display:flex;align-items:center;gap:.6em;margin-top:.15em;padding-top:.7em;border-top:1px solid #E6EEEE;font-size:.79em;color:var(--mute)}
.hb-av{display:grid;place-items:center;flex:none;width:2.2em;height:2.2em;border-radius:50%;background:var(--teal)}
.hb-av svg{width:1.25em;height:1.25em;fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round}
.hb-note{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.85em;align-items:center;padding:1em 1.2em}
.hb-ic{display:grid;place-items:center;width:2.6em;height:2.6em;border-radius:.8em;background:#E3F6F1;color:var(--teal)}
.hb-ic svg{width:1.35em;height:1.35em;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hb-nt b{display:block;font-size:.93em;font-weight:600}
.hb-nt span{display:block;font-size:.79em;color:var(--mute)}
.hb-ok{grid-column:1/-1;display:flex;align-items:center;gap:.5em;margin-top:.8em;padding-top:.7em;border-top:1px solid #E6EEEE;font-size:.86em;font-weight:600;color:var(--teal-d)}
.hb-ok svg{width:1.2em;height:1.2em;flex:none;fill:none;stroke:var(--teal);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* con il movimento: le schede entrano dopo il titolo, la linea si disegna, la notifica va e viene (home2.js).
   Dalla 2.20 l'entrata e' fatta col CSS (parte con la pagina, senza aspettare lo script). */
html.h-motion .h2-board :is(.hb-l1,.hb-l2) .hb-card{animation:h2-card 1s cubic-bezier(.2,.8,.2,1) .45s both}
html.h-motion .h2-board .hb-l2 .hb-card{animation-delay:.8s}
@keyframes h2-card{from{opacity:0;transform:translateY(1.4em)}}
html.h-motion .h2-board .hb-line{animation:h2-line 1.9s cubic-bezier(.45,0,.2,1) .85s both}
@keyframes h2-line{from{stroke-dashoffset:1.05}to{stroke-dashoffset:0}}
html.h-motion .h2-board .hb-area{animation:h2-fadein 1.2s ease 1.9s both}
html.h-motion .h2-board .hb-dot{animation:h2-fadein .4s ease 2.6s both}
/* le schede galleggiano piano, ognuna al suo ritmo: col CSS, cosi' il telefono non ricalcola la pagina a ogni
   fotogramma (fino alla 2.19 lo faceva lo script). Solo con il mouse: sul telefono restano ferme. */
@media (hover:hover) and (pointer:fine){
  html.h-motion .h2-board .hb-l{animation:hb-float 5.4s ease-in-out infinite alternate}
  html.h-motion .h2-board .hb-l2{animation-duration:6.6s;animation-delay:-1.7s}
  html.h-motion .h2-board .hb-l3{animation-duration:7.8s;animation-delay:-3.1s}
}
@keyframes hb-float{from{translate:0 -3px}to{translate:0 3px}}
html.h-motion .h2-board .hb-l3 .hb-card{opacity:0;transform:translateY(-1em) scale(.98);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
html.h-motion .h2-board .hb-note.on{opacity:1;transform:none}
/* dalla 2.9.1, come nelle aperture delle altre pagine: prima il filo si riempie (il sistema lavora), poi arriva la risposta */
html.h-motion .h2-board .hb-ok{position:relative}
html.h-motion .h2-board .hb-ok > *{opacity:0;transform:translateY(.4em);transition:opacity .45s ease,transform .5s ease}
html.h-motion .h2-board .hb-note.ok .hb-ok > *{opacity:1;transform:none}
html.h-motion .h2-board .hb-ok::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--teal),var(--gold));transform:scaleX(0);transform-origin:0 50%;transition:transform 0s linear .6s,opacity .3s ease}
html.h-motion .h2-board .hb-note.on .hb-ok::before{transform:scaleX(1);transition:transform 1.25s cubic-bezier(.45,0,.2,1) .1s}
html.h-motion .h2-board .hb-note.ok .hb-ok::before{opacity:0}

/* dalla 2.23: la linea in fondo all'apertura si accende. Quando nella scheda parte la risposta a una richiesta,
   una luce corre lungo la linea: piano nel tratto piatto, sempre piu' veloce in salita (come la crescita); le
   cinque tappe (i passi del metodo) si accendono al passaggio e la punta fa un lampo. La partenza la decide
   home2.js con la classe .sc-via (stesso orologio della notifica: 3 s, poi ogni 7,5 s; fuori schermo si ferma).
   Solo trasformazioni e opacita'. Le misure sono in unita' del contenitore (cqw/cqh) e seguono la linea dello
   sfondo (linea.svg, ancorata in basso a destra) a ogni larghezza. Senza movimento o senza script: linea ferma. */
/* il riquadro copre tutta l'apertura e taglia quello che esce (il lampo della punta sul bordo destro): niente
   scorrimento laterale. La linea vera e propria e' .sc-area, grande come lo sfondo con la linea */
.h2-scia{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.sc-area{position:absolute;left:0;right:0;bottom:0;height:clamp(110px,15vw,240px);container-type:size}
.sc-box{position:absolute;right:0;bottom:0;width:min(100cqw,533.33cqh);aspect-ratio:16/3;container-type:size}
.sc-box i{position:absolute;left:0;top:0;width:0;height:0}
.sc-c{opacity:0}
.sc-c::before{content:"";position:absolute;right:0;top:calc(max(2px,1.2cqh) / -2);width:max(40px,50cqh);height:max(2px,1.2cqh);border-radius:99px;background:linear-gradient(90deg,rgba(255,224,138,0),rgba(255,214,102,.35) 40%,rgba(255,224,138,.8) 80%,#FFF6DA)}
.sc-c::after{content:"";position:absolute;left:calc(max(10px,8cqh) / -2);top:calc(max(10px,8cqh) / -2);width:max(10px,8cqh);height:max(10px,8cqh);border-radius:50%;background:radial-gradient(circle,#fff 0 16%,#FFE08A 30%,rgba(247,184,1,.4) 48%,rgba(247,184,1,0) 70%)}
.sc-t{transform:translate(var(--x),var(--y))}
.sc-t::after{content:"";position:absolute;left:calc(var(--s,max(16px,11cqh)) / -2);top:calc(var(--s,max(16px,11cqh)) / -2);width:var(--s,max(16px,11cqh));height:var(--s,max(16px,11cqh));border-radius:50%;background:radial-gradient(circle,rgba(255,246,218,.95) 0 12%,rgba(247,184,1,.5) 32%,rgba(247,184,1,0) 68%);opacity:0}
.sc-t1{--x:65.44cqw;--y:76.16cqh;--d:1.20s}.sc-t2{--x:72.97cqw;--y:68.60cqh;--d:1.50s}.sc-t3{--x:80.36cqw;--y:57.65cqh;--d:1.77s}.sc-t4{--x:87.59cqw;--y:43.96cqh;--d:2.02s}.sc-t5{--x:94.64cqw;--y:27.88cqh;--d:2.26s}.sc-p{--x:99.00cqw;--y:16.69cqh;--d:2.36s;--s:max(26px,22cqh)}
.h2-hero.sc-via .sc-c{animation:sc-corsa 7.5s linear var(--sc0,3s) infinite both;will-change:transform,opacity}
.h2-hero.sc-via .sc-t::after{animation:sc-lampo 7.5s cubic-bezier(.2,.7,.3,1) calc(var(--sc0,3s) + var(--d)) infinite both;will-change:transform,opacity}
@keyframes sc-lampo{0%{opacity:0;transform:scale(.45)}3%{opacity:1;transform:scale(1)}17%,100%{opacity:0;transform:scale(2.2)}}
@keyframes sc-corsa{0.00%{transform:translate(46.00cqw,79.33cqh) rotate(0.0deg);opacity:0}2.78%{transform:translate(47.41cqw,79.33cqh) rotate(0.0deg);opacity:0.9}4.42%{transform:translate(48.82cqw,79.33cqh) rotate(0.0deg);opacity:1}5.79%{transform:translate(50.23cqw,79.33cqh) rotate(0.0deg);opacity:1}7.01%{transform:translate(51.64cqw,79.33cqh) rotate(0.0deg);opacity:1}8.14%{transform:translate(53.05cqw,79.33cqh) rotate(0.0deg);opacity:1}9.19%{transform:translate(54.46cqw,79.33cqh) rotate(0.0deg);opacity:1}10.18%{transform:translate(55.87cqw,79.33cqh) rotate(0.0deg);opacity:1}11.13%{transform:translate(57.28cqw,79.33cqh) rotate(0.0deg);opacity:1}12.04%{transform:translate(58.69cqw,79.27cqh) rotate(-1.3deg);opacity:1}12.92%{transform:translate(60.10cqw,78.98cqh) rotate(-3.1deg);opacity:1}13.76%{transform:translate(61.51cqw,78.49cqh) rotate(-3.9deg);opacity:1}14.58%{transform:translate(62.91cqw,77.81cqh) rotate(-5.9deg);opacity:1}15.38%{transform:translate(64.31cqw,76.96cqh) rotate(-6.6deg);opacity:1}16.16%{transform:translate(65.71cqw,75.97cqh) rotate(-7.9deg);opacity:1}16.92%{transform:translate(67.10cqw,74.83cqh) rotate(-9.2deg);opacity:1}17.67%{transform:translate(68.49cqw,73.57cqh) rotate(-9.8deg);opacity:1}18.40%{transform:translate(69.88cqw,72.17cqh) rotate(-11.8deg);opacity:1}19.11%{transform:translate(71.26cqw,70.64cqh) rotate(-12.3deg);opacity:1}19.81%{transform:translate(72.63cqw,69.02cqh) rotate(-13.1deg);opacity:1}20.50%{transform:translate(74.00cqw,67.27cqh) rotate(-13.8deg);opacity:1}21.18%{transform:translate(75.37cqw,65.40cqh) rotate(-15.0deg);opacity:1}21.85%{transform:translate(76.73cqw,63.44cqh) rotate(-15.4deg);opacity:1}22.50%{transform:translate(78.09cqw,61.37cqh) rotate(-16.8deg);opacity:1}23.15%{transform:translate(79.44cqw,59.20cqh) rotate(-16.8deg);opacity:1}23.79%{transform:translate(80.78cqw,56.93cqh) rotate(-17.4deg);opacity:1}24.42%{transform:translate(82.12cqw,54.58cqh) rotate(-18.4deg);opacity:1}25.04%{transform:translate(83.45cqw,52.14cqh) rotate(-19.2deg);opacity:1}25.66%{transform:translate(84.78cqw,49.60cqh) rotate(-20.2deg);opacity:1}26.26%{transform:translate(86.10cqw,46.99cqh) rotate(-20.4deg);opacity:1}26.87%{transform:translate(87.42cqw,44.29cqh) rotate(-20.8deg);opacity:1}27.46%{transform:translate(88.73cqw,41.52cqh) rotate(-22.1deg);opacity:1}28.05%{transform:translate(90.03cqw,38.65cqh) rotate(-22.5deg);opacity:1}28.63%{transform:translate(91.33cqw,35.73cqh) rotate(-23.1deg);opacity:1}29.20%{transform:translate(92.63cqw,32.73cqh) rotate(-23.6deg);opacity:1}29.77%{transform:translate(93.91cqw,29.66cqh) rotate(-24.1deg);opacity:1}30.34%{transform:translate(95.19cqw,26.52cqh) rotate(-25.1deg);opacity:1}30.90%{transform:translate(96.47cqw,23.31cqh) rotate(-25.2deg);opacity:1}31.45%{transform:translate(97.74cqw,20.03cqh) rotate(-26.0deg);opacity:1}32.00%{transform:translate(99.00cqw,16.69cqh) rotate(-26.4deg);opacity:0}32.60%,100%{transform:translate(99.00cqw,16.69cqh) rotate(-26.4deg);opacity:0}}
html:not(.h-motion) .h2-scia{display:none}
@media(max-width:900px){.sc-area{height:auto;aspect-ratio:1600/300}}


/* dalla 2.9.1, come nelle altre pagine: alcune parti si compongono quando arrivano sullo schermo, una volta
   sola (home2.js aggiunge .rv). Sono animazioni finite: non toccano gli effetti al passaggio del mouse.
   Senza movimento (o se lo script parte tardi) resta tutto com'e'. */
@keyframes h2-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes h2-pop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
@keyframes h2-fadein{from{opacity:0}to{opacity:1}}
@keyframes h2-dash{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes h2-strike{from{text-decoration-color:transparent}}
@keyframes h2-new{from{opacity:0;transform:translateX(44px)}to{opacity:1;transform:translateX(12px)}}
/* il metodo: i cinque passi arrivano in ordine, da T a K, e la lettera fa un piccolo rimbalzo */
html.h-motion .t5:not(.rv) > li{opacity:0}
html.h-motion .t5.rv > li{animation:h2-in .7s cubic-bezier(.2,.8,.2,1) var(--dl,0s) backwards}
html.h-motion .t5.rv > li .L{transform-origin:0 60%;animation:h2-pop .6s cubic-bezier(.34,1.56,.64,1) calc(var(--dl,0s) + .2s) backwards}
.t5 > li:nth-child(2){--dl:.12s}
.t5 > li:nth-child(3){--dl:.24s}
.t5 > li:nth-child(4){--dl:.36s}
.t5 > li:nth-child(5){--dl:.48s}
/* case study: i quadratini arrivano uno dopo l'altro, le barre si allungano (i costi che calano si accorciano) */
html.h-motion .res-data:not(.rv) .u i{opacity:0;transform:scale(.3)}
html.h-motion .res-data:not(.rv) .bar i{transform:scaleX(var(--da,0))}
html.h-motion .res-data .u i{transition:opacity .3s ease,transform .45s cubic-bezier(.34,1.56,.64,1)}
html.h-motion .res-data .bar i{transform-origin:0 50%;transition:transform 1.1s cubic-bezier(.45,0,.2,1) .15s}
html.h-motion .res-data .r.on .bar i{transition-delay:.45s}
/* servizi: le schermate dei reparti si compongono (la linea sale, il messaggio cambia, arrivano le richieste) */
html.h-motion .dcard .ph:not(.rv) .ui > *{opacity:0}
html.h-motion .dcard .ph.rv .ui-growth .uc{animation:h2-in .6s cubic-bezier(.2,.8,.2,1) backwards}
html.h-motion .dcard .ph .ui-growth path[pathLength]{stroke-dasharray:1}
html.h-motion .dcard .ph.rv .ui-growth path[pathLength]{animation:h2-dash 1.4s cubic-bezier(.45,0,.2,1) .35s backwards}
html.h-motion .dcard .ph.rv .ui-growth path:not([pathLength]){animation:h2-fadein .8s ease 1.2s backwards}
html.h-motion .dcard .ph.rv .ui-growth circle{transform-box:fill-box;transform-origin:center;animation:h2-pop .5s cubic-bezier(.34,1.56,.64,1) 1.6s backwards}
html.h-motion .dcard .ph.rv .ui-studio .msg.old{animation:h2-in .6s cubic-bezier(.2,.8,.2,1) .1s backwards}
html.h-motion .dcard .ph.rv .ui-studio .msg.old s{animation:h2-strike .5s ease .8s backwards}
html.h-motion .dcard .ph.rv .ui-studio .msg.new{animation:h2-new .7s cubic-bezier(.2,.8,.2,1) 1.1s backwards}
html.h-motion .dcard .ph.rv .ui-studio .msg.new b{animation:h2-pop .5s cubic-bezier(.34,1.56,.64,1) 1.65s backwards}
html.h-motion .dcard .ph.rv .ui-tech .brw{animation:h2-in .6s cubic-bezier(.2,.8,.2,1) backwards}
html.h-motion .dcard .ph.rv .ui-tech li{animation:h2-in .5s cubic-bezier(.2,.8,.2,1) var(--dl,.4s) backwards}
.dcard .ui-tech li:nth-child(2){--dl:.7s}
.dcard .ui-tech li:nth-child(3){--dl:1s}
html.h-motion .dcard .ph.rv .ui-ai .st{animation:h2-in .5s cubic-bezier(.2,.8,.2,1) var(--dl,.1s) backwards}
.dcard .ui-ai .st:nth-child(2){--dl:.5s}
.dcard .ui-ai .st:nth-child(3){--dl:.9s}

/* esperienza: numeri e clienti */
.h2-proof{color:var(--ink-2);padding-block:104px 96px!important}
/* titolo a sinistra, la frase che lo spiega a destra (sul telefono una sotto l'altra) */
.pr-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:20px 64px;align-items:end}
.pr-head h2{font-size:clamp(30px,1.2rem + 2.2vw,48px);max-width:15ch}
/* dalla 2.22.1 il titolo va a capo in tre righe decise (span .l); sul telefono va a capo da solo, con gli spazi unificati */
@media(min-width:901px){.pr-head h2{max-width:none}.pr-head h2 .l{display:block}}
.pr-head .lead{margin:0;max-width:44ch;font-size:clamp(16px,.95rem + .3vw,18.5px);line-height:1.6;color:var(--ink-2)}
.pr-head .lead strong{color:var(--ink)}
/* dalla 2.22.5 il testo accanto al titolo e' fatto di frasi brevi, una per paragrafo */
.pr-head .pr-txt p{margin:0}
.pr-head .pr-txt p+p{margin-top:14px}
.pr-nums{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:64px 0 0;padding:0;border-top:2px solid transparent;border-image:linear-gradient(90deg,var(--line),var(--teal) 55%,var(--gold)) 1}
.pr-nums li{display:flex;flex-direction:column;gap:10px;padding:32px 24px 8px 0;min-width:0}
.pr-nums li + li{padding-left:24px;border-left:1px solid var(--line)}
.pr-nums b{font-size:clamp(34px,1.3rem + 2.4vw,56px);font-weight:800;line-height:1;letter-spacing:-.035em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.pr-nums li > span{font-size:15px;line-height:1.45;color:var(--mute);max-width:24ch}
.pr-nums .pr-meta{flex-direction:row;align-items:center;gap:14px}
.pr-meta img{height:58px;width:auto;border-radius:8px;flex:none}
.pr-nums .pr-meta span{font-size:16px;font-weight:600;line-height:1.3;color:var(--ink)}
/* tablet in verticale (701-900 px): quattro colonne strette, il badge Meta va sopra la scritta come sul telefono
   piccolo; prima usciva dalla colonna e la pagina scorreva di lato (fino a 17 px a 720) */
@media(min-width:701px) and (max-width:900px){.pr-nums .pr-meta{flex-direction:column;align-items:flex-start;gap:8px}}
/* dalla 2.22.1 piu' aria tra titolo, numeri e clienti: tre blocchi distinti, non uno solo */
.h2-proof .brands-lbl{margin-top:80px;margin-bottom:16px}
.h2-proof .mq2>div{padding-block:18px}

/* ti riconosci? (dalla 2.6.1): tre segnali in colonne aperte, senza scatole ne' disegni.
   Un'icona a linee per ognuno, il titolo, due righe e "Quanto costa" sotto un filo.
   Il bordeaux solo su "Quanto costa". */
.h2-pains{color:var(--ink-2)}
.h2-pains h2{max-width:none}
.h2-pains h2 .l{display:block}
.h2-pains h2 + .lead{max-width:none}
.pz{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:56px;margin:56px 0 0;padding:0}
/* sul computer le righe (icona, titolo, testo, costo) sono allineate tra le colonne */
.pz-i{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;min-width:0}
.pz-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 6px 16px rgba(16,51,59,.06)}
.pz-ico svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pz-t{display:contents}
.pz-i h3{margin-top:22px;font-size:20px;line-height:1.25}
.pz-i h3 span{display:block}
.pz-i h3 + p{margin:10px 0 22px;font-size:15.5px;line-height:1.6}
.pz-c{align-self:start;padding-top:16px;border-top:1px solid var(--line);font-size:14.5px;font-weight:500;line-height:1.55;color:var(--ink)}
.pz-c b{font-weight:700;color:var(--bord)}

/* il metodo: sul palco, cinque passi in fila (gli stessi colori del metodo nelle altre pagine) */
/* titolo in due righe: prima gli obiettivi (in evidenza), poi grafiche, post e campagne (piu' tenue) */
.h-metodo .thead h2 .l{display:block}
.h-metodo .thead h2 .l + .l{color:var(--stage-mute)}
.h-metodo .thead h2 .hl{color:#fff}
.h-metodo .thead p{color:var(--on-stage)}
.h-metodo .thead .link{display:block;width:max-content;margin-top:12px;color:var(--gold-hi)}
.tk-name{color:var(--gold);font-weight:800;letter-spacing:.02em}

/* case study: le stesse schede della pagina Case study */
.h-casi .testi-wrap{margin-top:64px}

/* telefono e schermi verticali */
@media(max-aspect-ratio:4/5){
  .h2-hero{align-items:flex-start;padding-top:calc(var(--hh) + 34px)!important;padding-bottom:110px!important}
  .h2-hero .wrap{grid-template-columns:minmax(0,1fr)}
  .h2-board{width:30em;font-size:min(calc((100vw - 44px) / 30),15px);margin:36px auto 0;justify-self:center}
  .hb-l1{right:1.2em;width:28.8em}
  .page-home2 .h2-hero::before{-webkit-mask-image:radial-gradient(60% 34% at 50% 76%,#000 0%,transparent 72%);mask-image:radial-gradient(60% 34% at 50% 76%,#000 0%,transparent 72%)}
}
@media(max-width:700px){
  .h2-proof{padding-block:72px 64px!important}
  .pr-nums{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:40px}
  .pr-nums li{padding:22px 14px 20px 0}
  .pr-nums li:nth-child(2n){padding-left:16px;border-left:1px solid var(--line)}
  .pr-nums li:nth-child(3){border-left:0;padding-left:0}
  .pr-nums li:nth-child(n+3){border-top:1px solid var(--line)}
  .pr-nums li > span{font-size:14px}
  .pr-meta img{height:44px}
  .pr-nums .pr-meta span{font-size:14.5px}
  .h2-proof .brands-lbl{margin-top:52px;margin-bottom:8px}
  .h2-proof .mq2>div{padding-block:16px}
}
@media(max-width:900px){
  .pr-head{grid-template-columns:1fr}
  .pr-head h2{max-width:none}
  .pz{grid-template-columns:1fr;gap:0;margin-top:40px}
  .pz-i{grid-row:auto;grid-template-rows:none;grid-template-columns:48px minmax(0,1fr);column-gap:22px;align-items:start;padding:28px 0}
  .pz-t{display:flex;flex-direction:column;min-width:0}
  .pz-i h3 span{display:inline}
  .pz-i + .pz-i{border-top:1px solid var(--line)}
  .pz-i h3{margin-top:10px}
  .pz-i h3 + p{margin-bottom:12px}
  .pz-c{padding-top:0;border-top:0}
}
/* telefono: i tre segnali uno sotto l'altro, il disegno sopra il testo (dopo le regole del tablet) */
@media(max-width:700px){
  .pz{margin-top:28px}
  .pz-i{grid-template-columns:44px minmax(0,1fr);column-gap:16px;padding:24px 0}
  .pz-ico{width:44px;height:44px;border-radius:13px}
  .pz-ico svg{width:22px;height:22px}
  .pz-i h3{margin-top:9px;font-size:18px}
  .pz-i h3 + p{font-size:15px}
  .pz-c{font-size:14px}
}
@media(max-width:420px){
  .h2-hero .btn-row .btn{flex:1 1 100%}
  .pr-nums .pr-meta{flex-direction:column;align-items:flex-start;gap:8px}
}
/* telefono in orizzontale e schermi molto bassi: apertura compatta, senza schede */
@media(min-aspect-ratio:4/5) and (max-height:520px){
  .h2-hero{padding-top:calc(var(--hh) + 18px)!important;padding-bottom:22vh!important}
  .h2-hero h1,.page-home2 .h2-hero h1{font-size:clamp(28px,8.4vh,40px)}
  .h2-hero .wrap{grid-template-columns:minmax(0,1fr)}
  .h2-board{display:none}
  .h2-hero .lead{font-size:15.5px;margin-top:14px;max-width:46ch}
  .h2-hero .btn-row{margin-top:18px}
}

/* dalla 2.10: le testimonianze stanno con "Chi siamo" (la relazione, prima delle domande e della call);
   il riquadro e' bianco perche' la sezione e' menta */
/* dalla 2.22.4 la sezione della squadra e' bianca: le testimonianze tornano nel riquadro menta (.page-home .testi-wrap) */
.h-chi .testi-wrap{margin-top:64px}
/* dalla 2.22.4 le domande sono su menta: l'invito finale si stacca un po' di piu' dal fondo colorato */
.page-home2 .sec-mint + .cta-sec{padding-top:80px}
@media(max-width:700px){.page-home2 .sec-mint + .cta-sec{padding-top:44px}}
@media(max-width:700px){.h-chi .testi-wrap{margin-top:40px}}