/* ============================================================
   BEEYOND - water technology
   Single stylesheet. No framework, no build step.
   ============================================================ */

:root{
  /* --- light (default) --- */
  --ink:#F5F4F1;          /* page background */
  --ink-2:#FFFFFF;        /* card surface    */
  --ink-3:#EBEAE5;        /* raised / hover  */
  --line:rgba(14,24,26,.15);
  --paper:#14181A;        /* body text       */
  --mute:#5F6B6E;
  --accent:#6fc7db;       /* fills, bars     */
  --logo-ink:#585858;     /* lettering del logo su fondo chiaro: nero pieno no, vedi main.js */
  --accent-ink:#24798f;   /* accent as text: l azzurro chiaro non passa il contrasto su crema */
  --aqua:#389eb2;        /* l acqua negli schemi: stessa famiglia dell accento */
  --aqua-ink:#1c6578;
  --mud:#7A6A45;
  --brand:#6fc7db;        /* heading counter-line */
  --panel:#E9EBE6;        /* product showcase panel */
  --panel-ink:#0C1011;
  /* inverted band (contact / CTA) */
  --inv-bg:#14181A;
  --inv-fg:#F2F3F0;
  --inv-mute:#93A0A3;
  --inv-line:rgba(242,243,240,.2);

  --max:100%;            /* full width. Put 1440px back to re-cage it. */
  --pad:clamp(20px,5vw,80px);
  --nav-h:76px;
  --menu-width:34em;
  --ease:cubic-bezier(.16,1,.3,1);
  --font-head:"Google Sans","Inter Tight",-apple-system,Segoe UI,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;scrollbar-gutter:stable}
/* col menu aperto il fondo non deve scorrere. Il blocco va su <html>, non su <body>:
   e <html> lo scroller (ha overflow-x:clip), quindi l'overflow del body non arriva mai
   alla finestra. La gutter sempre riservata evita lo scarto quando sparisce la barra. */
html:has(body[data-menu-status="open"]){overflow:hidden}   /* on the root too: with html visible, body passes its clip up to the viewport, where iOS still lets a finger pan sideways */
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:"Inter Tight",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.55;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  /* hidden turns body into a scroll container: iOS then lets you drag sideways anyway,
     and any position:sticky inside quietly stops sticking. clip does neither.
     The pair is deliberate - older engines take the first, current ones the second. */
  overflow-x:hidden;
  overflow-x:clip;
  transition:background .4s var(--ease),color .4s var(--ease);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
table{border-collapse:collapse;width:100%}

/* ---------- type scale ---------- */
h1,h2,h3,h4,.display,.h1,.h2,.h3,.brand{font-family:var(--font-head)}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.03em;line-height:.98}
.display{font-size:clamp(48px,10.5vw,168px);font-weight:600;letter-spacing:-.045em;line-height:.88}
.h1{font-size:clamp(38px,6.6vw,92px);letter-spacing:-.04em;line-height:.94}
.h2{font-size:clamp(30px,4.2vw,60px);letter-spacing:-.035em;line-height:1}
.h3{font-size:clamp(21px,2.1vw,30px);letter-spacing:-.02em;line-height:1.1}
.lead{font-size:clamp(17px,1.55vw,23px);line-height:1.45;font-weight:300}
.muted{color:var(--mute)}
/* headings stay monochrome - a second line is a line break, not a colour change */
h1 .muted,h2 .muted,h3 .muted,.display .muted,.h1 .muted,.h2 .muted,.h3 .muted{color:inherit}
.label{font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.label .num{color:var(--accent-ink);font-variant-numeric:tabular-nums}
.accent{color:var(--accent-ink)}
.aqua{color:var(--aqua-ink)}

/* ---------- layout ---------- */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
section{position:relative}
.sec{padding-block:clamp(72px,10vw,150px)}
.sec--tight{padding-block:clamp(54px,7vw,96px)}
.rule{height:1px;background:var(--line);border:0;margin:0}
.grid{display:grid;gap:clamp(24px,3vw,56px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.sec-head{
  display:grid;justify-items:start;gap:clamp(10px,1.1vw,16px);
  margin-bottom:clamp(36px,5vw,72px);
}
.sec-head .h2,.sec-head h2{max-width:18ch}

/* ---------- fixed underlay navigation (osmo.supply resource) ----------
   The menu is fixed behind the page; opening slides the page and the overlay
   off it. Timeline lives in main.js and runs on GSAP + CustomEase. */
.underlay-nav__header{
  z-index:100;color:var(--paper);position:fixed;inset:0% 0% auto;
}
.underlay-nav__bar{width:100%;margin-inline:auto}
.underlay-nav__container{
  display:flex;justify-content:space-between;align-items:center;
  padding:clamp(20px,2.5vw,40px) var(--pad);
}
/* the timeline drives the logo colour too - see main.js */
.underlay-nav__logo{gap:10px;transition:color .4s var(--ease);
  display:flex;align-items:center;
  font-family:var(--font-head);font-weight:600;letter-spacing:.02em;font-size:15px;
}
.brand-mark{width:clamp(168px,15vw,232px);height:auto;flex:none;display:block}
/* once the page scrolls the header gets a band of frosted glass that thins out downwards, so
   logo and toggle read over anything; light over light bands, dark over dark ones, gone while
   the menu is open. Drawn on ::before so the mask fades tint and blur together */
.underlay-nav__header::before{
  content:"";position:absolute;inset:0 0 -28px;z-index:-1;pointer-events:none;
  background:rgba(245,244,241,.55);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  -webkit-mask-image:linear-gradient(#000 45%,transparent);mask-image:linear-gradient(#000 45%,transparent);
  opacity:0;transition:opacity .4s var(--ease),background-color .4s;
}
.underlay-nav__header[data-tone=dark]::before{background:rgba(20,24,26,.45)}
.underlay-nav__header.is-scrolled::before{opacity:1}
body[data-menu-status=open] .underlay-nav__header::before{opacity:0}
/* ---------- avviso Ecomondo 2026, a tempo (lo accende main.js) ----------
   Il banner della fiera in alto al centro, dentro l'header fisso tra logo e Menu; sotto i
   900px scende appena sotto la riga dell'header. Appena la pagina scorre esce di scena
   (is-scrolled lo mette gia main.js) e torna quando si risale in cima: un banner alto 150px
   fermo in cima coprirebbe quello che si legge. Esce anche col menu aperto.
   Largo fino a 420px: oltre, sui portatili arriverebbe sul titolo della hero. */
.underlay-nav__container{position:relative}
.ann[hidden]{display:none}
.ann{
  /* bordo alto sulla linea del bordo alto del logo: il padding della riga dell'header, piu i
     5px di cui il logo scende perche la riga e alta quanto il bottone Menu */
  position:absolute;left:0;right:0;top:calc(clamp(20px,2.5vw,40px) + 5px);margin-inline:auto;z-index:2;
  width:clamp(280px,25vw,420px);border-radius:10px;overflow:hidden;
  box-shadow:0 14px 40px rgba(10,13,14,.28);
  transition:opacity .35s var(--ease),visibility .35s,transform .35s var(--ease);
}
.ann img{display:block;width:100%;height:auto}
.underlay-nav__header.is-scrolled .ann,
body[data-menu-status=open] .ann{opacity:0;visibility:hidden;transform:translateY(-12px)}
/* la x su fondo bianco pieno: sopra il grigio scuro del banner si vede senza trasparenze */
.ann-x{
  position:absolute;top:6px;right:6px;width:28px;height:28px;display:grid;place-items:center;
  border:0;border-radius:50%;background:#fff;color:var(--paper);cursor:pointer;
  font-size:18px;line-height:1;box-shadow:0 2px 8px rgba(10,13,14,.25);
}
@media (max-width:900px){
  /* sotto la riga: largo da dove inizia il logo a dove finisce il Menu */
  .ann{top:100%;width:calc(100% - 2 * var(--pad));max-width:420px}
}
/* cambio lingua nell'header. margin-left:auto perche il container e space-between: senza,
   con tre figli la lingua finirebbe al centro invece che attaccata al Menu. Il margine
   destro e maggiore della distanza voluta perche il toggle ha margin:-1em che ne mangia 16px.
   Il colore lo pilota main.js insieme a logo e toggle, quindi si inverte sulle bande scure.
   Niente filetto di separazione: sopra la foto della hero un capello a bassa opacita non si
   vede, e un elemento che non si vede e un elemento in meno. */
.nav-lang{
  margin-left:auto;margin-right:clamp(34px,3.4vw,54px);
  display:inline-flex;align-items:center;
  font-family:var(--font-head);font-size:15px;font-weight:600;letter-spacing:.1em;
  color:inherit;text-decoration:none;
}
/* le lettere salgono e ne arrivano di uguali da sotto: e lo stesso meccanismo del
   toggle Menu/Chiudi (.underlay-nav__toggle-text), cosi il comando nuovo parla la
   lingua che l'header parla gia. Due copie identiche, quindi nessuno scarto di larghezza. */
.nav-lang__t{display:flex;flex-flow:column;height:1.15em;overflow:hidden;line-height:1.15}
.nav-lang__t span{flex:none;transition:transform .45s var(--ease)}
@media (hover:hover){
  .nav-lang:hover .nav-lang__t span{transform:translateY(-100%)}
}
.underlay-nav__toggle{
  display:flex;justify-content:center;align-items:center;gap:.75em;
  margin:-1em;padding:1em;background:none;border:0;color:inherit;cursor:pointer;
}
.underlay-nav__toggle-text{
  display:flex;flex-flow:column;flex:none;justify-content:flex-start;align-items:flex-end;
  height:1.5em;overflow:hidden;
}
.underlay-nav__toggle-label{font-size:1.25em;line-height:1.2;font-family:var(--font-head)}
.underlay-nav__toggle-icon{
  display:flex;flex-flow:column;flex:none;justify-content:center;align-items:center;
  gap:.375em;width:1.5em;translate:0 -.07em;   /* optical: bars centred on the label's letters, not its line box */
}
.underlay-nav__toggle-bar{background:currentColor;flex:none;width:100%;height:.125em}

.underlay-nav__menu{
  z-index:1;width:var(--menu-width);position:fixed;top:0;bottom:0;right:0;
  color:var(--paper);
}
.underlay-nav__overlay{
  z-index:100;pointer-events:none;cursor:pointer;visibility:hidden;
  position:fixed;inset:0% -1px 0% 0%;overflow:clip;
}
.underlay-nav__inner{
  display:flex;flex-flow:column;justify-content:space-between;align-items:stretch;
  gap:2em;width:100%;height:100%;padding:7.5em 2em 2em;overflow:hidden auto;   /* x hidden: the links slide in wider than the panel and flashed a scrollbar */
}
.underlay-nav__list{display:flex;flex-flow:column;width:100%;margin:0;padding:0;list-style:none}
.underlay-nav__list.is--small{gap:.75em}
.underlay-nav__link-large{display:block;border-radius:.25em;width:100%;padding:.75em 1em}
.underlay-nav__link-large:hover{background:var(--ink-3)}
/* the page you are on. Aqua is a light ground, so the type stays dark on it,
   and hover must not win over it or the current page loses its mark */
.underlay-nav__link-large[aria-current]{background:var(--accent);color:var(--paper)}
.underlay-nav__link-large[aria-current]:hover{background:var(--accent)}
.underlay-nav__link-label{
  font-family:var(--font-head);font-size:clamp(28px,3.25em,3.25em);
  letter-spacing:-.04em;line-height:.9;
}
/* Product has no page of its own: a heading, not a link, with its machines smaller and indented under it */
.underlay-nav__group{padding:.75em 1em .3em}
.underlay-nav__sub{margin:0 0 .3em;padding:0 0 0 1em;list-style:none}
.underlay-nav__sub .underlay-nav__link-large{padding-block:.5em}
.underlay-nav__sub .underlay-nav__link-label{font-size:1.75em;letter-spacing:-.03em}
.underlay-nav__bottom{
  display:flex;justify-content:flex-start;align-items:flex-start;
  width:100%;padding-top:1.5em;position:relative;
}
.underlay-nav__bottom-col{
  display:flex;flex-flow:column;flex:1;justify-content:flex-start;align-items:flex-start;gap:1em;
}
.underlay-nav__link-small{font-size:1em;line-height:1.1}
.underlay-nav__link-small.is--faded{opacity:.5}
.underlay-nav__link-small:hover{color:var(--accent)}
.underlay-nav__bottom-border{
  opacity:.15;transform-origin:0%;background:currentColor;
  width:100%;height:1px;position:absolute;inset:0% 0% auto;
}

/* the frame that closes around the page while it slides */
.underlay-nav__dark{opacity:0;background:rgba(0,0,0,.3);position:absolute;inset:0%}
.underlay-nav__borders{
  display:flex;flex-flow:column;justify-content:space-between;align-items:stretch;
  position:absolute;inset:0;
}
.underlay-nav__border{background:var(--ink);width:100%;height:1em}
.underlay-nav__border-row{display:flex;flex-flow:column;justify-content:flex-start;align-items:flex-end}
.underlay-nav__corner{
  transform-origin:100% 0;color:var(--ink);width:2em;height:2em;
  background-image:radial-gradient(circle farthest-side at 0 100%,transparent 99%,var(--ink));
}
.underlay-nav__corner.is--bottom{
  transform-origin:100% 100%;
  background-image:radial-gradient(circle farthest-side at 0 0,transparent 99%,var(--ink));
}

[data-main]{display:block;position:relative;z-index:10;background:var(--ink)}

@media (max-width:767px){
  :root{--menu-width:80vw}
  .underlay-nav__toggle-text{height:1.25em}
  .underlay-nav__toggle-label{font-size:1em}
  .underlay-nav__toggle-icon{translate:0 -.12em}
  .underlay-nav__inner{padding:5em 1.25em 1.25em}
  .underlay-nav__link-label{font-size:2em}
  .underlay-nav__sub .underlay-nav__link-label{font-size:1.25em}
  .underlay-nav__bottom{flex-flow:column;gap:2em;padding-inline:1em}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:15px 26px;border-radius:999px;border:1px solid var(--line);
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;
  transition:background .3s var(--ease),color .3s,border-color .3s;
}
.btn:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn--solid{background:var(--accent);color:#14181A;border-color:var(--accent)}
.btn--solid:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn .arw{transition:transform .3s var(--ease)}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start}
@media (max-width:560px){.btn-row .btn{flex:1 1 100%;justify-content:space-between}}   /* stacked on a phone: same width, arrows lined up */
.btn:hover .arw{transform:translateX(4px)}
/* quote calls: under the hero copy, and a strip closing the model tables */
.hero-lead .btn,.phero-cta{margin-top:clamp(18px,2vw,26px)}
.quote-strip{
  display:flex;align-items:center;justify-content:space-between;gap:20px 40px;flex-wrap:wrap;
  margin-top:clamp(34px,4vw,56px);padding-top:clamp(22px,2.4vw,32px);border-top:1px solid var(--line);
}
.quote-strip p{margin:0;font-family:var(--font-head);font-weight:500;font-size:clamp(20px,2vw,30px);letter-spacing:-.03em;line-height:1.15}
.quote-strip .muted{color:var(--mute)}
@media (max-width:560px){.quote-strip .btn{flex:1 1 100%;justify-content:space-between}}

/* ---------- hero: la riga di cifre sotto il titolo, usata da .hero-band ---------- */
.hero-meta{
  display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,64px);
  margin-top:clamp(34px,4vw,60px);padding-top:26px;border-top:1px solid var(--line);
}
.hero-meta div{min-width:130px}
.hero-meta b{display:block;font-size:clamp(22px,2.4vw,34px);font-weight:600;letter-spacing:-.03em;font-family:var(--font-head)}

.flow{stroke-dasharray:6 14;animation:dash 6s linear infinite}
@keyframes dash{to{stroke-dashoffset:-200}}

/* ---------- product showcase card ---------- */
.pcard{display:block;position:relative}
.pcard-stage{
  position:relative;aspect-ratio:1/1;border-radius:6px;overflow:hidden;
  background:var(--panel);display:grid;place-items:center;
  transition:transform .6s var(--ease);
}
.pcard:hover .pcard-stage{transform:translateY(-5px)}
.pcard-word{
  font-family:var(--font-head);font-weight:600;color:var(--panel-ink);
  font-size:clamp(52px,10vw,150px);letter-spacing:-.05em;line-height:.88;
  text-align:center;padding-inline:6%;user-select:none;position:relative;z-index:1;
  align-self:start;padding-top:37%;   /* low enough that the object overlaps its base */
  opacity:0;transform:translateY(26px) scale(.94);
  transition:opacity .5s var(--ease),transform .7s var(--ease);
}
.pcard:hover .pcard-word,.pcard:focus-visible .pcard-word{opacity:1;transform:none}
/* the drawing sits in front; the wordmark rises from behind it on hover */
.pcard-word,.pcard-obj{grid-area:1/1}
.pcard-obj{
  position:relative;z-index:2;color:var(--panel-ink);
  align-self:end;width:84%;justify-self:center;margin-bottom:7%;
  fill:none;transition:transform .7s var(--ease);
}
.pcard:hover .pcard-obj{transform:translateY(-6px)}
/* a photo-real render instead of the line drawing: it is solid, so it sits lower and
   narrower and the wordmark starts higher, or the render would hide it on hover */
img.pcard-obj{width:var(--obj-w,80%);height:auto;margin-bottom:8%}   /* --obj-w per render: transparent margins differ */
.pcard--render .pcard-word{padding-top:19%}   /* low enough that the render overlaps the wordmark */
/* GSAP drives the render's transform while the pointer tracks it: a CSS transition on the
   same property would chase every frame and lag */
.pcard.is-tracked img.pcard-obj{transition:none}
.pcard-word sup{font-size:.3em;letter-spacing:0;top:-.75em;position:relative}
.pcard-mark{
  position:absolute;top:16px;left:18px;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--panel-ink);opacity:.5;
}
.pcard-plus{
  position:absolute;top:14px;right:16px;width:38px;height:38px;border-radius:50%;
  background:var(--accent);color:#14181A;display:grid;place-items:center;
  font-size:21px;line-height:0;transition:transform .45s var(--ease);
}
.pcard:hover .pcard-plus{transform:rotate(90deg)}
.pcard-foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 0 16px;border-bottom:1px solid var(--line);
}
.pcard-foot h3{font-size:clamp(18px,1.7vw,23px);font-weight:500;letter-spacing:-.02em}
.pcard-foot .arw{color:var(--mute);transition:transform .3s var(--ease),color .3s}
.pcard:hover .pcard-foot .arw{transform:translateX(5px);color:var(--paper)}
.pcard p{margin:16px 0 0;color:var(--mute);font-size:14.5px;max-width:46ch}

/* ---------- about: big numbers, features, values, quote ---------- */
/* bracket label: [ 01 ] */
.blabel{
  display:inline-block;font-size:12.5px;letter-spacing:.04em;color:var(--paper);
  font-variant-numeric:tabular-nums;
}
.blabel::before{content:"[ "}
.blabel::after{content:" ]"}

/* staggered cascade: blocks step across the page instead of sitting in a grid */
.cascade{position:relative;display:grid;gap:clamp(56px,10vw,170px)}
.cascade .item{max-width:54ch}
/* nth-of-type e non nth-child: un blocco nascosto resta in pagina dentro un <template>, che e
   comunque un elemento e sfaserebbe il conteggio. Contando solo i div lo scaglionamento si
   ricalcola da solo su quelli che restano visibili. */
.cascade .item:nth-of-type(2){margin-left:auto;margin-right:10%}
.cascade .item:nth-of-type(3){margin-left:18%}
.cascade .item:nth-of-type(4){margin-left:auto;margin-right:4%}
.cascade .item:nth-of-type(5){margin-left:12%}
.cascade .item:nth-of-type(6){margin-left:auto;margin-right:14%}
/* in home i numeri rimasti sono tre: il terzo torna a filo del primo, cosi la coda a destra
   chiude la figura. Solo qui: la cascade di "chi siamo" ne ha sei e tiene lo scaglionamento. */
#performance .cascade .item:nth-of-type(3){margin-left:0}
/* le didascalie stanno su una riga sola: in ch la misura segue il corpo del testo e andavano
   a capo spezzando la sigla del modello (BW-1212 tagliato dopo il trattino). In px la larghezza
   segue la frase piu lunga, che e quella italiana al corpo massimo. */
#performance .cascade .item{max-width:min(600px,100%)}
#performance .cascade p{max-width:none}
/* la coda della cascade (testo + pulsanti): continua lo scostamento invece di tornare a filo
   sinistro, altrimenti la diagonale si spezza proprio sull'ultimo blocco.
   640px e la misura che tiene i tre pulsanti su una riga sola in italiano, che e la lingua
   con le etichette piu lunghe: in ch seguirebbe il corpo del testo e non la riga dei bottoni. */
.cascade-tail{max-width:min(640px,100%);margin-left:auto;margin-right:4%}
.cascade .num{
  display:block;font-family:var(--font-head);font-weight:600;line-height:.86;
  font-size:clamp(84px,16vw,300px);letter-spacing:-.055em;margin:clamp(16px,1.8vw,30px) 0 0;
}
.cascade .num em{font-style:normal;color:var(--brand)}
.cascade .num small{font-size:.17em;font-weight:500;letter-spacing:0;line-height:1;white-space:nowrap;color:var(--mute);margin-left:.1em}
.cascade h3{margin:clamp(16px,1.8vw,30px) 0 0;font-size:clamp(40px,7.4vw,118px);letter-spacing:-.045em;line-height:.94}
.cascade p{margin:clamp(18px,2vw,30px) 0 0;color:var(--mute);font-size:clamp(16px,1.3vw,21px);line-height:1.45;max-width:44ch}

/* thin wireframe arcs, bleeding off the section edge */
.arc{position:absolute;pointer-events:none;opacity:.5}
.arc path,.arc circle,.arc ellipse{fill:none;stroke:var(--paper);stroke-width:.75;opacity:.35}
.arc--right{right:-14%;top:6%;width:44%}
.arc--left{left:-22%;top:12%;width:40%}

/* running strip */
.marquee{overflow:hidden;padding-block:clamp(18px,2vw,30px)}
.marquee-track{display:flex;width:max-content;animation:mq 34s linear infinite}
.marquee-track span{
  display:inline-flex;align-items:center;gap:clamp(18px,2.6vw,46px);
  padding-left:clamp(18px,2.6vw,46px);
  font-family:var(--font-head);font-weight:600;
  font-size:clamp(34px,6.4vw,96px);letter-spacing:-.04em;line-height:1;white-space:nowrap;
}
.marquee-track span::after{content:"/";color:var(--brand);font-weight:500}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}

