/* =========================================================
   IDEA DIGITAL — sistema visivo "Rilievo"
   Palette derivata dalle tavole topografiche IGM.
   ========================================================= */

:root{
  --carta:      #E7EAE4;   /* carta minerale */
  --carta-alta: #F3F5F0;   /* superfici sollevate */
  --inchiostro: #14201C;   /* testo, verde-nero */
  --bosco:      #23503F;   /* tavola vegetazione */
  --bosco-scuro:#16332A;
  --segnale:    #1B44D8;   /* cobalto: un solo uso per schermata */
  --grafite:    #6B7670;   /* metadati */
  --linea:      rgba(20,32,28,.14);
  --linea-fine: rgba(20,32,28,.07);

  --display: "Archivo", system-ui, sans-serif;
  --testo:   "Newsreader", Georgia, serif;
  --dato:    "IBM Plex Mono", ui-monospace, monospace;

  --gutter: clamp(20px, 5vw, 72px);
  --rail: 88px;
  --max: 1320px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--carta);
  color:var(--inchiostro);
  font-family:var(--testo);
  font-size:clamp(16px,1.02vw,18px);
  line-height:1.62;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
}

img,svg{ max-width:100%; display:block; }

::selection{ background:var(--segnale); color:#fff; }

a{ color:inherit; }

:focus-visible{
  outline:2px solid var(--segnale);
  outline-offset:3px;
}

/* ---------- struttura ---------- */

.wrap{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{ padding-block:clamp(72px,9vw,140px); }
.section--tight{ padding-block:clamp(52px,6vw,90px); }

.rule{
  border:0;
  border-top:1px solid var(--linea);
  margin:0;
}

/* graticola cartografica: reticolo di rilievo */
.graticola{
  position:relative;
  background-image:
    repeating-linear-gradient(to right, var(--linea-fine) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(to bottom, var(--linea-fine) 0 1px, transparent 1px 88px);
}

/* ---------- tipografia ---------- */

.eyebrow{
  font-family:var(--dato);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--grafite);
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 22px;
}
.eyebrow::before{
  content:"";
  width:18px; height:1px;
  background:var(--grafite);
  flex:none;
}

.display{
  font-family:var(--display);
  font-variation-settings:"wdth" 118,"wght" 620;
  font-size:clamp(38px,6.4vw,88px);
  line-height:.98;
  letter-spacing:-.025em;
  margin:0;
  text-wrap:balance;
}
.display--sm{
  font-size:clamp(30px,3.9vw,52px);
  font-variation-settings:"wdth" 112,"wght" 600;
  line-height:1.04;
}
.display em{
  font-family:var(--testo);
  font-style:italic;
  font-weight:300;
  font-variation-settings:normal;
  letter-spacing:-.01em;
}

.lede{
  font-size:clamp(18px,1.5vw,22px);
  line-height:1.55;
  max-width:56ch;
  color:rgba(20,32,28,.82);
}

.prosa p{ max-width:62ch; }
.prosa p + p{ margin-top:1.1em; }

.dato{
  font-family:var(--dato);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--grafite);
}

/* ---------- bottoni ---------- */

.btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-family:var(--dato);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  padding:15px 26px;
  border:1px solid var(--inchiostro);
  background:transparent;
  color:var(--inchiostro);
  cursor:pointer;
  transition:background .25s, color .25s, transform .25s;
}
.btn:hover{ background:var(--inchiostro); color:var(--carta); }
.btn .arrow{ transition:transform .25s; }
.btn:hover .arrow{ transform:translateX(4px); }

.btn--pieno{ background:var(--inchiostro); color:var(--carta); }
.btn--pieno:hover{ background:var(--segnale); border-color:var(--segnale); color:#fff; }

.btn--chiaro{ border-color:rgba(231,234,228,.4); color:var(--carta); }
.btn--chiaro:hover{ background:var(--carta); color:var(--inchiostro); }

.link-t{
  font-family:var(--dato);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  border-bottom:1px solid var(--linea);
  padding-bottom:3px;
  transition:border-color .25s, color .25s;
}
.link-t:hover{ border-color:var(--segnale); color:var(--segnale); }

/* ---------- rail coordinate (firma) ---------- */

.rail{
  position:fixed;
  top:0; left:0; bottom:0;
  width:var(--rail);
  border-right:1px solid var(--linea);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  padding-block:26px;
  z-index:40;
  pointer-events:none;
  background:var(--carta);
}
.rail__mark{
  width:16px; height:16px;
  border:1px solid var(--inchiostro);
  border-radius:50%;
  position:relative;
  flex:none;
}
.rail__mark::after{
  content:"";
  position:absolute; inset:4px;
  background:var(--segnale);
  border-radius:50%;
}
.rail__coord{
  font-family:var(--dato);
  font-size:10px;
  letter-spacing:.18em;
  color:var(--grafite);
  writing-mode:vertical-rl;
  text-orientation:mixed;
}
.rail__prog{
  flex:1;
  width:1px;
  background:var(--linea);
  margin-block:20px;
  position:relative;
}
.rail__prog span{
  position:absolute;
  top:0; left:-2px;
  width:5px;
  background:var(--segnale);
  height:0;
}

/* ---------- header ---------- */

.head{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(231,234,228,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea);
}
.head__in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  height:74px;
}
.logo{
  display:flex;
  align-items:center;
  gap:11px;
  text-decoration:none;
  font-family:var(--display);
  font-variation-settings:"wdth" 108,"wght" 680;
  font-size:15px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.logo__x{ width:15px; height:15px; flex:none; }
.logo__x line{ stroke:var(--inchiostro); stroke-width:1.1; }
.logo__x circle{ stroke:var(--segnale); stroke-width:1.6; fill:none; }
.logo__img{ height:30px; width:auto; flex:none; }
.foot__marchio{ height:38px; width:auto; margin-bottom:22px; }

.nav{ display:flex; align-items:center; gap:clamp(18px,2.4vw,38px); }
.nav a{
  font-family:var(--dato);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--inchiostro);
  position:relative;
  padding-block:6px;
}
.nav a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:0; height:1px;
  background:var(--inchiostro);
  transition:width .28s;
}
.nav a:hover::after,
.nav a[aria-current="page"]::after{ width:100%; }
.nav a[aria-current="page"]{ color:var(--bosco); }

.head .btn{ padding:12px 20px; }

.burger{
  display:none;
  background:none;
  border:1px solid var(--linea);
  width:42px; height:42px;
  cursor:pointer;
  padding:0;
  align-items:center;
  justify-content:center;
}
.burger span{
  display:block;
  width:16px; height:1px;
  background:var(--inchiostro);
  position:relative;
}
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0;
  width:16px; height:1px; background:var(--inchiostro);
}
.burger span::before{ top:-5px; }
.burger span::after{ top:5px; }

/* ---------- hero ---------- */

