/* ============================ FONTS ============================ */
@font-face{font-display:swap;font-family:"Univers Next Pro";font-style:normal;font-weight:250;src:url("fonts/UniversNextPro-UltLt.woff2") format("woff2")}
@font-face{font-display:swap;font-family:"Univers Next Pro";font-style:normal;font-weight:300;src:url("fonts/UniversNextPro-Light.woff2") format("woff2")}
@font-face{font-display:swap;font-family:"Univers Next Pro";font-style:normal;font-weight:400;src:url("fonts/UniversNextPro-Regular.woff2") format("woff2")}
@font-face{font-display:swap;font-family:"ABC Monument Grotesk Mono";font-style:normal;font-weight:400;src:url("fonts/ABCMonumentGroteskSemi-Mono-Regular.woff2") format("woff2")}

/* ============================ TOKENS =========================== */
:root{
  --color-black:#000;--color-black20:rgba(0,0,0,.2);--color-black40:rgba(0,0,0,.4);
  --color-yellow:#A72B2A;--color-yellow-secondary:#7c1f1e;
  --color-charcoal:#323232;--color-arsenic:#4b4b4b;--color-mid-grey:#7d7d7d;
  --color-dark-grey:#202020;--color-silver:#afafaf;--color-light-grey:#cdcdcd;
  --color-off-white:#eee;--color-off-white20:hsla(0,0%,93%,.2);--color-off-white40:hsla(0,0%,93%,.4);
  --ease-expo-out:cubic-bezier(.16,1,.3,1);
  --font-base:"Univers Next Pro","Inter","Neue Haas Grotesk Text","Helvetica Neue",Arial;--font-accent:"ABC Monument Grotesk Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --grid-column-count:2;--grid-gutter:1.6vw;--grid-outer-gutter:4.2666666667vw;
}
@media only screen and (min-width:834px){
  :root{--grid-column-count:24;--grid-gutter:1.1111111111vw;--grid-outer-gutter:2.5vw}
}

/* ============================ RESET ============================ */
*,:after,:before{-webkit-tap-highlight-color:transparent;box-sizing:border-box;margin:0}
html{-moz-osx-font-smoothing:grayscale;scrollbar-width:none;font-family:var(--font-base),sans-serif;font-size:10px;font-weight:300;-webkit-font-smoothing:antialiased}
html::-webkit-scrollbar{display:none}
body,html{overscroll-behavior:none}
body{background-color:var(--color-black);color:var(--color-off-white);overflow-x:hidden}
button{background:none;border:none;border-radius:0;cursor:pointer;font-family:inherit;padding:0}
a,button{color:inherit}
a{text-decoration:none}
ol,ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{font-size:unset;font-weight:unset;margin:0}
img,svg{display:block}
img{height:auto;width:100%}
main{position:relative}
::selection{background:var(--color-yellow);color:var(--color-off-white)}

/* ========================= TYPE PRESETS ======================== */
.t-display{font-size:clamp(2.8rem,9.6vw,9.6vw);font-weight:300;letter-spacing:-.02em;line-height:1.167}
.t-h1{font-size:clamp(2rem,7.4666666667vw,7.4666666667vw);font-weight:300;letter-spacing:-.02em;line-height:1.142}
.t-h2{font-size:clamp(2rem,7.4666666667vw,7.4666666667vw);font-weight:300;letter-spacing:-.04em;line-height:1}
.t-h3{font-size:clamp(1.6rem,5.3333333333vw,5.3333333333vw);font-weight:300;letter-spacing:-.04em;line-height:1.2}
.t-h4{font-size:clamp(1.5rem,4.8vw,4.8vw);font-weight:300;letter-spacing:-.02em;line-height:1.22}
.t-body{font-size:clamp(1.3rem,3.7333333333vw,1.8rem);font-weight:300;letter-spacing:-.02em;line-height:1.375}
.t-mono{font-family:var(--font-accent),monospace;font-size:1.2rem;font-weight:400;letter-spacing:-.02em;line-height:1.5;text-transform:uppercase}
@media only screen and (min-width:834px){
  .t-display{font-size:clamp(5rem,4.4444444444vw,4.4444444444vw);letter-spacing:-.04em;line-height:1.125}
  .t-h1{font-size:clamp(3.6rem,3.3333333333vw,3.3333333333vw);letter-spacing:-.04em;line-height:1.167}
  .t-h2{font-size:clamp(3rem,2.5vw,2.5vw);line-height:1.167}
  .t-h3{font-size:clamp(2rem,1.6666666667vw,1.6666666667vw);line-height:1.167}
  .t-h4{font-size:clamp(1.6rem,1.3888888889vw,1.3888888889vw);line-height:1.2}
  .t-body{font-size:clamp(1.4rem,1.1111111111vw,1.8rem)}
}

.grid-container{column-gap:var(--grid-gutter);display:grid;grid-template-columns:repeat(var(--grid-column-count),1fr);padding:0 var(--grid-outer-gutter)}

/* ========================= REVEAL STATES ======================= */
.reveal{opacity:0;visibility:hidden;transform:translate3d(0,1.4rem,0);transition:opacity .9s var(--ease-expo-out),transform 1.1s var(--ease-expo-out),visibility 0s .0s}
.reveal.in{opacity:1;visibility:visible;transform:none}
.reveal-blur{opacity:0;visibility:hidden;filter:blur(14px);transform:translate3d(0,1.2rem,0);transition:opacity 1s var(--ease-expo-out),filter 1.2s var(--ease-expo-out),transform 1.2s var(--ease-expo-out)}
.reveal-blur.in{opacity:1;visibility:visible;filter:blur(0);transform:none}
.reveal-stagger>*{opacity:0;visibility:hidden;transform:translate3d(0,1.6rem,0);transition:opacity .9s var(--ease-expo-out),transform 1s var(--ease-expo-out)}
.reveal-stagger.in>*{opacity:1;visibility:visible;transform:none}
.line-mask{display:block;overflow:hidden}
.line-mask>span{display:block;transform:translate3d(0,105%,0);transition:transform 1.05s var(--ease-expo-out)}
.in .line-mask>span{transform:none}

/* ============================== NAV ============================ */
.menu{left:0;position:fixed;top:0;width:100%;z-index:11}
@media only screen and (min-width:834px){.menu{top:1.1111111111vw}}
.menu .inner{display:flex}
@media only screen and (min-width:834px){.menu .inner{column-gap:.4rem;padding:0 1.0416666667vw}}
.bar{column-gap:.1rem;display:flex;height:11.7333333333vw;padding:0 var(--grid-outer-gutter);position:absolute;top:var(--grid-outer-gutter);width:100%;z-index:1}
@media only screen and (min-width:834px){.bar{height:1.9444444444vw;padding:0;position:relative;top:unset;width:auto}}
.menu-logo{align-items:center;color:var(--color-off-white);display:flex;flex-grow:1;height:11.7333333333vw;justify-content:flex-start;overflow:hidden;padding:0 19.2vw 0 3.7333333333vw;position:relative;transition:color .3s}
@media only screen and (min-width:834px){.menu-logo{height:1.9444444444vw;padding:0 .625vw}}
.logo-svg{position:relative;width:10.1333333333vw;z-index:1}
@media only screen and (min-width:834px){.logo-svg{width:2.6388888889vw}}
.logo-bg{background-color:var(--color-yellow);border-bottom-left-radius:1.6vw;border-top-left-radius:1.6vw;height:100%;left:0;position:absolute;top:0;transform-origin:left center;transition:transform .3s var(--ease-expo-out),background-color .3s;width:100%}
@media only screen and (min-width:834px){.logo-bg{border-radius:.4166666667vw}}
.burger{align-items:center;background-color:var(--color-yellow);border-bottom-right-radius:1.6vw;border-top-right-radius:1.6vw;color:var(--color-off-white);display:flex;flex-shrink:0;height:11.7333333333vw;justify-content:center;width:11.7333333333vw}
.burger svg{height:4.2666666667vw;width:4.2666666667vw}
@media only screen and (min-width:834px){.burger{display:none}}
.menu .container{display:none}
/* Selettore di lingua: terza pastiglia del gruppo in alto a destra, fra il
   marchio e i tre puntini. Angoli vivi perche' e' l'elemento di mezzo. */