/* full-bleed hero band: photo behind, cream type over it.
   Drop a JPG in and set --hero-img on the section to swap the placeholder. */
.hero-band{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  overflow:hidden;color:#F2F3F0;
  padding:var(--pad);padding-top:calc(var(--nav-h) + 40px);padding-bottom:clamp(40px,6vw,90px);
  background:#101416 var(--hero-img,none) center/cover no-repeat;
}
/* keeps the type readable whatever the photo does */
.hero-band::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(16,20,22,.30) 0%,rgba(16,20,22,.55) 42%,rgba(16,20,22,.88) 76%,rgba(16,20,22,.97) 100%);
}
/* stand-in texture, only while no photo is set */
.hero-band:not([style*="--hero-img"])::after{
  content:"";position:absolute;inset:0;opacity:.5;
  background:
    repeating-linear-gradient(115deg,rgba(242,243,240,.05) 0 1px,transparent 1px 46px),
    radial-gradient(70% 60% at 78% 22%,rgba(79,209,197,.16),transparent 60%),
    radial-gradient(50% 50% at 12% 88%,rgba(255,196,0,.12),transparent 65%);
}
.hero-band .wrap{position:relative;z-index:2;padding-inline:0;width:100%}
/* about hero: the photo holds still while the story scrolls over it. Sticky, not
   background-attachment:fixed - [data-main] carries a transform, which breaks fixed */