.hero{
  padding-top:clamp(48px,6vw,84px);
  padding-bottom:clamp(48px,6vw,90px);
  overflow:hidden;
}
.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,5vw,72px);
  align-items:center;
}
.hero__cta{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:34px;
}
.hero__meta{
  display:flex;
  flex-wrap:wrap;
  gap:26px;
  margin-top:44px;
  padding-top:22px;
  border-top:1px solid var(--linea);
}
.hero__meta div strong{
  display:block;
  font-family:var(--display);
  font-variation-settings:"wdth" 112,"wght" 640;
  font-size:26px;
  line-height:1;
  margin-bottom:5px;
}

/* ---------- mappa-radar (firma) ---------- */

.mappa{ position:relative; }
.mappa svg{ width:100%; height:auto; overflow:visible; }
.mappa .anello{ fill:none; stroke:var(--linea); stroke-width:1; }
.mappa .assi{ stroke:var(--linea-fine); stroke-width:1; }
.mappa .centro-alone{ fill:rgba(27,68,216,.07); }
.mappa .centro{ fill:var(--segnale); }
.mappa .etichetta{
  font-family:var(--dato);
  font-size:11px;
  letter-spacing:.14em;
  fill:var(--grafite);
  text-transform:uppercase;
}

.punto{ cursor:pointer; }
.punto circle{
  fill:var(--carta);
  stroke:var(--bosco);
  stroke-width:1.4;
  transition:fill .2s, stroke .2s, r .2s;
}
.punto:hover circle,
.punto:focus circle{ fill:var(--bosco); }
.punto text{
  font-family:var(--dato);
  font-size:10.5px;
  letter-spacing:.06em;
  fill:var(--inchiostro);
  opacity:0;
  transition:opacity .2s;
  pointer-events:none;
}
.punto:hover text,
.punto:focus text{ opacity:1; }

.mappa__legenda{
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-top:20px;
  padding-top:14px;
  border-top:1px solid var(--linea);
}

/* ---------- elenco servizi ---------- */

.svc{
  display:grid;
  grid-template-columns:88px minmax(0,1fr) minmax(0,1.15fr) auto;
  gap:clamp(16px,3vw,40px);
  align-items:baseline;
  padding-block:clamp(26px,3vw,40px);
  border-top:1px solid var(--linea);
  text-decoration:none;
  transition:background .3s, padding-inline .3s;
}
.svc:last-of-type{ border-bottom:1px solid var(--linea); }
.svc:hover{ background:var(--carta-alta); }
.svc__q{
  font-family:var(--dato);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--grafite);
}
.svc__t{
  font-family:var(--display);
  font-variation-settings:"wdth" 112,"wght" 600;
  font-size:clamp(22px,2.6vw,34px);
  line-height:1.05;
  letter-spacing:-.02em;
  margin:0;
}
.svc__d{ margin:0; color:rgba(20,32,28,.72); font-size:16px; }
.svc__go{
  font-family:var(--dato);
  font-size:20px;
  color:var(--grafite);
  transition:transform .3s, color .3s;
}
.svc:hover .svc__go{ transform:translateX(6px); color:var(--segnale); }

/* ---------- griglia lavori ---------- */

.griglia{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:1px;
  background:var(--linea);
  border:1px solid var(--linea);
}
.caso{
  --pad:clamp(24px,2.6vw,34px);
  background:var(--carta);
  padding:var(--pad);
  text-decoration:none;
  display:flex;
  flex-direction:column;
  gap:15px;
  min-height:320px;
  transition:background .3s;
}
.caso:hover{ background:var(--carta-alta); }

.caso__fig{
  margin:calc(var(--pad) * -1) calc(var(--pad) * -1) 2px;
  aspect-ratio:16/11;
  overflow:hidden;
  background:var(--carta-alta);
  border-bottom:1px solid var(--linea);
}
.caso__fig img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.9);
  transition:transform .9s cubic-bezier(.2,.7,.3,1), filter .5s;
}
.caso:hover .caso__fig img{ transform:scale(1.045); filter:saturate(1); }

/* immagine dentro le figure editoriali */
.figura{ padding:0; overflow:hidden; }
.figura img{ width:100%; height:100%; object-fit:cover; }
.figura:has(img){ padding:0; }
.figura figcaption{ padding:24px; }
.figura:has(img) figcaption{ display:none; }
.caso__top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
}
.caso__cat{
  font-family:var(--dato);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--grafite);
  border:1px solid var(--linea);
  padding:5px 10px;
}
.caso__t{
  font-family:var(--display);
  font-variation-settings:"wdth" 110,"wght" 600;
  font-size:clamp(21px,2.1vw,27px);
  line-height:1.1;
  letter-spacing:-.02em;
  margin:0;
}
.caso__d{ margin:0; font-size:16px; color:rgba(20,32,28,.72); }
.caso__r{
  margin-top:auto;
  padding-top:18px;
  border-top:1px solid var(--linea);
  display:flex;
  align-items:baseline;
  gap:10px;
}
.caso__r b{
  font-family:var(--display);
  font-variation-settings:"wdth" 116,"wght" 660;
  font-size:34px;
  line-height:1;
  color:var(--bosco);
  letter-spacing:-.03em;
}
.caso__r span{
  font-family:var(--dato);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--grafite);
  max-width:20ch;
  line-height:1.35;
}

.filtri{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:34px;
}
.filtro{
  font-family:var(--dato);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:10px 18px;
  border:1px solid var(--linea);
  background:transparent;
  color:var(--grafite);
  cursor:pointer;
  transition:.22s;
}
.filtro:hover{ border-color:var(--inchiostro); color:var(--inchiostro); }
.filtro[aria-pressed="true"]{
  background:var(--inchiostro);
  border-color:var(--inchiostro);
  color:var(--carta);
}

/* ---------- fascia scura ---------- */

.banda{
  background:var(--bosco);
  color:var(--carta);
}
.banda .eyebrow{ color:rgba(231,234,228,.6); }
.banda .eyebrow::before{ background:rgba(231,234,228,.6); }
.banda .lede{ color:rgba(231,234,228,.82); }
.banda .rule{ border-color:rgba(231,234,228,.18); }

.numeri{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px;
  background:rgba(231,234,228,.18);
  border:1px solid rgba(231,234,228,.18);
  margin-top:52px;
}
.numero{
  background:var(--bosco);
  padding:clamp(24px,3vw,38px);
}
.numero b{
  display:block;
  font-family:var(--display);
  font-variation-settings:"wdth" 120,"wght" 660;
  font-size:clamp(44px,5vw,68px);
  line-height:.92;
  letter-spacing:-.04em;
  margin-bottom:12px;
}
.numero span{
  font-family:var(--dato);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(231,234,228,.7);
  line-height:1.5;
  display:block;
}

/* ---------- metodo (sequenza reale) ---------- */