.lang-toggle{align-items:center;background-color:var(--color-yellow);color:var(--color-off-white);display:flex;flex-shrink:0;font-family:var(--font-accent),monospace;font-size:1.2rem;font-weight:400;height:11.7333333333vw;justify-content:center;letter-spacing:-.02em;line-height:1;transition:background-color .3s,color .3s;width:11.7333333333vw}
.lang-toggle:hover{background-color:var(--color-black);color:var(--color-off-white)}
.menu.dark .lang-toggle{background-color:var(--color-black);color:var(--color-off-white)}
@media only screen and (max-width:833px){
  .menu.open .lang-toggle{background-color:var(--color-off-white);color:var(--color-black)}
}
@media only screen and (min-width:834px){
  .lang-toggle{border-radius:.4166666667vw;height:1.9444444444vw;margin-left:.4rem;min-width:3rem;padding:0 .6rem;width:auto}
}
@media only screen and (max-width:833px){
  .logo-svg{transform:translate3d(46.9333333333vw,0,0);transform-origin:left center;transition:transform .3s var(--ease-expo-out)}
  .menu.open .logo-svg{transform:translateZ(0)}
  .logo-bg{transform:translate3d(46.9333333333vw,0,0)}
  .menu.open .logo-bg{background-color:var(--color-off-white);transform:translateZ(0)}
  .menu.open .menu-logo{color:var(--color-black)}
  .menu.open .burger{background-color:var(--color-off-white);color:var(--color-black)}
  .menu .container{inset:0;overflow-y:auto;padding:19.4666666667vw var(--grid-outer-gutter) 5.3333333333vw;position:fixed;flex-direction:column}
  .menu.open{z-index:13}
  .menu.open .container{display:flex}
  .menu .menu-bg{background-color:#000;height:100%;left:0;position:absolute;top:0;width:100%;z-index:-1}
  .contact-button{bottom:var(--grid-outer-gutter);left:var(--grid-outer-gutter);position:absolute;width:calc(100% - var(--grid-outer-gutter)*2)}
  .menu .list-item .sub-list{opacity:1;visibility:visible;transform:none;display:none}
  .menu .list-item.active .sub-list{display:flex}
  .menu .list-item.active .list-item-chevron{transform:rotate(180deg)}
}
@media only screen and (min-width:834px){.menu .container{column-gap:.4rem;display:flex;flex:1}.menu .menu-bg{display:none}}
.menu-list{display:flex;flex-direction:column;pointer-events:none;row-gap:.4rem;width:100%}
@media only screen and (min-width:834px){.menu-list{column-gap:.4rem;flex-direction:row;height:1.9444444444vw;row-gap:0}}
.menu-list>.list-item{pointer-events:all;position:relative}
@media only screen and (min-width:834px){.menu-list>.list-item{flex:1}}
.list-item-link{font-family:var(--font-base),sans-serif;font-size:clamp(1.4rem,4.2666666667vw,1.8rem);font-weight:400;line-height:1;align-items:center;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background-color:var(--color-off-white20);border-radius:1.6vw;display:flex;height:11.7333333333vw;justify-content:space-between;padding:0 4.8vw 0 3.7333333333vw;transition:background-color .2s,color .2s;width:100%}
@media only screen and (min-width:834px){.list-item-link{font-size:1.2rem;border-radius:.4166666667vw;height:1.9444444444vw;padding:0 .9722222222vw}}
.list-item-link:hover{background-color:var(--color-off-white);color:var(--color-black)}
.list-item-link.sub-link{background-color:var(--color-off-white40)}
.list-item-chevron{pointer-events:none;width:2.1333333333vw;transition:transform .25s}
@media only screen and (min-width:834px){.list-item-chevron{width:.3472222222vw}}
.list-item:hover .list-item-chevron{transform:rotate(180deg)}
.sub-list{display:flex;flex-direction:column;margin-top:.4rem;row-gap:.4rem;opacity:0;visibility:hidden;transform:translate3d(0,-.4rem,0);transition:opacity .22s,transform .3s var(--ease-expo-out),visibility 0s .22s}
.list-item:hover .sub-list{opacity:1;visibility:visible;transform:none;transition-delay:0s}
/* nav inverts over light / yellow sections */
.menu.dark .menu-logo{color:var(--color-yellow)}
.menu.dark .logo-bg{background-color:var(--color-black)}
.menu.dark .burger{background-color:var(--color-black);color:var(--color-yellow)}
@media only screen and (min-width:834px){
  .menu.dark .list-item-link{background-color:var(--color-black20);color:var(--color-black)}
  .menu.dark .list-item-link:hover{background-color:var(--color-black);color:var(--color-off-white)}
  .menu.dark .list-item-link.sub-link{background-color:var(--color-silver)}
  .menu.dark .contact-button{background-color:var(--color-black);color:var(--color-yellow)}
  .menu.dark .contact-button:hover{background-color:var(--color-off-white);color:var(--color-black)}
}
/* Sopra le sezioni chiare la barra vira al nero e si legge. Sopra le sezioni
   rosse no: nero su rosso scuro sta a 2:1. Li' le pillole restano chiare. */
@media only screen and (min-width:834px){
  .menu.dark.su-rosso .list-item-link{background-color:var(--color-off-white20);color:var(--color-off-white)}
  .menu.dark.su-rosso .list-item-link:hover{background-color:var(--color-off-white);color:var(--color-black)}
  .menu.dark.su-rosso .list-item-link.sub-link{background-color:var(--color-off-white40)}
  .menu.dark.su-rosso .contact-button{background-color:var(--color-black);color:var(--color-off-white)}
  .menu.dark.su-rosso .contact-button:hover{background-color:var(--color-off-white);color:var(--color-black)}
}
/* Sul piede rosso la pastiglia resta nera, ma il marchio e i tre puntini
   passano al chiaro. Il loro rosso e' lo stesso rosso del fondo: sul nero
   restava spento, e accanto l'EN era gia' chiaro. Ora le tre pastiglie si
   leggono come un pezzo solo. */
.menu.dark.su-rosso .menu-logo{color:var(--color-off-white)}
.menu.dark.su-rosso .burger{color:var(--color-off-white)}
.contact-button{background-color:var(--color-yellow);border-radius:1.6vw;color:var(--color-off-white);font-family:var(--font-accent),monospace;font-size:clamp(1.4rem,4.2666666667vw,1.8rem);font-weight:400;height:11.7333333333vw;line-height:1;padding:0 4.5333333333vw;transition:background-color .3s,color .3s;white-space:nowrap}
.contact-button:hover{background-color:var(--color-black);color:var(--color-off-white)}
@media only screen and (min-width:834px){.contact-button{border-radius:.4166666667vw;flex-shrink:0;font-size:1.2rem;height:1.9444444444vw;padding:0 1.1805555556vw}}

/* ===================== I RECAPITI IN CONTATTI ===================== */
/* La pagina dei contatti e' l'unica che non ha una macchina da mostrare: si
   presenta lei. In cima alla colonna di sinistra va il marchio, sotto il testo
   che c'era gia'; nel riquadro scuro a destra, al posto dell'elenco degli
   argomenti, stanno i recapiti — luogo, telefono, le tre caselle. */
.marchio-contatti{color:var(--color-yellow);margin-bottom:8vw}
@media only screen and (min-width:834px){.marchio-contatti{margin-bottom:2.5vw}}
/* Il marchio non prende tutta la colonna: a tutta larghezza diventa
   un'insegna e si mangia il testo che gli sta sotto. */
.marchio-contatti svg{display:block;height:auto;width:52%}
@media only screen and (min-width:834px){.marchio-contatti svg{width:15vw}}

/* Le righe dei recapiti stanno nel riquadro con lo stesso passo dell'elenco
   puntato che c'era prima: filo sopra a ognuna, filo sotto all'ultima. */
.elenco-recapiti{display:flex;flex-direction:column}
.voce-recapito{align-items:flex-start;border-top:1px solid var(--color-arsenic);column-gap:3.2vw;display:flex;padding:4.2666666667vw 0}
@media only screen and (min-width:834px){.voce-recapito{column-gap:.9722222222vw;padding:1.1111111111vw 0}}
.elenco-recapiti .voce-recapito:last-child{border-bottom:1px solid var(--color-arsenic)}
/* Il segno sta in cima alla riga e non al centro: l'indirizzo va a capo, e
   centrato scivolerebbe in mezzo alle due righe. */
.voce-recapito .segno{color:var(--color-yellow);flex-shrink:0;height:4.2666666667vw;width:4.2666666667vw;margin-top:.9vw}
@media only screen and (min-width:834px){.voce-recapito .segno{height:1.3888888889vw;width:1.3888888889vw;margin-top:.28vw}}
.voce-recapito .testo{display:flex;flex-direction:column}
.voce-recapito address,.voce-recapito a{font-size:clamp(1.5rem,4.8vw,4.8vw);font-style:normal;font-weight:300;letter-spacing:-.02em;line-height:1.4;transition:color .2s}
@media only screen and (min-width:834px){.voce-recapito address,.voce-recapito a{font-size:clamp(1.6rem,1.3888888889vw,1.3888888889vw)}}
.voce-recapito a:hover{color:var(--color-yellow)}
.a-cosa-serve{color:var(--color-mid-grey);font-family:var(--font-accent),monospace;font-size:1.2rem;font-weight:400;letter-spacing:-.02em;line-height:1.5;margin-top:1.1vw}
@media only screen and (min-width:834px){.a-cosa-serve{margin-top:.2777777778vw}}

/* =========================== BUTTONS =========================== */
.base-button{align-items:center;border-radius:.4rem;color:inherit;display:flex;font-family:var(--font-accent),monospace;font-size:1.2rem;font-weight:400;height:4rem;justify-content:center;letter-spacing:-.04em;line-height:1.67;overflow:hidden;padding:0 2.4rem;position:relative;width:fit-content;transition:box-shadow .6s ease,color .6s}
.base-button .bg{-webkit-backdrop-filter:blur(32px);backdrop-filter:blur(32px);background-color:var(--color-off-white20);border-radius:.4rem;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:1}
.base-button .label{position:relative;z-index:2}
.base-button .fill-effect{background:var(--color-yellow);border-radius:.4rem;bottom:0;left:0;position:absolute;transform:scaleY(0);transform-origin:bottom center;transition:transform .6s var(--ease-expo-out);width:100%;height:100%;z-index:1}
.base-button:hover{box-shadow:0 0 20px #a72b2a4d;color:var(--color-off-white)}
.base-button:hover .fill-effect{transform:scaleY(1)}
.base-button.black{border-radius:0;color:var(--color-off-white)}
.base-button.black .bg,.base-button.black .fill-effect{background-color:var(--color-black);border-radius:0}
.base-button.black:hover{box-shadow:none;color:var(--color-off-white)}
.dots-icon-button{align-items:center;background-color:var(--color-yellow);border-radius:1.6vw;color:var(--color-off-white);display:flex;height:7.4666666667vw;justify-content:center;overflow:hidden;width:7.4666666667vw;transition:color .2s,background-color .2s;flex-shrink:0}
.dots-icon-button svg{overflow:visible;width:50%}
.dots-icon-button:hover{background-color:var(--color-black);color:var(--color-off-white)}
@media only screen and (min-width:834px){
  .dots-icon-button{border-radius:.4166666667vw;height:1.9444444444vw;width:1.9444444444vw}
}

/* ============================ HERO ============================= */
.home-hero{height:100svh;position:relative;width:100%;z-index:3}
.home-hero:before{background:linear-gradient(to bottom,transparent 60%,var(--color-black) 100%);content:"";height:100%;left:0;position:absolute;top:0;width:100%;z-index:1;pointer-events:none}
.home-hero .container{height:100%;left:0;position:absolute;top:0;width:100%}
.hero-title-wrap{left:var(--grid-outer-gutter);position:absolute;top:50%;transform:translateY(-50%);z-index:2}
.home-hero .title{font-family:var(--font-base),sans-serif;font-size:clamp(2.8rem,9.6vw,9.6vw);font-weight:300;letter-spacing:-.02em;line-height:1.167}
@media only screen and (min-width:834px){.home-hero .title{font-size:clamp(5rem,4.4444444444vw,4.4444444444vw);letter-spacing:-.04em;line-height:1.125}}
.home-hero .title span{display:block}
.home-hero .copy{display:none}
@media only screen and (min-width:834px){
  .home-hero .copy{bottom:var(--grid-outer-gutter);display:block;font-size:clamp(1.4rem,1.1111111111vw,1.8rem);font-weight:300;left:var(--grid-outer-gutter);letter-spacing:-.02em;line-height:1.375;position:absolute;z-index:2}
  .home-hero .copy span{display:block}
}
.hero-card{-webkit-backdrop-filter:blur(60px);backdrop-filter:blur(60px);background-color:#fff3;border-radius:1.6rem;bottom:var(--grid-outer-gutter);column-gap:1.2rem;display:flex;left:var(--grid-outer-gutter);max-width:40rem;overflow:hidden;padding:.6rem .6rem .6rem 1.6rem;position:absolute;width:calc(100% - var(--grid-outer-gutter)*2);z-index:2;transition:background-color .2s}
.hero-card:hover{background-color:#ffffff1a}
@media only screen and (min-width:834px){.hero-card{border-radius:1.1111111111vw;bottom:1.1111111111vw;column-gap:.8333333333vw;left:unset;right:1.0416666667vw;width:auto}}
.card-content{padding:.6rem 0}
@media only screen and (min-width:834px){.card-content{min-width:18rem;padding:.4513888889vw 0;width:14.3055555556vw}}
.card-copy{font-size:clamp(1.3rem,3.7333333333vw,1.8rem);font-weight:300;letter-spacing:-.02em;line-height:1.375;margin-top:.7rem}
@media only screen and (min-width:834px){.card-copy{font-size:clamp(1.4rem,1.1111111111vw,1.8rem);margin-top:.4861111111vw}}
.card-image-wrapper{aspect-ratio:1;border-radius:2.4vw;flex-shrink:0;max-width:10.6rem;overflow:hidden;position:relative;width:28.2666666667vw}
.card-image-wrapper img{height:100%;left:0;object-fit:cover;position:absolute;top:0;width:100%}
@media only screen and (min-width:834px){.card-image-wrapper{border-radius:.625vw;width:clamp(10.6rem,7.3611111111vw,12rem)}}
.hero-video-wrapper{height:100%;left:0;overflow:hidden;position:absolute;top:0;width:100%;z-index:0}
.hero-video-wrapper video{height:100%;left:0;object-fit:cover;position:absolute;top:0;width:100%}
.hero-fade{background-color:var(--color-black);height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:1}

/* scramble label */
.scramble-label{align-items:center;color:var(--color-silver);display:flex;font-family:var(--font-accent),monospace;font-size:1.2rem;font-weight:400;letter-spacing:-.04em;line-height:1.67;text-transform:uppercase}
.scramble-label:before{background-color:currentColor;border-radius:50%;content:"";height:.6rem;margin-right:.7rem;width:.6rem;flex-shrink:0}
@media only screen and (min-width:834px){.scramble-label:before{margin-right:.4166666667vw}}
.scramble-label span{white-space:pre}

/* ============================ INTRO ============================ */
.intro{color:var(--color-off-white);position:relative;z-index:3}
.intro .inner{padding:60.5333333333vw 0;position:relative}
@media only screen and (min-width:834px){.intro .inner{padding:19.2361111111vw 0}}
.intro .content{grid-column:1/-1}
@media only screen and (min-width:834px){.intro .content{grid-column:1/-3}}
.intro .copy{font-size:clamp(2rem,7.4666666667vw,7.4666666667vw);font-weight:300;letter-spacing:-.02em;line-height:1.142}
@media only screen and (min-width:834px){.intro .copy{font-size:clamp(3.6rem,3.3333333333vw,3.3333333333vw);letter-spacing:-.04em;line-height:1.167}}
.intro .bg{background-color:var(--color-yellow);height:100%;left:0;position:absolute;top:0;width:100%;will-change:transform;z-index:-1}

/* ======================= IL TESTO CHE SI ACCENDE ================ */
/* Ogni scritta bianca su rosso — la fascia della home, quella di Azienda, la
   frase del pie' di pagina — non compare tutta insieme: si accende parola
   dopo parola mentre scorre nella finestra. Due sfondi sulla stessa campata:
   sotto il bianco spento, sopra il bianco pieno largo quanto dice --riempi;
   tutti e due ritagliati sulle lettere. Su un elemento in linea lo sfondo
   corre lungo le righe come se fossero una sola, quindi la percentuale
   avanza nell'ordine di lettura, riga dopo riga. Il nodo di testo resta
   intero: il dizionario inglese lo trova come prima. */
.riempi{--riempi:0%;background-image:linear-gradient(var(--color-off-white),var(--color-off-white)),linear-gradient(rgba(238,238,238,.3),rgba(238,238,238,.3));background-repeat:no-repeat;background-size:var(--riempi) 100%,100% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){.riempi{background:none;color:inherit}}

/* ====================== TECHNOLOGY SEQUENCE ==================== */
.technology-sequence{position:relative;z-index:2}
.scene-wrapper{height:800lvh;position:relative}
.scene-inner{height:100svh;left:0;overflow:hidden;position:sticky;top:0;width:100%}
.image-sequence,.image-sequence canvas{height:100%;width:100%}
.image-sequence canvas{left:0;max-width:100%;position:absolute;top:0}
.seq-content{height:100svh;left:0;position:absolute;top:0;width:100%;pointer-events:none}
.seq-content>*{pointer-events:auto}
.seq-title-wrapper{display:flex;flex-direction:column;left:var(--grid-outer-gutter);position:absolute;row-gap:4.5333333333vw;top:50%;transform:translateY(-50%)}
@media only screen and (min-width:834px){.seq-title-wrapper{row-gap:1.875vw}}
.seq-title{font-size:clamp(2rem,7.4666666667vw,7.4666666667vw);font-weight:300;letter-spacing:-.02em;line-height:1.142}
@media only screen and (min-width:834px){.seq-title{font-size:clamp(3.6rem,3.3333333333vw,3.3333333333vw);letter-spacing:-.04em;line-height:1.167}}
.seq-title span{display:block}
.seq-copy{font-size:clamp(1.3rem,3.7333333333vw,1.8rem);font-weight:300;letter-spacing:-.02em;line-height:1.375;bottom:var(--grid-outer-gutter);color:var(--color-light-grey);left:var(--grid-outer-gutter);position:absolute;width:calc(100% - var(--grid-outer-gutter)*2)}
@media only screen and (min-width:834px){.seq-copy{font-size:clamp(1.4rem,1.1111111111vw,1.8rem);width:26.9444444444vw}}
.seq-bg{background-color:var(--color-black);height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;will-change:opacity;z-index:3}

/* the black cross-fade veil between hero / intro */
.veil{background:#000;inset:0;opacity:0;pointer-events:none;position:fixed;z-index:20;will-change:opacity}

/* ========================= HOME FEATURES ======================= */
.home-features{padding:14vw 0 20vw;position:relative;z-index:2;background:var(--color-black)}
@media only screen and (min-width:834px){.home-features{padding:5.5vw 0 7vw}}
.home-features .items{display:flex;flex-direction:column;grid-column:1/-1;row-gap:11vw}
@media only screen and (min-width:834px){.home-features .items{column-gap:var(--grid-gutter);display:grid;grid-column:13/-1;grid-template-columns:repeat(2,1fr);row-gap:4.1666666667vw}}
.icon-feature{display:flex;flex-direction:column}
.icon-feature .icon-wrapper{max-height:10.6666666667vw;max-width:13.6vw}
@media only screen and (min-width:834px){.icon-feature .icon-wrapper{max-height:2.7777777778vw;max-width:3.5416666667vw}.icon-feature .icon-wrapper img{width:auto}}
.icon-feature .title{font-size:clamp(1.6rem,5.3333333333vw,5.3333333333vw);font-weight:300;letter-spacing:-.04em;line-height:1.2;margin-top:5vw;max-width:69.3333333333vw}
@media only screen and (min-width:834px){.icon-feature .title{font-size:clamp(2rem,1.6666666667vw,1.6666666667vw);line-height:1.167;margin-top:2.2222222222vw;max-width:none}}
.icon-feature .copy{font-size:clamp(1.5rem,4.8vw,4.8vw);font-weight:300;letter-spacing:-.02em;line-height:1.22;color:var(--color-mid-grey);margin-top:4vw}
@media only screen and (min-width:834px){.icon-feature .copy{font-size:clamp(1.6rem,1.3888888889vw,1.3888888889vw);line-height:1.2;margin-top:2.2222222222vw}}

/* ======================== TESTIMONIALS ========================= */
.home-testimonials{background-color:var(--color-off-white);color:#202020;padding:14vw 0;position:relative;z-index:2}
@media only screen and (min-width:834px){.home-testimonials{padding:5.5vw 0}}
.home-testimonials .label-wrapper{grid-column:1/-1;margin-bottom:6vw}
@media only screen and (min-width:834px){.home-testimonials .label-wrapper{grid-column:1/span 5;grid-row:1;margin-bottom:0}}
.section-label{font-size:clamp(2rem,7.4666666667vw,7.4666666667vw);font-weight:300;letter-spacing:-.02em;line-height:1.142;color:#202020}
@media only screen and (min-width:834px){.section-label{font-size:clamp(3.6rem,3.3333333333vw,3.3333333333vw);letter-spacing:-.04em;line-height:1.167}}
.testimonials-stack{display:grid;grid-column:1/-1;grid-template-columns:1fr;grid-template-rows:1fr}
@media only screen and (min-width:834px){.testimonials-stack{grid-column:13/-1;grid-row:1}}
.testimonial-wrapper{align-items:flex-start;display:flex;flex-direction:column;grid-area:1/1;opacity:0;pointer-events:none;transition:opacity .6s ease}
.testimonial-wrapper.active{opacity:1;pointer-events:auto;transition:opacity .6s ease .6s}
.quote{font-size:clamp(1.6rem,5.3333333333vw,5.3333333333vw);font-weight:300;letter-spacing:-.04em;line-height:1.2}
@media only screen and (min-width:834px){.quote{font-size:clamp(2rem,1.6666666667vw,1.6666666667vw);line-height:1.167}}
.quote:before{content:"\201C";margin-right:1.0666666667vw}
.quote:after{content:"\201D";margin-left:1.0666666667vw}
.quote:after,.quote:before{color:#7d7d7d;font-size:1.5em;line-height:0;vertical-align:-.15em}
.attribution-row{align-items:flex-end;display:flex;gap:5.3333333333vw;justify-content:space-between;margin-top:9vw;width:100%}
@media only screen and (min-width:834px){.attribution-row{gap:1.3888888889vw;margin-top:3.5vw}}
.attribution{align-items:flex-start;display:flex;flex-direction:column;gap:5.3333333333vw}
@media only screen and (min-width:834px){.attribution{gap:1.3888888889vw}}
.attribution .logo{height:7.4666666667vw;width:auto}
.attribution .logo img{height:100%;object-fit:contain;width:auto}
@media only screen and (min-width:834px){.attribution .logo{height:2.2222222222vw}}
.person-info{display:flex;flex-direction:column;text-align:left}
.person-name,.person-title{font-size:1.2rem;font-weight:300;letter-spacing:-.02em;line-height:1.5}
.person-name{color:#202020}
.person-title{color:#7d7d7d}
.testi-controls{display:flex;flex-direction:column;gap:3.2vw}
.testi-controls .dots-icon-button{background-color:#202020;color:var(--color-off-white)}
.testi-controls .dots-icon-button:hover{background-color:var(--color-black)}
@media only screen and (min-width:834px){.testi-controls{gap:.8333333333vw}}

/* ====================== EXPERTISES OVERVIEW ==================== */
.expertises-overview{background-color:var(--color-dark-grey);overflow:hidden;padding:14vw 0;position:relative;z-index:2}
@media only screen and (min-width:834px){.expertises-overview{padding:5.5vw 0 6.5vw}}
.expertises-overview .head{grid-column:1/-1}
@media only screen and (min-width:834px){.expertises-overview .head{grid-column:span 6}}
.expertises-overview .title{font-size:clamp(2rem,7.4666666667vw,7.4666666667vw);font-weight:300;letter-spacing:-.04em;line-height:1;margin-top:3.4666666667vw}
@media only screen and (min-width:834px){.expertises-overview .title{font-size:clamp(3rem,2.5vw,2.5vw);line-height:1.167;margin-top:.9027777778vw}}
.expertises-overview .title span{display:block}
/* Il titolo di una scheda va su due righe: sopra la famiglia, sotto la serie —
   «Centrifughe disoleatrici» / «Serie LM AG» — come nelle schede d'elenco. */
.page-hero .title span{display:block}
.expertises-overview .copy-wrapper{grid-column:1/-1;margin-top:8vw}
@media only screen and (min-width:834px){.expertises-overview .copy-wrapper{grid-column:10/-1;margin-top:2.0833333333vw}}
@media only screen and (min-width:1024px){.expertises-overview .copy-wrapper{grid-column:13/-1}}
.expertises-overview .copy{font-size:clamp(1.6rem,5.3333333333vw,5.3333333333vw);font-weight:300;letter-spacing:-.04em;line-height:1.2;color:var(--color-light-grey)}
@media only screen and (min-width:834px){.expertises-overview .copy{font-size:clamp(2rem,1.6666666667vw,1.6666666667vw);line-height:1.167}}
.expertises-overview .cards{display:flex;flex-direction:column;grid-column:1/-1;margin-top:8vw;row-gap:4.2666666667vw}
@media only screen and (min-width:834px){.expertises-overview .cards{grid-column:10/-1;margin-top:4.1666666667vw;row-gap:2.5vw}}
@media only screen and (min-width:1024px){.expertises-overview .cards{grid-column:13/-1}}
.expertise-card{-webkit-backdrop-filter:blur(60px);backdrop-filter:blur(60px);background-color:var(--color-charcoal);border-radius:1.6rem;column-gap:3.2vw;display:flex;overflow:hidden;padding:1.6vw;position:relative;width:100%;transition:background-color .2s}
.expertise-card:hover{background-color:var(--color-yellow)}
@media only screen and (min-width:834px){.expertise-card{border-radius:1.1111111111vw;column-gap:2.2222222222vw;padding:1.1111111111vw}}
.expertise-card .image-wrapper{aspect-ratio:1;border-radius:2.4vw;flex-shrink:0;overflow:hidden;position:relative;width:22.3%}
.expertise-card .image-wrapper img{height:100%;left:0;object-fit:cover;position:absolute;top:0;width:100%}
@media only screen and (min-width:834px){.expertise-card .image-wrapper{border-radius:.625vw;width:29.58%}}
.expertise-card .content{font-size:clamp(1.3rem,3.7333333333vw,1.8rem);font-weight:300;letter-spacing:-.02em;line-height:1.375;display:flex;flex-direction:column;justify-content:center;padding:.3rem 0;width:66%}
@media only screen and (min-width:834px){.expertise-card .content{font-size:clamp(1.6rem,1.3888888889vw,1.3888888889vw);justify-content:flex-start;line-height:1.2;min-width:18rem;padding:1.3888888889vw 0 .4513888889vw;width:56%}}
/* Le schede degli impianti non portano piu' la riga di spiegazione sotto il
   nome. Da 834 px in su il nome si appoggiava in cima e restava sospeso, con
   l'aria della fotografia tutta sotto: quando e' l'unica cosa nel riquadro, si
   centra sull'altezza come gia' fa da telefono. */
@media only screen and (min-width:834px){
  .expertise-card .content:has(>.name:only-child){justify-content:center;padding-top:0;padding-bottom:0}
}
.expertise-card .name{color:var(--color-off-white);transition:color .2s}
/* La sigla della serie sta sotto al nome di famiglia, non di seguito. */
.expertise-card .name span{display:block}
.expertise-card:hover .name{color:var(--color-off-white)}
.expertise-card .copy{color:var(--color-silver);margin-top:.2rem;transition:color .2s}
.expertise-card:hover .copy{color:var(--color-off-white40)}
@media only screen and (min-width:834px){.expertise-card .copy{margin-top:1.1111111111vw}}
.expertise-card .arrow-link{bottom:1.6vw;position:absolute;right:1.6vw}
/* Il timbro del brevetto sulla scheda del TR1. Un collegamento dentro un
   altro non e' valido: la scheda smette di essere un <a> e il rimando alla
   pagina diventa una lastra trasparente sotto il contenuto, cosi' il
   brevetto puo' stare sopra e restare cliccabile. */
.expertise-card .scheda-intera{inset:0;overflow:hidden;position:absolute;text-indent:-200vw;white-space:nowrap;z-index:1}
.expertise-card .brevetto{align-items:center;column-gap:2.6666666667vw;display:flex;margin-top:3.2vw;max-width:calc(100% - 9vw);position:relative;width:fit-content;z-index:2}
.expertise-card .brevetto img{flex-shrink:0;opacity:.8;transition:opacity .2s;width:13.3333333333vw}
.expertise-card .brevetto span{color:var(--color-mid-grey);font-family:var(--font-accent),monospace;font-size:1rem;font-weight:400;letter-spacing:-.02em;line-height:1.35;text-decoration:underline;text-underline-offset:.25em;transition:color .2s}
.expertise-card .brevetto:hover img{opacity:1}
.expertise-card .brevetto:hover span{color:var(--color-off-white)}
.expertise-card:hover .brevetto span{color:var(--color-off-white)}
@media only screen and (min-width:834px){
  .expertise-card .brevetto{column-gap:.6944444444vw;margin-top:1.1111111111vw;max-width:calc(100% - 3.2vw)}
  .expertise-card .brevetto span{font-size:1.1rem}
  .expertise-card .brevetto img{width:3.4722222222vw}
}
.expertise-card:hover .arrow-link{background-color:var(--color-black);color:var(--color-off-white)}
@media only screen and (min-width:834px){.expertise-card .arrow-link{bottom:1.1111111111vw;right:1.1111111111vw}}

/* ==================== FULL BLEED TEXT + VIDEO ================== */
.home-full-bleed-text-video{min-height:100svh;position:relative;z-index:2}
.home-full-bleed-text-video:before{background:linear-gradient(180deg,transparent -2.53%,transparent 75.72%,#000);content:"";height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:1}
.home-full-bleed-text-video .content{grid-column:1/-1;margin:16vw 0;position:relative;z-index:2}
@media only screen and (min-width:834px){.home-full-bleed-text-video .content{grid-column:13/-3;margin:6vw 0}}
.home-full-bleed-text-video .title{font-size:clamp(2rem,7.4666666667vw,7.4666666667vw);font-weight:300;letter-spacing:-.04em;line-height:1;margin-top:5vw}
@media only screen and (min-width:834px){.home-full-bleed-text-video .title{font-size:clamp(3rem,2.5vw,2.5vw);line-height:1.167;margin-top:2.5vw}}
.home-full-bleed-text-video .copy{font-size:clamp(2rem,7.4666666667vw,7.4666666667vw);font-weight:300;letter-spacing:-.04em;line-height:1;color:var(--color-off-white40)}
@media only screen and (min-width:834px){.home-full-bleed-text-video .copy{font-size:clamp(3rem,2.5vw,2.5vw);line-height:1.167}}
.home-full-bleed-text-video .link{margin-top:6vw}
@media only screen and (min-width:834px){.home-full-bleed-text-video .link{margin-top:2.5vw}}
.fb-video-wrapper{height:100%;left:0;position:absolute;top:0;width:100%;z-index:0;overflow:hidden}
.fb-video-wrapper:before{background:linear-gradient(180deg,transparent -2.53%,transparent 75.72%,#000 101.8%);content:"";height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}
.fb-video-wrapper video{height:100%;left:0;object-fit:cover;position:absolute;top:0;width:100%}

/* ======================= HOME FEATURE CARDS ==================== */
.home-feature-cards{margin-top:-18vw;padding:0 0 18vw;position:relative;z-index:2;background:var(--color-black)}
@media only screen and (min-width:834px){.home-feature-cards{margin-top:0;padding:0 0 2.5vw}}
.home-feature-cards .cards{column-gap:var(--grid-gutter);display:grid;grid-column:1/-1;grid-template-columns:repeat(var(--grid-column-count),1fr);row-gap:var(--grid-outer-gutter)}
@media only screen and (min-width:834px){.home-feature-cards .cards{row-gap:1.1111111111vw}}
.feature-card{background-color:var(--color-dark-grey);border-radius:4.8vw;display:flex;flex-direction:column;overflow:hidden;padding:6.4vw var(--grid-outer-gutter);position:relative;row-gap:4.2666666667vw;grid-column:1/-1}
@media only screen and (min-width:834px){.feature-card{aspect-ratio:674/450;border-radius:3.8888888889vw;grid-column:span 12;padding:3.3333333333vw}}
.number-wrapper{align-self:flex-end;column-gap:0;display:flex;position:relative;z-index:2}
.number{color:var(--color-silver);font-size:17.6vw;font-weight:250;letter-spacing:-.08em;line-height:1}
.number span{display:inline-block;font-size:5.3333333333vw;font-weight:300;letter-spacing:-.04em;margin-left:2.9333333333vw;vertical-align:top}
@media only screen and (min-width:834px){.number{font-size:8.3333333333vw}.number span{font-size:2.5vw;margin-left:.7638888889vw}}
.number-plus{align-self:flex-start;color:var(--color-silver);margin-left:2.9333333333vw;width:7.2vw}
@media only screen and (min-width:834px){.number-plus{margin-left:.7638888889vw;width:3.1944444444vw}}
.feature-card .content{margin-top:auto;position:relative;z-index:2}
.feature-card .title{font-size:clamp(1.5rem,4.8vw,4.8vw);font-weight:300;letter-spacing:-.02em;line-height:1.22}
@media only screen and (min-width:834px){.feature-card .title{font-size:clamp(1.6rem,1.3888888889vw,1.3888888889vw);line-height:1.2}}
.feature-card .title span{display:block}
.feature-card .copy{font-size:clamp(1.3rem,3.7333333333vw,1.8rem);font-weight:300;letter-spacing:-.02em;line-height:1.375;color:var(--color-silver);margin-top:1.6vw;max-width:67.7333333333vw}
@media only screen and (min-width:834px){.feature-card .copy{font-size:clamp(1.4rem,1.1111111111vw,1.8rem);margin-top:1.1111111111vw;max-width:20.8333333333vw}}
.feature-card .map{height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}
/* Su telefono la scheda non e' piu' un quadrato: la mappa non ha uno sfondo
   da occupare e finirebbe sotto al testo. Sta in fila, dove le altre
   schede tengono il numero. */
@media only screen and (max-width:833px){
  .feature-card .map{align-self:flex-end;height:32vw;position:relative;width:auto}
}

/* =========================== HOME NEWS ========================= */
.home-news{background-color:var(--color-off-white);color:var(--color-black);padding:14vw 0 18vw;position:relative;z-index:2}
@media only screen and (min-width:834px){.home-news{padding:5.5vw 0 8vw}}
.home-news .title-wrapper{grid-column:1/-1}
@media only screen and (min-width:834px){.home-news .title-wrapper{grid-column:1/8}}
.home-news .title{font-size:clamp(2.8rem,9.6vw,9.6vw);font-weight:300;letter-spacing:-.02em;line-height:1.167}
@media only screen and (min-width:834px){.home-news .title{font-size:clamp(5rem,4.4444444444vw,4.4444444444vw);letter-spacing:-.04em;line-height:1.125}}
.home-news>.grid-container>.copy-wrapper{grid-column:1/-1;margin-top:10vw}
@media only screen and (min-width:834px){.home-news>.grid-container>.copy-wrapper{grid-column:1/8;margin-top:4vw}}
.home-news .intro-copy{font-size:clamp(1.3rem,3.7333333333vw,1.8rem);font-weight:300;letter-spacing:-.02em;line-height:1.375}
@media only screen and (min-width:834px){.home-news .intro-copy{font-size:clamp(1.4rem,1.1111111111vw,1.8rem)}}
.featured-items-container{margin-top:8vw}
@media only screen and (min-width:834px){.featured-items-container{margin-top:2.5vw}}
.featured-items{column-gap:var(--grid-gutter);display:grid;grid-column:1/-1;grid-template-columns:repeat(var(--grid-column-count),1fr);row-gap:10vw}
@media only screen and (min-width:834px){.featured-items{row-gap:3.3333333333vw}}
.post-card{display:flex;flex-direction:column;row-gap:4.5vw;grid-column:1/-1}
@media only screen and (min-width:834px){.post-card{grid-column:span 12;row-gap:2.2916666667vw}}
.post-card .image-wrapper{aspect-ratio:676/450;border-radius:4.2666666667vw;overflow:hidden;position:relative}
.post-card .image-wrapper img{height:100%;left:0;object-fit:cover;position:absolute;top:0;width:100%;transition:transform .8s var(--ease-expo-out)}
.post-card:hover .image-wrapper img{transform:scale(1.03)}
@media only screen and (min-width:834px){.post-card .image-wrapper{border-radius:2.2222222222vw}}
.post-card .content{display:flex;flex-direction:column;row-gap:4.5vw}
@media only screen and (min-width:834px){.post-card .content{column-gap:var(--grid-gutter);flex-direction:row;row-gap:0}}
.post-card .head{color:var(--color-mid-grey);font-family:var(--font-accent),monospace;font-size:1.2rem;font-weight:400;letter-spacing:-.02em;line-height:1.5;text-transform:uppercase;flex-shrink:0}
@media only screen and (min-width:834px){.post-card .head{width:10.9027777778vw}}
.post-card .copy-wrapper{display:flex;flex-direction:column;row-gap:2.9333333333vw}
@media only screen and (min-width:834px){.post-card .copy-wrapper{row-gap:.7638888889vw;width:31.1111111111vw}}
.post-card .title{font-size:clamp(1.6rem,5.3333333333vw,5.3333333333vw);font-weight:300;letter-spacing:-.04em;line-height:1.2}
@media only screen and (min-width:834px){.post-card .title{font-size:clamp(2rem,1.6666666667vw,1.6666666667vw);line-height:1.167}}
.post-card .copy{font-size:clamp(1.3rem,3.7333333333vw,1.8rem);font-weight:300;letter-spacing:-.02em;line-height:1.375;color:var(--color-arsenic)}
@media only screen and (min-width:834px){.post-card .copy{font-size:clamp(1.4rem,1.1111111111vw,1.8rem)}}

/* news list */
.news-list{margin-top:12vw}
@media only screen and (min-width:834px){.news-list{margin-top:5vw}}
.news-list .rows{grid-column:1/-1}
.row{font-size:clamp(1.3rem,3.7333333333vw,1.8rem);font-weight:300;letter-spacing:-.02em;line-height:1.375;border-bottom:1px solid var(--color-arsenic);column-gap:var(--grid-gutter);display:flex;flex-direction:column;justify-content:space-evenly;padding:5.3333333333vw 0;position:relative;transition:background-color .2s}
.row:first-child{border-top:1px solid var(--color-arsenic)}
.row:hover{background-color:var(--color-light-grey);z-index:1}
@media only screen and (min-width:834px){.row{align-items:center;flex-direction:row;font-size:clamp(1.4rem,1.1111111111vw,1.8rem);padding:1.6666666667vw 0}}
.row-title{flex:1;transition:transform .2s}
@media only screen and (min-width:834px){.row-title{flex:.5}.row:hover .row-title{transform:translate(.8rem)}}
.row-copy-wrapper{column-gap:var(--grid-gutter);display:flex;flex:1;flex-direction:column}
@media only screen and (min-width:834px){.row-copy-wrapper{flex:.5;flex-direction:row;justify-content:space-between}}
.row-copy{color:var(--color-arsenic)}
.row-link{column-gap:1.6vw;display:flex;flex-shrink:0;margin-top:6.4vw;align-items:center}
@media only screen and (min-width:834px){.row-link{column-gap:.4861111111vw;margin-top:0;transition:transform .2s}.row:hover .row-link{transform:translate(-.8rem)}}
.row-link-button{background:none;border-radius:0;color:var(--color-black);height:3.7333333333vw;width:3.7333333333vw}
.row-link-button:hover{background:none;color:var(--color-black)}
.row-link-button svg{width:100%}
@media only screen and (min-width:834px){.row-link-button{height:.8333333333vw;width:.8333333333vw}}
.row-image-wrapper{display:none}
@media only screen and (min-width:834px){
  .row-image-wrapper{border-radius:1.1111111111vw;display:block;height:15.2083333333vw;left:62.6388888889vw;opacity:0;overflow:hidden;pointer-events:none;position:absolute;top:-4.0277777778vw;visibility:hidden;width:22.8472222222vw;z-index:1;transition:opacity .2s,visibility .2s}
  .row-image-wrapper img{height:100%;left:0;object-fit:cover;position:absolute;top:0;width:100%}
  .row:hover .row-image-wrapper{opacity:1;visibility:visible}
}

/* ============================ FOOTER =========================== */
.footer{--pattern-size:25vw;--outline-color:#323232;--circle-radius:calc(var(--pattern-size)/2 - 1px);
  background-color:var(--color-black);
  background-image:radial-gradient(circle at center,transparent var(--circle-radius),var(--outline-color) var(--circle-radius),var(--outline-color) calc(var(--circle-radius) + 1px),transparent calc(var(--circle-radius) + 1px)),linear-gradient(var(--outline-color) 1px,transparent 1px),linear-gradient(90deg,var(--outline-color) 1px,transparent 1px);
  background-size:var(--pattern-size) var(--pattern-size),var(--pattern-size) var(--pattern-size),var(--pattern-size) var(--pattern-size);
  /* z-index 4: sopra le sezioni della pagina, che arrivano al 3, e sotto la
     barra di navigazione, che sta all'11. Prima stava al 12 e il piede
     copriva la barra: le regole .menu.dark.su-rosso, scritte apposta per
     quando la barra passa sul rosso, non si vedevano mai. */
  color:var(--color-off-white);padding:0 0 10vw;position:relative;z-index:4}
.footer:after{background:linear-gradient(180deg,transparent,rgba(32,32,32,.8));content:"";height:100%;left:0;position:absolute;top:0;width:100%}
@media only screen and (min-width:834px){.footer{--pattern-size:6.66667vw;padding:1.3888888889vw 1.1111111111vw 6vw}}
.footer-container{background-color:var(--color-yellow);border-bottom-left-radius:6.4vw;border-bottom-right-radius:6.4vw;column-gap:var(--grid-gutter);display:grid;grid-template-columns:repeat(var(--grid-column-count),1fr);padding:12vw var(--grid-outer-gutter);position:relative;z-index:1}
@media only screen and (min-width:834px){.footer-container{border-radius:1.6666666667vw;padding:2.7777777778vw 1.3888888889vw 1.3888888889vw}}
.footer .copy-wrapper{display:flex;flex-direction:column;grid-column:1/-1;row-gap:5.3333333333vw;align-items:flex-start}
@media only screen and (min-width:834px){.footer .copy-wrapper{grid-column:span 12;row-gap:2.2222222222vw}}
.footer .copy{font-size:clamp(1.6rem,5.3333333333vw,5.3333333333vw);font-weight:300;letter-spacing:-.04em;line-height:1.2}
@media only screen and (min-width:834px){.footer .copy{font-size:clamp(2rem,1.6666666667vw,1.6666666667vw);line-height:1.167;width:30.8333333333vw}}
.footer .list-wrapper{display:flex;flex-direction:column;grid-column:1/-1;margin-top:10vw;row-gap:6.4vw}
@media only screen and (min-width:834px){.footer .list-wrapper{grid-column:13/-1;margin-top:0;row-gap:2.5vw}}
.footer .list-item-link{font-size:clamp(2rem,7.4666666667vw,7.4666666667vw);font-weight:300;letter-spacing:-.04em;line-height:1;align-items:center;background:none;backdrop-filter:none;border-radius:0;border-bottom:1px solid var(--color-off-white40);display:flex;height:auto;justify-content:space-between;padding:3.2vw 0;width:100%;transition:opacity .15s,border-color .15s}
@media only screen and (min-width:834px){.footer .list-item-link{font-size:clamp(3rem,2.5vw,2.5vw);line-height:1.167;padding:.3472222222vw 0}}
.footer .list:hover .list-item-link{opacity:.5}
.footer .list:hover .list-item-link:hover{opacity:1;background:none;color:inherit}
.footer .list-item-chevron{width:2.1333333333vw}
@media only screen and (min-width:834px){.footer .list-item-chevron{width:.5555555556vw}}
.social-links-wrapper{column-gap:var(--grid-gutter);display:flex;justify-content:space-between}
.social-links{align-items:center;column-gap:6.9333333333vw;display:flex;margin:-3px;padding:3px}
@media only screen and (min-width:834px){.social-links{column-gap:1.8055555556vw}}
.social-link{display:inline-block;position:relative}
.social-link svg{display:block;overflow:visible;pointer-events:none;width:auto}
/* Il marchio del gruppo in coda alla riga della direzione e coordinamento.
   Da 834 px in su la riga diventa una fascia larga quanto la nota, cosi' il
   marchio finisce a filo con l'ultima cifra della partita IVA sopra; da
   telefono, dove la riga va a capo da sola, resta di seguito al testo. */
.footnote .riga{display:block}
.footnote .logo-lm{display:inline-block;height:.8em;margin-left:.5em;vertical-align:-.25em;width:auto}
@media only screen and (min-width:834px){
  .footnote .gruppo{align-items:center;display:flex;justify-content:space-between}
  .footnote .gruppo .logo-lm{margin-left:.5em}
  /* La fascia centra i due riquadri, ma il riquadro del testo non e' simmetrico
     attorno alle lettere: sotto ci sono lo spazio dei discendenti e mezza
     interlinea. Centrati i riquadri, il marchio finiva 1,7 px sopra le maiuscole
     e 4,3 px sotto la linea di base. Questi nove centesimi di em abbassano la
     scritta di quel tanto che serve: il marchio sporge uguale sopra e sotto. */
  .footnote .gruppo>span{position:relative;top:.09em}}
.legal-links{font-size:clamp(1.3rem,3.7333333333vw,1.8rem);font-weight:300;letter-spacing:-.02em;line-height:1.375;display:flex}
@media only screen and (min-width:834px){.legal-links{font-size:1.4rem}.legal-links.hidden-desktop{display:none}}
@media only screen and (max-width:833px){.legal-links.hidden-mobile{display:none}}
.legal-list-item:not(:last-child):after{background-color:currentColor;border-radius:50%;content:"";display:inline-block;height:.3rem;margin:0 2.1333333333vw;vertical-align:middle;width:.3rem}
@media only screen and (min-width:834px){.legal-list-item:not(:last-child):after{margin:0 .5555555556vw}}
.footer .logo{grid-column:1/-1;margin-top:12vw}
@media only screen and (min-width:834px){.footer .logo{grid-column:1/8;margin-top:1.1111111111vw;width:calc(100% + var(--grid-gutter))}}
.footnote-wrapper{font-size:clamp(1.3rem,3.7333333333vw,1.8rem);font-weight:300;letter-spacing:-.02em;line-height:1.375;align-items:flex-end;display:flex;grid-column:1/-1;justify-content:space-between;margin:5.3333333333vw auto 0}
@media only screen and (min-width:834px){.footnote-wrapper{font-size:clamp(1.4rem,1.1111111111vw,1.8rem);grid-column:13/-1;margin:0}}
/* Sotto i 1280 px la fascia della nota e' meta' schermo: la riga della partita
   IVA da sola la riempie quasi tutta, e i due link legali accanto non ci
   stavano piu'. Andavano a capo una parola per riga, e il marchio LM, spinto a
   filo di una riga che si era spezzata in due, finiva staccato dal testo. Da
   834 a 1279 px la nota si impila: partita IVA, direzione e coordinamento con
   il marchio in coda, link legali sotto. La nota si stringe sulla riga piu'
   lunga, cosi' il marchio torna a filo con l'ultima cifra sopra. Il corpo
   scende a 1,3 rem, il minimo che tiene su una riga anche la versione inglese,
   piu' larga di quella italiana. */
@media only screen and (min-width:834px) and (max-width:1279px){
  .footnote-wrapper{align-items:flex-start;flex-direction:column;font-size:clamp(1.3rem,1.1111111111vw,1.8rem);justify-content:flex-end;row-gap:.6em}
  .footnote-wrapper .legal-links{font-size:1.3rem}
}

@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-blur,.reveal-stagger>*,.line-mask>span{transition-duration:.01ms!important}
}

/* --- adattamenti Fase ------------------------------------------------- */
.image-sequence video{height:100%;left:0;object-fit:cover;position:absolute;top:0;width:100%}
.fb-video-wrapper canvas{display:block;height:100%;left:0;position:absolute;top:0;width:100%}
.method-mark{color:#202020;width:7.4666666667vw}
@media only screen and (min-width:834px){.method-mark{width:6.9444444444vw}}
.method-mark svg{width:100%;height:auto}
.footer-address{font-size:clamp(1.3rem,3.7333333333vw,1.8rem);font-style:normal;font-weight:300;letter-spacing:-.02em;line-height:1.5}
/* Da telefono l'indirizzo corre in riga, con i trattini a separare. Da 834 px
   in su ogni voce prende la sua riga: via, comune, telefono, mail. I
   separatori e l'a capo di mezzo spariscono, se no lascerebbero righe vuote. */
@media only screen and (min-width:834px){.footer-address{font-size:clamp(1.4rem,1.1111111111vw,1.8rem)}
  .footer-address .voce{display:block}
  .footer-address .stacco,.footer-address br{display:none}}
.expertise-card .image-wrapper img,.post-card .image-wrapper img,.hero-card img{background:#dcdcdc}

/* Le riprese Fase sono girate in reparto e restano piu chiare dei render
   dell'impianto originale: senza una velatura il titolo bianco si perde sul
   truciolo. Nessun colore nuovo, solo nero a opacita variabile. */
.hero-video-wrapper video,.image-sequence video{filter:brightness(.72) contrast(1.06) saturate(.85)}
.home-hero .container:before,.scene-inner:before{background:linear-gradient(90deg,rgba(0,0,0,.74) 0%,rgba(0,0,0,.45) 38%,rgba(0,0,0,0) 70%);content:"";inset:0;pointer-events:none;position:absolute;z-index:1}
.scene-inner:after{background:linear-gradient(180deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 58%,rgba(0,0,0,.72) 100%);content:"";inset:0;pointer-events:none;position:absolute;z-index:1}
.seq-content{z-index:4}
/* Il marchio Fase ha piu dettaglio della sigla che stava qui: la pillola
   si stringe sui lati e il tracciato sale fino a riempire la barra. */
@media only screen and (min-width:834px){
  .menu-logo{padding:0 .48vw}
  .logo-svg{width:3.75vw}
}


/* ===================== pagine interne ===================== */
.contact-button{align-items:center;display:inline-flex;justify-content:center}
.page-hero{padding-top:30vw}
@media only screen and (min-width:834px){.page-hero{padding-top:11vw}}
.page-hero .title-wrapper{grid-column:1/-1}
/* Il titolo sta su tutta la riga e non su sedici colonne: a sedici,
   «Centrifughe disoleatrici a ciclo continuo» non ci stava e «continuo»
   andava a capo da solo. I titoli corti non cambiano — la larghezza conta
   solo quando il testo va a capo. */
@media only screen and (min-width:834px){.page-hero .title-wrapper{grid-column:1/-1}}
.page-hero .title{font-size:clamp(2.8rem,9.6vw,9.6vw);font-weight:300;letter-spacing:-.02em;line-height:1.167}
@media only screen and (min-width:834px){.page-hero .title{font-size:clamp(5rem,4.4444444444vw,4.4444444444vw);letter-spacing:-.04em;line-height:1.125}}
.page-hero .scramble-label{margin-bottom:4vw}
@media only screen and (min-width:834px){.page-hero .scramble-label{margin-bottom:1.1vw}}
.page-sub{font-size:clamp(1.6rem,5.3333333333vw,5.3333333333vw);font-weight:300;letter-spacing:-.04em;line-height:1.2;color:var(--color-silver);margin-top:4.5vw;max-width:none}
@media only screen and (min-width:834px){.page-sub{font-size:clamp(2rem,1.6666666667vw,1.6666666667vw);line-height:1.167;margin-top:1.1vw;width:38.8888888889vw}}
.breadcrumb{color:var(--color-mid-grey);font-family:var(--font-accent),monospace;font-size:1.2rem;font-weight:400;letter-spacing:-.02em;line-height:1.5;margin-bottom:4.5vw;text-transform:uppercase}
@media only screen and (min-width:834px){.breadcrumb{margin-bottom:1.4vw}}
.breadcrumb a{transition:color .2s}
.breadcrumb a:hover{color:var(--color-off-white)}
.breadcrumb span{margin:0 .6rem}

.page-statement{margin:12vw var(--grid-outer-gutter) 0}
@media only screen and (min-width:834px){.page-statement{margin:5vw var(--grid-outer-gutter) 0}}
.page-statement .copy{font-size:clamp(2rem,7.4666666667vw,7.4666666667vw);font-weight:300;letter-spacing:-.02em;line-height:1.142;margin-top:4vw}
@media only screen and (min-width:834px){.page-statement .copy{font-size:clamp(3.6rem,3.3333333333vw,3.3333333333vw);letter-spacing:-.04em;line-height:1.167;margin-top:2vw}}

.media-band{margin-top:10vw;padding:0 var(--grid-outer-gutter)}
@media only screen and (min-width:834px){.media-band{margin-top:4.5vw}}
/* Fascia seguita da una sezione con fondo proprio (es. "Le macchine"): li' il
   fondo attacca sul bordo del carosello e sotto non resta spazio. La fascia
   sale e la parte di margine tolta sopra torna sotto, cosi' i due spazi si
   leggono uguali (sopra si tiene conto del vuoto che il titolo lascia sotto
   la riga di testo). */
.media-band:has(+.expertises-overview){margin-top:3.4vw;margin-bottom:6.6vw}
@media only screen and (min-width:834px){.media-band:has(+.expertises-overview){margin-top:1.5555555556vw;margin-bottom:2.9444444444vw}}
.media-band>div{aspect-ratio:16/9;border-radius:4.2666666667vw;overflow:hidden;position:relative;background:var(--color-dark-grey)}
@media only screen and (min-width:834px){.media-band>div{border-radius:2.2222222222vw}}
.media-band img{height:100%;left:0;object-fit:cover;position:absolute;top:0;width:100%}
/* Fascia stretta: quella in cima alle pagine dei Sistemi. A tutta larghezza
   in 16:9 non ci stava nemmeno in una schermata desktop — restava tagliata in
   fondo, e sotto non si vedeva niente.

   Si rimpicciolisce in proporzione, senza toccare il rapporto: **la fotografia
   non viene ritagliata piu' di prima**. Provato a schiacciarla tenendo la
   larghezza piena — a 2,24 il trituratore perdeva la cima della tramoggia e i
   piedi del banco, ed e' esattamente quello che questo sito non fa.

   Il tetto e' `66svh`: da li' esce la larghezza (66svh x 16/9, cioe' 117svh) e
   l'altezza va dietro. Su una finestra 1440x900 la fascia passa da 1368x770 —
   che sfondava lo schermo — a 1056x594, e sta dentro col titolo sopra.
   Su una finestra alta o stretta comanda invece il `min(100%, ...)` e la
   fascia torna larga quanto la pagina.

   Le frecce escono dal riquadro e vanno nei margini: il JS le appende alla
   sezione invece che al carosello, perche' il riquadro ritaglia
   (overflow:hidden) e col solo CSS non uscirebbero. Da telefono non cambia
   niente — li' la fascia e' alta un terzo di schermo — e il foglio le rimette
   sopra la fotografia, dove stavano. */
@media only screen and (max-width:833px){
  .media-band.stretta{position:relative}
  /* le frecce ora sono figlie della sezione, non del carosello: il margine
     esterno della sezione va sommato allo scarto che avevano prima */
  .media-band.stretta>.carosello-freccia{left:calc(var(--grid-outer-gutter) + 3.2vw)}
  .media-band.stretta>.carosello-freccia.avanti{left:auto;right:calc(var(--grid-outer-gutter) + 3.2vw)}
}
@media only screen and (min-width:834px){
  .media-band.stretta{align-items:center;column-gap:1.1111111111vw;display:flex;justify-content:center}
  .media-band.stretta>.carosello{flex:0 1 auto;order:2;width:min(100%,calc(66svh*16/9))}
  /* Il JS appende le frecce in coda alla sezione: con `order` tornano ai due
     lati, indietro a sinistra e avanti a destra. */
  .media-band.stretta>.carosello-freccia{flex-shrink:0;left:auto;order:1;position:static;right:auto;top:auto;transform:none}
  .media-band.stretta>.carosello-freccia.avanti{order:3}
}
/* La sede non sta in un riquadro: e' scontornata, e la sagoma dell'edificio
   attacca sul nero della pagina correndo da un bordo all'altro dello schermo.
   Niente cornice, niente raggio, niente 16:9 — l'altezza la detta l'edificio. */
.media-sagoma{margin-top:9vw}
@media only screen and (min-width:834px){.media-sagoma{margin-top:3.6vw}}
.media-sagoma img{display:block;height:auto;width:100%}
/* Carosello della fascia: le figure stanno gia' una sopra l'altra e a tutta
   fascia, quindi basta accenderne una per volta. Senza JS resta accesa la
   prima e la fascia si comporta come prima. */
.media-band .carosello img{opacity:0;transition:opacity .55s var(--ease-expo-out)}
.media-band .carosello img.attiva{opacity:1}
.carosello-punti{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background-color:var(--color-black40);border-radius:1.6vw;bottom:3.2vw;column-gap:2.1333333333vw;display:flex;left:3.2vw;padding:2.1333333333vw;position:absolute;z-index:2}
@media only screen and (min-width:834px){
  .carosello-punti{border-radius:.4166666667vw;bottom:1.1111111111vw;column-gap:.5555555556vw;left:1.1111111111vw;padding:.5555555556vw}
}
.carosello-punti.fitti{border-radius:1.0666666667vw;column-gap:1.0666666667vw;padding:1.6vw}
@media only screen and (min-width:834px){.carosello-punti.fitti{border-radius:.2777777778vw;column-gap:.2777777778vw;padding:.5555555556vw}}
.carosello-punti.fitti .carosello-punto{height:.5rem;width:.5rem}
.carosello-punto{background-color:var(--color-off-white40);border-radius:50%;height:.7rem;padding:0;width:.7rem;transition:background-color .3s,transform .3s}
.carosello-punto:hover{background-color:var(--color-off-white)}
.carosello-punto.attivo{background-color:var(--color-off-white);transform:scale(1.2)}
/* Frecce ai lati: stesse pastiglie a puntini della sezione "Il metodo",
   con il fondo scuro sfocato dei pallini invece del rosso, perche' qui
   stanno sopra la fotografia. Piu' grandi delle originali: 28 px sono un
   bersaglio scomodo per il dito su una fascia di questa misura. */
.carosello-freccia{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background-color:var(--color-black40);color:var(--color-off-white);height:10.6666666667vw;left:3.2vw;position:absolute;top:50%;transform:translateY(-50%);width:10.6666666667vw;z-index:2}
.carosello-freccia.avanti{left:auto;right:3.2vw}
.carosello-freccia:hover{background-color:var(--color-black);color:var(--color-off-white)}
@media only screen and (min-width:834px){
  .carosello-freccia{height:2.9166666667vw;left:1.1111111111vw;width:2.9166666667vw}
  .carosello-freccia.avanti{left:auto;right:1.1111111111vw}
}
@media (prefers-reduced-motion:reduce){
  .media-band .carosello img{transition-duration:.01ms!important}
}

.expertises-overview .cards .expertise-card{background-color:var(--color-charcoal)}
.split-section,.detail-section,.solution-section,.contact-section{padding:14vw 0 0}
@media only screen and (min-width:834px){.split-section,.detail-section,.solution-section,.contact-section{padding:5.5vw 0 0}}
.split-list{display:flex;flex-direction:column;grid-column:1/-1;row-gap:13vw}
@media only screen and (min-width:834px){.split-list{row-gap:4.5vw}}
.split-block{column-gap:var(--grid-gutter);display:grid;grid-template-columns:repeat(var(--grid-column-count),1fr)}
.split-head{grid-column:1/-1}
@media only screen and (min-width:834px){.split-head{grid-column:1/span 9}}
.split-index{color:var(--color-yellow);font-family:var(--font-accent),monospace;font-size:1.2rem;font-weight:400;letter-spacing:-.02em;line-height:1.5;margin-bottom:4.2666666667vw}
@media only screen and (min-width:834px){.split-index{margin-bottom:1.1111111111vw}}
.split-title{font-size:clamp(2rem,7.4666666667vw,7.4666666667vw);font-weight:300;letter-spacing:-.04em;line-height:1}
@media only screen and (min-width:834px){.split-title{font-size:clamp(3rem,2.5vw,2.5vw);line-height:1.167}}
/* Carosello nella colonna della scheda: stessa meccanica della fascia, ma 4:3
   invece di 16:9. Gli scatti dei ribalta cassoni sono verticali e le macchine
   sono alte: in un 16:9 resterebbe il 42% dell'altezza e la macchina si
   spezzerebbe, in un 4:3 ne resta il 56% e si legge ancora. */
.split-media{margin-top:6.4vw}
@media only screen and (min-width:834px){
  .split-media{margin-top:1.6666666667vw}}
.split-media .carosello{aspect-ratio:4/3;background-color:var(--color-dark-grey);border-radius:4.2666666667vw;overflow:hidden;position:relative}
@media only screen and (min-width:834px){.split-media .carosello{border-radius:1.1111111111vw}}
.split-media .carosello img{height:100%;left:0;object-fit:cover;opacity:0;position:absolute;top:0;transition:opacity .55s var(--ease-expo-out);width:100%}
.split-media .carosello img.attiva{opacity:1}
/* Frecce e pallini sono tarati sulla fascia a tutta pagina: in una colonna
   larga un terzo verrebbero enormi, qui scendono di misura. */
@media only screen and (min-width:834px){
  .split-media .carosello-freccia{height:1.8055555556vw;left:.5555555556vw;width:1.8055555556vw}
  .split-media .carosello-freccia.avanti{left:auto;right:.5555555556vw}
  .split-media .carosello-punti{border-radius:.2777777778vw;bottom:.5555555556vw;column-gap:.2777777778vw;left:.5555555556vw;padding:.4166666667vw}}
@media (prefers-reduced-motion:reduce){.split-media .carosello img{transition-duration:.01ms!important}}
/* Il carosello si allunga fino a dove arriva il testo di destra, cosi' le due
   colonne cominciano e finiscono insieme. Sotto non puo' scendere: il minimo e'
   un 16:10 della colonna (21,8vw), se no su finestra larga — dove il testo va a
   capo poche volte ed e' corto — diventerebbe una fessura. */
@media only screen and (min-width:834px){
  .split-head{display:flex;flex-direction:column}
  .split-media{display:flex;flex:1;min-height:0}
  /* Largo il 70% della colonna: a tutta larghezza un 16:10 sarebbe piu' alto
     del testo a fianco su qualsiasi finestra, e il vuoto non si chiuderebbe
     mai. Cosi' fino a circa 1500 px le due colonne finiscono insieme. */
  .split-media .carosello{aspect-ratio:auto;height:100%;max-width:70%;min-height:15.3vw;width:100%}}
.split-body{grid-column:1/-1;margin-top:5vw}
/* Da 834 px in su le due colonne partono dalla stessa riga della griglia, ma a
   sinistra sopra il titolo c'e' il numero: senza correzione il testo di destra
   attacca all'altezza del numero e non del titolo. Scende quindi dell'altezza
   del numero piu' il suo margine, cioe' esattamente di quello che il titolo ha
   sopra di se'. */
@media only screen and (min-width:834px){.split-body{grid-column:13/-1;margin-top:calc(1.2rem*1.5 + 1.1111111111vw)}}
/* Dove a sinistra sotto il titolo c'e' anche il carosello — le due schede degli
   accessori — il testo scende ancora: dell'altezza del titolo piu' il margine
   del carosello. Cosi' non parte all'altezza del titolo ma all'altezza della
   fotografia, e le due colonne cominciano insieme. Il `max` ripete il `clamp`
   del corpo del titolo, altrimenti sotto i 1200 px il conto sbaglia di qualche
   pixel. La discesa vale solo dove il carosello c'e': senza, sotto il titolo si
   aprirebbe un vuoto alto quanto l'immagine che manca. */
@media only screen and (min-width:834px){
  .split-block:has(.split-media) .split-body{margin-top:calc(1.2rem*1.5 + 1.1111111111vw + max(3rem,2.5vw)*1.167 + 1.6666666667vw)}}
.split-hook{font-size:clamp(1.6rem,5.3333333333vw,5.3333333333vw);font-weight:300;letter-spacing:-.04em;line-height:1.2;color:var(--color-off-white)}
@media only screen and (min-width:834px){.split-hook{font-size:clamp(2rem,1.6666666667vw,1.6666666667vw);line-height:1.167}}
.split-prose{margin-top:4vw}
@media only screen and (min-width:834px){.split-prose{margin-top:1.6666666667vw}}
.split-prose p,.detail-prose p,.contact-prose p{font-size:clamp(1.3rem,3.7333333333vw,1.8rem);font-weight:300;letter-spacing:-.02em;line-height:1.5;color:var(--color-silver)}
@media only screen and (min-width:834px){.split-prose p,.detail-prose p,.contact-prose p{font-size:clamp(1.4rem,1.1111111111vw,1.8rem)}}
/* Nelle due schede degli accessori il corpo sale: era tappato a 1,8rem e su
   finestra larga smetteva di crescere, mentre il carosello a fianco cresceva. */
@media only screen and (min-width:834px){.split-prose p{font-size:clamp(1.6rem,1.25vw,2.2rem)}}
.split-prose p+p,.detail-prose p+p,.contact-prose p+p{margin-top:4.2666666667vw}
@media only screen and (min-width:834px){.split-prose p+p,.detail-prose p+p,.contact-prose p+p{margin-top:1.1111111111vw}}
.detail-prose a{color:var(--color-off-white);text-decoration:underline;text-underline-offset:.2em}
.detail-prose .muted{color:var(--color-arsenic);margin-top:5vw}
@media only screen and (min-width:834px){.detail-prose .muted{margin-top:2.7777777778vw}}


.detail-prose{grid-column:1/-1}
@media only screen and (min-width:834px){.detail-prose{grid-column:1/span 10}}
.key-grid{column-gap:var(--grid-gutter);display:grid;grid-column:1/-1;grid-template-columns:1fr 1fr;margin-top:9vw;row-gap:6vw}
/* I dati in evidenza vanno a due colonne, ma quando ne resta uno solo la
   seconda restava vuota di fianco e la voce si stringeva a meta' fascia —
   da telefono, dove la meta' e' 175 px, la riga andava a capo per niente.
   Da sola, la voce prende tutta la larghezza che ha. */
.key-grid:has(>.key-item:only-child){grid-template-columns:1fr}
@media only screen and (min-width:834px){.key-grid{grid-column:13/-1;margin-top:0;row-gap:2.7777777778vw}}
.key-label{color:var(--color-mid-grey);font-family:var(--font-accent),monospace;font-size:1.2rem;font-weight:400;letter-spacing:-.02em;line-height:1.5;text-transform:uppercase}
.key-value{font-size:clamp(1.5rem,4.8vw,4.8vw);font-weight:300;letter-spacing:-.02em;line-height:1.22;margin-top:2.1333333333vw}
/* Quando il dato porta piu' di un valore — le due taglie della KOMBI — ognuno
   prende la sua riga: su una riga sola andava a capo dentro il nome del
   modello, e si leggeva «KOMBI-» sopra e «40» sotto. */
.key-value span{display:block}
@media only screen and (min-width:834px){.key-value{font-size:clamp(1.6rem,1.3888888889vw,1.3888888889vw);line-height:1.2;margin-top:.5555555556vw}}
/* Una scheda senza elenchi — oggi i soli impianti a ciclo continuo — finisce
   sulla griglia dei dati, che sotto non ha margine: la fascia grigia delle
   altre serie le arrivava addosso. Le si lascia lo stesso vuoto che resta
   sotto l'ultima voce di un elenco, testo compreso. */
.detail-section:not(.lists):has(+.expertises-overview){padding-bottom:6.4vw}
@media only screen and (min-width:834px){.detail-section:not(.lists):has(+.expertises-overview){padding-bottom:1.6666666667vw}}

.detail-cols{column-gap:var(--grid-gutter);display:grid;grid-column:1/-1;grid-template-columns:1fr;row-gap:9vw}
/* Sulla pagina accessori le colonne seguono direttamente il titolo di
   sezione: nelle schede prodotto in mezzo c'e' la griglia dei dati, qui no. */
.detail-prose + .detail-cols{margin-top:9vw}
@media only screen and (min-width:834px){.detail-prose + .detail-cols{margin-top:3vw}}
@media only screen and (min-width:834px){.detail-cols{grid-template-columns:1fr 1fr;row-gap:0}}
/* Quando la scheda ha il solo elenco "Caratteristiche" e non anche
   "Accessori" — le due schede degli impianti e le due dei trituratori — la
   griglia a due colonne lasciava mezza pagina vuota sotto il titolo: un buco,
   non aria. L'elenco da solo si prende tutta la larghezza e manda le voci su
   due colonne, cosi' la sezione pesa quanto quella delle schede che di elenchi
   ne hanno due. Le voci sono corte, una riga per voce. */
@media only screen and (min-width:834px){
  .detail-cols:has(>.list-block:only-child){grid-template-columns:1fr}
  .detail-cols:has(>.list-block:only-child) .dot-list{columns:2;column-gap:var(--grid-gutter)}
  .detail-cols:has(>.list-block:only-child) .dot-list li{break-inside:avoid}
}
.list-title,.spec-title{font-size:clamp(1.6rem,5.3333333333vw,5.3333333333vw);font-weight:300;letter-spacing:-.04em;line-height:1.2;margin-bottom:4.5vw}
@media only screen and (min-width:834px){.list-title,.spec-title{font-size:clamp(2rem,1.6666666667vw,1.6666666667vw);line-height:1.167;margin-bottom:1.6666666667vw}}
.dot-list li{font-size:clamp(1.3rem,3.7333333333vw,1.8rem);font-weight:300;letter-spacing:-.02em;line-height:1.5;border-top:1px solid var(--color-arsenic);color:var(--color-silver);padding:4.2666666667vw 0 4.2666666667vw 6.4vw;position:relative}
@media only screen and (min-width:834px){.dot-list li{font-size:clamp(1.4rem,1.1111111111vw,1.8rem);padding:1.1111111111vw 0 1.1111111111vw 1.6666666667vw}}
/* Gli elenchi puntati restano aperti in basso: l'ultima voce non porta la
   riga di chiusura. La riga c'era, e chiudeva l'elenco come il bordo di una
   tabella proprio dove comincia la sezione dopo: due righe orizzontali a
   pochi millimetri una dall'altra, senza che la seconda dicesse nulla.
   Le voci si separano con il bordo alto di ciascuna, e tanto basta. */
.dot-list li:before{background-color:var(--color-yellow);border-radius:50%;content:"";height:.6rem;left:0;position:absolute;top:6.4vw;width:.6rem}
@media only screen and (min-width:834px){.dot-list li:before{top:1.6666666667vw}}

.spec-list{display:flex;flex-direction:column;grid-column:1/-1;row-gap:9vw}
@media only screen and (min-width:834px){.spec-list{row-gap:3vw}}
.spec-scroll{overflow-x:auto;scrollbar-width:none}
.spec-scroll::-webkit-scrollbar{display:none}
.spec-table{border-collapse:collapse;min-width:100%;white-space:nowrap}
.spec-table th{color:var(--color-mid-grey);font-family:var(--font-accent),monospace;font-size:1.2rem;font-weight:400;letter-spacing:-.02em;line-height:1.5;text-align:left;text-transform:uppercase}
.spec-table td{font-size:clamp(1.3rem,3.7333333333vw,1.8rem);font-weight:300;letter-spacing:-.02em;line-height:1.5;color:var(--color-off-white)}
@media only screen and (min-width:834px){.spec-table td{font-size:clamp(1.4rem,1.1111111111vw,1.8rem)}}
.spec-table td:first-child{color:var(--color-off-white)}
.spec-table td:not(:first-child){color:var(--color-silver)}
.spec-table th,.spec-table td{border-bottom:1px solid var(--color-arsenic);padding:3.2vw 4.2666666667vw 3.2vw 0}
/* Stessa scelta delle liste: sotto l'ultima riga la tabella non si chiude. */
.spec-table tbody tr:last-child td{border-bottom:0}
@media only screen and (min-width:834px){.spec-table th,.spec-table td{padding:1.1111111111vw 2.2222222222vw 1.1111111111vw 0}}
.spec-table tbody tr:hover td{background-color:var(--color-dark-grey)}
/* La scheda tecnica in coda alla riga. E' l'unica cosa cliccabile dentro una
   tabella del sito e porta fuori — apre un PDF in una scheda nuova — quindi non
   basta il colore del testo: e' una pastiglia col bordo e la freccia che esce
   dal riquadro, lo stesso segno che si usa per i collegamenti esterni. Sopra,
   si accende del rosso del marchio. La colonna e' l'ultima e sta in mezzo alla
   sua cella, perche' non e' un dato che si legge in colonna con gli altri. */
/* Solo la colonna della scheda tecnica va in mezzo alla cella. Il selettore
   prima diceva `th:last-child`, e cosi' centrava l'ultima intestazione di
   ogni tabella: dove la colonna non c'e' — FD, TR1, TR-Dual — finiva
   centrato "Giri/min" sopra cifre allineate a sinistra, e il titolo non
   stava piu' sopra il suo dato. Adesso la classe sta su tutte e due le
   celle, intestazione e riga, e nessun'altra colonna si sposta. */
.spec-table th.scheda,.spec-table td.scheda{text-align:center}
.spec-table td.scheda{padding-right:0}
.scheda-doc{align-items:center;border:1px solid var(--color-arsenic);border-radius:10rem;color:var(--color-silver);column-gap:.5em;display:inline-flex;font-family:var(--font-accent),monospace;font-size:1.2rem;letter-spacing:-.02em;line-height:1;padding:.7em 1.1em;text-transform:uppercase;transition:background-color .2s,border-color .2s,color .2s}
.scheda-doc svg{flex-shrink:0;height:1em;width:1em}
.scheda-doc:hover{background-color:var(--color-yellow);border-color:var(--color-yellow);color:var(--color-off-white)}
.scheda-doc:focus-visible{outline:2px solid var(--color-off-white);outline-offset:2px}
/* Col cursore su una taglia compare la sua fotografia, come nell'elenco delle
   news: la tabella resta larga quanto la pagina e la fotografia le passa
   sopra, appoggiata a destra e all'altezza della riga che si sta guardando —
   l'altezza gliela da' il JS. Solo da 834 px in su: da telefono non c'e' un
   cursore da seguire, e la fascia in cima mostra gia' le macchine. Le righe
   senza `data-foto` non fanno comparire niente invece di mostrare la macchina
   sbagliata. */
.spec-foto{display:none}
@media only screen and (min-width:834px){
  .spec-block{position:relative}
  /* Il riquadro passa sopra la tabella ed e' `aria-hidden`: e' decorazione,
     e il cursore deve attraversarlo come se non ci fosse. Senza questa riga
     si mangiava il clic sulla scheda tecnica, che gli sta proprio sotto. */
  .spec-foto{pointer-events:none;background-color:var(--color-dark-grey);border-radius:1.1111111111vw;
    box-shadow:0 1.2vw 3vw rgba(0,0,0,.55);display:block;height:13.5vw;opacity:0;
    overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;
    visibility:hidden;width:24vw;z-index:2;
    transition:opacity .2s,visibility .2s,top .25s var(--ease-expo-out)}
  .spec-foto img{height:100%;left:0;object-fit:cover;position:absolute;top:0;width:100%}
  .spec-block.mostra .spec-foto{opacity:1;visibility:visible}
}

.solution-grid{column-gap:var(--grid-gutter);display:grid;grid-column:1/-1;grid-template-columns:1fr;row-gap:9vw}
@media only screen and (min-width:834px){.solution-grid{grid-template-columns:1fr 1fr;row-gap:4.1666666667vw}}
.solution-card .image-wrapper{aspect-ratio:16/10;border-radius:4.2666666667vw;overflow:hidden;position:relative;background:var(--color-dark-grey)}
@media only screen and (min-width:834px){.solution-card .image-wrapper{border-radius:1.6666666667vw}}
.solution-card .image-wrapper img{height:100%;left:0;object-fit:cover;position:absolute;top:0;width:100%}
.solution-card .name{font-size:clamp(1.6rem,5.3333333333vw,5.3333333333vw);font-weight:300;letter-spacing:-.04em;line-height:1.2;margin-top:4.5vw}
@media only screen and (min-width:834px){.solution-card .name{font-size:clamp(2rem,1.6666666667vw,1.6666666667vw);line-height:1.167;margin-top:1.6666666667vw}}
.solution-card p{font-size:clamp(1.3rem,3.7333333333vw,1.8rem);font-weight:300;letter-spacing:-.02em;line-height:1.5;color:var(--color-silver);margin-top:4.2666666667vw}
@media only screen and (min-width:834px){.solution-card p{font-size:clamp(1.4rem,1.1111111111vw,1.8rem);margin-top:1.1111111111vw}}

.contact-prose{grid-column:1/-1}
@media only screen and (min-width:834px){.contact-prose{grid-column:1/span 10}}
.contact-panel{background-color:var(--color-dark-grey);border-radius:4.2666666667vw;grid-column:1/-1;margin-top:9vw;padding:6.4vw}
@media only screen and (min-width:834px){.contact-panel{border-radius:1.6666666667vw;grid-column:13/-1;margin-top:0;padding:2.7777777778vw}}
.contact-block+.contact-block,.contact-panel .base-button{margin-top:5.5vw}
@media only screen and (min-width:834px){.contact-block+.contact-block,.contact-panel .base-button{margin-top:2.2222222222vw}}
.contact-label{color:var(--color-mid-grey);font-family:var(--font-accent),monospace;font-size:1.2rem;font-weight:400;letter-spacing:-.02em;line-height:1.5;margin-bottom:2.1333333333vw;text-transform:uppercase}
@media only screen and (min-width:834px){.contact-label{margin-bottom:.5555555556vw}}
.contact-panel address,.contact-panel p{font-size:clamp(1.5rem,4.8vw,4.8vw);font-weight:300;font-style:normal;letter-spacing:-.02em;line-height:1.4}
@media only screen and (min-width:834px){.contact-panel address,.contact-panel p{font-size:clamp(1.6rem,1.3888888889vw,1.3888888889vw)}}
.contact-panel a{transition:color .2s}
.contact-panel p a{text-decoration:underline;text-underline-offset:.2em}
.contact-panel a:hover{color:var(--color-yellow)}
.map-link{display:inline-block;font-size:clamp(1.3rem,3.7333333333vw,1.8rem);font-weight:300;letter-spacing:-.02em;line-height:1.5;color:var(--color-silver);margin-top:4.2666666667vw;text-decoration:underline;text-underline-offset:.2em}
@media only screen and (min-width:834px){.map-link{font-size:clamp(1.4rem,1.1111111111vw,1.8rem);margin-top:1.1111111111vw}}

/* ============================ AZIENDA ========================== */
/* La pagina prende i due strumenti forti della home — la testata a tutto
   schermo col video e la fascia rossa — e ne aggiunge due suoi: il metodo a
   palco fermo e i numeri che contano. Tutto quello che si muove si ferma allo stato finale se il
   sistema chiede meno animazioni. */

/* La testata: sopra il titolo il percorso e l'etichetta, come nelle altre
   pagine interne. Il titolo e' una frase e non un nome, quindi da telefono
   scende di corpo: a 9,6vw «Il nostro lavoro comincia» andava a capo. */
.azienda-hero .breadcrumb,.azienda-hero .scramble-label{margin-bottom:3.2vw}
@media only screen and (min-width:834px){.azienda-hero .breadcrumb,.azienda-hero .scramble-label{margin-bottom:1.1111111111vw}}
.azienda-hero .title{font-size:clamp(2.6rem,8.2666666667vw,8.2666666667vw)}
@media only screen and (min-width:834px){.azienda-hero .title{font-size:clamp(5rem,4.4444444444vw,4.4444444444vw)}}
:root:has(main.azienda){scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){:root:has(main.azienda){scroll-behavior:auto}}
#sede{scroll-margin-top:6vw}

/* Il metodo. Da telefono tre capitoli uno sotto l'altro, ognuno col suo
   filmato sopra. */
.metodo{padding:14vw 0 0;position:relative}
.metodo-testa{align-items:center;display:flex;grid-column:1/-1;justify-content:space-between;margin-bottom:6.4vw}
.metodo-avanzamento{display:none}
.metodo-capitoli{display:flex;flex-direction:column;grid-column:1/-1;row-gap:16vw}
.metodo-capitolo{display:flex;flex-direction:column;row-gap:6.4vw}
.metodo-video{aspect-ratio:3/4;background:var(--color-dark-grey);border-radius:4.2666666667vw;margin:0;overflow:hidden;position:relative}
.metodo-video video{height:100%;left:0;object-fit:cover;position:absolute;top:0;width:100%}
.metodo-numero{color:var(--color-yellow);font-size:16vw;font-weight:250;letter-spacing:-.06em;line-height:.9}
.metodo-titolo{font-size:clamp(2rem,7.4666666667vw,7.4666666667vw);font-weight:300;letter-spacing:-.04em;line-height:1.05;margin-top:3.2vw}
.metodo-gancio{color:var(--color-off-white);font-size:clamp(1.6rem,5.3333333333vw,5.3333333333vw);font-weight:300;letter-spacing:-.04em;line-height:1.2;margin-top:4.2666666667vw}
.metodo-prosa{margin-top:4.2666666667vw}
.metodo-prosa p{color:var(--color-silver);font-size:clamp(1.3rem,3.7333333333vw,1.8rem);font-weight:300;letter-spacing:-.02em;line-height:1.5}
.metodo-prosa p+p{margin-top:4.2666666667vw}

/* Da 834 px in su il palco si aggancia. La sezione e' alta tre schermate e
   mezza: una per capitolo, piu' mezza perche' l'ultimo non scappi via appena
   arrivato. I capitoli stanno tutti nella stessa cella della griglia, uno
   sopra l'altro, e ognuno e' a sua volta una griglia di 24 colonne larga
   quanto il contenitore: le colonne dentro coincidono con quelle fuori. */
@media only screen and (min-width:834px){
  .metodo{height:350vh;padding:0}
  .metodo-palco{align-items:center;display:flex;height:100vh;height:100svh;overflow:hidden;position:sticky;top:0}
  .metodo-palco>.grid-container{padding-top:2.5vw;width:100%}
  .metodo-testa{margin-bottom:1.6666666667vw}
  .metodo-avanzamento{align-items:center;column-gap:1.6666666667vw;display:flex}
  .metodo-avanzamento ol{color:var(--color-arsenic);column-gap:1.1111111111vw;display:flex;font-family:var(--font-accent),monospace;font-size:1.2rem;letter-spacing:-.02em;line-height:1.5}
  .metodo-avanzamento li{transition:color .4s}
  .metodo-avanzamento li.fatto{color:var(--color-mid-grey)}
  .metodo-avanzamento li.attivo{color:var(--color-off-white)}
  .metodo-binario{background:var(--color-charcoal);height:1px;overflow:hidden;width:13vw}
  .metodo-barra{background:var(--color-yellow);height:100%;transform:scaleX(0);transform-origin:0 50%;width:100%}
  .metodo-capitoli{column-gap:var(--grid-gutter);display:grid;grid-template-columns:repeat(var(--grid-column-count),1fr)}
  .metodo-capitolo{column-gap:var(--grid-gutter);display:grid;grid-area:1/1/2/-1;grid-template-columns:repeat(var(--grid-column-count),1fr);pointer-events:none}
  .metodo-capitolo.attivo{pointer-events:auto;z-index:1}
  .metodo-testo{align-self:center;grid-column:1/span 10;grid-row:1;opacity:0;transform:translate3d(0,2.4rem,0);transition:opacity .5s var(--ease-expo-out),transform .9s var(--ease-expo-out)}
  .metodo-capitolo.attivo .metodo-testo{opacity:1;transform:none;transition-delay:.12s}
  .metodo-video{border-radius:1.1111111111vw;grid-column:13/-1;grid-row:1;height:min(70svh,52vw);justify-self:end;opacity:0;transition:opacity .9s var(--ease-expo-out)}
  .metodo-video video{transform:scale(1.07);transition:transform 1.6s var(--ease-expo-out)}
  .metodo-capitolo.attivo .metodo-video{opacity:1}
  .metodo-capitolo.attivo .metodo-video video{transform:none}
  .metodo-numero{font-size:5.5vw}
  .metodo-titolo{font-size:clamp(3.6rem,3.3333333333vw,3.3333333333vw);line-height:1.1;margin-top:1.1111111111vw}
  .metodo-gancio{font-size:clamp(2rem,1.6666666667vw,1.6666666667vw);line-height:1.167;margin-top:1.6666666667vw}
  .metodo-prosa{margin-top:1.6666666667vw}
  .metodo-prosa p{font-size:clamp(1.5rem,1.1805555556vw,2rem)}
  .metodo-prosa p+p{margin-top:1.1111111111vw}
}
@media (prefers-reduced-motion:reduce){
  .metodo-testo,.metodo-video,.metodo-video video,.metodo-avanzamento li{transition-duration:.01ms!important;transition-delay:0s!important}
}

/* I numeri. Cifre nel peso 250 della home, a larghezza fissa perche' mentre
   contano non ballino; l'unita' piccola, in alto, nel rosso del marchio. */
.numeri-azienda{padding:16vw 0 0}
@media only screen and (min-width:834px){.numeri-azienda{padding:5.5vw 0 0}}
.numeri-testa{grid-column:1/-1}
.numeri-titolo{font-size:clamp(2rem,7.4666666667vw,7.4666666667vw);font-weight:300;letter-spacing:-.04em;line-height:1.05;margin-top:3.2vw}
@media only screen and (min-width:834px){.numeri-titolo{font-size:clamp(3.6rem,3.3333333333vw,3.3333333333vw);line-height:1.167;margin-top:1.1111111111vw}}
.numeri-lista{column-gap:var(--grid-gutter);display:grid;grid-column:1/-1;grid-template-columns:1fr 1fr;margin-top:9vw;row-gap:9vw}
/* Tre numeri: su finestra larga tre colonne; da telefono due, e il terzo
   prende tutta la riga invece di restare a meta' con un vuoto accanto. */
.numero-voce:last-child:nth-child(odd){grid-column:1/-1}
@media only screen and (min-width:834px){.numeri-lista{grid-template-columns:repeat(3,1fr);margin-top:3.3333333333vw;row-gap:0}.numero-voce:last-child:nth-child(odd){grid-column:auto}}
.numero-voce{border-top:1px solid var(--color-charcoal);padding-top:4.2666666667vw}
@media only screen and (min-width:834px){.numero-voce{padding-top:1.6666666667vw}}
.numero-cifra{align-items:flex-start;color:var(--color-off-white);display:flex;font-size:13vw;font-variant-numeric:tabular-nums;font-weight:250;letter-spacing:-.06em;line-height:.9;white-space:nowrap}
@media only screen and (min-width:834px){.numero-cifra{font-size:5.8vw}}
.numero-pre{color:var(--color-mid-grey);margin-right:.06em}
.numero-unita{color:var(--color-yellow);font-size:.26em;font-weight:300;letter-spacing:-.02em;line-height:1;margin-left:.4em;margin-top:.2em}
.numero-etichetta{color:var(--color-silver);font-size:clamp(1.3rem,3.7333333333vw,1.8rem);font-weight:300;letter-spacing:-.02em;line-height:1.4;margin-top:3.2vw;max-width:22em}
@media only screen and (min-width:834px){.numero-etichetta{font-size:clamp(1.4rem,1.1111111111vw,1.8rem);margin-top:1.1111111111vw}}

/* ============================== LA SEDE ======================== */
/* A sinistra il testo e i recapiti, a destra la mappa — la stessa che sulla
   home sta dentro una scheda, qui grande quanto mezza colonna perche' e' lei
   a dare la notizia. La pagina finisce sulla mappa: lo spazio fino al pie'
   di pagina e' quello di .page-main, come sulle altre pagine. */
.sede{padding:14vw 0 0}
@media only screen and (min-width:834px){.sede{padding:5.5vw 0 0}}
.sede>.grid-container{padding-top:6.4vw;position:relative}
.sede>.grid-container:before{border-top:1px solid var(--color-charcoal);content:"";left:var(--grid-outer-gutter);position:absolute;right:var(--grid-outer-gutter);top:0}
@media only screen and (min-width:834px){.sede>.grid-container{padding-top:1.6666666667vw}}
.sede-testo{grid-column:1/-1}
@media only screen and (min-width:834px){.sede-testo{grid-column:1/span 11}}
.sede-testo .split-title{margin-top:4.2666666667vw}
@media only screen and (min-width:834px){.sede-testo .split-title{margin-top:1.1111111111vw}}
/* I recapiti non sono prosa: vanno in colonna, nel monospaziato delle
   etichette, cosi' si leggono come un indirizzo e non come una frase. */
.sede-recapiti{color:var(--color-mid-grey);display:flex;flex-direction:column;font-family:var(--font-accent),monospace;font-size:1.2rem;font-style:normal;font-weight:400;letter-spacing:-.02em;line-height:1.9;margin-top:6.4vw;text-transform:uppercase}
@media only screen and (min-width:834px){.sede-recapiti{margin-top:2.2222222222vw}}
.sede-recapiti a{color:var(--color-silver);transition:color .2s}
.sede-recapiti a:hover{color:var(--color-off-white)}
.sede-mappa{grid-column:1/-1;margin-top:11vw}
@media only screen and (min-width:834px){.sede-mappa{align-self:center;grid-column:15/-1;margin-top:0}}
/* La penisola e' alta il doppio di quanto sia larga: lasciata a tutta
   colonna diventerebbe piu' alta del testo che le sta a fianco. Si tiene a
   misura e si appoggia al margine destro della pagina. */
.mappa-italia{height:auto;margin:0 auto;max-width:52vw;width:100%}
@media only screen and (min-width:834px){.mappa-italia{margin:0 0 0 auto;max-width:19vw}}

.cta-band{background-color:var(--color-yellow);color:var(--color-off-white);margin-top:14vw;padding:14vw 0}
@media only screen and (min-width:834px){.cta-band{margin-top:7vw;padding:5.5vw 0}}
.cta-band .inner{grid-column:1/-1}
@media only screen and (min-width:834px){.cta-band .inner{grid-column:1/span 14}}
.cta-band .title{font-size:clamp(2rem,7.4666666667vw,7.4666666667vw);font-weight:300;letter-spacing:-.04em;line-height:1}
@media only screen and (min-width:834px){.cta-band .title{font-size:clamp(3rem,2.5vw,2.5vw);line-height:1.167}}
.cta-band .copy{font-size:clamp(1.3rem,3.7333333333vw,1.8rem);font-weight:300;letter-spacing:-.02em;line-height:1.5;margin-top:4.5vw;max-width:60rem}
@media only screen and (min-width:834px){.cta-band .copy{font-size:clamp(1.4rem,1.1111111111vw,1.8rem);margin-top:1.6666666667vw}}
.cta-band .base-button{margin-top:5.5vw}
@media only screen and (min-width:834px){.cta-band .base-button{margin-top:2.5vw}}
.news-page{padding-top:14vw}
@media only screen and (min-width:834px){.news-page{padding-top:5.5vw}}
/* Sezione "Sistemi": ferma, alta una schermata. Non e' piu' agganciata allo
   scroll, quindi niente sticky e niente 800lvh. */
.technology-sequence.statica .scene-wrapper{height:100svh}
.technology-sequence.statica .scene-inner{position:relative}
.technology-sequence.statica .image-sequence img{height:100%;left:0;object-fit:cover;position:absolute;top:0;width:100%}
.technology-sequence.statica .seq-content{opacity:1}
.technology-sequence.statica:after{background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.25) 46%,transparent 70%);content:"";height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:1}
.technology-sequence.statica .seq-content{z-index:2}
.page-main{padding-bottom:14vw}
@media only screen and (min-width:834px){.page-main{padding-bottom:6vw}}

/* ================= LA LENTE: LA FOTOGRAFIA INTERA ================
   I caroselli ritagliano — 16/9 nella fascia, 4/3 nella colonna, e
   `object-fit:cover` toglie quello che avanza. Le macchine sono alte e
   strette: quasi sempre ne resta fuori un pezzo. Un tocco in mezzo al
   carosello riapre la stessa fotografia sopra la pagina, dove `contain`
   la fa stare tutta, e da li' si continua a scorrere la fila con le
   frecce. Il pannello e' uno solo per pagina: si riempie ogni volta con
   le figure del carosello che l'ha aperto. */
.carosello{cursor:zoom-in}
.carosello:focus-visible{outline:2px solid var(--color-off-white);outline-offset:3px}
.lente{-webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px);background-color:rgba(0,0,0,.94);height:100vh;height:100svh;left:0;opacity:0;position:fixed;top:0;visibility:hidden;width:100%;z-index:40;transition:opacity .4s var(--ease-expo-out),visibility 0s .4s}
.lente.aperta{opacity:1;visibility:visible;transition-delay:0s}
/* Il riquadro lascia liberi i due capi: sopra passa la croce di chiusura,
   sotto la riga delle frecce, e la fotografia non ci finisce sotto. */
.lente-quadro{align-items:center;display:flex;height:100%;justify-content:center;padding:16vw 4.2666666667vw 17vw;width:100%}
@media only screen and (min-width:834px){.lente-quadro{padding:4.5vw 6.5vw}}
.lente-foto{border-radius:2.1333333333vw;height:auto;max-height:100%;max-width:100%;object-fit:contain;width:auto;transform:scale(.96);transition:opacity .25s linear,transform .5s var(--ease-expo-out)}
@media only screen and (min-width:834px){.lente-foto{border-radius:.5555555556vw}}
.lente.aperta .lente-foto{transform:none}
/* La figura del carosello puo' non essere ancora scaricata: finche' non
   arriva il riquadro resta vuoto invece di mostrare un rotto. */
.lente-foto.in-attesa{opacity:0}
/* Nel carosello le pastiglie stanno sopra una fotografia e il nero al 40%
   basta a staccarle. Qui il fondo e' gia' nero: lo stesso nero sparirebbe,
   e resterebbero nove pallini appesi al buio. Fondo di grafite, e sotto il
   puntatore il rosso del marchio. */
.lente-chiudi,.lente-freccia{background-color:var(--color-charcoal);color:var(--color-off-white);height:10.6666666667vw;width:10.6666666667vw}
.lente-chiudi:hover,.lente-freccia:hover{background-color:var(--color-yellow);color:var(--color-off-white)}
/* All'apertura il fuoco va sulla croce. L'anello azzurro del browser sopra il
   nero stona: stesso segno bianco del carosello. */
.lente-chiudi:focus-visible,.lente-freccia:focus-visible{outline:2px solid var(--color-off-white);outline-offset:3px}
.lente-chiudi{position:absolute;right:4.2666666667vw;top:4.2666666667vw;z-index:2}
@media only screen and (min-width:834px){
  .lente-chiudi,.lente-freccia{height:2.9166666667vw;width:2.9166666667vw}
  .lente-chiudi{right:2.5vw;top:2.5vw}
}
/* Su telefono le tre voci stanno in riga sotto la fotografia, nel nero che
   il `contain` lascia comunque libero: cosi' non coprono niente e quel
   fondo non resta vuoto. Da 834 px in su la riga si apre ai due bordi e le
   frecce tornano ai lati, dove stanno anche nel carosello. */
.lente-barra{align-items:center;bottom:4.2666666667vw;column-gap:4.2666666667vw;display:flex;justify-content:center;left:50%;position:absolute;transform:translateX(-50%);z-index:2}
@media only screen and (min-width:834px){
  .lente-barra{bottom:0;column-gap:0;justify-content:space-between;left:0;padding:0 2.5vw;pointer-events:none;right:0;top:0;transform:none}
  .lente-barra>*{pointer-events:auto}
  .lente-conta{bottom:2.2vw;left:50%;position:absolute;transform:translateX(-50%)}
}
.lente-conta{color:var(--color-silver);font-family:var(--font-accent),monospace;font-size:1.2rem;font-weight:400;letter-spacing:-.02em;line-height:1.5}
@media (prefers-reduced-motion:reduce){
  .lente,.lente-foto{transition-duration:.01ms!important}
}

/* ===================== LE DUE INFORMATIVE ========================
   Privacy e cookie sono le uniche pagine del sito fatte di testo lungo
   diviso in sezioni: il corpo e' gia' quello di `.detail-prose`, qui si
   aggiungono solo i titoli di sezione, gli elenchi e la riga della data.
   Misura tenuta stretta — sotto i 68 caratteri — perche' un'informativa
   si legge riga per riga, non si scorre. */
.legale{max-width:62rem}
@media only screen and (min-width:834px){.legale{max-width:46vw}}
.legale h2{font-size:clamp(1.8rem,5.3333333333vw,5.3333333333vw);font-weight:300;letter-spacing:-.03em;line-height:1.14;margin-top:11vw}
@media only screen and (min-width:834px){.legale h2{font-size:clamp(2rem,1.6666666667vw,2.4rem);margin-top:3.6vw}}
.legale h2:first-child{margin-top:0}
.legale h3{color:var(--color-off-white);font-size:clamp(1.4rem,4vw,1.9rem);font-weight:300;letter-spacing:-.02em;line-height:1.3;margin-top:6vw}
@media only screen and (min-width:834px){.legale h3{font-size:clamp(1.5rem,1.1805555556vw,1.9rem);margin-top:1.8vw}}
.legale h2+p,.legale h3+p{margin-top:3.2vw}
@media only screen and (min-width:834px){.legale h2+p,.legale h3+p{margin-top:0.9vw}}
.legale ul{display:flex;flex-direction:column;margin-top:3.2vw;row-gap:2.4vw}
@media only screen and (min-width:834px){.legale ul{margin-top:0.9vw;row-gap:0.7vw}}
/* Il trattino e' il segno degli elenchi del sito; il rosso lo tiene
   agganciato al marchio senza accendere la parola che segue. */
.legale li{color:var(--color-silver);font-size:clamp(1.3rem,3.7333333333vw,1.8rem);font-weight:300;letter-spacing:-.02em;line-height:1.5;padding-left:3.7333333333vw;position:relative}
@media only screen and (min-width:834px){.legale li{font-size:clamp(1.4rem,1.1111111111vw,1.8rem);padding-left:1.3888888889vw}}
.legale li:before{color:var(--color-yellow);content:"—";left:0;position:absolute}
.legale li b,.legale p b{color:var(--color-off-white);font-weight:400}
.legale .data{color:var(--color-mid-grey);font-family:var(--font-accent),monospace;font-size:1.2rem;font-weight:400;letter-spacing:-.02em;line-height:1.5;margin-top:10vw;text-transform:uppercase}
@media only screen and (min-width:834px){.legale .data{margin-top:3.2vw}}
/* I nomi tecnici citati nelle informative — la chiave della lingua, il nome
   della memoria del browser — vanno in mono come le etichette del sito. */
.legale .mono{color:var(--color-off-white);font-family:var(--font-accent),monospace;font-size:.92em}


/* Il banner della fiera non e' una fotografia: e' una composizione con la
   scritta in alto. Le fasce sono 16:9 e le schede 3:2, il banner e' quasi
   quadrato (1,185), quindi il ritaglio centrato mangia un terzo dell'altezza
   e si porta via «Vi aspettiamo a». Ancorato in alto la scritta resta tutta
   e a cadere e' il fondo di ingranaggi, che non dice niente. Il banner 2025
   ha la scritta in mezzo e non ne ha bisogno: la classe si mette a mano,
   solo dove serve. */
img.in-alto{object-position:50% 0}