.about-hero{position:relative;overflow:clip;background:#101416;color:#F7F6F2}   /* clip: the stuck photo would otherwise run a screen past the end, under the marquee */
.about-hero-bg{position:sticky;top:0;height:100svh;margin-bottom:-100svh;background:#101416 var(--hero-img,none) center/cover no-repeat}
.about-hero-bg::after{content:"";position:absolute;inset:0;background:rgba(16,20,22,.6)}
.about-hero-copy{position:relative;z-index:1;padding-top:calc(var(--nav-h) + clamp(50px,9svh,130px));padding-bottom:clamp(100px,18svh,220px)}
.about-hero h1{font-size:clamp(52px,9vw,150px);letter-spacing:-.05em;line-height:.9;max-width:12ch;color:#F7F6F2}
.ah-p{
  margin:clamp(110px,30svh,320px) 0 0;max-width:34ch;color:#F2F3F0;
  font-family:var(--font-head);font-weight:500;font-size:clamp(20px,2.1vw,34px);line-height:1.28;letter-spacing:-.02em;
}
.ah-right{margin-left:auto;margin-right:6%}
.ah-left{margin-left:9%}
@media (max-width:760px){
  .ah-right,.ah-left{margin-left:0;margin-right:0}
  .ah-p{margin-top:clamp(70px,20svh,150px)}
}
.hero-band h1{
  /* svh cap: on short laptop screens (1536x730) the width alone set 160px and pushed the hero past the fold */
  font-size:clamp(52px,min(10.5vw,16svh),168px);letter-spacing:-.05em;line-height:.88;
  max-width:13ch;color:#F7F6F2;
}
@media (max-width:359px){.hero-band h1{font-size:14vw}}   /* below 360 the 52px floor would push "that" onto a line of its own */
/* lo stacco forzato vale solo da schermo largo. Serve alla hero italiana, piu lunga
   dell'inglese: su telefono il <br> dopo "nel" lasciava quella parola sola su una riga. */
@media (max-width:480px){.hero-band h1 .br-wide{display:none}}
.hero-copy{
  position:relative;z-index:2;display:grid;gap:clamp(28px,4vw,72px);
  grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(34px,5vw,80px);
}
.hero-copy p{margin:0;font-size:clamp(15px,1.35vw,19px);line-height:1.5;max-width:44ch;color:#F7F6F2}
.hero-copy p:last-child{margin-left:auto}
/* the home hero carries its four figures in the second column */
.hero-band .hero-meta{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  margin:0;padding:0;border:0;gap:clamp(18px,2.4vw,34px) clamp(20px,3vw,48px);
}
.hero-band .hero-meta b{font-size:clamp(21px,2.1vw,30px)}
.hero-band .hero-meta .label{letter-spacing:.13em;color:rgba(247,246,242,.72)}
/* the labels pick up the intro paragraph size, and on a phone a half-width column is narrower
   than SLUDGE CONCENTRATION at that size: nowrap pushed it out of the hero, so they wrap now
   and step down to a size where the longest single word still fits */
@media (max-width:560px){
  .hero-band .hero-meta .label{font-size:12px;letter-spacing:.1em}
}

.feature .ph{
  aspect-ratio:4/3;border-radius:6px;background:var(--panel);color:var(--panel-ink);
  display:grid;place-items:center;overflow:hidden;
}
.feature .ph svg{width:52%;height:auto}
.feature .n{display:block;margin:22px 0 8px;font-size:11px;letter-spacing:.2em;color:var(--accent-ink)}
.feature h3{font-size:clamp(19px,1.8vw,25px);font-weight:500;letter-spacing:-.02em}
.feature p{margin:12px 0 0;color:var(--mute);font-size:14.5px;max-width:40ch}

.quote{
  font-family:var(--font-head);font-weight:500;letter-spacing:-.03em;
  font-size:clamp(24px,3.6vw,52px);line-height:1.1;max-width:22ch;margin:0;
}
.quote-by{margin-top:28px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}

/* numbered feature rows, figure and copy alternating */
.techrow{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,72px);
  align-items:center;padding-block:clamp(40px,5vw,80px);border-top:1px solid var(--line);
}
.techrow--flip .techrow-fig{order:2}
.techrow-fig{
  aspect-ratio:4/3;border-radius:6px;background:var(--panel);color:var(--panel-ink);
  display:grid;place-items:center;overflow:hidden;padding:6%;
}
.techrow-fig svg{width:100%;height:auto}
.techrow-fig .hl{stroke:var(--accent-ink)}
.techrow .n{font-size:11px;letter-spacing:.2em;color:var(--accent-ink);display:block;margin-bottom:14px}
.techrow h3{font-size:clamp(22px,2.6vw,38px);font-weight:600;letter-spacing:-.03em}
.techrow p{margin:16px 0 0;color:var(--mute);font-size:15px;max-width:46ch}
.techrow ul{margin:18px 0 0;padding:0;list-style:none}
.techrow li{
  font-size:14px;color:var(--mute);padding:8px 0 8px 18px;position:relative;
  border-bottom:1px solid var(--line);
}
.techrow li::before{content:"";position:absolute;left:0;top:16px;width:7px;height:1px;background:var(--accent)}

.dots{width:100%;height:auto;display:block}
.dots circle{fill:var(--mute);opacity:.28}
.dots circle.on{fill:var(--accent);opacity:1}

/* ---------- about: object + people ---------- */
.about-obj{position:relative;aspect-ratio:1/1;border-radius:6px;background:var(--panel);overflow:hidden}
.person .ph{
  aspect-ratio:1/1;border-radius:6px;background:var(--panel);color:var(--panel-ink);
  display:grid;place-items:center;font-family:var(--font-head);font-weight:600;
  font-size:clamp(34px,5vw,64px);letter-spacing:-.04em;
  transition:transform .5s var(--ease);
}
.person:hover .ph{transform:translateY(-4px)}
.person h4{margin:18px 0 4px;font-size:clamp(16px,1.5vw,20px);font-weight:500;letter-spacing:-.02em}
.person p{margin:0;color:var(--mute);font-size:13.5px}

/* ---------- process diagram ---------- */
.proc{overflow:hidden}
.proc-stage{position:relative;padding:clamp(8px,2vw,24px) 0}
.proc-stage svg{width:100%;height:auto;display:block}
/* the diagrams carry literal hex colours; presentation attributes lose to CSS,
   so this maps them onto the palette tokens instead of editing every node */
.proc-stage [stroke="#F2F3F0"]{stroke:var(--paper)}
.proc-stage [fill="#8C9A9E"]{fill:var(--mute)}
.proc-stage [fill="#FFC400"]{fill:var(--accent-ink)}
.proc-stage [stroke="#FFC400"]{stroke:var(--accent-ink)}
.proc-stage [fill="#4FD1C5"]{fill:var(--aqua)}
.proc-stage [stroke="#4FD1C5"]{stroke:var(--aqua-ink)}
.proc-stage [fill="#8A7648"]{fill:var(--mud)}
.proc-stage [stroke="#8A7648"]{stroke:var(--mud)}
/* the steps read as a path: a rule, a dot per stage, text hanging under it */
.proc-steps{
  position:relative;display:grid;grid-template-columns:repeat(4,1fr);
  margin-top:clamp(26px,3.4vw,52px);
}
.proc-steps::before{
  content:"";position:absolute;left:0;right:0;top:6px;height:1px;background:var(--line);
}
.proc-steps button{
  position:relative;display:block;text-align:left;padding:32px 28px 0 0;
  color:var(--mute);transition:color .3s var(--ease);
}
.proc-steps button::before{
  content:"";position:absolute;left:0;top:0;width:13px;height:13px;border-radius:50%;
  background:var(--ink);border:1px solid var(--line);
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.proc-steps button:hover{color:var(--paper)}
.proc-steps button:hover::before{border-color:var(--paper)}
.proc-steps button[aria-selected="true"]{color:var(--paper)}
.proc-steps button[aria-selected="true"]::before{
  background:var(--accent);border-color:var(--accent);transform:scale(1.15);
}
/* the rule fills while the autoplay dwells on this step */
.proc-steps button::after{
  content:"";position:absolute;left:6px;top:6px;height:1px;width:0;background:var(--accent);
}
.proc-steps button[aria-selected="true"]::after{animation:dwell 3.2s linear forwards}
.proc.paused .proc-steps button::after{animation:none;width:0}
@keyframes dwell{to{width:calc(100% - 6px)}}
.proc-steps .n{
  font-size:10.5px;letter-spacing:.2em;display:block;margin-bottom:8px;
  font-variant-numeric:tabular-nums;color:inherit;opacity:.7;
}
.proc-steps .t{
  font-family:var(--font-head);font-size:clamp(16px,1.6vw,21px);font-weight:500;
  letter-spacing:-.02em;display:block;line-height:1.15;color:var(--paper);
}
/* only the open step carries its description */
.proc-steps .d{
  font-size:13.5px;color:var(--mute);line-height:1.45;display:block;
  margin-top:10px;opacity:0;
  transition:opacity .35s var(--ease);
}
.proc-steps button[aria-selected="true"] .d{opacity:1}

/* SVG machine parts */
.pipe{stroke-linecap:round;fill:none}
.sludge{stroke:var(--mud)}
.water{stroke:var(--aqua-ink)}
.part{transition:opacity .5s var(--ease)}
.dim{opacity:.14}
.ring-move{animation:ringslide 2.8s linear infinite}
@keyframes ringslide{to{transform:translateX(28px)}}
.screw-turn{animation:screwspin 3.4s linear infinite}
@keyframes screwspin{to{transform:translateX(48px)}}
/* i dischi ovali: la regola chiamava un fotogramma chiave che non esisteva, quindi stavano fermi */
.disc-spin{transform-box:view-box;animation:disc-turn 4s linear infinite}
@keyframes disc-turn{to{transform:rotate(360deg)}}
.pulse{animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}

/* ---------- 3D viewer, driven by scroll ---------- */

/* ---------- advantages ---------- */
.adv{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.6vw,24px);margin:0;padding:0;
}
.adv li{
  list-style:none;border:1px solid var(--line);border-radius:12px;
  padding:clamp(20px,2.3vw,32px);
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.adv li:hover{background:var(--ink-2);border-color:var(--paper)}
.adv li .n{display:block;margin-bottom:clamp(14px,1.6vw,22px);font-size:11px;color:var(--accent-ink);letter-spacing:.14em;font-variant-numeric:tabular-nums}
.adv li .t{display:block;margin-bottom:10px;font-size:clamp(18px,2vw,26px);font-weight:500;letter-spacing:-.02em;font-family:var(--font-head)}
.adv li .d{display:block;max-width:44ch;font-size:14px;color:var(--mute);line-height:1.55}

/* ---------- applications: technical index, not floating pills ---------- */
.app-list{
  list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3.5vw,64px);
  border-top:1px solid var(--line);
}
.app-list li{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  column-gap:clamp(12px,1.4vw,20px);
  padding:clamp(16px,1.8vw,24px) 0;border-bottom:1px solid var(--line);
  transition:padding-left .3s var(--ease),background .3s var(--ease);
}
.app-list li:hover{padding-left:12px;background:var(--ink-2)}
.app-list .n{font-size:10.5px;letter-spacing:.14em;color:var(--mute);font-variant-numeric:tabular-nums;min-width:20px}
.app-list li:hover .n{color:var(--accent-ink)}
.app-list .t{font-size:clamp(16px,1.45vw,20px);font-weight:500;letter-spacing:-.02em;line-height:1.25}
/* la configurazione in una targhetta piena, a filo destro della colonna */
.app-list .k{
  justify-self:end;white-space:nowrap;
  display:inline-flex;align-items:baseline;gap:.45em;
  padding:5px 10px;border-radius:100vw;background:var(--ink-3);
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:var(--accent-ink);
  transition:background .3s var(--ease);
}
.app-list .k i{font-style:normal;color:var(--mute)}
@media (min-width:1500px){.app-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.app-list li:hover .k{background:var(--ink)}

/* ---------- applications: each machine's sectors under its product card ---------- */
.pcol{position:relative}
/* the pill sits on the product image, but outside the card link: a button inside <a> is invalid.
   This layer copies the square stage so the pill can take its bottom-right corner */
.pcard-over{position:absolute;left:0;right:0;top:0;aspect-ratio:1/1;pointer-events:none;z-index:3}
.pcard-apps{
  position:absolute;right:clamp(12px,1.4vw,20px);bottom:clamp(12px,1.4vw,20px);pointer-events:auto;
  display:inline-flex;align-items:center;gap:10px;padding:9px 9px 9px 18px;border-radius:99px;
  background:var(--paper);color:var(--ink);font-size:14px;font-weight:500;transition:background .3s,transform .4s var(--ease);
}
.pcard-apps span{
  display:grid;place-items:center;min-width:26px;height:26px;padding:0 6px;border-radius:99px;
  background:var(--ink);color:var(--paper);font-size:12px;font-variant-numeric:tabular-nums;
}
@media (hover:hover){.pcard-apps:hover{background:#000;transform:translateY(-2px)}}

/* the modal: native <dialog>, so Esc, focus and the top layer come free */
.apps-modal{
  width:min(940px,calc(100% - 24px));max-height:calc(100svh - 32px);padding:0;border:0;border-radius:16px;
  background:var(--ink);color:var(--paper);overflow:auto;overscroll-behavior:contain;
}
.apps-modal::backdrop{background:rgba(10,13,14,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.apps-modal[open]{animation:apps-in .5s var(--ease)}
.apps-modal[open]::backdrop{animation:apps-fade .4s ease}
@keyframes apps-in{from{opacity:0;transform:translateY(18px) scale(.98)}}
@keyframes apps-fade{from{opacity:0}}
html:has(.apps-modal[open]){overflow:hidden}
/* ---------- film in a modal: same dark glass as the sector modal, the video left bare ---------- */
.vid-modal{
  width:min(1180px,calc(100% - 24px));max-width:calc((100svh - 120px) * 16 / 9);padding:0;border:0;border-radius:16px;
  background:var(--ink);color:var(--paper);overflow:visible;
}
.vid-modal::backdrop{background:rgba(10,13,14,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.vid-modal[open]{animation:apps-in .5s var(--ease)}
.vid-modal[open]::backdrop{animation:apps-fade .4s ease}
html:has(.vid-modal[open]){overflow:hidden}
.vid-modal video{display:block;width:100%;height:auto;max-height:calc(100svh - 120px);border-radius:16px;background:#000}
.vid-modal-x{
  position:absolute;right:0;top:-54px;display:grid;place-items:center;width:42px;height:42px;
  border:1px solid var(--inv-line);border-radius:50%;color:var(--inv-fg);
  transition:background .3s,color .3s,border-color .3s;
}
.vid-modal-x svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.vid-modal-x:hover{background:var(--inv-fg);border-color:var(--inv-fg);color:var(--inv-bg)}
@media (max-width:560px){
  .vid-modal{width:calc(100% - 16px)}
  .vid-modal-x{top:-50px;width:38px;height:38px}
}

.apps-modal-in{padding:clamp(18px,2.4vw,34px)}
.apps-modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:clamp(18px,2vw,28px)}
.apps-modal-k{margin:0 0 10px;font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.apps-modal h3{margin:0;font-size:clamp(24px,2.6vw,38px);font-weight:600;letter-spacing:-.04em;line-height:1}
.apps-modal-x{
  flex:none;display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;
  transition:background .3s,color .3s,border-color .3s;
}
.apps-modal-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.apps-modal-x:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.apps-modal-more{display:inline-flex;gap:8px;margin-top:clamp(18px,2vw,26px);font-size:14.5px;font-weight:500}
.apps-modal-more:hover{text-decoration:underline;text-underline-offset:4px}
.app-cards{
  list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,.9vw,12px);
}
.app-card{
  display:flex;flex-direction:column;justify-content:space-between;gap:18px;
  min-height:clamp(112px,9vw,138px);padding:clamp(12px,1.2vw,18px);
  background:var(--ink-2);border:1px solid var(--line);border-radius:6px;
  transition:border-color .3s,transform .5s var(--ease);
}
.app-ic{
  width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;transition:color .3s;
}
.app-card-t{font-family:var(--font-head);font-weight:500;font-size:clamp(15px,1.2vw,18px);letter-spacing:-.02em;line-height:1.2}
@media (hover:hover){
  .app-card:hover{border-color:var(--paper);transform:translateY(-3px)}
  .app-card:hover .app-ic{color:var(--accent-ink)}
}
@media (max-width:480px){.app-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- coverage: held scroll pulls back from one photo to the mosaic ---------- */
/* clip, not hidden: the tiles overhang the stage, the section trims them, sticky keeps working */
.cov{background:var(--inv-bg);color:#F2F3F0;overflow:clip}
.cov-track{height:400svh}
.cov-stage{position:sticky;top:0;height:100svh}
/* every tile is one screen, laid like bricks: two above, three across the middle, two below.
   What is written here is the finished mosaic (what shows without JS or with reduced motion);
   the scroll starts it at scale 1 with no gaps and brings it here */
.cov-grid{position:absolute;inset:0;transform:scale(.51);will-change:transform}
.cov-tile{
  position:absolute;inset:0;margin:0;background:#1c2224;
  translate:calc(var(--x) * 100%) calc(var(--y) * 100%);
  clip-path:inset(var(--cov-in,12px) round var(--cov-r,20px));
}
.cov-tile img{width:100%;height:100%;object-fit:cover}
.cov-tile::after{content:"";position:absolute;inset:0;background:rgba(10,13,14,.18)}
.cov-tile--main::after{background:linear-gradient(rgba(10,13,14,.28),rgba(10,13,14,.5))}
.cov-claim{
  position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(15ch,88vw);margin:0;
  text-align:center;font-size:clamp(30px,4vw,64px);font-weight:500;letter-spacing:-.035em;line-height:1.04;
  color:#F7F6F2;text-shadow:0 2px 34px rgba(0,0,0,.3);
}
@media (prefers-reduced-motion:reduce){
  .cov-track{height:auto}
  .cov-stage{position:relative}
}

/* ---------- applications, dynamic: held scroll walks the sectors ---------- */
.apx{background:var(--inv-bg);color:var(--inv-fg)}
.apx-track{--apx-step:34svh;height:calc(100svh + var(--apx-n,0) * var(--apx-step))}
.apx-stage{
  position:sticky;top:0;height:100svh;display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);gap:clamp(10px,1vw,18px);
  /* the panels sit in the middle with the same air above (clear of the header) and below */
  padding:calc(var(--nav-h) + 4svh) var(--pad);
}

/* left: label, the wheel of names, every sector underneath */
.apx-info{
  display:grid;grid-template-rows:auto auto 1fr auto;min-height:0;text-align:center;
  background:var(--ink);color:var(--paper);border-radius:18px;padding:clamp(18px,2vw,30px);
}
.apx-label{margin:0;font:500 12.5px/1 var(--font-head);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.apx-wheel{--row:clamp(42px,4.4vw,68px);align-self:center;height:calc(var(--row) * 3);overflow:hidden}
.apx-wheel ul{
  list-style:none;margin:0;padding:0;
  transform:translateY(calc((1 - var(--i)) * var(--row)));transition:transform .7s var(--ease);
}
.apx-wheel li{
  height:var(--row);line-height:var(--row);white-space:nowrap;
  font-family:var(--font-head);font-weight:500;font-size:calc(var(--row) * .62);letter-spacing:-.035em;
  color:transparent;transition:color .5s;
}
.apx-wheel li.near{color:rgba(20,24,26,.26)}
.apx-wheel li.on{color:var(--paper)}
/* every sector on one sliding row: it follows the one showing, arrows step through them */
.apx-nav{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(8px,1vw,14px)}
.apx-tabs{
  position:relative;display:flex;gap:clamp(20px,2.2vw,34px);overflow-x:auto;scrollbar-width:none;padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.apx-tabs::-webkit-scrollbar{display:none}
.apx-tabs button{flex:none;white-space:nowrap}
.apx-tabs button:first-child{margin-left:12%}
.apx-tabs button:last-child{margin-right:12%}
.apx-arrow{
  display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;
  color:var(--paper);transition:background .3s,color .3s,border-color .3s,opacity .3s;
}
.apx-arrow svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.apx-arrow:hover:not(:disabled){background:var(--paper);border-color:var(--paper);color:var(--ink)}
.apx-arrow:disabled{opacity:.3;cursor:default}
.apx-tabs button{
  padding:2px 0;font:500 11.5px/1.2 var(--font-head);
  letter-spacing:.1em;text-transform:uppercase;color:var(--mute);transition:color .3s;
}
.apx-tabs button[aria-current]{color:var(--paper)}
.apx-tabs button:hover{color:var(--paper)}

/* right: the machine the sector needs, a ring on it, the card it points to */
.apx-view{position:relative;min-height:0;overflow:hidden;border-radius:18px;background:var(--panel);color:var(--panel-ink)}
.apx-count{
  position:absolute;left:clamp(16px,1.8vw,26px);top:clamp(16px,1.8vw,26px);z-index:3;
  font:500 13px/1 var(--font-head);letter-spacing:.06em;font-variant-numeric:tabular-nums;color:var(--mute);
}
.apx-count b{font-weight:500;color:var(--panel-ink)}
.apx-img{
  position:absolute;left:40%;top:43%;width:min(66%,760px);height:auto;translate:-50% -50%;
  opacity:0;transform:scale(.9);transition:opacity .6s var(--ease),transform .9s var(--ease);
}
[data-m=mds] .apx-img--mds,[data-m=wave] .apx-img--wave{opacity:1;transform:none}
[data-m=both] .apx-img{opacity:1}
[data-m=both] .apx-img--mds{transform:translate(-30%,-10%) scale(.56)}
[data-m=both] .apx-img--wave{transform:translate(34%,6%) scale(.56)}
/* where the ring lands on each render, in % of the panel */
.apx-stage[data-m=mds]{--rx:47%;--ry:36%}
.apx-stage[data-m=wave]{--rx:42%;--ry:31%}
.apx-ring{
  position:absolute;left:var(--rx,45%);top:var(--ry,35%);z-index:2;width:62px;height:62px;margin:-31px 0 0 -31px;
  border:1px solid rgba(12,16,17,.55);border-radius:50%;
  transition:left .9s var(--ease),top .9s var(--ease),opacity .4s;
}
.apx-ring::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;background:var(--panel-ink)}
.apx-line{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none;transition:opacity .3s}
.apx-line line{stroke:rgba(12,16,17,.5);stroke-width:1;stroke-dasharray:2 4}
[data-m=both] .apx-ring,[data-m=both] .apx-line,.apx-line.is-moving{opacity:0}

.apx-card{
  position:absolute;right:clamp(14px,1.6vw,24px);bottom:clamp(14px,1.6vw,24px);z-index:3;
  width:min(390px,48%);padding:clamp(18px,1.8vw,26px);border-radius:14px;
  container-type:inline-size;   /* i tre dati sotto si dimensionano sulla scheda, non sulla finestra */
  background:rgba(16,20,22,.8);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:#F2F3F0;
}
.apx-ics{position:relative;width:30px;height:30px;margin-bottom:clamp(14px,1.6vw,22px)}
.apx-ic{
  position:absolute;inset:0;width:30px;height:30px;fill:none;stroke:var(--accent);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .5s var(--ease);
}
.apx-ic.on{opacity:1;transform:none}
/* la stessa icona, grande, sopra la ruota dei settori: la chiede il documento del cliente */
.apx-ics--big{width:clamp(66px,6vw,96px);height:clamp(66px,6vw,96px);margin:0 auto clamp(14px,1.6vw,22px)}
.apx-ics--big .apx-ic{width:100%;height:100%;stroke-width:1.2}
.apx-cm{display:none}
[data-m=mds] .apx-cm--mds,[data-m=wave] .apx-cm--wave,[data-m=both] .apx-cm--both{display:block;animation:apx-in .6s var(--ease)}
@keyframes apx-in{from{opacity:0;transform:translateY(8px)}}
.apx-k{margin:0 0 8px;font:500 10.5px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--inv-mute)}
.apx-name{margin:0;font-family:var(--font-head);font-weight:600;font-size:clamp(26px,2.5vw,40px);letter-spacing:-.04em;line-height:.95}
.apx-specs{display:grid;grid-template-columns:repeat(3,minmax(0,auto));justify-content:space-between;gap:6px clamp(8px,2.4cqi,22px);margin:clamp(14px,1.6vw,22px) 0 0}
.apx-specs div{margin:0}
.apx-specs dt{font:500 clamp(8px,2.3cqi,9.5px)/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--inv-mute)}
.apx-specs dd{margin:6px 0 0;font-family:var(--font-head);font-weight:500;font-size:clamp(12.5px,4cqi,18px);letter-spacing:-.02em;white-space:nowrap}
.apx-txt{margin:12px 0 0;font-size:14px;line-height:1.45;color:var(--inv-mute)}
.apx-links{display:flex;flex-wrap:wrap;gap:8px;margin:clamp(16px,1.8vw,24px) 0 0}
.apx-pill{
  display:inline-flex;align-items:center;gap:10px;padding:5px 16px 5px 5px;border-radius:99px;
  background:#F2F3F0;color:#14181A;font-size:13.5px;font-weight:500;transition:background .3s;
}
.apx-pill img{width:30px;height:30px;border-radius:50%;object-fit:cover;background:var(--panel)}
.apx-pill:hover{background:#fff}
@media (prefers-reduced-motion:no-preference){
  .apx-ring{animation:apx-pulse 2.4s ease-in-out infinite}
  @keyframes apx-pulse{50%{box-shadow:0 0 0 8px rgba(12,16,17,.06)}}
}

@media (max-width:900px){
  .apx-track{--apx-step:28svh}
  /* dvh: on phones with a floating browser bar svh leaves a dark strip under the panels */
  .apx-stage{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);padding:calc(var(--nav-h) + 4px) 12px 12px;gap:8px}
  @supports (height:100dvh){.apx-stage{height:100dvh}}
  .apx-info{padding:12px 12px 10px;gap:4px}
  .apx-label{font-size:10.5px}
  .apx-wheel{--row:clamp(28px,7.6vw,36px)}
  .apx-tabs{gap:18px}
  .apx-arrow{width:30px;height:30px}
  /* the render is centred in the band between the counter and the card; --ct is the card's top,
     set by the script since the card is taller for some sectors. --iw: as wide as that band allows */
  .apx-view{container-type:inline-size;--iw:min(80cqw,calc((var(--ct,300px) - 60px) * 1.22));--iy:calc(36px + (var(--ct,300px) - 36px) / 2)}
  .apx-img{left:50%;top:var(--iy);width:var(--iw);transition:opacity .6s var(--ease),transform .9s var(--ease),top .6s var(--ease),width .6s var(--ease)}
  /* the ring rides on the render: offsets in render widths from its centre */
  .apx-ring{transition:left .6s var(--ease),top .6s var(--ease),opacity .4s}
  .apx-stage[data-m=mds] .apx-ring{left:calc(50% + .068 * var(--iw));top:calc(var(--iy) - .091 * var(--iw))}
  .apx-stage[data-m=wave] .apx-ring{left:calc(50% + .027 * var(--iw));top:calc(var(--iy) - .152 * var(--iw))}
  .apx-card{left:10px;right:10px;bottom:10px;width:auto;padding:14px}
  .apx-k{margin-bottom:6px}
  .apx-name{font-size:24px}
  .apx-specs{margin-top:10px}
  .apx-txt{margin-top:6px;font-size:13px}
  .apx-links{margin-top:12px;gap:6px}
  .apx-pill{gap:8px;padding:4px 12px 4px 4px;font-size:13px}
  .apx-pill img{width:24px;height:24px}
  /* l'icona del settore qui finisce fuori dalla card, sulla fascia scura, staccata da
     tutto: il suo contenitore e lo stage, non la card. Su telefono il nome del settore
     e gia scritto grande dentro la card, quindi l'icona non dice niente in piu. */
  .apx-ics{display:none}
  .apx-specs{gap:6px 14px}
  .apx-specs dd{font-size:15px}
  [data-m=both] .apx-img--mds{transform:translate(-24%,-17%) scale(.64)}
  [data-m=both] .apx-img--wave{transform:translate(25%,15%) scale(.64)}
}
/* narrow phones: both pills on one line, or the taller card squeezes the pair of renders */
@media (max-width:380px){
  .apx-links{flex-wrap:nowrap}
  .apx-pill{gap:6px;padding-right:10px;font-size:12px;white-space:nowrap}
}
/* no held walk: the stage just sits in the page and the sector names switch it */
@media (prefers-reduced-motion:reduce){
  .apx-track{height:auto}
  .apx-stage{position:relative;height:auto;min-height:100svh}
}

/* ---------- applications page hero: held scroll walks the sectors (Relats "industries") ---------- */
.ind{background:var(--panel);color:var(--panel-ink)}
.ind-track{--ind-step:30svh;height:calc(100svh + (var(--ind-n,15) + 1) * var(--ind-step))}
.ind-stage{position:sticky;top:0;height:100svh;overflow:hidden}

/* the machines: both on the intro, then whichever the sector needs, moved right to clear the list */
.ind-img{
  position:absolute;left:55%;top:60%;width:min(44vw,800px);height:auto;translate:-50% -50%;
  opacity:0;transform:scale(.9);filter:drop-shadow(0 36px 40px rgba(0,0,0,.16));
  transition:opacity .7s var(--ease),transform 1s var(--ease),left 1s var(--ease),top 1s var(--ease);
}
[data-m=mds] .ind-img--mds,[data-m=wave] .ind-img--wave{opacity:1;transform:none}
[data-m=both] .ind-img{opacity:1}
[data-m=both] .ind-img--mds{transform:translate(-30%,-10%) scale(.6)}
[data-m=both] .ind-img--wave{transform:translate(32%,10%) scale(.6)}
[data-phase=intro] .ind-img{left:50%;top:67%}

.ind-title{
  position:absolute;left:50%;top:35%;z-index:3;translate:-50% -50%;margin:0;width:max-content;max-width:92vw;   /* above the machines, not across them */
  text-align:center;font-size:clamp(46px,7.4vw,128px);letter-spacing:-.05em;line-height:.92;color:var(--panel-ink);
  transition:opacity .6s var(--ease),transform .8s var(--ease);
}
.ind-hint{
  position:absolute;left:50%;bottom:4svh;z-index:3;translate:-50% 0;margin:0;
  font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
  transition:opacity .4s;
}
[data-phase=walk] .ind-title{opacity:0;transform:translateY(-40px);pointer-events:none}
[data-phase=walk] .ind-hint{opacity:0}

/* left: the glass list, one sector open */
.ind-panel{
  position:absolute;z-index:4;left:var(--pad);top:calc(var(--nav-h) + 3svh);bottom:4svh;width:min(500px,36vw);
  overflow:hidden;border-radius:22px;background:rgba(255,255,255,.5);border:1px solid rgba(12,16,17,.1);
  -webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2);
  transition:opacity .6s var(--ease),transform .8s var(--ease);
}
.ind-list{list-style:none;margin:0;padding:0;transition:transform .8s var(--ease)}
.ind-list li + li{border-top:1px solid rgba(12,16,17,.09)}
.ind-list button{
  display:block;width:100%;text-align:left;padding:clamp(10px,1.5svh,16px) clamp(18px,1.8vw,28px);
  font-family:var(--font-head);font-weight:500;font-size:clamp(17px,1.5vw,24px);letter-spacing:-.03em;line-height:1.15;
  color:rgba(12,16,17,.45);transition:color .3s;
}
.ind-list li.on button,.ind-list button:hover{color:var(--panel-ink)}
.ind-media{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .8s var(--ease)}
.ind-list li.on .ind-media{grid-template-rows:1fr}
.ind-media > div{min-height:0;overflow:hidden}
/* niente piu foto di repertorio: l icona del settore e una riga che dice di che fango si tratta */
.ind-media__in{
  display:flex;align-items:flex-start;gap:clamp(12px,1.2vw,18px);
  padding:0 clamp(18px,1.8vw,28px);
  transition:padding-bottom .8s var(--ease);
}
.ind-ic{flex:none;display:block;width:clamp(26px,2.2vw,34px);height:clamp(26px,2.2vw,34px);color:var(--accent-ink)}
.ind-ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ind-list li.on .ind-media__in{padding-bottom:clamp(16px,1.8svh,24px)}
.ind-media__in p{margin:0;font-size:14.5px;line-height:1.5;color:var(--mute);max-width:46ch}

/* right: the card, the ring on the machine and the line between them */
.ind-card{
  position:absolute;z-index:4;right:var(--pad);top:calc(var(--nav-h) + 6svh);width:min(400px,28vw);
  padding:clamp(20px,2vw,32px);border-radius:20px;container-type:inline-size;
  background:rgba(255,255,255,.62);border:1px solid rgba(12,16,17,.1);   /* frosted enough that the steel passing under does not wash out the labels */
  -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);
  transition:opacity .6s var(--ease),transform .8s var(--ease);
}
.ind-cm{display:none}
[data-m=mds] .ind-cm--mds,[data-m=wave] .ind-cm--wave,[data-m=both] .ind-cm--both{display:block;animation:apx-in .6s var(--ease)}
.ind-name{margin:0;font-family:var(--font-head);font-weight:600;font-size:clamp(44px,5.2vw,92px);letter-spacing:-.05em;line-height:.9}
.ind-name sup{position:relative;top:-.1em;font-size:.36em;vertical-align:top}
.ind-name--both{font-size:min(clamp(26px,3.4vw,58px),13.2cqi);white-space:nowrap}
.ind-sub{margin:12px 0 0;font-size:14.5px;line-height:1.45;color:var(--mute)}
.ind-specs{display:grid;gap:14px;margin:clamp(18px,2.4svh,28px) 0 0}
.ind-specs div{margin:0}
.ind-specs dt{font:500 10.5px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.ind-specs dd{margin:5px 0 0;font-family:var(--font-head);font-weight:500;font-size:min(clamp(16px,1.7vw,26px),8.4cqi);letter-spacing:-.03em;white-space:nowrap}
.ind-stage[data-m=mds]{--rx:57%;--ry:54%}
.ind-stage[data-m=wave]{--rx:53%;--ry:52%}
.ind-ring{
  position:absolute;left:var(--rx,58%);top:var(--ry,50%);z-index:3;width:92px;height:92px;margin:-46px 0 0 -46px;
  border:1px solid rgba(12,16,17,.6);border-radius:50%;transition:left 1s var(--ease),top 1s var(--ease),opacity .4s;
}
.ind-ring::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px;border-radius:50%;background:var(--panel-ink)}
.ind-line{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none;transition:opacity .3s}
.ind-line line{stroke:rgba(12,16,17,.55);stroke-width:1;stroke-dasharray:2 4}
.ind-pills{position:absolute;left:55%;bottom:4svh;z-index:4;translate:-50% 0;display:flex;gap:8px;transition:opacity .6s var(--ease),transform .8s var(--ease)}
.ind-pill{display:none;background:var(--paper);color:var(--ink)}   /* dark on the light ground */
.ind-pill:hover{background:#000}
[data-m=mds] .ind-pill--mds,[data-m=wave] .ind-pill--wave,[data-m=both] .ind-pill{display:inline-flex}
[data-m=both] .ind-ring,[data-m=both] .ind-line,.ind-line.is-moving{opacity:0}
[data-phase=intro] .ind-panel{opacity:0;transform:translateX(-24px);pointer-events:none}
[data-phase=intro] .ind-card,[data-phase=intro] .ind-pills{opacity:0;transform:translateY(16px);pointer-events:none}
[data-phase=intro] .ind-ring,[data-phase=intro] .ind-line{opacity:0}

/* laptops (13-15"): the card and the render were fighting for the right half. The card gets smaller and
   the render is centred in the space left of it, small enough to be seen whole. The ring rides on the
   render: offsets in render widths from its centre, so it follows wherever the render lands */
@media (min-width:901px) and (max-width:1600px){
  .ind-stage{
    /* the free band between the list and the card, minus a margin on each side */
    --band:calc(100vw - 2 * var(--pad) - min(500px,36vw) - min(330px,24vw) - 48px);
    --iw:min(33vw,46svh * 1.33,var(--band),560px);
    --ix:calc(50% + (min(500px,36vw) - min(330px,24vw)) / 2);
    --iy:60%;
  }
  .ind-img{left:var(--ix);top:var(--iy);width:var(--iw)}
  [data-phase=intro] .ind-img{left:50%;top:67%;width:min(40vw,700px)}
  .ind-pills{left:var(--ix)}
  .ind-stage[data-m=mds] .ind-ring{left:calc(var(--ix) + .045 * var(--iw));top:calc(var(--iy) - .077 * var(--iw))}
  .ind-stage[data-m=wave] .ind-ring{left:calc(var(--ix) - .045 * var(--iw));top:calc(var(--iy) - .102 * var(--iw))}
  .ind-card{width:min(330px,24vw);padding:clamp(16px,1.6vw,24px);top:calc(var(--nav-h) + 5svh)}
  .ind-name{font-size:clamp(34px,3.4vw,58px)}
  .ind-name--both{font-size:min(clamp(22px,2.4vw,40px),13.2cqi)}
  .ind-sub{margin-top:10px;font-size:13.5px}
  .ind-specs{gap:10px;margin-top:clamp(14px,1.8svh,20px)}
  .ind-specs dd{font-size:min(clamp(15px,1.35vw,20px),8.4cqi)}
  .ind-ring{width:74px;height:74px;margin:-37px 0 0 -37px}
}

@media (max-width:900px){
  .ind-track{--ind-step:26svh}
  /* dvh: a floating browser bar would otherwise leave an empty strip under the machine */
  .ind-stage{--H:100svh}
  @supports (height:100dvh){.ind-stage{height:100dvh;--H:100dvh}}
  /* the panel takes the top; the machines sit in the band between it and the pills, centred there
     and as wide as that band allows (--band is its height, about 0.8 of a render width) */
  .ind-panel{left:12px;right:12px;width:auto;top:calc(var(--nav-h) + 4px);bottom:auto;height:calc(var(--H) * .46)}
  .ind-media img{aspect-ratio:2/1}
  .ind-img{
    --band:calc(var(--H) * .51 - var(--nav-h) - 44px);
    left:50%;top:calc(var(--nav-h) + 4px + var(--H) * .46 + var(--band) / 2 + 6px);
    width:min(80vw,var(--band) * 1.15,460px);
  }
  /* intro: the pair larger, under the title; the scroll brings it down and a touch smaller */
  [data-phase=intro] .ind-img{top:calc(var(--H) * .68)}
  .ind-title{top:34%;font-size:min(46px,12vw)}
  [data-m=both] .ind-img--mds{transform:translate(-24%,-17%) scale(.64)}
  [data-m=both] .ind-img--wave{transform:translate(25%,15%) scale(.64)}
  [data-phase=intro][data-m=both] .ind-img--mds{transform:translate(-25%,-18%) scale(.74)}
  [data-phase=intro][data-m=both] .ind-img--wave{transform:translate(25%,16%) scale(.74)}
  .ind-card,.ind-ring,.ind-line{display:none}
  .ind-pills{left:50%;bottom:3%;width:max-content;white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){
  .ind-track{height:auto}
  .ind-stage{position:relative}
}

/* sectors by machine: the head of each column links to the product */
.bym-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:14px;padding-bottom:14px;
  border-bottom:1px solid var(--line);font-family:var(--font-head);font-weight:500;font-size:clamp(18px,1.6vw,23px);letter-spacing:-.02em;
}
.bym-n{font-family:var(--font-body,inherit);font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.bym-head .arw{display:inline-block;margin-left:6px;transition:transform .3s var(--ease)}
.bym-head:hover .arw{transform:translateX(4px)}

/* ---------- stats ---------- */
.stat{padding:clamp(22px,2.4vw,34px) 0;border-top:1px solid var(--line)}
.stat b{display:block;font-size:clamp(34px,5vw,64px);font-weight:600;letter-spacing:-.045em;line-height:1;font-family:var(--font-head)}
.stat b span{font-size:.38em;letter-spacing:-.01em;color:var(--mute);margin-left:.25em}
.stat p{margin:10px 0 0;font-size:13.5px;color:var(--mute);max-width:30ch}

/* ---------- tables ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.tabs button{
  padding:11px 20px;border:1px solid var(--line);border-radius:999px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
  transition:.3s var(--ease);
}
.tabs button:hover{color:var(--paper);border-color:var(--paper)}
.tabs button[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:#14181A}
.tbl-tools{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-bottom:18px}
.tbl-tools input,.tbl-tools select{
  background:var(--ink-2);border:1px solid var(--line);color:var(--paper);
  padding:11px 14px;border-radius:3px;font:inherit;font-size:13.5px;min-width:190px;
}
.tbl-tools input:focus,.tbl-tools select:focus{outline:1px solid var(--accent-ink);border-color:var(--accent-ink)}
/* spec tables: full-width bands, no rules between rows */
.tbl-wrap{overflow-x:auto;background:var(--ink)}
table th,table td{
  padding:clamp(16px,1.8vw,24px) 16px;text-align:right;font-size:14px;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
table th{
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);font-weight:500;position:sticky;top:0;
  background:var(--ink);cursor:pointer;
  padding-bottom:clamp(12px,1.4vw,18px);border-bottom:1px solid var(--line);
}
table th:first-child,table td:first-child{text-align:left}
table th:hover{color:var(--paper)}
/* sorted column: dark header with its arrow, and a light band down the cells so the reorder reads */
table th.sorted{color:var(--paper)}
table th.sorted::after{content:" \2193";color:var(--accent-ink)}
table th.sorted.asc::after{content:" \2191"}
table td.is-sorted{background:color-mix(in srgb,var(--accent) 12%,transparent)}
/* the band is the separator - no border between rows */
tbody tr{transition:background .25s var(--ease)}
tbody tr:nth-child(even){background:color-mix(in srgb,var(--paper) 5%,transparent)}
tbody tr:hover{background:color-mix(in srgb,var(--accent) 14%,transparent)}
tbody tr:last-child td{border-bottom:1px solid var(--line)}
tbody td:first-child{font-weight:500;color:var(--paper)}
tbody tr.hide{display:none}
.tbl-note{font-size:12.5px;color:var(--mute);margin-top:14px}

/* ---------- cases ---------- */
.case{border-top:1px solid var(--line);padding-top:22px}
.case .k{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ink)}
.case h4{font-size:clamp(19px,1.8vw,24px);font-weight:500;letter-spacing:-.02em;margin:14px 0 10px}
.case p{color:var(--mute);font-size:14.5px;margin:0}
.case dl{display:flex;gap:26px;margin:18px 0 0}
.case dt{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.case dd{margin:4px 0 0;font-size:19px;font-weight:500;letter-spacing:-.02em}

/* ---------- case history (MDS): headline figures, then one row per plant ---------- */
.ch-figs{
  list-style:none;margin:0 0 clamp(48px,6vw,96px);padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,48px);
}
.ch-figs li{container-type:inline-size;border-top:1px solid var(--line);padding-top:clamp(16px,1.8vw,24px)}
/* each figure is sized off its own column, so "+500%", the widest, still fits at any width */
.ch-figs b{
  display:block;font-family:var(--font-head);font-weight:600;line-height:.9;white-space:nowrap;
  font-size:min(150px,38cqi);letter-spacing:-.05em;font-variant-numeric:tabular-nums;
}
.ch-figs b small{font-size:.5em;letter-spacing:-.02em;color:var(--accent);margin-left:.04em}   /* logo cyan */
.ch-figs .t{display:block;margin-top:clamp(12px,1.4vw,18px);font-size:clamp(15px,1.3vw,18px);font-weight:500}
.ch-figs .d{display:block;margin-top:6px;font-size:13.5px;color:var(--mute);max-width:30ch}

.ch-list{position:relative;border-top:1px solid var(--line)}
.ch{border-bottom:1px solid var(--line)}
.ch summary{
  display:grid;align-items:center;gap:clamp(12px,2vw,32px);cursor:pointer;list-style:none;
  grid-template-columns:44px minmax(0,1.25fr) minmax(0,.7fr) minmax(0,1fr) minmax(0,.6fr) minmax(0,.9fr) 14px;
  padding:clamp(18px,2vw,26px) 10px clamp(18px,2vw,26px) 0;
  transition:background .3s var(--ease);
}
.ch summary::-webkit-details-marker{display:none}
.ch summary > *{transition:translate .4s var(--ease),color .3s}
.ch-n{font-size:10.5px;letter-spacing:.14em;color:var(--mute);font-variant-numeric:tabular-nums}
.ch-who b{display:block;font-family:var(--font-head);font-weight:500;font-size:clamp(17px,1.6vw,22px);letter-spacing:-.02em;line-height:1.15}
.ch-who span{display:block;margin-top:3px;font-size:13.5px;color:var(--mute)}
.ch-sec,.ch-mod{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);line-height:1.5}
.ch-hit{
  justify-self:end;text-align:right;font-family:var(--font-head);font-weight:500;
  font-size:clamp(16px,1.5vw,20px);letter-spacing:-.02em;
}
.ch[open] :is(.ch-n,.ch-hit){color:var(--accent-ink)}
/* hover only where a real hover exists: on a phone :hover sticks to the tapped row.
   The nudge is translate, not padding - padding re-wrapped the text, the row changed
   height under the pointer and a click could land on the next one */
@media (hover:hover){
  .ch summary:hover{background:var(--ink-2)}
  .ch summary:hover > :not(.ch-plus){translate:12px 0}
  .ch summary:hover :is(.ch-n,.ch-hit){color:var(--accent-ink)}
}
.ch-plus{position:relative;width:14px;height:14px;justify-self:end}
.ch-plus::before,.ch-plus::after{
  content:"";position:absolute;left:0;top:50%;width:100%;height:1.5px;margin-top:-.75px;
  background:currentColor;transition:transform .45s var(--ease);
}
.ch-plus::after{transform:rotate(90deg)}
.ch[open] .ch-plus::after{transform:none}
.ch-body{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(20px,3vw,56px);
  padding:6px 0 clamp(28px,3vw,44px) calc(44px + clamp(12px,2vw,32px));
}
.ch-pics{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.2vw,16px)}
.ch-pics img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:10px;background:var(--panel)}
/* un caso con una sola foto la stende su tutta la riga, invece di lasciare mezza colonna vuota */
.ch-pics img:only-child{grid-column:1/-1;aspect-ratio:16/10}
.ch-data{margin:0;display:grid;gap:clamp(14px,1.6vw,20px);align-content:start}
.ch-data dt{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.ch-data dd{margin:6px 0 0;font-size:15px;line-height:1.5}
.ch-data ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.ch-data li{position:relative;padding-left:18px}
.ch-data li::before{
  content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--accent-ink);
}
.ch-data .ch-narrow{display:none}   /* sector and model already sit in the row on wide screens */
/* rows glide open where the browser can animate to height:auto; elsewhere they just open */
@supports (interpolate-size:allow-keywords) and selector(::details-content){
  .ch{interpolate-size:allow-keywords}
  .ch::details-content{height:0;overflow:clip;transition:height .6s var(--ease),content-visibility .6s allow-discrete}
  .ch[open]::details-content{height:auto}
}
/* the photo that follows a mouse along the closed rows (built by main.js) */
.ch-peek{
  position:absolute;left:0;top:0;z-index:5;pointer-events:none;
  width:clamp(220px,22vw,340px);aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--panel);
}
.ch-peek img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:1000px){
  .ch-figs{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(28px,5vw,40px)}
  .ch summary{grid-template-columns:32px minmax(0,1fr) minmax(0,.55fr) auto 14px}
  .ch-sec,.ch-mod{display:none}
  .ch-body{grid-template-columns:1fr;padding-left:0}
  .ch-data .ch-narrow{display:block}
}
@media (max-width:560px){
  .ch summary{grid-template-columns:28px minmax(0,1fr) minmax(0,.5fr) 14px;row-gap:4px}
  .ch-hit{grid-column:2 / span 2;grid-row:2;justify-self:start;text-align:left;font-size:15px}
  .ch-plus{grid-column:4;grid-row:1}
}

/* ---------- inverted band: contact / CTA ---------- */
.contact{background:var(--inv-bg);color:var(--inv-fg)}
.contact .label,.contact .muted{color:var(--inv-mute)}
.contact .rule{background:var(--inv-line)}
.contact .label .num{color:var(--accent)}
.contact .btn{border-color:var(--inv-line)}
.contact .btn:hover{background:var(--inv-fg);color:var(--inv-bg);border-color:var(--inv-fg)}
.contact .btn--solid{background:var(--accent);color:#14181A;border-color:var(--accent)}
.contact .btn--solid:hover{background:var(--inv-fg);color:var(--inv-bg);border-color:var(--inv-fg)}
.form{display:grid;gap:16px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form input,.form select,.form textarea{
  width:100%;padding:15px 16px;border:1px solid var(--inv-line);border-radius:3px;
  background:transparent;font:inherit;font-size:15px;color:var(--inv-fg);
}
.form textarea{min-height:120px;resize:vertical}
.form option{color:#14181A}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--accent);border-color:transparent}
.form label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--inv-mute);display:block;margin-bottom:7px}
.form .btn{justify-self:start}

/* ---------- contact page: one dark screen, copy left, form right ---------- */
.contact-page{
  background:var(--inv-bg);color:var(--inv-fg);
  min-height:100svh;display:flex;align-items:center;
  padding:calc(var(--nav-h) + clamp(40px,7vw,90px)) 0 clamp(48px,7vw,90px);
  position:relative;overflow:hidden;   /* the blurred layer is scaled past the edges */
}
.contact-page > .wrap{position:relative;z-index:2;flex:1}   /* a flex child sizes to its content otherwise */
/* photo behind, blurred and veiled so the form stays readable over it.
   Inquadratura al 24% e non al centro: in hero.webp una strada corre verticale esattamente
   a meta foto e separa le vasche tonde da quelle rettangolari. Lasciandola al centro quel
   bordo ad altissimo contrasto cadeva sotto il punto piu chiaro del velo e la sezione
   sembrava spezzata in due. Spostata l'inquadratura restano solo le vasche tonde. */
.contact-page::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:var(--contact-img,none) 24% center/cover no-repeat;
  filter:blur(14px) saturate(.85);transform:scale(1.08);opacity:.55;
}
/* stessa scala della foto, non per vezzo: il velo copre solo il proprio riquadro, la foto
   e l'8% piu grande. Arrivando alla pagina da un link con ancora il salto di scroll fa
   sbagliare il ritaglio, e quel sovrappiu usciva scoperto come una striscia chiara di 36px
   in fondo alla sezione. Se i due strati hanno lo stesso ingombro non puo succedere. */
.contact-page::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;transform:scale(1.08);
  background:radial-gradient(72% 62% at 50% 45%,rgba(10,13,14,.42) 0%,rgba(10,13,14,.86) 72%,var(--inv-bg) 100%);
}
.contact-page__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(40px,6vw,110px);align-items:start;
}
.contact-page__left{display:flex;flex-direction:column;justify-content:space-between;min-height:clamp(340px,52vh,560px)}
.contact-page__h1{
  font-family:var(--font-head);font-weight:600;letter-spacing:-.05em;line-height:.9;
  font-size:clamp(44px,7.4vw,116px);margin:0;
}
.contact-page__cols{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:clamp(24px,3vw,48px);margin-top:clamp(40px,6vw,80px);
}
.contact-page__cols h2{
  font-size:clamp(17px,1.6vw,21px);font-weight:500;letter-spacing:-.02em;margin:0 0 16px;
}
.contact-page__cols address,.contact-page__cols p{
  font-style:normal;margin:0;font-size:15px;line-height:1.7;color:var(--inv-mute);max-width:30ch;
}
.contact-page__cols a:hover{color:var(--inv-fg)}

/* underlined fields: the label sits in the field until it is filled */
.contact-form{display:grid;gap:clamp(14px,1.8vw,26px);align-content:start}
.contact-form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,26px)}
.field{position:relative;display:flex}
.field input,.field select,.field textarea{
  width:100%;background:none;border:0;border-bottom:1px solid var(--inv-line);
  color:var(--inv-fg);font:inherit;font-size:15px;padding:14px 0 12px;
  border-radius:0;transition:border-color .3s var(--ease);
}
.field textarea{resize:vertical;min-height:64px}
.field select{color:var(--inv-mute);cursor:pointer}
.field select option{color:#14181A}
.field label{
  position:absolute;left:0;top:14px;pointer-events:none;
  font-size:15px;color:var(--inv-mute);
  transition:transform .3s var(--ease),font-size .3s var(--ease),color .3s var(--ease);
  transform-origin:0 0;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--accent)}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label,