.fasi{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(24px,3vw,44px);
}
.fase{ border-top:2px solid var(--inchiostro); padding-top:20px; }
.fase__q{
  font-family:var(--dato);
  font-size:11px;
  letter-spacing:.16em;
  color:var(--segnale);
  display:block;
  margin-bottom:14px;
}
.fase h3{
  font-family:var(--display);
  font-variation-settings:"wdth" 110,"wght" 600;
  font-size:22px;
  letter-spacing:-.02em;
  margin:0 0 10px;
}
.fase p{ margin:0; font-size:16px; color:rgba(20,32,28,.74); }

/* ---------- due colonne ---------- */

.due{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(28px,5vw,72px);
  align-items:start;
}
.due--pari{ grid-template-columns:repeat(2,minmax(0,1fr)); }

/* ---------- case study ---------- */

.cs-hero{ padding-block:clamp(48px,6vw,86px) clamp(36px,4vw,60px); }
.cs-scheda{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:24px;
  padding-block:26px;
  border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea);
}
.cs-scheda dt{
  font-family:var(--dato);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--grafite);
  margin-bottom:8px;
}
.cs-scheda dd{ margin:0; font-size:17px; }

.figura{
  background:var(--carta-alta);
  border:1px solid var(--linea);
  aspect-ratio:16/10;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  text-align:center;
}
.figura .dato{ max-width:34ch; }
.figura--alta{ aspect-ratio:4/5; }

.cita{
  font-family:var(--testo);
  font-style:italic;
  font-size:clamp(22px,2.7vw,34px);
  line-height:1.3;
  letter-spacing:-.015em;
  margin:0;
  max-width:20ch;
}
.cita + .dato{ margin-top:22px; }

/* ---------- form ---------- */

.form{
  border:1px solid var(--linea);
  background:var(--carta-alta);
  padding:clamp(24px,3.4vw,44px);
}
.step{ display:none; }
.step[data-attivo]{ display:block; }
.step__testa{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  margin-bottom:26px;
  padding-bottom:14px;
  border-bottom:1px solid var(--linea);
}
.step h2{
  font-family:var(--display);
  font-variation-settings:"wdth" 110,"wght" 600;
  font-size:clamp(20px,2.2vw,27px);
  letter-spacing:-.02em;
  margin:0;
}

.scelte{ display:grid; gap:10px; }
.scelta{
  display:flex;
  align-items:center;
  gap:14px;
  border:1px solid var(--linea);
  background:var(--carta);
  padding:16px 18px;
  cursor:pointer;
  transition:border-color .2s, background .2s;
}
.scelta:hover{ border-color:var(--inchiostro); }
.scelta input{ accent-color:var(--segnale); width:16px; height:16px; flex:none; }
.scelta span{ font-size:16px; }
.scelta:has(input:checked){ border-color:var(--segnale); background:#fff; }

.campo{ display:block; margin-bottom:18px; }
.campo span{
  display:block;
  font-family:var(--dato);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--grafite);
  margin-bottom:8px;
}
.campo input,.campo textarea{
  width:100%;
  font-family:var(--testo);
  font-size:17px;
  color:var(--inchiostro);
  background:var(--carta);
  border:1px solid var(--linea);
  padding:13px 15px;
}
.campo input:focus,.campo textarea:focus{ outline:2px solid var(--segnale); outline-offset:0; border-color:transparent; }
.campo textarea{ min-height:120px; resize:vertical; }

.form__nav{
  display:flex;
  justify-content:space-between;
  gap:14px;
  margin-top:28px;
}
.esito{ display:none; text-align:center; padding-block:40px; }
.esito[data-attivo]{ display:block; }

/* ---------- footer ---------- */

.foot{
  background:var(--inchiostro);
  color:var(--carta);
  padding-block:clamp(56px,6vw,88px) 32px;
}
.foot a{ color:var(--carta); text-decoration:none; }
.foot__grid{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,.8fr));
  gap:clamp(26px,4vw,56px);
}
.foot h4{
  font-family:var(--dato);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(231,234,228,.5);
  margin:0 0 18px;
  font-weight:400;
}
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.foot ul a{ font-size:16px; border-bottom:1px solid transparent; }
.foot ul a:hover{ border-color:rgba(231,234,228,.5); }
.foot__claim{
  font-family:var(--display);
  font-variation-settings:"wdth" 116,"wght" 600;
  font-size:clamp(26px,3.4vw,44px);
  line-height:1.02;
  letter-spacing:-.03em;
  margin:0 0 22px;
  max-width:14ch;
}
.foot__base{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:14px;
  margin-top:clamp(44px,5vw,72px);
  padding-top:22px;
  border-top:1px solid rgba(231,234,228,.18);
}
.foot__base .dato{ color:rgba(231,234,228,.5); }

/* ---------- servizi in profondità: nuvola di punti + cartelle 3D ---------- */

/* ---------- giostra: bobina di schermi rotondi ---------- */

.reel{
  position:relative;
  height:320vh;
  background:var(--inchiostro);
  color:var(--carta);
}
.reel__pin{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
  display:grid;
  place-items:center;
}
.reel__testa{
  position:absolute;
  top:clamp(24px,5vh,52px);
  left:0; right:0;
  padding-inline:var(--gutter);
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  pointer-events:none;
  z-index:6;
}
.reel__testa h2{
  font-family:var(--display);
  font-variation-settings:"wdth" 114,"wght" 600;
  font-size:clamp(22px,2.8vw,40px);
  line-height:1;
  letter-spacing:-.03em;
  margin:0;
}
.reel .eyebrow{ color:rgba(231,234,228,.55); margin-bottom:14px; }
.reel .eyebrow::before{ background:rgba(231,234,228,.55); }
.reel__conta{
  font-family:var(--dato);
  font-size:12px;
  letter-spacing:.16em;
  color:var(--segnale);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.giostra{
  position:relative;
  width:min(94vw,760px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  cursor:grab;
  touch-action:pan-y;
  --d:clamp(92px,12.4vw,158px);
  perspective:1000px;
  perspective-origin:50% 50%;
}
.giostra:active{ cursor:grabbing; }

/* mondo: riceve l'inclinazione dal puntatore, tiene la profondità dei figli */
.giostra__mondo{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
}

/* pista: il disco della bobina, coricato in prospettiva */
.pista{
  position:absolute;
  inset:9%;
  border-radius:50%;
  border:1px solid rgba(231,234,228,.16);
  pointer-events:none;
  transform-style:preserve-3d;
  transform:rotateX(42deg);
}
.pista::before{
  content:"";
  position:absolute;
  inset:-14px;
  border-radius:50%;
  background:repeating-conic-gradient(
    from 0deg,
    rgba(231,234,228,.22) 0deg 1.1deg,
    transparent 1.1deg 6deg);
  -webkit-mask:radial-gradient(circle, transparent calc(50% - 8px), #000 calc(50% - 8px), #000 50%, transparent 50%);
  mask:radial-gradient(circle, transparent calc(50% - 8px), #000 calc(50% - 8px), #000 50%, transparent 50%);
  animation:gira 74s linear infinite;
}
@keyframes gira{ to{ transform:rotate(360deg); } }

.anello{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
}

.schermo{
  position:absolute;
  left:50%; top:50%;
  width:var(--d);
  height:var(--d);
  margin:0;
  border-radius:50%;
  text-decoration:none;
  color:var(--carta);
  display:grid;
  place-items:center;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  will-change:transform,opacity;
}
.schermo__vetro{
  position:absolute;
  inset:0;
  border-radius:50%;
  overflow:hidden;
  border:1px solid rgba(231,234,228,.22);
  background:
    radial-gradient(120% 120% at 34% 24%, rgba(35,80,63,.75), rgba(20,32,28,.96) 68%),
    var(--inchiostro);
  box-shadow:inset 0 0 30px rgba(0,0,0,.6);
  transition:border-color .3s, box-shadow .3s;
}
.schermo__vetro img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.5;
  filter:grayscale(.4) contrast(1.04);
  transition:opacity .45s, filter .45s, transform .9s cubic-bezier(.2,.7,.3,1);
}
.schermo.attivo .schermo__vetro img{ opacity:.88; filter:none; transform:scale(1.05); }
.schermo__vetro::after{
  content:"";
  position:absolute; inset:0;
  background:repeating-linear-gradient(
    to bottom,
    rgba(231,234,228,.06) 0 1px,
    transparent 1px 4px);
  opacity:.6;
}
.schermo__play{
  position:relative;
  z-index:1;
  font-size:12px;
  width:34px; height:34px;
  border-radius:50%;
  border:1px solid rgba(231,234,228,.45);
  display:grid;
  place-items:center;
  transition:background .3s, color .3s, border-color .3s, transform .3s;
}
.schermo__n{
  position:absolute;
  z-index:1;
  bottom:12%;
  font-family:var(--dato);
  font-size:9px;
  letter-spacing:.16em;
  color:rgba(231,234,228,.55);
}
.schermo.attivo .schermo__vetro{
  border-color:var(--segnale);
  box-shadow:inset 0 0 34px rgba(0,0,0,.5), 0 0 0 5px rgba(78,123,255,.12), 0 0 44px rgba(78,123,255,.28);
}
.schermo.attivo .schermo__play,
.schermo:hover .schermo__play{
  background:var(--segnale);
  border-color:var(--segnale);
  color:#fff;
  transform:scale(1.08);
}

/* mozzo: l'etichetta al centro della bobina */
.mozzo{
  position:relative;
  z-index:5;
  text-align:center;
  max-width:min(44%,300px);
  pointer-events:none;
}
.mozzo__cat{
  font-family:var(--dato);
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--segnale);
}
.mozzo__t{
  font-family:var(--display);
  font-variation-settings:"wdth" 112,"wght" 600;
  font-size:clamp(19px,2.3vw,30px);
  line-height:1.06;
  letter-spacing:-.025em;
  margin:12px 0 10px;
  text-wrap:balance;
}
.mozzo__dur{
  font-family:var(--dato);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--grafite);
}
.mozzo__aiuto{
  display:block;
  margin-top:22px;
  padding-top:14px;
  border-top:1px solid rgba(231,234,228,.16);
  font-family:var(--dato);
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(231,234,228,.4);
}

/* ---------- richiamo immersivo ---------- */

.immersivo{
  background:var(--inchiostro);
  color:var(--carta);
  border-top:1px solid rgba(231,234,228,.14);
}
.immersivo__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,5vw,72px);
  align-items:center;
}
.immersivo h2{
  font-family:var(--display);
  font-variation-settings:"wdth" 116,"wght" 620;
  font-size:clamp(30px,4.4vw,58px);
  line-height:1.01;
  letter-spacing:-.035em;
  margin:0 0 22px;
  text-wrap:balance;
}
.immersivo .eyebrow{ color:rgba(231,234,228,.55); }
.immersivo .eyebrow::before{ background:rgba(231,234,228,.55); }
.immersivo p{ color:rgba(231,234,228,.78); max-width:52ch; }
.sezione-mini{
  border:1px solid rgba(231,234,228,.18);
  display:grid;
  grid-template-rows:repeat(7,1fr);
  aspect-ratio:4/3;
  overflow:hidden;
}
.sezione-mini div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  font-family:var(--dato);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(231,234,228,.72);
  border-bottom:1px solid rgba(0,0,0,.35);
}
.sezione-mini div:last-child{ border-bottom:0; }

/* ---------- animazioni ---------- */

.rivela{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1);
}
.rivela.dentro{ opacity:1; transform:none; }
.rivela[data-r="1"]{ transition-delay:.08s; }
.rivela[data-r="2"]{ transition-delay:.16s; }
.rivela[data-r="3"]{ transition-delay:.24s; }
.rivela[data-r="4"]{ transition-delay:.32s; }

.riga{ display:block; overflow:hidden; }
.riga > i{
  display:block;
  font-style:inherit;
  transform:translateY(105%);
  animation:sale .95s cubic-bezier(.16,.84,.3,1) forwards;
}
.riga:nth-child(2) > i{ animation-delay:.09s; }
.riga:nth-child(3) > i{ animation-delay:.18s; }
@keyframes sale{ to{ transform:none; } }

.disegna{
  stroke-dasharray:var(--len,1400);
  stroke-dashoffset:var(--len,1400);
  animation:traccia 1.6s ease-out forwards;
}
.disegna--2{ animation-delay:.15s; }
.disegna--3{ animation-delay:.3s; }
.disegna--4{ animation-delay:.45s; }
@keyframes traccia{ to{ stroke-dashoffset:0; } }

.pulsa{ transform-origin:center; animation:pulsa 3.4s ease-in-out infinite; }
@keyframes pulsa{
  0%,100%{ opacity:.5; transform:scale(1); }
  50%{ opacity:.14; transform:scale(1.85); }
}

/* ---------- responsive ---------- */

@media (max-width:1080px){
  :root{ --rail:0px; }
  .immersivo__grid{ grid-template-columns:1fr; }
  .rail{ display:none; }
  .hero__grid{ grid-template-columns:1fr; }
  .due,.due--pari{ grid-template-columns:1fr; }
  .foot__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:860px){
  .nav{
    position:fixed;
    inset:74px 0 auto 0;
    background:var(--carta);
    border-bottom:1px solid var(--linea);
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:8px var(--gutter) 26px;
    display:none;
  }
  .nav[data-aperto]{ display:flex; }
  .nav a{ padding-block:15px; width:100%; border-bottom:1px solid var(--linea-fine); font-size:14px; }
  .burger{ display:flex; }
  .head .btn{ display:none; }
  .svc{ grid-template-columns:1fr auto; gap:8px 16px; }
  .svc__q{ grid-column:1/-1; }
  .svc__d{ grid-column:1/-1; margin-top:4px; }
  .cita{ max-width:none; }
  .reel{ height:260vh; }
  .giostra{ --d:clamp(70px,19vw,108px); width:min(96vw,520px); }
  .mozzo{ max-width:54%; }
  .mozzo__aiuto{ display:none; }
}