.field select:focus + label,
.field select:valid + label{transform:translateY(-16px) scale(.72);color:var(--accent)}
.contact-form .btn{justify-self:start;margin-top:clamp(8px,1.4vw,18px)}
.contact-form .btn[disabled]{opacity:.55;pointer-events:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{margin:0;font-size:14px;line-height:1.5;color:var(--inv-fg)}
.form-note--bad{color:#F0A6A0}
.contact-page .btn--solid:hover{background:var(--inv-fg);color:var(--inv-bg);border-color:var(--inv-fg)}

@media (max-width:900px){
  .contact-page{min-height:0;align-items:stretch}
  .contact-page__grid{grid-template-columns:1fr;gap:clamp(36px,7vw,56px)}
  .contact-page__left{min-height:0;display:block}
}
@media (max-width:560px){
  .contact-form__row{grid-template-columns:1fr}
}

/* ---------- placeholder art: stands in for a photo or the 3D view ---------- */
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
svg.ph{width:100%;height:100%;display:block;border-radius:10px}   /* svg. only: .feature .ph is a different thing */
.ph-bg{fill:var(--panel)}
.ph-fg{fill:var(--mute);opacity:.32}

/* ---------- product hero: name behind, object in front ---------- */
.phero{
  --word-ratio:2.698;   /* the wordmark viewBox aspect - set it per page */
  display:block;padding-top:calc(var(--nav-h) + clamp(12px,2.4svh,48px));
  padding-bottom:clamp(16px,2.6svh,48px);min-height:100svh;
  display:flex;flex-direction:column;justify-content:space-between;
}
.phero > .wrap{width:100%}   /* margin-inline:auto on .wrap cancels flex stretch */
/* the two pieces are absolute, so the wordmark can grow without pushing the
   section taller - the stage is just whatever height is left */
.phero-stage{position:relative;flex:1;min-height:clamp(220px,34svh,560px)}
.phero-word{
  position:absolute;inset:0 0 auto 0;height:92%;margin:0;pointer-events:none;
  display:grid;place-items:start center;
}
/* the type is drawn once in the viewBox and the SVG scales it to the box, so
   it fits the stage on its own - no font-size formula against the viewport */
.phero-word svg{
  display:block;width:auto;height:auto;
  /* the two columns under the hero are roughly 360px tall whatever the window
     is, so cap the width at what is left times the viewBox ratio - otherwise
     88% runs the wordmark into them on anything shorter than about 1000px */
  max-width:min(88%,calc((100svh - 348px) * var(--word-ratio)));max-height:100%;
  overflow:visible;   /* the registered mark sits outside the viewBox on purpose */
}
.phero-word text{
  font-family:var(--font-head);font-weight:600;font-size:82px;letter-spacing:-.05em;
  fill:color-mix(in srgb,var(--paper) 92%,transparent);
}
.phero-word text.phero-word__r{font-size:19px}   /* px in viewBox units: em would lose to .phero-word text */
/* hangs off the bottom of the stage, cutting across the wordmark above it */
.phero-obj{
  position:absolute;left:50%;translate:-50% 0;bottom:clamp(-240px,-21svh,-90px);z-index:1;
  height:min(55svh,660px);aspect-ratio:4/3;width:auto;max-width:min(41%,740px);
}
/* product render standing in for the 3D model until it exists: fits the 4:3 box whole */
.phero-obj img{display:block;width:100%;height:100%;object-fit:contain}
/* wide screens: the quote call hangs just under the machine, out of the layout, and the one in the
   left column steps aside; below 1100px the columns come too close to the middle, so it stays there */
.phero-cta--mid{display:none}
@media (min-width:1101px){
  .phero-cta--mid{display:inline-flex;position:absolute;left:50%;top:100%;translate:-50% 0;margin:0;white-space:nowrap}
  .phero-col .phero-cta{display:none}
}
.phero-play{
  position:absolute;right:0;bottom:0;z-index:2;
  opacity:0;translate:0 10px;transition:opacity .45s var(--ease),translate .45s var(--ease);
  width:clamp(88px,9vw,124px);aspect-ratio:1;display:grid;place-items:center;color:var(--paper);
  /* the dial inside spins, and a rotating square sweeps a box up to 1.41x its side.
     Anchored to right:0 that widened the page by 15px every 90deg, so the horizontal
     scrollbar blinked in and out and every fixed element jumped with it. The type sits
     on a circle inscribed in this square, so clipping to the square hides nothing. */
  overflow:clip;
}
.phero-play svg{position:absolute;inset:0;width:100%;height:100%;animation:phero-spin 18s linear infinite}
.phero-play text{fill:currentColor;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-family:var(--font-head)}
.phero-play__tri{
  width:0;height:0;border-left:13px solid currentColor;
  border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px;
  transition:transform .3s var(--ease);
}
.phero-play:hover .phero-play__tri{transform:scale(1.18)}
@keyframes phero-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.phero-play svg{animation:none}}

.phero-foot{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,72px);align-items:start;margin-top:clamp(34px,6svh,96px);
}
.phero-col--end{justify-self:end;max-width:46ch}
.phero-n{
  display:block;font-size:12px;letter-spacing:.14em;color:var(--accent-ink);
  font-variant-numeric:tabular-nums;margin-bottom:clamp(12px,1.4vw,20px);
}
.phero-claim{
  margin:0 0 min(18px,2svh);font-family:var(--font-head);font-weight:600;
  font-size:min(clamp(26px,3.4vw,50px),6svh);letter-spacing:-.035em;line-height:1;
}
.phero-col p{margin:0;color:var(--mute);font-size:15px;line-height:1.6;max-width:44ch}
.phero-specs{margin:0;padding:0;list-style:none;display:grid;gap:min(9px,1.1svh)}
.phero-specs li{position:relative;padding-left:18px;color:var(--mute);font-size:14.5px;line-height:1.5}
.phero-specs li::before{
  content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--accent-ink);
}