@media (max-width:520px){
  .foot__grid{ grid-template-columns:1fr; }
  .hero__meta{ gap:20px; }
}

@media (min-width:1081px){
  .head, .site{ padding-left:var(--rail); }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .rivela{ opacity:1; transform:none; }
  .riga > i{ transform:none; }
  .disegna{ stroke-dashoffset:0; }
}

/* ---------- committenze: per chi lavoriamo ---------- */

.comm{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  background:var(--linea);
  border-block:1px solid var(--linea);
}

.scheda{
  position:relative;
  background:var(--carta);
  padding:clamp(26px,2.6vw,38px) clamp(20px,2vw,30px) clamp(24px,2.4vw,34px);
  display:flex;
  flex-direction:column;
  gap:16px;
  transition:background .35s ease;
}
.scheda::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:2px;
  background:var(--segnale);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .55s cubic-bezier(.2,.7,.3,1);
}
.scheda:hover{ background:var(--carta-alta); }
.scheda:hover::before{ transform:scaleX(1); }

.scheda__testa{
  display:flex;
  align-items:baseline;
  gap:12px;
  font-family:var(--dato);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.scheda__q{ color:var(--grafite); transition:color .35s ease; }
.scheda:hover .scheda__q{ color:var(--segnale); }
.scheda__cat{ color:var(--bosco); }

.scheda__t{
  font-family:var(--display);
  font-variation-settings:"wdth" 112,"wght" 600;
  font-size:clamp(19px,1.5vw,23px);
  line-height:1.14;
  letter-spacing:-.02em;
  margin:0;
}

.scheda__p{
  font-family:var(--testo);
  font-style:italic;
  font-weight:300;
  font-size:clamp(15.5px,1.2vw,17.5px);
  line-height:1.48;
  color:rgba(20,32,28,.74);
  margin:0;
}

.scheda__voci{
  list-style:none;
  margin:auto 0 0;
  padding:0;
}
.scheda__voci li{
  display:flex;
  align-items:baseline;
  gap:11px;
  padding:9px 0;
  border-top:1px solid var(--linea-fine);
  font-size:14.5px;
  line-height:1.35;
  color:rgba(20,32,28,.8);
}
.scheda__voci li::before{
  content:"";
  width:9px; height:1px;
  flex:none;
  background:var(--grafite);
  transform:translateY(-4px);
}

.scheda__chi{
  margin:0;
  padding-top:14px;
  border-top:1px solid var(--linea);
  font-family:var(--dato);
  font-size:11.5px;
  letter-spacing:.05em;
  line-height:1.65;
  color:var(--grafite);
}
.scheda__chi b{ color:var(--inchiostro); font-weight:500; }

@media (max-width:1080px){
  .comm{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
  .comm{ grid-template-columns:1fr; }
  .scheda__t{ font-size:21px; }
}

/* ---------- mestieri: cinque scene che si dimostrano ---------- */

.mestieri{
  position:relative;
  height:540vh;
  background:var(--carta);
}
.mestieri__pin{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding:clamp(18px,4vh,42px) var(--gutter) clamp(16px,3vh,32px);
  background-image:
    repeating-linear-gradient(to right, var(--linea-fine) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(to bottom, var(--linea-fine) 0 1px, transparent 1px 88px);
}

.mestieri__testa{
  flex:none;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
}
.mestieri__testa h2{
  font-family:var(--display);
  font-variation-settings:"wdth" 114,"wght" 600;
  font-size:clamp(22px,2.8vw,40px);
  line-height:1;
  letter-spacing:-.03em;
  margin:0;
}
.mestieri__intro{
  margin:0;
  max-width:40ch;
  font-size:15.5px;
  line-height:1.5;
  color:rgba(20,32,28,.7);
}

/* --- passi: indice dei cinque mestieri --- */

.passi{
  flex:none;
  list-style:none;
  margin:clamp(16px,2.8vh,28px) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  border-top:1px solid var(--linea);
}
.passo{ position:relative; }
.passo__b{
  position:absolute;
  top:-1px; left:0;
  width:100%; height:1px;
  background:var(--segnale);
  transform:scaleX(0);
  transform-origin:left;
}
.passo button{
  width:100%;
  display:flex;
  align-items:baseline;
  gap:9px;
  padding:13px 12px 13px 0;
  background:none;
  border:0;
  cursor:pointer;
  text-align:left;
  font-family:var(--dato);
  font-size:11px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--grafite);
  transition:color .3s ease;
}
.passo button:hover{ color:var(--inchiostro); }
.passo button span{
  color:rgba(20,32,28,.3);
  font-variant-numeric:tabular-nums;
  transition:color .3s ease;
}
.passo.attivo button{ color:var(--inchiostro); }
.passo.attivo button span{ color:var(--segnale); }

/* --- vetrina: gli atti --- */

.vetrina{
  position:relative;
  flex:1;
  min-height:0;
  margin-top:clamp(12px,2.2vh,24px);
}
.atto{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);
  gap:clamp(22px,4vw,64px);
  align-items:center;
  opacity:0;
  visibility:hidden;
  transform:translateY(24px);
  transition:opacity .5s ease, transform .7s cubic-bezier(.2,.7,.3,1), visibility .5s;
}
.atto.attiva{ opacity:1; visibility:visible; transform:none; }

.atto__testo > *{
  opacity:0;
  transform:translateY(15px);
  transition:opacity .5s ease, transform .65s cubic-bezier(.2,.7,.3,1);
}
.atto.attiva .atto__testo > *{ opacity:1; transform:none; }
.atto.attiva .atto__testo > *:nth-child(1){ transition-delay:.08s; }
.atto.attiva .atto__testo > *:nth-child(2){ transition-delay:.16s; }
.atto.attiva .atto__testo > *:nth-child(3){ transition-delay:.24s; }
.atto.attiva .atto__testo > *:nth-child(4){ transition-delay:.32s; }

.atto__q{
  font-family:var(--dato);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--segnale);
  margin:0 0 14px;
}
.atto__t{
  font-family:var(--display);
  font-variation-settings:"wdth" 114,"wght" 620;
  font-size:clamp(28px,3.8vw,54px);
  line-height:1;
  letter-spacing:-.032em;
  margin:0 0 18px;
}
.atto__d{
  font-size:clamp(14.5px,1.1vw,16.5px);
  line-height:1.55;
  color:rgba(20,32,28,.76);
  max-width:36ch;
  margin:0 0 24px;
}