/* whatever follows the hero needs air: the hero ends tight on its own padding */
.phero + .sec,.phero + section{padding-top:clamp(96px,17svh,260px)}

/* ---------- product gallery: one screen, thumbs pick the view ---------- */
.pgal{padding-block:clamp(40px,5vw,80px)}
.pgal-grid{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(28px,4vw,80px);align-items:stretch;
  min-height:min(78svh,760px);
}
.pgal-copy{display:flex;flex-direction:column;justify-content:space-between}
.pgal-list{margin:0;display:grid;gap:clamp(18px,2.2vw,30px)}
/* the list keeps its place at the bottom of the column, the quote call right under it */
.pgal-copy .pgal-list{margin-top:auto}
.pgal-cta{align-self:flex-start;margin-top:clamp(24px,2.6vw,36px)}
.pgal-list dt{font-family:var(--font-head);font-weight:500;font-size:clamp(17px,1.7vw,22px);letter-spacing:-.02em}
.pgal-list dd{margin:8px 0 0;color:var(--mute);font-size:14.5px;line-height:1.55;max-width:44ch}
.pgal-view{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(12px,1.4vw,20px)}
.pgal-thumbs{display:grid;gap:clamp(10px,1.2vw,16px);align-content:start}
.pgal-thumbs button{
  width:clamp(64px,7vw,92px);aspect-ratio:4/3;padding:0;overflow:hidden;
  background:var(--panel);border:1px solid transparent;border-radius:10px;cursor:pointer;
  transition:border-color .3s var(--ease),opacity .3s var(--ease);opacity:.6;
}
.pgal-thumbs button[aria-selected="true"]{border-color:var(--accent-ink);opacity:1}
.pgal-thumbs button:hover{opacity:1}
.pgal-stage{display:grid}
.pgal-stage figure[hidden]{display:none}   /* display:grid below would beat the attribute */
.pgal-stage figure{margin:0;display:grid;grid-template-rows:1fr auto;gap:12px;min-height:0}
/* every view is the product render itself, zoomed onto a detail: --z times, with the point
   --cx/--cy of the image (in %) brought to the middle. One file for all views and thumbs.
   The img keeps the render ratio (--ar, set on .pgal-view) and fits the frame through
   container units, so those % stay image coordinates whatever shape the frame takes:
   tall on desktop, 4:3 on phones. Both self-alignments stretch - with an aspect-ratio,
   "normal" sized the frame from its height and pushed it out of the column */
.pgal-shot{align-self:stretch;justify-self:stretch;aspect-ratio:4/3;min-height:0;overflow:hidden;border-radius:10px;background:var(--panel)}
.pgal-shot,.pgal-thumbs button{container-type:size;display:grid;place-items:center}
.pgal-shot img,.pgal-thumbs img{
  display:block;width:min(100cqw,100cqh * var(--ar,1.3333));height:auto;
  transform:scale(var(--z,1)) translate(calc(50% - var(--cx,50%)),calc(50% - var(--cy,50%)));
}
.pgal-stage figcaption{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}

/* ---------- reel: heading holds, the track slides left as the section scrolls ---------- */
.reel{position:relative;height:var(--reel-h,340vh)}   /* more cards, more scroll: set per page */
.reel-sticky{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;align-items:stretch;
  gap:clamp(18px,2.6vw,38px);padding-top:var(--nav-h);
}
.reel-head{width:100%}
.reel-head p{margin:16px 0 0;color:var(--mute);font-size:15px;max-width:52ch}
.reel-track{
  display:flex;gap:clamp(12px,1.4vw,22px);width:max-content;
  padding-inline:var(--pad);will-change:transform;
}
.reel-card{
  margin:0;flex:none;width:clamp(280px,46vw,680px);
  display:grid;grid-template-rows:1fr auto;gap:12px;
  height:min(66svh,700px);
}
.reel-card .ph{height:100%}
.reel-img{position:relative;min-height:0;overflow:hidden;border-radius:12px;background:var(--ink-2)}
.reel-img img{width:100%;height:100%;object-fit:cover;display:block}
/* [data-reel-gl]: a WebGL canvas paints the photos (bend on scroll, ripple on hover). Each
   <img> hides only once its texture is uploaded and stays for layout, alt text and no-WebGL */