.atto__scena{
  position:relative;
  height:100%;
  min-height:0;
  display:grid;
  place-items:center;
  overflow:hidden;
}

/* corpo comune delle scene */
.d{
  position:relative;
  width:100%;
  max-width:min(100%,600px);
  max-height:100%;
}
.d__eti{
  display:block;
  margin-top:10px;
  font-family:var(--dato);
  font-size:9px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--grafite);
  text-align:right;
}

/* ===== 01 · siti web ===== */

.d-web .brow{
  display:flex;
  align-items:center;
  gap:11px;
  padding:9px 12px;
  background:var(--carta-alta);
  border:1px solid var(--linea);
  border-bottom:0;
}
.brow__punti{ display:flex; gap:5px; flex:none; }
.brow__punti i{ width:7px; height:7px; border-radius:50%; background:var(--linea); }
.brow__url{
  flex:1;
  display:flex;
  align-items:center;
  padding:5px 9px;
  background:var(--carta);
  border:1px solid var(--linea-fine);
  font-family:var(--dato);
  font-size:10px;
  letter-spacing:.05em;
  color:var(--grafite);
}
.brow__cur{
  width:1px; height:10px;
  margin-left:2px;
  background:var(--segnale);
  animation:lampeggia 1.1s steps(2) infinite;
}
.brow__cart{
  flex:none;
  width:24px; height:24px;
  display:grid;
  place-items:center;
  border:1px solid var(--inchiostro);
  border-radius:50%;
  font-family:var(--dato);
  font-size:10px;
  font-variant-numeric:tabular-nums;
}
.brow__corpo{
  position:relative;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:9px 10px;
  align-content:start;
  padding:16px;
  min-height:clamp(176px,25vh,244px);
  background:var(--carta-alta);
  border:1px solid var(--linea);
}
.bl{
  height:8px;
  background:var(--linea);
  transform-origin:left;
  animation:blSale .7s cubic-bezier(.2,.7,.3,1) both;
}
.bl--1{ grid-column:span 4; animation-delay:.15s; }
.bl--2{ grid-column:span 6; height:5px; animation-delay:.24s; }
.bl--3{ grid-column:span 3; height:5px; animation-delay:.31s; }

.prod{
  grid-column:span 3;
  display:grid;
  gap:7px;
  padding:11px;
  background:var(--carta);
  border:1px solid var(--linea);
  animation:entraSu .8s .42s cubic-bezier(.2,.7,.3,1) both;
}
.prod__img{
  height:clamp(56px,8vh,78px);
  background:linear-gradient(140deg, var(--bosco), var(--bosco-scuro));
}
.prod__r{ height:5px; background:var(--linea); }
.prod .r1{ width:72%; }
.prod .r2{ width:46%; }
.prod__btn{
  margin-top:3px;
  padding:8px;
  text-align:center;
  background:var(--inchiostro);
  color:var(--carta);
  font-family:var(--dato);
  font-size:8.5px;
  letter-spacing:.11em;
  text-transform:uppercase;
  animation:battito 3.2s 1.3s infinite;
}
.curva{
  grid-column:span 3;
  align-self:end;
  width:100%;
  height:clamp(52px,7vh,68px);
}
.curva__l{
  fill:none;
  stroke:var(--segnale);
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:300;
  stroke-dashoffset:300;
  animation:traccia 1.7s .85s ease-out forwards;
}
.d-web .d__eti{
  position:absolute;
  right:14px; bottom:10px;
  margin:0;
}

/* ===== 02 · social ===== */

.d-social{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:clamp(14px,2.4vh,26px) clamp(18px,3vw,44px);
  transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d;
}
.d-social .tel{ grid-row:1 / span 2; }
.d-social .sett{ align-self:end; }
.d-social .d__eti{ align-self:start; margin:0; text-align:left; }