.reel-img.is-gl img{opacity:0}
.reel-gl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.reel-card figcaption{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.reel-nav{display:none}   /* frecce solo su mobile, vedi sotto i 820px */

@supports (animation-timeline:view()) {
  .reel{view-timeline:--reel block}
  .reel-track{
    animation:reel-slide linear both;
    animation-timeline:--reel;
    animation-range:contain 0% contain 100%;
  }
  @keyframes reel-slide{to{transform:translateX(calc(-100% + 100vw - var(--pad) * 2))}}
}
/* laptops: only the gallery holds. The heading sits over the top of the held block and slides
   away with the first stretch of the scroll, so the cards have the screen to themselves */
@media (min-width:901px) and (max-width:1600px){
  .reel-head{max-height:30svh;overflow:hidden}
  @supports (animation-timeline:view()){
    /* the heading folds up in the first stretch of the scroll and the cards take the screen */
    .reel-head{animation:reel-head-away linear both;animation-timeline:--reel;animation-range:contain 0% contain 14%}
    @keyframes reel-head-away{70%,to{max-height:0;opacity:0;transform:translateY(-20px)}}
  }
}
/* no scroll-driven animation: it stays a plain swipeable row */
@supports not (animation-timeline:view()) {
  .reel{height:auto}
  .reel-sticky{position:relative;height:auto}   /* relative: the WebGL canvas sits in it */
  .reel-track{overflow-x:auto;scroll-snap-type:x mandatory}
  .reel-card{scroll-snap-align:center}
}
@media (prefers-reduced-motion:reduce){
  .reel{height:auto}
  .reel-sticky{position:relative;height:auto}   /* relative: the WebGL canvas sits in it */
  .reel-track{animation:none;overflow-x:auto}
}

/* below 700px stop forcing one screen - a wordmark, an object and two columns
   do not fit in that height */
@media (max-height:700px){
  .phero{min-height:0}
}

@media (max-width:820px){
  .phero-foot{grid-template-columns:1fr;gap:32px}
  .phero-col--end{justify-self:start}
  /* the stage is block, so justify-self did nothing and the badge landed on top
     of the wordmark - keep it absolute, just smaller */
  .phero-play{width:clamp(96px,27vw,128px);right:clamp(4px,2vw,12px);translate:0 clamp(10px,4vw,22px)}
  /* the registered mark is drawn outside the viewBox, so 88% would clip it */
  .phero-word svg{max-width:84%}
  .phero-obj{height:min(100%,40svh,420px);width:auto;max-width:100%;bottom:clamp(-30px,-3svh,-14px);margin-bottom:0}
  .pgal-grid{grid-template-columns:1fr;gap:32px;min-height:0}
  .pgal-view{grid-template-columns:1fr}
  .pgal-thumbs{grid-auto-flow:column;justify-content:start}
  .reel-card{width:76vw;height:min(46svh,420px)}
  /* mobile: la fila non scorre piu con la pagina, e una galleria normale che si sfoglia col
     dito o con le frecce. Sul telefono si fa swipe d'istinto, e scorrendo la pagina restava
     tutto fermo per 6 schermate */
  .reel{height:auto}
  .reel-sticky{position:relative;height:auto;overflow:visible;padding-block:clamp(72px,10vw,150px)}
  .reel-track{
    animation:none;transform:none;width:auto;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);scrollbar-width:none;
  }
  .reel-track::-webkit-scrollbar{display:none}
  .reel-card{scroll-snap-align:start}
  .reel-nav{display:flex;justify-content:center;gap:10px}
}

/* ---------- section pill: appears past the hero, opens upward ---------- */
.pilot{
  position:fixed;left:50%;bottom:clamp(18px,3vh,34px);translate:-50% 0;z-index:70;
  display:grid;justify-items:center;gap:10px;
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s;
}
.pilot[data-shown]{opacity:1;visibility:visible;transform:none}
/* fixed must not live inside [data-main]: GSAP sets a transform on it, and a
   transformed ancestor becomes the containing block for position:fixed */
body[data-menu-status="open"] .pilot{opacity:0;visibility:hidden;transform:translateY(14px)}

/* the glass: blur what is behind, lift it with a light rim */
.pilot-btn,.pilot-panel{
  background:color-mix(in srgb,var(--ink-2) 62%,transparent);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid color-mix(in srgb,var(--paper) 14%,transparent);
  box-shadow:0 10px 34px rgba(10,13,14,.14),inset 0 1px 0 color-mix(in srgb,#fff 55%,transparent);
}
.pilot-btn{
  display:flex;align-items:center;gap:10px;
  padding:11px 18px;border-radius:999px;cursor:pointer;color:var(--paper);
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  transition:transform .3s var(--ease);
}
.pilot-btn:hover{transform:translateY(-2px)}
.pilot-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.pilot-here{max-width:26ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pilot-caret{font-size:13px;color:var(--mute);transition:transform .35s var(--ease)}
.pilot[data-open] .pilot-caret{transform:rotate(180deg)}

/* grows out of the pill, upward */
.pilot-panel{
  order:-1;min-width:min(78vw,270px);padding:8px;border-radius:18px;
  display:grid;gap:2px;transform-origin:50% 100%;
  transform:translateY(8px) scale(.94);opacity:0;
  transition:opacity .3s var(--ease),transform .4s var(--ease);
}
.pilot-panel[hidden]{display:none}
.pilot[data-open] .pilot-panel{transform:none;opacity:1}
.pilot-panel a{
  display:flex;align-items:baseline;gap:10px;
  padding:9px 12px;border-radius:11px;font-size:14px;color:var(--paper);
  transition:background .25s var(--ease);
}
.pilot-panel a:hover{background:color-mix(in srgb,var(--paper) 8%,transparent)}
.pilot-panel a[aria-current]{color:var(--accent-ink)}
.pilot-panel a[aria-current] .pilot-n{color:var(--accent-ink)}
.pilot-n{font-size:10px;letter-spacing:.14em;color:var(--mute);font-variant-numeric:tabular-nums;flex:none}
@media (prefers-reduced-motion:reduce){.pilot,.pilot-panel,.pilot-caret{transition:none}}

/* ---------- dots field: grid behind the copy, logo on top of it ---------- */
.dots-sec{position:relative;overflow:hidden;isolation:isolate;min-height:min(82svh,760px);display:grid;align-content:center}
.dots-sec .wrap{position:relative;z-index:2}
.dots-grid{
  position:absolute;inset:0;z-index:0;
  display:flex;flex-wrap:wrap;align-content:center;justify-content:center;
  gap:calc(var(--dot) * 2.6);font-size:var(--dot);
  --dot:9px;
  --dot-base:#DFE1DE;   /* opaque: interpolating from a translucent base darkens mid-way */
  --dot-active:var(--accent-ink);   /* darkest point, right under the cursor */
}
.dots-grid .dot{
  width:var(--dot);height:var(--dot);border-radius:50%;
  background:var(--dot-base);will-change:transform;
}
.dots-mark{
  position:absolute;inset:0;z-index:1;display:grid;place-items:center;pointer-events:none;
}
.dots-mark svg{width:clamp(74px,9vw,124px);height:auto;color:var(--paper)}
@media (prefers-reduced-motion:reduce){.dots-grid{display:none}}

/* ---------- pinned list: the copy holds, the panel swaps as you scroll ---------- */
.lat{position:relative;height:460vh}
.lat-stage{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  grid-template-rows:auto minmax(0,1fr);   /* heading, then the pair - fits any monitor */
  gap:clamp(18px,2.4vw,44px);align-items:center;
  padding:calc(var(--nav-h) + 2vh) clamp(12px,1.4vw,28px) 4vh;
}
/* the heading travels with its own list instead of scrolling off above it */
.lat-head{grid-column:1/-1;align-self:start}
.lat-head .sec-head{margin-bottom:0}
.lat-panels{position:relative;height:100%;min-height:0;grid-column:2;grid-row:2;align-self:stretch}

/* the rail is the indicator: a segment that slides to the live item */
.lat-list{grid-column:1;grid-row:2;align-self:center;position:relative;display:flex;gap:clamp(16px,2vw,30px)}
.lat-rail{position:relative;flex:none;width:2px;background:var(--line);border-radius:2px}
.lat-rail i{
  position:absolute;left:0;width:2px;background:var(--accent);border-radius:2px;
  height:var(--seg,12%);top:var(--segY,0%);
  transition:top .5s var(--ease),height .5s var(--ease);
}
.lat-list ol{margin:0;padding:0;list-style:none;display:grid;gap:clamp(6px,1vh,14px)}
.lat-list button{
  background:none;border:0;padding:0;text-align:left;cursor:pointer;
  font-family:var(--font-head);font-weight:600;letter-spacing:-.03em;
  font-size:clamp(18px,min(2.4vw,3.4svh),36px);line-height:1.15;
  color:var(--mute);opacity:.45;
  transition:color .4s var(--ease),opacity .4s var(--ease);
}
.lat-list li[data-on] button{color:var(--paper);opacity:1}

/* panels stack in one cell and cross-fade */
.lat-panel{
  position:absolute;inset:0;margin:0;
  display:grid;grid-template-rows:1fr auto;gap:14px;
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .6s var(--ease),visibility .5s;
}
.lat-panel[data-on]{opacity:1;visibility:visible;transform:none}
.lat-panel .ph{height:100%;min-height:0;border-radius:14px}
.lat-panel figcaption{display:grid;gap:8px}
.lat-panel figcaption p{margin:0;color:var(--mute);font-size:14.5px;line-height:1.6;max-width:52ch}
.lat-n{font-size:11px;letter-spacing:.18em;color:var(--accent-ink);font-variant-numeric:tabular-nums}
.lat-n i{font-style:normal;color:var(--mute)}

@media (prefers-reduced-motion:reduce){
  .lat-panel,.lat-rail i,.lat-list button{transition:none}
}
/* the copy of the caption that rides inside each item is for the phone layout only */
.lat-list li figcaption{display:none}
@media (max-width:820px){
  /* no room for two columns: the list becomes an accordion and drives itself by tap */
  .lat{height:auto}
  .lat-stage{display:block;position:static;height:auto;padding:0}
  .lat-head{margin-bottom:clamp(18px,3vh,28px)}
  .lat-panels{display:none}   /* eight identical grey placeholders earn nothing here - bring them back with real photos */
  .lat-list{display:block}
  .lat-rail{display:none}
  .lat-list ol{display:block}
  .lat-list li{border-top:1px solid var(--line)}
  .lat-list li:last-child{border-bottom:1px solid var(--line)}
  .lat-list button{
    width:100%;text-align:left;padding:15px 0;font-size:19px;
    opacity:1;color:var(--paper);
  }
  .lat-list li[data-on] button{color:var(--accent-ink)}
  .lat-list li[data-on] figcaption{display:grid;gap:8px;padding:0 0 18px}
  .lat-list li figcaption p{margin:0;color:var(--mute);font-size:14.5px;line-height:1.6;max-width:none}
}

/* ---------- footer: dark band, wordmark + split grid ---------- */
.foot{
  /* dark band. Swap --f-hot for another accent. */
  --f-bg:#141414; --f-fg:#EDEDEB; --f-dim:#8E8E8B;
  --f-line:rgba(237,237,235,.16); --f-hot:var(--accent);
  background:var(--f-bg);color:var(--f-fg);border-top:1px solid var(--f-line);
  padding-block:clamp(34px,4vw,54px) clamp(20px,2.4vw,30px);
}
.foot-row{display:grid;grid-template-columns:1fr 1fr}
.foot-cell{padding-right:clamp(20px,3vw,56px)}
.foot-cell+.foot-cell{border-left:1px solid var(--f-line);padding-left:clamp(20px,3vw,56px)}
.foot-cell--end{display:flex;justify-content:flex-end}

/* wordmark row: the empty space is the point */
.foot-top{min-height:clamp(150px,20vw,290px)}
/* the header already carries the logo inline; <use> points at it, no second copy */
.foot-mark{display:block;color:var(--f-fg);text-decoration:none}
.foot-mark svg{display:block;width:min(46%,330px);height:auto}
.foot-up{white-space:nowrap;color:var(--f-hot);text-decoration:none}   /* in the bottom bar now: its font, the accent kept */
.foot-up:hover{text-decoration:underline;text-underline-offset:5px}

/* column heads + rule above the addresses */
.foot h4{
  font:500 12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.14em;text-transform:uppercase;color:var(--f-hot);
  margin:0 0 clamp(16px,2.2vw,30px);
}
.foot-body{border-top:1px solid var(--f-line);padding-top:clamp(16px,2vw,26px);padding-bottom:clamp(40px,6vw,90px)}
.foot-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(14px,3vw,52px)}
.foot address{font-style:normal;font-size:15px;line-height:1.75;color:var(--f-fg)}
.foot a{color:inherit;text-decoration:none}
.foot address a:hover{text-decoration:underline;text-underline-offset:3px}

/* bottom bar */
.foot-bar{border-top:1px solid var(--f-line);padding-top:clamp(16px,1.8vw,22px);font-size:13.5px;font-family:var(--font-head)}
.foot-bar .foot-cell{display:flex;align-items:baseline;gap:clamp(18px,3vw,44px);color:var(--f-dim)}
.foot-cell--split{justify-content:space-between}
.foot-legal{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,44px)}
.foot-legal a:hover{color:var(--f-fg)}
.foot-made{white-space:nowrap}   /* il nome non si spezza a meta su telefono: va a capo tutto intero */
/* bottom bar: the fine print on the left, the two links on the right, one colour */
.foot-bar .foot-cell+.foot-cell{border-left:0;padding-left:0}
.foot-bar{grid-template-columns:minmax(0,1fr) auto}   /* the legal line gets the room, the links only what they need */
/* powered by: the parent company mark under the wordmark, small - the file is white already */
/* the mark sits at the foot of the right column, straight above Get in touch */
.foot-top .foot-cell--end{justify-content:space-between;align-items:flex-start;gap:24px}
.foot-powered{
  display:flex;align-items:center;gap:12px;margin:0;
  font:500 13px/1 var(--font-head);letter-spacing:.01em;color:var(--f-dim);
}
.foot-powered img{display:block;width:auto;height:clamp(38px,3.8vw,56px)}
/* il logo porta a ecoimpiantisud.it: senza un cenno all'hover non sembra un link */
.foot-powered a{display:block;transition:opacity .2s}
.foot-powered a:hover{opacity:.72}
.foot-c{margin:0;line-height:1.5}

@media (max-width:820px){
  .foot-row{grid-template-columns:1fr}
  .foot-cell{padding-right:0}
  .foot-cell+.foot-cell{border-left:0;padding-left:0}
  .foot-cell--end{justify-content:flex-start;margin-top:22px}
  .foot-mark svg{width:min(64%,250px)}
  .foot-powered img{height:30px}
  .foot-top{min-height:0;padding-bottom:clamp(40px,10vw,70px)}
  .foot-body{padding-bottom:clamp(28px,7vw,48px)}
  .foot-bar .foot-cell{flex-wrap:wrap;gap:12px 24px}
  .foot-cell--split{margin-top:14px}
}

/* ---------- hotspots: schematic on the left, cards on the right ---------- */
.hotspots{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(24px,3.5vw,64px);align-items:center;
}
/* the heading rides in the left column, over the render: that column was shorter than the
   cards, so the title fills room that was empty and the held block barely grows */
.hs-left{display:grid;align-content:center;gap:clamp(18px,2.6vh,36px)}
.hs-left .sec-head{margin-bottom:0}
/* --z lives on the stage so the mask can read it as well as the dots. It needs a real
   starting value: GSAP reads the tween start from the element, and an undefined custom
   property parses as 0 - which made the dots scale(1/0) and flood the frame */
.hs-stage{position:relative;color:var(--paper);--z:1}
.hs-stage svg{width:100%;height:auto;display:block;overflow:visible}
/* height:auto matters: the width/height attributes would otherwise stretch it as it narrows */
.hs-img{width:100%;height:auto;display:block}
.hs-line{fill:none;stroke:currentColor;stroke-width:1.4;opacity:.6}
.hs-thin{stroke-width:1;opacity:.34}
.hs-body{fill:var(--aqua);opacity:.05}
.hs-acc{fill:none;stroke:var(--accent-ink);stroke-width:2.2;stroke-linecap:round}
.hs-acc-f{fill:var(--accent);opacity:.85}
.hs-cake{fill:var(--mud);opacity:.8}
.hs-water{fill:none;stroke:var(--aqua-ink);stroke-width:1.4;opacity:.55;stroke-linecap:round}

.hs-dot{
  position:absolute;left:var(--x);top:var(--y);translate:-50% -50%;
  width:15px;height:15px;padding:0;border:0;border-radius:50%;
  background:var(--accent);cursor:pointer;
}
.hs-dot::after{
  content:"";position:absolute;inset:-9px;border-radius:50%;
  border:1px solid var(--accent);opacity:0;transition:opacity .3s var(--ease),transform .3s var(--ease);
  transform:scale(.7);
}
.hs-dot.on::after,.hs-dot:hover::after,.hs-dot:focus-visible::after{opacity:1;transform:none}

/* cards read like the about values: no box, bracket label, big title, muted text.
   Each li is its own size container, so the title scales with the column it sits in -
   a 13-letter word like "concentration" never runs out of it at any width */
.hotspots .adv{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(36px,5vw,64px) clamp(20px,3vw,40px)}
.hotspots .adv li{container-type:inline-size;padding:0;border:0;border-radius:0;background:none;cursor:default}
/* hover only drops the generic card fill - padding stays out of it, or the stronger
   :hover selector zeroed the desktop side padding and the text jumped left */
.hotspots .adv li:hover{background:none}
.hotspots .adv li .n{margin-bottom:clamp(12px,1.4vw,22px);font-size:12.5px;letter-spacing:.04em;color:var(--paper);transition:color .3s var(--ease)}
.hotspots .adv li .n::before{content:"[ "}
.hotspots .adv li .n::after{content:" ]"}
.hotspots .adv li .t{margin:0;font-size:clamp(26px,11cqi,64px);font-weight:600;letter-spacing:-.045em;line-height:.94;color:var(--paper)}
.hotspots .adv li .d{margin-top:clamp(14px,1.6vw,24px);max-width:44ch;font-size:clamp(15px,1.15vw,19px);line-height:1.45;color:var(--mute)}
.hotspots .adv li.on .n{color:var(--accent-ink)}

/* why MDS: scrolling walks the hotspots one at a time while the block holds still.
   Held by sticky, not a GSAP pin - see the note on .pilot about [data-main] */
@media (prefers-reduced-motion:no-preference){
  .hs-track{height:calc(100svh + var(--hs-steps,6) * 45svh)}
  .hs-track > .hotspots{position:sticky;top:var(--hs-top,calc(var(--nav-h) + 3svh))}
}
/* render and dots move as one layer when the scroll zooms in; the dots shrink back by
   the same factor, or at 2.2x they would read as blobs */
.hs-zoom{position:relative;transform-origin:0 0}
.hs-dot{scale:calc(1 / var(--z,1))}
@media (min-width:981px) and (prefers-reduced-motion:no-preference){
  /* the left column is never wider than the render can be (its height cap below), so the
     slack goes to the card column instead of a hole between image and text */
  .hs-track .hotspots{grid-template-columns:minmax(0,calc((100svh - var(--nav-h) - 270px) * var(--hs-ar,1.5))) minmax(280px,1fr)}
  /* the image is the subject now: as wide as the height under the nav allows */
  /* the zoom window reaches past the render into the empty gutters around it: padding
     cancelled by an equal negative margin, so the render and the layout keep their size
     while the masked, clipped box - where the magnified image can show - grows */
  .hs-track .hs-stage{
    --ex:clamp(20px,3.5vw,56px);--ey:clamp(12px,2.2vh,28px);
    max-width:calc((100svh - var(--nav-h) - 270px) * var(--hs-ar,1.5) + 2 * var(--ex));
    margin:calc(-1 * var(--ey)) calc(-1 * var(--ex));padding:var(--ey) var(--ex);
  }
  .hs-track .adv li{padding-inline:clamp(0px,2.2vw,40px)}
}
/* phones and tablets get the same walk: heading, render and one card stacked in the held
   block, the render capped by what the screen height leaves after heading and card */
@media (max-width:980px) and (prefers-reduced-motion:no-preference){
  .hs-track .hs-stage{width:100%;max-width:min(620px,calc((100svh - var(--nav-h) - 430px) * var(--hs-ar,1.5)));margin-inline:auto}
}
/* phones: the zoom window runs edge to edge (render keeps its size, centred by the padding)
   and the blob is a wider oval, so more of the magnified render shows */
@media (max-width:560px) and (prefers-reduced-motion:no-preference){
  .hs-track .hs-stage.hs-stage{
    width:auto;max-width:none;margin-inline:calc(-1 * var(--pad));
    padding-inline:max(var(--pad),calc((100vw - min(620px,calc((100svh - var(--nav-h) - 430px) * var(--hs-ar,1.5)))) / 2));
    --blob:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><filter id='b' x='-50%25' y='-50%25' width='200%25' height='200%25'><feGaussianBlur stdDeviation='2.5'/></filter><g filter='url(%23b)'><ellipse cx='50' cy='50' rx='42' ry='32'/><circle cx='30' cy='32' r='16'/><circle cx='72' cy='38' r='16'/><circle cx='64' cy='70' r='15'/><circle cx='28' cy='64' r='14'/></g></svg>");
  }
}
@media (prefers-reduced-motion:no-preference){
  .hs-track .hs-stage{
    /* the soft frame is an organic blob, blurred inside the SVG and kept clear of the box
       edge so nothing shows there while zoomed. A flat layer on top of it carries --o:
       fully opaque at rest (whole render visible), gone in the first 4% of the zoom - so
       the blob is already the only frame by the time the render overflows its box */
    --o:calc(1 - (var(--z) - 1) * 25);
    /* the mask only hides the magnified render; clip stops it widening the page as well */
    overflow:clip;
    /* organic blob = a wide oval with four broad bumps: a few gentle curves, not a cloud.
       Everything stays 13 units clear of the box so the blur is spent before the edge */
    --blob:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><filter id='b' x='-50%25' y='-50%25' width='200%25' height='200%25'><feGaussianBlur stdDeviation='3'/></filter><g filter='url(%23b)'><ellipse cx='50' cy='50' rx='34' ry='30'/><circle cx='38' cy='28' r='15'/><circle cx='70' cy='40' r='15'/><circle cx='60' cy='72' r='15'/><circle cx='26' cy='60' r='13'/></g></svg>");
    -webkit-mask:var(--blob) center/100% 100% no-repeat,linear-gradient(rgb(0 0 0 / var(--o)),rgb(0 0 0 / var(--o)));
            mask:var(--blob) center/100% 100% no-repeat,linear-gradient(rgb(0 0 0 / var(--o)),rgb(0 0 0 / var(--o)));
  }
  /* one card at a time, all in the same cell so the column never changes height */
  /* the scroll owns the light here: a dot sliding under a resting pointer must not show a second ring */
  .hs-track .hs-dot:not(.on):hover::after{opacity:0}
  .hs-track .adv{grid-template-columns:1fr}
  .hs-track .adv li{
    grid-area:1/1;align-self:center;
    opacity:0;translate:0 14px;pointer-events:none;
    transition:opacity .45s var(--ease),translate .45s var(--ease);
  }
  .hs-track .adv li.on{opacity:1;translate:0 0;pointer-events:auto}
}
/* short desktop windows: at 1280x720 the six cards ran 37px past the room under the nav,
   and a held block cannot be scrolled to see what it hides */
@media (min-width:981px) and (max-height:780px){
  .hotspots .adv li .d{font-size:14px}
}

@media (max-width:980px){
  .hotspots{grid-template-columns:1fr}
  .hs-stage{max-width:620px}
}
@media (max-width:560px){
  .hotspots .adv{grid-template-columns:1fr}
}

/* ---------- scroll reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .adv{grid-template-columns:1fr}
  .app-list{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .g2,.g3,.g4{grid-template-columns:1fr}
  /* impilati, i 24px di .g2 sono lo spazio pensato fra due colonne affiancate e qui
     diventano l'unico stacco fra la fine del testo di un prodotto e la card del
     successivo: troppo poco. Solo per i blocchi prodotto, le altre griglie g2 restano. */
  .pcol + .pcol{margin-top:clamp(40px,12vw,56px)}
  .proc-steps{grid-template-columns:1fr;gap:4px}
  .proc-steps::before{display:none}
  .proc-steps button{padding:14px 0 14px 26px}
  .proc-steps button::before{top:16px}
  /* stacked, the dwell fill has no rule to run along. The pseudo-element becomes the
     thread from one dot to the next instead, so the column reads as a single path.
     :not(:last-child) is on every selector rather than in a rule of its own: the
     originals carry an attribute and a class, and a lone :last-child loses to them. */
  .proc-steps button:not(:last-child)::after,
  .proc-steps button[aria-selected="true"]:not(:last-child)::after,
  .proc.paused .proc-steps button:not(:last-child)::after{
    display:block;animation:none;
    left:6px;top:22px;bottom:-26px;width:1px;height:auto;background:var(--line);
  }
  /* l'ultimo passo non ha un dopo a cui legarsi, quindi niente filo. Senza questa riga
     si teneva il ::after di desktop - barra orizzontale - e arrivando sul passo 04
     l'animazione dwell la disegnava di traverso, azzurra, sotto il testo.
     Stessi tre selettori di sopra per la stessa ragione di specificita. */
  .proc-steps button:last-child::after,
  .proc-steps button[aria-selected="true"]:last-child::after,
  .proc.paused .proc-steps button:last-child::after{display:none}
  /* every description stays open here. Opening one on activation changed the height
     of the list, and the autoplay moves on its own every 3.2s - so the page shifted
     under the reader without anybody touching it. */
  .proc-steps .d,
  .proc-steps button[aria-selected="true"] .d{
    max-height:none;opacity:1;margin-top:10px;transition:none;
  }
  .form .row{grid-template-columns:1fr}
  .prod .art{width:74px;opacity:.5}
  .hero{align-items:center}
  .app-list{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
}

/* about: mobile stacking for the cascade + hero band */
@media (max-width:900px){
  /* su schermo stretto gli scostamenti non si leggono: tutte allineate a sinistra */
  .cascade .item:nth-child(n){margin-left:0;margin-right:0}
  .cascade-tail{max-width:none;margin-left:0;margin-right:0}
  .hero-copy{grid-template-columns:1fr}
  .hero-copy p:last-child{margin-left:0}
  .arc{display:none}
}

/* ---------- about: le due tecnologie, stessi blocchi prodotto della home su fondo chiaro ---------- */
.abt-lead{max-width:60ch;margin:clamp(20px,2.4vw,32px) 0 0;color:var(--mute)}
.abt-cta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:clamp(16px,2vw,28px);
  margin-top:clamp(34px,4vw,60px);padding-top:clamp(22px,2.4vw,32px);border-top:1px solid var(--line);
}
.abt-cta p{margin:0;font-family:var(--font-head);font-weight:500;font-size:clamp(19px,1.9vw,28px);letter-spacing:-.03em;line-height:1.2}
@media (max-width:560px){.abt-cta .btn{flex:1 1 100%;justify-content:space-between}}

/* ---------- about: le competenze del gruppo, a cascata come la vecchia sezione valori ---------- */
.capab-head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:end;
}
.capab-lead{margin:0;color:var(--mute);max-width:52ch}
@media (max-width:860px){.capab-head{grid-template-columns:1fr}}

/* ---------- case history: il logo in colonna sua, stessa scatola per tutti ---------- */
/* grigi: nove marchi di colori diversi sul crema farebbero arlecchino */
.ch-logo-cell{display:block;width:100%;max-width:118px;height:38px}
.ch-logo{
  display:block;width:100%;height:100%;object-fit:contain;object-position:left center;
  filter:grayscale(1);transition:filter .35s var(--ease);
}
.ch summary:hover .ch-logo,.ch[open] .ch-logo{filter:none}
/* la fascia che scorre: stessa meccanica del marquee, con i marchi al posto delle parole */
.logo-strip{overflow:hidden;margin:clamp(46px,5.5vw,86px) 0 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logo-strip__track{display:flex;align-items:center;width:max-content;animation:mq 42s linear infinite}
.logo-strip__item{display:flex;align-items:center;justify-content:center;width:clamp(150px,14vw,210px);height:52px;padding-inline:clamp(12px,1.6vw,24px)}
.logo-strip__img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:grayscale(1)}
.logo-strip:hover .logo-strip__track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.logo-strip__track{animation:none}}
@media (max-width:1000px){.ch-logo-cell{max-width:96px;height:34px}}
@media (max-width:560px){.ch-logo-cell{max-width:78px;height:30px}}

/* il tasto del video al posto del puntatore, dentro la hero prodotto.
   Non intercetta i clic (pointer-events:none): ci pensa la hero, che ignora link e bottoni. */
@media (hover:hover){
  .phero:has(.phero-play){cursor:none}   /* senza il tondo che lo sostituisce il puntatore deve restare */
  /* col video aperto il tondo e nascosto e il dialog sta dentro la hero: senza questa riga
     il puntatore si eredita a none e non si vedono piu i comandi del filmato */
  .phero:has(dialog[open]){cursor:auto}
  .phero :is(a,button){cursor:pointer}
  .phero-play{
    position:fixed;left:0;top:0;right:auto;bottom:auto;z-index:60;pointer-events:none;
    translate:calc(var(--mx,-999px) - 50%) calc(var(--my,-999px) - 50%);
    width:clamp(104px,10vw,148px);
    border-radius:50%;background:rgba(245,244,241,.42);
    -webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);
    box-shadow:0 10px 40px rgba(12,16,17,.16);
    opacity:0;scale:.7;
    transition:opacity .28s var(--ease),scale .28s var(--ease);
  }
  .phero.is-pointing .phero-play{opacity:1;scale:1}
}
@media (hover:none){
  .phero-play{
    opacity:1;
    border-radius:50%;background:rgba(245,244,241,.5);
    -webkit-backdrop-filter:blur(8px) saturate(1.3);backdrop-filter:blur(8px) saturate(1.3);
    box-shadow:0 8px 28px rgba(12,16,17,.14);
  }
}
@media (prefers-reduced-motion:reduce){
  .phero-play{transition:opacity .2s linear}
}