.tel{
  position:relative;
  width:clamp(142px,14.5vw,190px);
  aspect-ratio:9 / 18.2;
  padding:8px 7px;
  border:1px solid var(--inchiostro);
  border-radius:26px;
  background:var(--carta-alta);
  box-shadow:0 34px 64px -36px rgba(20,32,28,.6);
  transform-origin:64% 100%;
  animation:telEntra 1.15s cubic-bezier(.16,.84,.3,1) both;
}
.tel__tacca{
  position:absolute;
  top:8px; left:50%;
  z-index:2;
  width:38%; height:11px;
  background:var(--inchiostro);
  border-radius:0 0 9px 9px;
  transform:translateX(-50%);
}
.tel__vetro{
  position:relative;
  height:100%;
  overflow:hidden;
  border-radius:19px;
  background:var(--carta);
}
.feed{
  display:grid;
  gap:7px;
  padding:22px 6px 6px;
  animation:scorre 12s linear infinite;
}
.pst{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:4px 6px;
  align-items:center;
}
.pst__c{ width:13px; height:13px; border-radius:50%; background:var(--bosco); }
.pst__n{ height:4px; background:var(--linea); }
.pst__img{ grid-column:1 / -1; height:clamp(56px,8vh,72px); }
.pst .i1{ background:linear-gradient(140deg,#23503F,#16332A); }
.pst .i2{ background:linear-gradient(140deg,#6B7670,#14201C); }
.pst .i3{ background:linear-gradient(140deg,#1B44D8,#14201C); }
.pst__az{
  grid-column:1 / -1;
  display:flex;
  gap:8px;
  font-size:8px;
  color:var(--grafite);
}
.cuo{
  position:absolute;
  bottom:15%;
  font-size:15px;
  color:var(--segnale);
  opacity:0;
  pointer-events:none;
  animation:cuore 3.6s ease-out infinite;
}
.cuo--1{ right:17%; }
.cuo--2{ right:33%; animation-delay:1.2s; }
.cuo--3{ right:25%; font-size:11px; animation-delay:2.4s; }

.sett{
  display:flex;
  align-items:flex-end;
  gap:6px;
  height:clamp(66px,10vh,104px);
}
.sett__b{
  flex:1;
  height:var(--h);
  background:var(--linea);
  transform:scaleY(0);
  transform-origin:bottom;
  animation:barra .75s cubic-bezier(.2,.7,.3,1) both;
}
.sett__b:nth-child(1){ animation-delay:.30s; }
.sett__b:nth-child(2){ animation-delay:.38s; }
.sett__b:nth-child(3){ animation-delay:.46s; }
.sett__b:nth-child(4){ animation-delay:.54s; }
.sett__b:nth-child(5){ animation-delay:.62s; }
.sett__b:nth-child(6){ animation-delay:.70s; }
.sett__b:nth-child(7){ animation-delay:.78s; background:var(--segnale); }

/* ===== 03 · video ===== */

.d-video{ overflow:hidden; }
.mir{
  position:relative;
  aspect-ratio:16 / 9;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid var(--inchiostro);
  background:radial-gradient(120% 120% at 38% 28%, #23503F, #14201C 68%);
}
.mir::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(231,234,228,.05) 0 1px, transparent 1px 4px);
}
.mir__a{
  position:absolute;
  width:19px; height:19px;
  border:1px solid rgba(231,234,228,.55);
  animation:angolo 3.6s ease-in-out infinite;
}
.mir__a--tl{ top:12px; left:12px; border-right:0; border-bottom:0; --dx:-1; --dy:-1; }
.mir__a--tr{ top:12px; right:12px; border-left:0; border-bottom:0; --dx:1; --dy:-1; }
.mir__a--bl{ bottom:12px; left:12px; border-right:0; border-top:0; --dx:-1; --dy:1; }
.mir__a--br{ bottom:12px; right:12px; border-left:0; border-top:0; --dx:1; --dy:1; }
.mir__rec{
  position:absolute;
  top:14px; left:44px;
  display:flex;
  align-items:center;
  gap:6px;
  font-family:var(--dato);
  font-size:9px;
  letter-spacing:.2em;
  color:rgba(231,234,228,.86);
}
.mir__rec i{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--segnale);
  animation:lampeggia 1.4s steps(2) infinite;
}
.mir__tc,
.mir__f{
  position:absolute;
  font-family:var(--dato);
  font-size:9px;
  letter-spacing:.14em;
  color:rgba(231,234,228,.7);
  font-variant-numeric:tabular-nums;
}
.mir__tc{ top:14px; right:44px; }
.mir__f{ bottom:14px; left:44px; letter-spacing:.1em; }
.diaf{
  width:min(42%,180px);
  height:auto;
  overflow:visible;
}
.diaf__g{
  transform-origin:0 0;
  animation:iride 5.6s ease-in-out infinite;
}
.diaf__g path{
  fill:rgba(231,234,228,.09);
  stroke:rgba(231,234,228,.4);
  stroke-width:1;
}
.diaf__o{
  fill:none;
  stroke:rgba(231,234,228,.5);
  stroke-width:1.4;
}
.mir__fuoco{
  position:absolute;
  width:66px; height:66px;
  border:1px solid var(--segnale);
  pointer-events:none;
  animation:fuoco 5.2s ease-in-out infinite;
}
.strip{
  display:flex;
  gap:6px;
  width:max-content;
  margin-top:10px;
  animation:nastro 17s linear infinite;
}
.strip span{
  flex:none;
  width:62px;
  aspect-ratio:16 / 10;
  border:1px solid var(--linea);
}
.strip span:nth-child(5n+1){ background:linear-gradient(140deg,#23503F,#16332A); }
.strip span:nth-child(5n+2){ background:linear-gradient(140deg,#6B7670,#14201C); }
.strip span:nth-child(5n+3){ background:linear-gradient(140deg,#14201C,#23503F); }
.strip span:nth-child(5n+4){ background:linear-gradient(140deg,#1B44D8,#14201C); }
.strip span:nth-child(5n+5){ background:linear-gradient(140deg,#16332A,#6B7670); }

/* ===== 04 · virtual tour ===== */

.pano{
  position:relative;
  aspect-ratio:16 / 9;
  overflow:hidden;
  border:1px solid var(--inchiostro);
  cursor:grab;
  touch-action:pan-y;
}
.pano:active{ cursor:grabbing; }
.pano__mondo{ position:absolute; inset:0; }
.pano__svg{ width:100%; height:100%; display:block; }
.pn-cielo{ fill:var(--carta-alta); }
.pn-l3{ fill:rgba(35,80,63,.34); transform:translateX(calc(var(--p,0) * .34px)); }
.pn-l2{ fill:rgba(35,80,63,.62); transform:translateX(calc(var(--p,0) * .66px)); }
.pn-l1{ fill:var(--bosco-scuro); transform:translateX(calc(var(--p,0) * 1px)); }
.pn-borgo rect,
.pn-borgo path{ fill:var(--inchiostro); }

.hot{
  position:absolute;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  transform:translate(-50%,-50%) translateX(calc(var(--p,0) * .82px));
}
.hot--1{ left:26%; top:56%; }
.hot--2{ left:47%; top:64%; }
.hot--3{ left:71%; top:50%; }
.hot i{
  width:11px; height:11px;
  border-radius:50%;
  background:var(--segnale);
  box-shadow:0 0 0 0 rgba(27,68,216,.5);
  animation:onda 2.8s ease-out infinite;
}
.hot--2 i{ animation-delay:.9s; }
.hot--3 i{ animation-delay:1.8s; }
.hot b{
  padding:3px 7px;
  background:rgba(20,32,28,.74);
  color:var(--carta);
  font-family:var(--dato);
  font-size:8.5px;
  font-weight:400;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .3s ease, transform .3s ease;
}
.hot:hover b,
.pano:hover .hot b{ opacity:1; transform:none; }

.buss{
  position:absolute;
  right:13px; bottom:13px;
  width:46px; height:46px;
}
.buss svg{ width:100%; height:100%; overflow:visible; }
.buss__c{ fill:rgba(20,32,28,.52); stroke:rgba(231,234,228,.38); stroke-width:1; }
.buss__g{
  transform-origin:0 0;
  rotate:calc(var(--a,0) * 1deg);
}
.buss__g line{ stroke:rgba(231,234,228,.5); stroke-width:1.4; }
.buss__n{ fill:var(--segnale); }
.pano__aiuto{
  position:absolute;
  left:13px; bottom:13px;
  font-family:var(--dato);
  font-size:8.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(231,234,228,.62);
  transition:opacity .5s ease;
}
.pano[data-toccato] .pano__aiuto{ opacity:0; }

/* ===== 05 · identità ===== */

.d-brand{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:clamp(18px,3.2vw,48px);
}
.d-brand .d__eti{ grid-column:1 / -1; margin-top:4px; }
.cost{
  position:relative;
  width:clamp(150px,17vw,230px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
}
.cost__svg{ position:absolute; inset:0; width:100%; height:100%; }
.cost__g > *{
  fill:none;
  stroke:var(--linea);
  stroke-width:1;
  stroke-dasharray:var(--len,700);
  stroke-dashoffset:var(--len,700);
  animation:traccia 1.5s ease-out forwards;
}
.cost__g > *:nth-child(1){ animation-delay:.10s; }
.cost__g > *:nth-child(2){ animation-delay:.18s; }
.cost__g > *:nth-child(3){ animation-delay:.26s; }
.cost__g > *:nth-child(4){ animation-delay:.34s; }
.cost__g > *:nth-child(5){ animation-delay:.40s; }
.cost__g > *:nth-child(6){ animation-delay:.46s; stroke:rgba(27,68,216,.34); }
.cost__g > *:nth-child(7){ animation-delay:.54s; }
.cost__g > *:nth-child(8){ animation-delay:.60s; }
.cost__marchio{
  position:relative;
  width:64%;
  height:auto;
  animation:marchioEntra .9s 1.05s cubic-bezier(.2,.7,.3,1) both;
}
.spec__p{
  display:block;
  font-family:var(--display);
  font-size:clamp(42px,6.4vw,96px);
  line-height:.88;
  letter-spacing:-.04em;
  color:var(--inchiostro);
  animation:variabile 7.5s ease-in-out infinite;
}
.tav{
  display:flex;
  margin-top:clamp(14px,2.4vh,26px);
  border:1px solid var(--linea);
}
.tav i{
  flex:1;
  height:clamp(28px,4.2vh,42px);
  background:var(--c);
  transform:scaleY(0);
  transform-origin:bottom;
  animation:barra .6s cubic-bezier(.2,.7,.3,1) both;
}
.tav i:nth-child(1){ animation-delay:1.25s; }
.tav i:nth-child(2){ animation-delay:1.34s; }
.tav i:nth-child(3){ animation-delay:1.43s; }
.tav i:nth-child(4){ animation-delay:1.52s; }
.tav i:nth-child(5){ animation-delay:1.61s; }

/* il moto parte solo quando l'atto è in scena.
   Va dopo le scene: la scorciatoia `animation` rimette in marcia lo stato. */
.atto .d, .atto .d *, .atto .d *::before, .atto .d *::after{ animation-play-state:paused; }
.atto.attiva .d, .atto.attiva .d *,
.atto.attiva .d *::before, .atto.attiva .d *::after{ animation-play-state:running; }

/* ===== fotogrammi comuni ===== */

@keyframes lampeggia{ 0%,100%{ opacity:1 } 50%{ opacity:0 } }
@keyframes blSale{ from{ transform:scaleX(0); opacity:0 } to{ transform:none; opacity:1 } }
@keyframes entraSu{ from{ transform:translateY(18px); opacity:0 } to{ transform:none; opacity:1 } }
@keyframes barra{ to{ transform:none } }
@keyframes battito{
  0%,86%,100%{ background:var(--inchiostro); transform:none }
  91%{ background:var(--segnale); transform:scale(1.035) }
}
@keyframes telEntra{
  from{ transform:translate(58px,86px) rotate(10deg); opacity:0 }
  to{ transform:none; opacity:1 }
}
@keyframes scorre{ from{ transform:none } to{ transform:translateY(-50%) } }
@keyframes cuore{
  0%{ opacity:0; transform:translateY(0) scale(.6) }
  14%{ opacity:1; transform:translateY(-10px) scale(1.15) }
  100%{ opacity:0; transform:translateY(-96px) scale(.8) }
}
@keyframes angolo{
  0%,100%{ transform:translate(0,0) }
  50%{ transform:translate(calc(var(--dx,0) * 4px), calc(var(--dy,0) * 4px)) }
}
@keyframes iride{ 0%,100%{ rotate:0deg } 50%{ rotate:34deg } }
@keyframes fuoco{
  0%,100%{ transform:translate(-54px,-28px) scale(1); opacity:.32 }
  38%,58%{ transform:translate(46px,24px) scale(.7); opacity:.9 }
}
@keyframes nastro{ to{ transform:translateX(-50%) } }
@keyframes marchioEntra{ from{ opacity:0; transform:scale(.86) } to{ opacity:1; transform:none } }
@keyframes variabile{
  0%,100%{ font-variation-settings:"wdth" 66,"wght" 250 }
  50%{ font-variation-settings:"wdth" 122,"wght" 870 }
}

/* ===== scale ridotte ===== */

@media (max-width:1000px){
  .mestieri{ height:auto; }
  .mestieri__pin{
    position:static;
    height:auto;
    overflow:visible;
    display:block;
    padding-block:clamp(56px,8vw,92px);
  }
  .mestieri__testa{ flex-direction:column; align-items:flex-start; gap:16px; }
  .passi{ display:none; }
  .vetrina{
    position:static;
    display:grid;
    gap:clamp(48px,9vw,84px);
    margin-top:clamp(34px,6vw,52px);
  }
  .atto{
    position:static;
    grid-template-columns:1fr;
    gap:24px;
    opacity:1;
    visibility:visible;
    transform:none;
  }
  .atto__testo > *{ opacity:1; transform:none; }
  .atto__scena{ height:auto; overflow:visible; }
  .d{ max-width:none; max-height:none; }
  .d-social{ transform:none; }
  .d-brand{ grid-template-columns:1fr; justify-items:start; }
}

@media (max-width:520px){
  .d-social{ grid-template-columns:1fr; }
  .d-social .tel{ grid-row:auto; justify-self:center; }
}

@media (prefers-reduced-motion:reduce){
  .atto{ opacity:1; visibility:visible; transform:none; }
  .atto__testo > *{ opacity:1; transform:none; }
  .cost__g > *{ stroke-dashoffset:0; }
  .curva__l{ stroke-dashoffset:0; }
  .tav i,
  .sett__b{ transform:none; }
  .cuo{ opacity:0; }
}

/* ---------- hero: il radar acceso ---------- */

.radar{
  transform-box:view-box;
  transform-origin:310px 310px;
  pointer-events:none;
}
.radar__scia{ fill:rgba(27,68,216,.085); }
.radar__ago{ stroke:var(--segnale); stroke-width:1.5; opacity:.48; }

/* --luce viene dal raggio: 1 quando passa, poi decade */
.punto > circle:not(.eco){
  fill:var(--carta);
  fill:color-mix(in srgb, var(--segnale) calc(var(--luce,0) * 100%), var(--carta));
  stroke:color-mix(in srgb, var(--segnale) calc(var(--luce,0) * 72%), var(--bosco));
}
.punto .eco{
  fill:none;
  stroke:var(--segnale);
  stroke-width:1.2;
  opacity:calc(var(--luce,0) * .5);
  transform-box:fill-box;
  transform-origin:center;
  scale:calc(1 + (1 - var(--luce,0)) * 3.4);
}
.punto text{
  opacity:var(--luce,0);
  transition:none;
}
.punto:hover > circle:not(.eco),
.punto:focus > circle:not(.eco){ fill:var(--bosco); stroke:var(--bosco); }
.punto:hover text,
.punto:focus text{ opacity:1; }

.mappa{ will-change:transform; }

/* il titolo si assesta sull'asse variabile */
.hero .display{ animation:assesta 1.7s cubic-bezier(.2,.7,.3,1) both; }
@keyframes assesta{
  from{ font-variation-settings:"wdth" 76,"wght" 330; letter-spacing:.015em; }
  to{   font-variation-settings:"wdth" 118,"wght" 620; letter-spacing:-.025em; }
}

.hero__meta div strong{ font-variant-numeric:tabular-nums; }

@media (prefers-reduced-motion:reduce){
  .radar{ display:none; }
  .punto text{ opacity:0; }
}