/* ═══════════════════════════════════════════════════════════════
   AITNA
   Palette: terracotta morbida su sabbia
   Type:    Geologica (titoli e testo, una famiglia sola)
            IBM Plex Mono (etichette e dati)

   Impostazione minimalista: niente riquadri, niente ombre, niente
   riempimenti. La gerarchia la fanno lo spazio bianco, il corpo del
   testo e qualche filo di separazione. Ogni elemento che si poteva
   togliere senza perdere significato è stato tolto.
   ═══════════════════════════════════════════════════════════════ */

/* ── Token ───────────────────────────────────────────────────── */
:root {
  /* Colore */
  --c-sand:        #F7F1E9;
  --c-surface:     #FDFAF5;
  --c-ink:         #2A2320;
  --c-muted:       #786A61;
  --c-line:        #EADFD2;
  --c-line-strong: #D8C8B7;

  --c-terra:       #B2543C;   /* riempimenti: pulsanti, tratti spessi */
  --c-terra-deep:  #A24E38;   /* testo e link — contrasto AA sulla sabbia */
  --c-lava:        #E2634B;   /* crescita, dettagli */
  --c-glow:        #F6C9A0;

  /* Marchio: rocce e lava, presi dall'illustrazione di partenza */
  --m-dark:        #6E5D59;
  --m-mid:         #8C7771;
  --m-light:       #A38D86;
  --m-sand:        #C3AF9A;
  --m-red:         #E2634B;
  --m-orange:      #F29A4A;
  --m-amber:       #F8B866;
  --c-chip:        #FAEBE3;
  --c-chip-line:   #F2D8C9;

  --c-basalt:      #2A2320;
  --c-basalt-line: #493D36;
  --c-on-basalt:   #F7F1E9;
  --c-on-basalt-m: #B9A99D;

  /* Tipografia */
  --f-display: "Geologica", "Segoe UI", system-ui, sans-serif;
  --f-body:    "Geologica", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --t-hero:    clamp(2.1rem, .8rem + 3vw, 3.5rem);   /* Geologica e' larga: due righe accanto al vulcano */
  --t-section: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
  --t-lead:    clamp(1.06rem, .99rem + .38vw, 1.28rem);

  /* Spazio — fa il lavoro al posto delle cornici, ma senza lasciare
     vuoti: a 10rem per lato una riga di loghi stava in 300px di niente */
  --wrap:      1120px;
  --gutter:    clamp(1.15rem, .6rem + 2.4vw, 3rem);
  --section-y: clamp(2.75rem, 1.5rem + 3.4vw, 4.75rem);

  --radius:    14px;
  --radius-sm: 10px;

  --ease: cubic-bezier(.33, 1, .68, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

/* ── Tipografia: Geologica ───────────────────────────────────── */
/* Il testo corrente ha gli angoli morbidi (SHRP 0); titoli, nomi e
   logotipo li affilano (SHRP 100): e' la firma del carattere. */
.hero-title, .section-title, .brand-name, .modale-titolo, .metodo-titolo,
.voce-nome, .footer-titolo, .tessera--servizio, .mappa-parola, .voce-virgolette,
.cc-titolo, .legal h1, .legal h2, .legal h3 {
  font-variation-settings: "SHRP" 100;
}

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--c-ink);
  background: var(--c-sand);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--c-terra-deep);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Scroll fluido, con lo spazio dell'header sticky riservato sul contenitore.
   scroll-padding-top vale per ogni ancora della pagina; l'header NON deve
   avere un id di destinazione, perché essendo sticky si porta dietro la
   propria posizione visiva — già incollata in cima — e il salto non avviene. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

/* Visibile solo agli screen reader: toglie il testo dalla pagina senza
   toglierlo dall'albero di accessibilita'. display:none lo nasconderebbe
   anche a loro. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 0; top: -100%;
  z-index: 200;
  background: var(--c-ink);
  color: var(--c-sand);
  padding: .8rem 1.3rem;
  font-weight: 600;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { top: 0; }

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

.section { padding-block: var(--section-y); }

/* ── Tipografia condivisa ────────────────────────────────────── */
.section-title {
  font-family: var(--f-display);
  font-size: var(--t-section);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.028em;
  text-wrap: balance;
  margin-bottom: clamp(1.2rem, .9rem + 1.2vw, 1.9rem);
}

/* ── Pulsanti ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: var(--f-body);
  font-size: .97rem;
  font-weight: 600;
  line-height: 1;
  padding: 1.02rem 1.7rem;
  border: 1.5px solid transparent;
  border-radius: 11px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease);
}

.btn-primary { background: var(--c-terra); color: #fff; }
.btn-primary:hover { background: var(--c-terra-deep); }

.btn-quiet {
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-line-strong);
}
.btn-quiet:hover { border-color: var(--c-ink); }

.btn-sm { padding: .7rem 1.15rem; font-size: .9rem; }
.btn-block { width: 100%; }

/* ── Header ──────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 241, 233, .86);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--c-line); }

.header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 76px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  flex: none;
}
.brand-mark { overflow: visible; }
/* Al passaggio i nastri di lava salgono di poco, uno dopo l'altro */
.brand-mark .m-nastro { transition: translate .45s var(--ease-out); }
.brand-mark .m-nastro-2 { transition-delay: .04s; }
.brand-mark .m-nastro-3 { transition-delay: .08s; }
.brand:hover .brand-mark .m-nastro { translate: 1.5px -2.5px; }

.brand-name {
  font-family: var(--f-display);
  font-size: 1.13rem;
  font-weight: 700;
  letter-spacing: -.03em;
}
/* Nel nome si leggono AI e IT, sovrapposte sulla i: «ai» in rosso lava,
   «t» in arancio, la i divisa a meta' perche' appartiene a entrambe.
   Vale solo per il marchio: nel testo corrente Aitna resta senza colori.
   Il contrasto del rosso sulla sabbia e' sotto 4.5:1, ma e' un logotipo
   (WCAG 1.4.3 lo esclude) e il nome e' comunque nell'aria-label del link. */
.bn-ai { color: var(--m-red); }
.bn-it { color: var(--m-orange); }
.bn-i {
  color: var(--m-red);
  background: linear-gradient(90deg, var(--m-red) 50%, var(--m-orange) 50%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, .2rem + 1.6vw, 2rem);
  margin-left: auto;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, .2rem + 1.5vw, 1.9rem);
}
.nav-list a {
  position: relative;
  font-size: .93rem;
  font-weight: 500;
  color: var(--c-muted);
  text-decoration: none;
  padding-block: .3rem;
  transition: color .18s var(--ease);
}
.nav-list a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1.5px;
  background: var(--c-terra);
  transition: right .28s var(--ease);
}
.nav-list a:hover { color: var(--c-ink); }
.nav-list a:hover::after { right: 0; }
.nav-list a.is-current { color: var(--c-ink); }
.nav-list a.is-current::after { right: 0; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: .55rem;
  margin-left: auto;
  padding: .55rem .85rem;
  background: transparent;
  border: 1.5px solid var(--c-line-strong);
  border-radius: 10px;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
}
.nav-toggle-bars { display: grid; gap: 4px; }
.nav-toggle-bars i {
  display: block;
  width: 17px; height: 1.8px;
  background: var(--c-ink);
  border-radius: 2px;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(1) { transform: translateY(5.8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(3) { transform: translateY(-5.8px) rotate(-45deg); }

/* ── Hero ────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding-block: clamp(2rem, 1rem + 3.5vw, 4rem) clamp(2.5rem, 1.2rem + 3.5vw, 4rem);
  overflow: hidden;
}
.hero-glow {
  position: absolute;
  top: -34%; right: -18%;
  width: min(760px, 105vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--c-glow) 0%, rgba(246, 201, 160, 0) 66%);
  opacity: .55;
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: grid;
  gap: 1.4rem;
}
/* Il marchio sta sopra il titolo su schermo stretto, sulla stessa riga
   da 560px in su: e' la firma del titolo, non una seconda protagonista. */
@media (min-width: 560px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(1.5rem, .5rem + 4vw, 4.5rem);
    align-items: center;
  }
  .hero-sotto { grid-column: 1 / -1; }
}
/* Da 900px il marchio occupa due righe: titolo e sottotitolo restano
   vicini a sinistra, invece di separarsi per tutta l'altezza del disegno. */
@media (min-width: 900px) {
  .hero-figure { grid-column: 2; grid-row: 1 / span 2; }
  .hero-testa  { align-self: end; }
  .hero-sotto  { grid-column: 1; align-self: start; }
}

.hero-title {
  font-family: var(--f-display);
  font-size: var(--t-hero);
  font-weight: 650;
  line-height: 1.01;
  letter-spacing: -.035em;
  text-wrap: balance;
  max-width: 22ch;
}

.hero-lead {
  margin-top: .4rem;
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--c-muted);
  max-width: 40ch;
}


.hero-figure { width: clamp(170px, 7rem + 16vw, 340px); }
@media (max-width: 559px) {
  .hero-figure { order: -1; width: 150px; }
}
.hero-marchio { width: 100%; height: auto; overflow: visible; }

/* La didascalia del vulcano: l'origine del nome. Compare quando il
   marchio ha finito di costruirsi, cosi' non gli ruba la scena. */
.hero-nota {
  margin-top: 1.1rem;
  padding-left: .9rem;
  border-left: 2px solid var(--m-orange);
  font-size: .8rem;
  line-height: 1.55;
  color: var(--c-muted);
  text-wrap: pretty;
  transition: opacity .8s var(--ease-out) 2.6s, translate .8s var(--ease-out) 2.6s;
}
.hero-nota i { color: var(--c-ink); }
.js .hero-figure:not(.is-visible) .hero-nota { opacity: 0; translate: 0 6px; }
/* Sul telefono il marchio e' piccolo: la didascalia gli sta accanto */
@media (max-width: 559px) {
  .hero-figure {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    width: 100%;
  }
  .hero-nota { margin-top: 0; }
}

/* ── Servizi: la costellazione ────────────────────────────────── */
.section-services { border-top: 1px solid var(--c-line); }

.costellazione-invito {
  font-size: .92rem;
  color: var(--c-muted);
  margin-bottom: 1.2rem;
}

.mappa {
  position: relative;
  /* Le posizioni delle tessere (--x, --y nell'HTML) sono calcolate su
     questa proporzione: cambiandola, vanno ricontrollate le distanze
     dalle due parole di sfondo negli angoli. */
  aspect-ratio: 16 / 9.4;
  margin-bottom: clamp(.6rem, .4rem + .8vw, 1.2rem);
}

/* La tela contiene tessere e linee, ed e' l'unica cosa che si sfoca
   quando una tessera si apre. Lo strato a fuoco sta fuori di qui,
   percio' resta nitido: sfocare tutto e poi tentare di ri-nitidire un
   figlio non funziona, il filtro si applica all'intero sottoalbero. */
.mappa-tela {
  position: absolute;
  inset: 0;
  transition: filter .28s var(--ease);
}
.mappa.aperta .mappa-tela { filter: blur(7px); }

/* Le due parole e il tracciato stanno sotto le tessere: fanno da
   fondale, non competono. */
.mappa-parola {
  position: absolute;
  z-index: 0;
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 1rem + 5.2vw, 5.4rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--c-ink);
  opacity: .17;
  user-select: none;
  pointer-events: none;
}
.mappa-parola--inizio { left: 1%; bottom: 4%; }
.mappa-parola--fine   { right: 1%; top: 0; }

/* Il tracciato: il gesto del marchio, dalla prima parola alla seconda.
   Si disegna quando la sezione entra in vista. */
.mappa-percorso {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.mappa-percorso path {
  fill: none;
  stroke: var(--c-terra);
  stroke-width: 1.6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: .5;
}
/* dasharray e dashoffset li scrive il JavaScript, misurando il
   tracciato con getTotalLength(). Un valore fisso piu' corto della
   lunghezza reale trasformerebbe la linea in un tratteggio: e' un
   motivo che si ripete, non un disegno progressivo. */
.js .mappa-percorso path {
  transition: stroke-dashoffset 2.2s var(--ease) .2s;
}

.mappa-legami {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  stroke: var(--c-line-strong);
  /* Con non-scaling-stroke lo spessore e' in pixel di schermo */
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
/* Tutti i rami hanno lo stesso peso: la distinzione fra principale e
   secondario era un codice grafico che nessuno spiegava al visitatore.
   A tenere i gruppi basta la posizione delle tessere.
   Nota: con vector-effect: non-scaling-stroke il tratteggio si misura
   in pixel di schermo, non in unita' del viewBox. */
/* vector-effect non si eredita: va sulla linea, non sull'svg che la contiene,
   altrimenti lo spessore si misura in unita' del viewBox (1 = 1% della mappa). */
.mappa-legami line {
  vector-effect: non-scaling-stroke;
  transition: opacity .25s var(--ease);
}

/* Ogni gruppo sparisce come contenitore: le tessere si posizionano sulla
   mappa come se ne fossero figlie dirette. Sotto gli 820px torna un blocco. */
.mappa-gruppo { display: contents; }

/* Passando su una tessera, il suo gruppo resta pieno e gli altri si
   attenuano: si vede subito quali competenze stanno sotto quale servizio.
   La classe la mette il JavaScript. */
.mappa.attenua [data-gruppo]:not(.acceso) { opacity: .3; }

.mappa-velo {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(247, 241, 233, .55);
  animation: velo-entra .28s var(--ease) both;
}
.mappa-velo[hidden] { display: none; }
@keyframes velo-entra { from { opacity: 0; } to { opacity: 1; } }

/* ── Le tessere ───────────────────────────────────────────────── */
.tessera {
  position: absolute;
  z-index: 1;
  left: var(--x);
  top: var(--y);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .42rem .8rem;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  font-size: .84rem;
  font-weight: 500;
  /* Testo pieno, niente opacita': il grigio attenuato stava a 2.5:1. Il
     muted sulla superficie fa 5.2:1, sopra la soglia AA. */
  color: var(--c-muted);

  /* translate e scale sono proprieta' distinte, non due valori dentro
     transform: cosi' l'animazione puo' occupare translate mentre il
     passaggio del mouse occupa scale, senza che una sovrascriva
     l'altra. Con transform: translate() + transform: scale() vincerebbe
     l'ultima dichiarata e l'ingrandimento non si vedrebbe. */
  translate: -50% -50%;
  scale: 1;
  transition: scale .3s var(--ease), opacity .22s var(--ease),
              border-color .22s var(--ease), color .22s var(--ease),
              box-shadow .3s var(--ease);
}

.tessera:hover,
.tessera:focus-visible {
  scale: 1.16;
  opacity: 1;
  border-color: var(--c-line-strong);
  color: var(--c-ink);
  box-shadow: 0 10px 26px -16px rgba(42, 35, 32, .5);
  z-index: 5;
}

.tessera--servizio:hover,
.tessera--servizio:focus-visible { scale: 1.12; }

/* Ingresso a cascata, una volta sola: la mappa poi resta ferma. Una
   deriva infinita di ventisette tessere stancava l'occhio e teneva
   occupati i telefoni meno potenti. Il fill-mode e' "backwards" e non
   "both": finita l'animazione l'opacita' torna libera, altrimenti
   l'attenuazione dei gruppi non funzionerebbe piu'. --i lo scrive il JS. */
.js .costellazione:not(.is-visible) .tessera { opacity: 0; }
.costellazione.is-visible .tessera {
  animation: tessera-entra .6s var(--ease-out) backwards;
  animation-delay: calc(.25s + var(--i, 0) * 35ms);
}
@keyframes tessera-entra {
  from { opacity: 0; scale: .82; }
}
.js .costellazione:not(.is-visible) .mappa-legami { opacity: 0; }
.mappa-legami { transition: opacity 1s var(--ease) .7s; }
}

.tessera[aria-expanded="true"] { scale: 1; }



.tessera--servizio {
  opacity: 1;
  padding: .5rem 1rem .5rem .5rem;
  font-family: var(--f-display);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--c-ink);
  border-color: var(--c-line-strong);
  box-shadow: 0 8px 22px -18px rgba(42, 35, 32, .5);
}

.tessera-icona {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--c-chip);
  color: var(--c-terra-deep);
}
.tessera-icona svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── Lo strato a fuoco ────────────────────────────────────────── */
.fuoco {
  position: absolute;
  z-index: 4;
  left: var(--fx, 50%);
  top: var(--fy, 50%);
  transform: translate(-50%, -50%);
  width: min(23rem, 82%);
  animation: fuoco-entra .3s var(--ease) both;
}
.fuoco[hidden] { display: none; }
@keyframes fuoco-entra {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)) scale(.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.fuoco-scheda {
  position: relative;
  padding: 1.4rem 1.5rem 1.5rem;
  background: var(--c-surface);
  border-radius: 18px;
  box-shadow:
    0 2px 6px rgba(42, 35, 32, .06),
    0 24px 50px -24px rgba(42, 35, 32, .45);
}

.fuoco-chiudi {
  position: absolute;
  top: .8rem;
  right: .8rem;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border: none;
  border-radius: 999px;
  background: var(--c-chip);
  color: var(--c-terra-deep);
  cursor: pointer;
}
.fuoco-chiudi:hover { background: var(--c-terra); color: #fff; }
.fuoco-chiudi svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}

.fuoco-titolo {
  font-family: var(--f-display);
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: -.02em;
  margin-bottom: .5rem;
  padding-right: 2rem;
}
.fuoco-testo {
  color: var(--c-muted);
  font-size: .93rem;
  line-height: 1.6;
}
.fuoco-cta {
  display: inline-block;
  margin-top: 1.1rem;
  padding: .6rem 1.1rem;
  background: var(--c-ink);
  color: var(--c-sand);
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
}
.fuoco-cta:hover { background: var(--c-terra); }

/* I riquadri servono senza JavaScript; con JavaScript il testo viene
   copiato nella scheda e questi restano nascosti. */
.js .riquadri { display: none; }
html:not(.js) .mappa,
html:not(.js) .costellazione-invito { display: none; }
html:not(.js) .riquadri { display: grid; gap: .8rem; }
.riquadro {
  max-width: 44rem;
  padding: 1.4rem 1.6rem;
  background: var(--c-surface);
  border-radius: 18px;
}
.riquadro-titolo {
  font-family: var(--f-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -.02em;
  margin-bottom: .5rem;
}
.riquadro p { color: var(--c-muted); font-size: .96rem; }

/* ── Sotto gli 820px ──────────────────────────────────────────── */
/* Su schermo stretto la mappa diventa quattro gruppi in colonna, uno
   per servizio, e la scheda si centra. */
@media (max-width: 820px) {
  .mappa {
    aspect-ratio: auto;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
  }
  .mappa-tela {
    position: static;
    display: grid;
    gap: 1.6rem;
  }
  /* Il gruppo torna un blocco: il servizio fa da intestazione, le sue
     competenze vanno a capo sotto di lui. */
  .mappa-gruppo {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
  }
  .tessera--servizio {
    flex-basis: 100%;
    justify-content: flex-start;
    padding: 0;
    margin-bottom: .2rem;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .tessera--servizio:hover,
  .tessera--servizio:focus-visible { scale: 1; box-shadow: none; }
  .mappa-legami,
  .mappa-percorso,
  .mappa-parola { display: none; }
  .tessera {
    position: static;
    translate: none;
  }
  .fuoco {
    position: fixed;
    left: 50%;
    top: 50%;
    width: min(23rem, 88vw);
    z-index: 200;
  }
  .mappa-velo { position: fixed; z-index: 199; }
}

@media (prefers-reduced-motion: reduce) {
  .tessera:hover, .tessera:focus-visible { scale: 1; }
  .js .mappa-percorso path { stroke-dashoffset: 0; animation: none; }
  .fuoco, .mappa-velo { animation: none; }
}


/* ── Clienti ─────────────────────────────────────────────────── */
.section-clienti { border-top: 1px solid var(--c-line); }

/* ── Clienti: le testimonianze ─────────────── */
/* Sfondo diviso: la fascia scura copre il titolo e la parte alta delle
   card, che cosi' stanno a cavallo fra i due colori. L'altezza e' legata
   al padding della sezione, non a una percentuale: con le card impilate
   su telefono una percentuale finirebbe a meta' della seconda. */
.clienti-voci {
  position: relative;
  isolation: isolate;
  border-top: 0;
  background: #E6D9C9;
}
.clienti-voci::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: calc(var(--section-y) + 13rem);
  background: var(--c-basalt);
}
.clienti-voci .section-title { color: var(--c-on-basalt); }

.voci {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(1rem, .6rem + 1.4vw, 1.75rem);
}

.voce {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem);
  background: var(--c-surface);
  border-radius: 24px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 30px 60px -40px rgba(42, 35, 32, .55);
  transition: translate .45s var(--ease-out), box-shadow .45s var(--ease-out),
              opacity .75s var(--ease), transform .75s var(--ease);
}
.voce:hover {
  translate: 0 -4px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 38px 70px -40px rgba(42, 35, 32, .6);
}

/* Le virgolette: grandi, in lava, che scendono al loro posto */
.voce-virgolette {
  display: block;
  height: 3.2rem;
  font-family: var(--f-display);
  font-size: 6rem;
  font-weight: 800;
  line-height: .9;
  color: var(--m-red);
  transition: opacity .6s var(--ease) .25s, translate .8s var(--ease-out) .25s;
}
.js .voce:not(.is-visible) .voce-virgolette { opacity: 0; translate: 0 -12px; }

.voce-testo { margin: 1.1rem 0 1.8rem; flex: 1; }
.voce-testo p {
  font-size: clamp(1rem, .96rem + .2vw, 1.08rem);
  line-height: 1.7;
  color: var(--c-muted);
  text-wrap: pretty;
}

.voce-firma {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--c-line);
}
.voce-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--m-red), var(--m-orange) 60%, var(--m-amber));
  color: #fff;
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.02em;
  box-shadow: 0 0 0 4px var(--c-surface), 0 0 0 5px var(--c-line);
}
.voce-chi { display: grid; gap: .1rem; min-width: 0; }
.voce-nome {
  font-family: var(--f-display);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--c-ink);
}
.voce-ruolo { font-size: .86rem; color: var(--c-muted); }
/* .voce davanti: la regola generica .cliente-logo viene dopo e vincerebbe */
.voce .voce-logo {
  margin-left: auto;
  max-height: 30px;
  max-width: 110px;
}
.voce:hover .voce-logo { filter: none; opacity: 1; }
.voce .voce-logo { transition: filter .45s var(--ease), opacity .45s var(--ease); }

@media (max-width: 460px) {
  .voce .voce-logo { display: none; }   /* sul telefono la firma basta: nome e azienda */
}

@media (prefers-reduced-motion: reduce) {
  .js .voce .voce-virgolette { opacity: 1; translate: none; }
}

/* La scala di grigi la fa il CSS, non il file: i loghi restano a colori sul
   disco, quindi si torna indietro togliendo una riga e nessuno deve rifare
   le immagini.

   Serve pero' un secondo passaggio, perche' grayscale() converte per
   luminosita' e i loghi non partono tutti dallo stesso punto:
     - un logo gia' scuro resta scuro e griderebbe piu' del testo accanto
       → lo alleggerisce l'opacita' della regola base;
     - un colore vivace di media luminosita' (il verde di Sol.Co.) diventa
       un grigio chiaro, ~#B9B9B9, molto piu' pallido del testo
       → lo recupera il modificatore --scurisci.
   Aggiungendo un logo: se sbiadisce, mettergli la classe in piu'. */
/* Due vincoli, non uno. I loghi hanno proporzioni molto diverse — un
   wordmark 7:1 e un marchio 1.9:1 — e fissando solo l'altezza il primo
   diventa quattro volte piu' largo del secondo. Con max-height E max-width
   ogni logo si iscrive nello stesso rettangolo: quelli larghi li ferma la
   larghezza, quelli compatti l'altezza. */
.cliente-logo {
  max-height: clamp(44px, 1.9rem + 1.8vw, 58px);
  max-width: clamp(146px, 9rem + 5vw, 196px);
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) brightness(var(--lum, 1));
  opacity: var(--op, .64);
}

/* ── Chi siamo ───────────────────────────────────────────────── */
.section-studio {
  position: relative;
  border-top: 1px solid var(--c-line);
  padding-block: var(--section-y);
}
/* Testo e illustrazione affiancati; l'illustrazione prende piu' spazio
   perche' e' larga e piena di dettagli. Sotto, i tre principi di lavoro
   su tutta la larghezza. */
.studio-griglia {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
.studio-corpo { position: relative; min-width: 0; }

.studio-testo {
  font-size: clamp(.98rem, .93rem + .18vw, 1.07rem);
  line-height: 1.7;
  max-width: 54ch;
}
.studio-testo + .studio-testo { margin-top: 1rem; }

.studio-visual { margin: 0; min-width: 0; }
/* Un po' oltre la colonna a destra: l'illustrazione ha molto vuoto ai
   bordi (onde, tracce) e cosi' il laptop resta all'altezza del testo. */
@media (min-width: 900px) {
  .studio-visual { margin-right: calc(var(--gutter) * -1); }
}

/* ── L'illustrazione hi-tech ──────────────────────────────────────
   Tre tempi all'ingresso in vista: gli oggetti salgono a cascata, le
   tracce si disegnano, poi lo schermo si riempie di codice e il grafico
   cresce. Dopo restano solo gli impulsi sulle tracce e un leggero
   galleggiare di cloud e pannelli, fermati quando la figura esce dallo
   schermo (classe in-pausa, dal JS). I ritardi stanno nell'SVG (--d). */
.hi {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
  /* Le onde escono dall'inquadratura: ai lati sfumano invece di tagliarsi */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.hi-pezzo {
  transition: opacity .8s var(--ease-out) var(--d, 0s), transform 1s var(--ease-out) var(--d, 0s);
}
.js .studio-visual:not(.is-visible) .hi-pezzo { opacity: 0; transform: translateY(22px); }

.hi-traccia, .hi-riga {
  stroke-dasharray: 1;
  transition: stroke-dashoffset 1.4s var(--ease-out) var(--d, 0s);
}
.hi-riga { transition-duration: .6s; }
.js .studio-visual:not(.is-visible) .hi-traccia,
.js .studio-visual:not(.is-visible) .hi-riga { stroke-dashoffset: 1; }

.hi-nodo { transition: opacity .4s var(--ease) var(--d, 0s); }
.js .studio-visual:not(.is-visible) .hi-nodo { opacity: 0; }

.hi-barra {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform .8s var(--ease-out) var(--d, 0s);
}
.js .studio-visual:not(.is-visible) .hi-barra { transform: scaleY(0); }

/* Un trattino luminoso che corre lungo la traccia: i dati che passano */
.hi-impulso {
  stroke-dasharray: .07 .93;
  opacity: 0;
  transition: opacity 1s var(--ease) 2.2s;
}
.studio-visual.is-visible .hi-impulso {
  opacity: .9;
  animation: hi-flusso 3.8s linear var(--r, 0s) infinite;
}
@keyframes hi-flusso { from { stroke-dashoffset: .07; } to { stroke-dashoffset: -.93; } }

.studio-visual.is-visible .hi-galleggia {
  animation: hi-galleggia 7s ease-in-out var(--g, 0s) infinite alternate;
}
@keyframes hi-galleggia { to { transform: translateY(-8px); } }

.studio-visual.is-visible .hi-led { animation: hi-led 2.6s ease-in-out var(--b, 0s) infinite; }
@keyframes hi-led { 50% { opacity: .25; } }

.studio-visual.is-visible .hi-cursore { animation: hi-cursore 1.1s steps(1) infinite; }
@keyframes hi-cursore { 50% { opacity: 0; } }

.studio-visual.in-pausa * { animation-play-state: paused !important; }

/* ── Come lavoriamo ─────────────────────────────────────────── */
/* Lo sfondo diviso e' quello dei Clienti (vedi .clienti-voci::before):
   tre card su fascia scura in alto e sabbia in basso. */
.section-metodo {
  position: relative;
  isolation: isolate;
  background: #E6D9C9;
}
.section-metodo::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: calc(var(--section-y) + 11rem);
  background: var(--c-basalt);
}
.section-metodo .section-title { color: var(--c-on-basalt); }

.metodo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(1rem, .6rem + 1.4vw, 1.75rem);
}
.js .metodo.reveal { opacity: 1; transform: none; }
.metodo-passo {
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem);
  background: var(--c-surface);
  border-radius: 24px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 30px 60px -40px rgba(42, 35, 32, .55);
  transition: opacity .7s var(--ease-out), translate .8s var(--ease-out), box-shadow .45s var(--ease-out);
  transition-delay: calc(.2s + var(--i) * .15s), calc(.2s + var(--i) * .15s), 0s;
}
.metodo-passo:hover {
  translate: 0 -4px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 38px 70px -40px rgba(42, 35, 32, .6);
  transition-delay: 0s;
}
.js .metodo:not(.is-visible) .metodo-passo { opacity: 0; translate: 0 16px; }
.metodo-icona {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1.2rem;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--m-red), var(--m-orange) 60%, var(--m-amber));
  color: #fff;
}
.metodo-icona svg {
  width: 24px; height: 24px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.metodo-titolo {
  font-family: var(--f-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -.02em;
  margin-bottom: .45rem;
}
.metodo-passo p { color: var(--c-muted); font-size: .95rem; line-height: 1.6; }

/* ── Contatti: la finestra modale ───────────────────────────── */
/* Stato chiuso e aperto li decide la classe .visibile, che main.js mette
   un fotogramma dopo showModal() e toglie prima di close(): cosi' la
   dissolvenza c'e' in entrata e in uscita in tutti i browser, senza
   affidarsi a @starting-style. */
.modale {
  width: min(34rem, calc(100% - 2rem));
  max-width: none;
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  overflow: visible;
  opacity: 0;
  translate: 0 14px;
  scale: .985;
  transition: opacity .28s var(--ease-out), translate .32s var(--ease-out), scale .32s var(--ease-out);
}
.modale.visibile { opacity: 1; translate: 0 0; scale: 1; }
/* Il <dialog> riceve il focus all'apertura ma non e' un comando: l'anello
   resta sui campi e sui pulsanti, non attorno a tutta la finestra. */
.modale:focus, .modale:focus-visible { outline: none; }
.modale::backdrop {
  background: rgba(42, 35, 32, .5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .28s var(--ease-out);
}
.modale.visibile::backdrop { opacity: 1; }
/* In uscita un po' piu' rapida dell'entrata: chi chiude ha gia' deciso */
.modale.in-chiusura,
.modale.in-chiusura::backdrop { transition-duration: .2s; }

/* Con la finestra aperta la pagina sotto non scorre */
html:has(.modale[open]) { overflow: hidden; }

.modale-scheda {
  position: relative;
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(1.5rem, 1rem + 2vw, 2.4rem);
  background: var(--c-surface);
  border-radius: 22px;
  box-shadow: 0 40px 80px -40px rgba(42, 35, 32, .6);
}
.modale-titolo {
  padding-right: 3rem;
  font-family: var(--f-display);
  font-size: clamp(1.45rem, 1.2rem + 1vw, 1.8rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.028em;
}
.modale-nota {
  margin: .5rem 0 1.6rem;
  font-size: .92rem;
  color: var(--c-muted);
}
.modale-chiudi {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--c-chip);
  color: var(--c-terra-deep);
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.modale-chiudi:hover { background: var(--c-terra); color: #fff; }
.modale-chiudi svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}

@media (prefers-reduced-motion: reduce) {
  .modale, .modale::backdrop { transition: none; translate: none; scale: none; }
}

/* Form */
.contact-form { display: grid; gap: 1.05rem; }
.field { display: grid; gap: .42rem; }

.field label { font-size: .87rem; font-weight: 600; }
.req { color: var(--c-terra-deep); }

.field input,
.field textarea {
  width: 100%;
  padding: .85rem 1rem;
  background: var(--c-surface);
  border: 1.5px solid var(--c-line-strong);
  border-radius: var(--radius-sm);
  font-size: .96rem;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea { resize: vertical; min-height: 130px; }
.field input::placeholder, .field textarea::placeholder { color: #A8998E; }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--c-terra);
  box-shadow: 0 0 0 3px rgba(178, 84, 60, .14);
}

.field.has-error input,
.field.has-error textarea { border-color: #A83A22; }

.field-error { font-size: .82rem; font-weight: 500; color: #A83A22; }

.field-check {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: .1rem .7rem;
  margin-top: .3rem;
}
.field-check input {
  width: 18px; height: 18px;
  margin-top: .22rem;
  accent-color: var(--c-terra);
  cursor: pointer;
}
.field-check label {
  font-size: .87rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--c-muted);
}
.field-check label a { color: var(--c-terra-deep); }
.field-check .field-error { grid-column: 1 / -1; }

.contact-form .btn { margin-top: .5rem; }

/* Campo trappola anti-spam: fuori schermo, non display:none, perche'
   alcuni bot saltano i campi nascosti in modo esplicito. */
.campo-trappola {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  padding: .95rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: .92rem;
  font-weight: 500;
  line-height: 1.55;
}
.form-status.is-ok {
  background: var(--c-chip);
  border: 1px solid var(--c-chip-line);
  color: var(--c-terra-deep);
}
.form-status.is-error {
  background: #FBE9E4;
  border: 1px solid #F3CFC5;
  color: #A83A22;
}

/* ── Footer ──────────────────────────────────────────────────── */
/* Sobrio: marchio e descrizione a sinistra, due colonne di link, una riga
   di dati in fondo. L'unico colore acceso e' la lava sulle icone social,
   e solo al passaggio. */
.site-footer {
  padding-top: clamp(2.8rem, 2rem + 2.6vw, 4rem);
  background: var(--c-basalt);
  color: var(--c-on-basalt-m);
  font-size: .92rem;
}
.site-footer :focus-visible { outline-color: var(--m-orange); }
.site-footer .brand-name { color: var(--c-on-basalt); }
.site-footer a { text-decoration: none; transition: color .18s var(--ease); }

.footer-griglia {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.4rem clamp(2rem, 1rem + 4vw, 5rem);
  padding-bottom: clamp(2.2rem, 1.6rem + 2vw, 3rem);
}
.footer-descrizione {
  max-width: 32ch;
  margin-top: 1rem;
  line-height: 1.6;
}

.footer-social {
  display: flex;
  gap: .6rem;
  margin-top: 1.4rem;
}
/* 44px: il bersaglio minimo per il dito */
.social {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--c-basalt-line);
  color: var(--c-on-basalt);
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.social svg {
  width: 19px; height: 19px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.social:hover {
  background: var(--m-red);
  border-color: var(--m-red);
  color: #fff;
}
/* Profili non ancora aperti: l'icona c'e', il link no */
.social[data-da-collegare] { pointer-events: none; }

.footer-titolo {
  margin-bottom: .9rem;
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--c-on-basalt);
}
.footer-colonna ul { display: grid; gap: .55rem; }
.footer-colonna a,
.footer-legale a { color: var(--c-on-basalt-m); }
.footer-colonna a:hover,
.footer-legale a:hover { color: var(--c-on-basalt); }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem 2rem;
  position: relative;
  padding-block: 1.3rem;
  font-size: .82rem;
}
/* Il filetto si ferma dove si ferma il contenuto: un bordo sul .wrap
   correrebbe anche sotto il margine laterale e sporgerebbe dalle colonne. */
.footer-base::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  background: var(--c-basalt-line);
}
.footer-dati,
.footer-legale { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; }

@media (max-width: 759px) {
  .footer-griglia { grid-template-columns: 1fr 1fr; }
  .footer-marchio { grid-column: 1 / -1; }
}

/* ═══ Rifiniture ═════════════════════════════════════════════════
   I dettagli che separano un sito curato da un modello: indice delle
   sezioni, barra di lettura, pulsanti con freccia, card, fondali. */

/* Onde di fondo nella hero: le stesse dell'illustrazione, appena accennate */
.hero-onde {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 70%;
  pointer-events: none;
}
.hero-onde path {
  fill: none;
  stroke: var(--m-red);
  stroke-width: 1;
  opacity: .16;
  stroke-dasharray: 1;
  transition: stroke-dashoffset 2.4s var(--ease-out) var(--d, 0s);
}
.js .hero:not(.pronta) .hero-onde path { stroke-dashoffset: 1; }

/* Barra di lettura sotto l'header, in lava. Guidata dallo scroll senza
   JavaScript; dove animation-timeline non esiste, semplicemente non c'e'. */
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--m-red), var(--m-orange), var(--m-amber));
  transform-origin: 0 50%;
  transform: scaleX(0);
}
@supports (animation-timeline: scroll()) {
  .site-header::after {
    animation: lettura linear both;
    animation-timeline: scroll(root);
  }
}
@keyframes lettura { to { transform: scaleX(1); } }

/* Pulsanti: ombra calda, un filo di sollevamento al passaggio */
.btn-primary {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 12px 26px -16px rgba(162, 78, 56, .8);
  transition: background-color .18s var(--ease), translate .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.btn-primary:hover {
  translate: 0 -1px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 16px 30px -16px rgba(162, 78, 56, .9);
}
.btn-primary:active { translate: 0 0; }


/* Fondale a punti dietro la mappa dei servizi: un reticolo tecnico che
   respira e si scosta al passaggio del mouse (assets/js/punti.js).
   Sfuma ai bordi. Solo dove la mappa e' una mappa, non sotto gli 820px. */
.mappa-punti {
  position: absolute;
  z-index: 0;
  top: -3%; left: -2%;
  width: 104%; height: 106%;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 72%);
  mask-image: radial-gradient(ellipse at center, #000 35%, transparent 72%);
}
@media (max-width: 820px) { .mappa-punti { display: none; } }

/* ═══ Movimento ═══════════════════════════════════════════════ */

/* Il contenuto parte nascosto SOLO se il JavaScript e' attivo e potra'
   riaccenderlo. Senza JS (o se lo script fallisce) la classe .js non viene
   mai aggiunta e la pagina resta interamente leggibile. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-reveal-delay="1"] { transition-delay: .09s; }
.reveal[data-reveal-delay="2"] { transition-delay: .18s; }

/* Il marchio si costruisce in tre tempi.
   1. La montagna sale.
   2. Il grafico la percorre dalla base fino al cratere; a ogni vertice
      della spezzata compare un cerchio colorato. La linea si disegna a
      velocita' costante (linear), cosi' i ritardi dei cerchi coincidono col
      passaggio della linea: i vertici cadono al 27%, 42% e 75% della sua
      lunghezza, su un tratto di 1s che parte a .6s; i cerchi partono 50ms prima
      perche' crescendo da zero si vedono con un attimo di ritardo.
   3. Arrivata la linea alla base del getto, la lava si apre uno strato
      per volta, poi schizzano due gocce.
   Solo transform, opacity e stroke-dashoffset: niente che ricalcoli il
   layout, fluido anche su un telefono modesto. transform-box: fill-box
   fa scalare ogni pezzo attorno a se' stesso, non all'origine del viewBox. */
.hero-marchio .m-roccia,
.hero-marchio .m-punto,
.hero-marchio .m-nastro,
.hero-marchio .m-goccia { transform-box: fill-box; }
.hero-marchio .m-roccia { transform-origin: 50% 100%; }
.hero-marchio .m-punto,
.hero-marchio .m-goccia { transform-origin: 50% 50%; }
.hero-marchio .m-nastro { transform-origin: 0 100%; }
.hero-marchio .m-linea  { stroke-dasharray: 100; }

.js .hero-figure:not(.is-visible) .hero-marchio > :not(defs) { opacity: 0; }

.hero-figure.is-visible .m-roccia { animation: m-sorge .9s var(--ease-out) both; }
.hero-figure.is-visible .m-linea  { animation: m-disegna 1s linear .6s both; }
.hero-figure.is-visible .m-punto  { animation: m-pop .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.hero-figure.is-visible .m-punto:nth-of-type(1) { animation-delay: .82s; }
.hero-figure.is-visible .m-punto:nth-of-type(2) { animation-delay: .97s; }
.hero-figure.is-visible .m-punto:nth-of-type(3) { animation-delay: 1.3s; }
.hero-figure.is-visible .m-nastro { animation: m-pennacchio .75s var(--ease-out) both; }
.hero-figure.is-visible .m-nastro-1 { animation-delay: 1.6s; }
.hero-figure.is-visible .m-nastro-2 { animation-delay: 1.95s; }
.hero-figure.is-visible .m-nastro-3 { animation-delay: 2.3s; }
.hero-figure.is-visible .m-goccia { animation: m-pop .5s cubic-bezier(.34, 1.56, .64, 1) 2.7s both; }
.hero-figure.is-visible .m-goccia:last-of-type { animation-delay: 2.82s; }

@keyframes m-sorge      { from { opacity: 0; transform: translateY(14%) scaleY(.85); } }
@keyframes m-disegna    { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes m-pop        { from { opacity: 0; transform: scale(0); } }
@keyframes m-pennacchio { from { opacity: 0; transform: scale(.2) rotate(-12deg); } }

/* I titoli di sezione emergono dal basso dietro una maschera, invece di
   dissolversi: e' il gesto della crescita, ripetuto in piccolo.
   La maschera sta sullo span interno e non sull'h2: l'IntersectionObserver
   conta il clip-path dell'elemento osservato, e un titolo ritagliato a
   zero non raggiungerebbe mai la soglia per comparire. */
.js .section-title.reveal { opacity: 1; transform: none; }

/* Il titolo della hero emerge riga per riga. Il padding in basso lascia
   spazio alle discendenti (la p di «più»), che la maschera taglierebbe. */
.hero-title .riga {
  display: block;
  overflow: hidden;
  padding-bottom: .1em;
  margin-bottom: -.1em;
}
.hero-title .riga > span {
  display: inline-block;
  transition: transform 1.1s var(--ease-out);
}
.hero-title .riga:nth-child(2) > span { transition-delay: .12s; }
.js .hero-title.reveal { opacity: 1; transform: none; }
.js .hero-title.reveal:not(.is-visible) .riga > span { transform: translateY(105%); }
.section-title .maschera { display: inline-block; }
.js .section-title.reveal .maschera {
  clip-path: inset(0 0 100% 0);
  transform: translateY(.45em);
  transition: clip-path .9s var(--ease-out), transform .9s var(--ease-out);
}
.js .section-title.reveal.is-visible .maschera { clip-path: inset(0 0 -.15em 0); transform: none; }

/* ═══ Responsive ══════════════════════════════════════════════ */

/* Navigazione mobile */
@media (max-width: 899px) {
  .nav-toggle { display: inline-flex; }

  .site-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    padding: 0 var(--gutter);
    background: var(--c-sand);
    border-bottom: 1px solid var(--c-line);
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height .35s var(--ease), padding .35s var(--ease), visibility .35s;
  }
  .site-nav.is-open {
    max-height: 420px;
    padding-block: .6rem 1.4rem;
    visibility: visible;
  }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list a {
    display: block;
    padding: .95rem 0;
    font-size: 1.02rem;
    border-bottom: 1px solid var(--c-line);
  }
  .nav-list a::after { display: none; }
  .nav-cta { margin-top: 1.1rem; }

  /* In colonna il rilievo passa sotto al testo e si restringe:
     a piena larghezza su schermo stretto ruberebbe la scena. */
  .studio-griglia { grid-template-columns: 1fr; }
}

/* ═══ Sezioni a schermo pieno, con aggancio morbido ═══════════════
   Solo da 900px di larghezza e 640px di altezza: sul telefono le sezioni
   sono piu' alte dello schermo e lo scroll resta libero, come nella home. */
@media (min-width: 900px) and (min-height: 640px) {
  :root { --header: 77px; }

  /* L'aggancio: lo scroll si ferma all'inizio di una sezione solo se ci
     si ferma vicino (proximity), senza strappi durante la lettura. */
  html {
    scroll-snap-type: y proximity;
    scroll-padding-top: var(--header);
  }

  /* Ogni sezione riempie lo schermo sotto l'header, contenuto centrato */
  .hero,
  main > .section {
    min-height: calc(100svh - var(--header));
    display: flex;
    flex-direction: column;
    justify-content: center;
    scroll-snap-align: start;
  }
  .hero > .wrap,
  main > .section > .wrap { width: 100%; }
  main > .section { padding-block: clamp(1.25rem, 3.5svh, 3.5rem); }
  .site-footer { scroll-snap-align: end; }

  /* Servizi: la mappa prende l'altezza che resta sotto il titolo, senza
     superare la proporzione di prima. Le tessere sono in percentuale e
     si avvicinano insieme; sotto i 420px diventerebbero illeggibili. */
  .costellazione { container-type: inline-size; }
  .mappa {
    aspect-ratio: auto;
    height: clamp(420px, calc(100svh - var(--header) - 13.5rem), 58.75cqw);
  }

  /* Clienti e Come lavoriamo: la fascia scura non parte piu' dall'alto con
     un'altezza fissa, ma finisce sempre a meta' delle card. Col contenuto
     centrato in verticale, un'altezza fissa si disallineerebbe. */
  .clienti-voci,
  .section-metodo { overflow: clip; }
  .clienti-voci::before,
  .section-metodo::before { display: none; }
  .voci,
  .metodo { position: relative; }
  .voci::before,
  .metodo::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    width: 100vw;
    translate: -50% 0;
    top: -100svh;
    bottom: 50%;
    background: var(--c-basalt);
  }
}

/* ═══ Movimento ridotto ═══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .reveal { opacity: 1; transform: none; }

  .js .hero-figure .hero-marchio > * { opacity: 1; animation: none; }
  .hero-marchio .m-linea { stroke-dashoffset: 0; }
  .js .costellazione .tessera, .js .costellazione .mappa-legami { opacity: 1; animation: none; }
  .js .section-title.reveal .maschera { clip-path: none; transform: none; }
  .js .hero-title .riga > span { transform: none; }
  .js .hero-onde path { stroke-dashoffset: 0; }
  .js .hero-figure .hero-nota { opacity: 1; translate: none; transition: none; }
  .js .studio-visual .hi-pezzo { opacity: 1; transform: none; }
  .js .studio-visual .hi-traccia, .js .studio-visual .hi-riga { stroke-dashoffset: 0; }
  .js .studio-visual .hi-nodo { opacity: 1; }
  .js .studio-visual .hi-barra { transform: none; }
  .hi-impulso { display: none; }
  .js .metodo .metodo-passo { opacity: 1; translate: none; }
  .site-header::after { animation-duration: auto !important; }
}

/* ═══════════════════════════════════════════════════════════════
   BANNER E PREFERENZE COOKIE
   Regola di fondo: rifiutare deve costare quanto accettare.
   I pulsanti hanno la stessa dimensione e lo stesso peso visivo;
   solo "Accetta" è pieno, per orientare senza forzare la mano.
   ═══════════════════════════════════════════════════════════════ */

.cc-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 300;
  padding: clamp(1rem, .6rem + 1.5vw, 1.6rem);
  background: var(--c-surface);
  border-top: 1px solid var(--c-line-strong);
  box-shadow: 0 -14px 40px -26px rgba(42, 35, 32, .55);
  transform: translateY(102%);
  transition: transform .42s var(--ease);
}
.cc-banner.cc-visibile { transform: none; }
.cc-banner.cc-nascosto { transform: translateY(102%); }

.cc-banner-corpo {
  max-width: var(--wrap);
  margin-inline: auto;
  display: grid;
  gap: .7rem;
}

.cc-titolo {
  font-family: var(--f-display);
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -.02em;
}

.cc-testo {
  font-size: .89rem;
  line-height: 1.62;
  color: var(--c-muted);
  max-width: 68ch;
}
.cc-testo a {
  color: var(--c-terra-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cc-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: .25rem;
}

.cc-btn {
  font-family: var(--f-body);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1;
  padding: .82rem 1.3rem;
  min-width: 9.5rem;
  border-radius: 10px;
  border: 1.5px solid var(--c-line-strong);
  background: transparent;
  color: var(--c-ink);
  cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease);
}
.cc-btn:hover { border-color: var(--c-ink); background: rgba(42, 35, 32, .04); }

.cc-btn-accetta {
  background: var(--c-terra);
  border-color: var(--c-terra);
  color: #fff;
}
.cc-btn-accetta:hover { background: var(--c-terra-deep); border-color: var(--c-terra-deep); }

/* ── Pannello preferenze ────────────────────────────────────── */

.cc-overlay {
  position: fixed;
  inset: 0;
  z-index: 310;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(42, 35, 32, .55);
  backdrop-filter: blur(3px);
  overflow-y: auto;
}

.cc-modale {
  width: min(38rem, 100%);
  max-height: min(88vh, 46rem);
  overflow-y: auto;
  padding: clamp(1.3rem, 1rem + 1.2vw, 2rem);
  background: var(--c-sand);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  box-shadow: 0 30px 70px -30px rgba(42, 35, 32, .7);
}

.cc-modale-testa {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .6rem;
}
.cc-modale-testa .cc-titolo { font-size: 1.3rem; font-weight: 700; }

.cc-chiudi {
  flex: none;
  width: 34px; height: 34px;
  font-size: 1.5rem;
  line-height: 1;
  border: 1px solid var(--c-line-strong);
  border-radius: 9px;
  background: transparent;
  color: var(--c-muted);
  cursor: pointer;
}
.cc-chiudi:hover { color: var(--c-ink); border-color: var(--c-ink); }

.cc-categorie {
  display: grid;
  gap: .75rem;
  margin: 1.3rem 0;
}

.cc-categoria {
  padding: 1.1rem 1.2rem;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
}
.cc-categoria-testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .5rem;
}
.cc-categoria-nome {
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.015em;
}
.cc-categoria-testo {
  font-size: .87rem;
  line-height: 1.6;
  color: var(--c-muted);
}
.cc-categoria-servizi {
  margin-top: .6rem;
  font-family: var(--f-mono);
  font-size: .73rem;
  color: var(--c-muted);
}

.cc-sempre-attivo {
  flex: none;
  font-size: .78rem;
  font-weight: 600;
  color: var(--c-terra-deep);
  background: var(--c-chip);
  border: 1px solid var(--c-chip-line);
  padding: .34rem .6rem;
  border-radius: 999px;
}

/* Interruttore: l'input vero resta sotto, per tastiera e screen reader */
.cc-switch {
  position: relative;
  flex: none;
  width: 46px; height: 26px;
  cursor: pointer;
}
.cc-switch input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.cc-switch-slitta {
  position: absolute;
  inset: 0;
  background: var(--c-line-strong);
  border-radius: 999px;
  transition: background-color .22s var(--ease);
  pointer-events: none;
}
.cc-switch-slitta::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  background: var(--c-surface);
  border-radius: 50%;
  transition: transform .22s var(--ease);
}
.cc-switch input:checked + .cc-switch-slitta { background: var(--c-terra); }
.cc-switch input:checked + .cc-switch-slitta::after { transform: translateX(20px); }
.cc-switch input:focus-visible + .cc-switch-slitta {
  outline: 2px solid var(--c-terra-deep);
  outline-offset: 3px;
}
.cc-switch-testo {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cc-modale-link {
  font-size: .84rem;
  color: var(--c-muted);
  margin-bottom: 1.2rem;
}
.cc-modale-link a {
  color: var(--c-terra-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cc-modale-piede {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.cc-modale-piede .cc-btn { flex: 1 1 9rem; min-width: 0; }

@media (max-width: 560px) {
  .cc-banner { padding: .9rem 1rem 1rem; }
  .cc-banner-corpo { gap: .45rem; }
  .cc-titolo { font-size: .98rem; }
  .cc-testo { font-size: .8rem; line-height: 1.5; }
  /* Tre pulsanti affiancati, stessa misura: rifiutare costa quanto accettare */
  .cc-azioni { gap: .4rem; }
  .cc-azioni .cc-btn { flex: 1 1 0; min-width: 0; padding: .78rem .4rem; font-size: .84rem; }
  .cc-modale-piede .cc-btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-banner { transition: none; }
  .cc-switch-slitta, .cc-switch-slitta::after { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   PAGINE LEGALI (privacy policy, cookie policy)
   Colonna stretta, gerarchia piatta, zero decorazione: qui conta
   solo che si legga e che si trovi in fretta il paragrafo giusto.
   ═══════════════════════════════════════════════════════════════ */

.legal { padding-block: clamp(3rem, 2rem + 4vw, 5rem) var(--section-y); }
.legal-wrap { max-width: 46rem; }

.legal-eyebrow {
  display: block;
  font-size: .92rem;
  font-weight: 600;
  color: var(--c-terra-deep);
  margin-bottom: 1rem;
}
.legal h1 {
  font-family: var(--f-display);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.032em;
  margin-bottom: 1rem;
}
.legal-aggiornamento {
  font-family: var(--f-mono);
  font-size: .78rem;
  color: var(--c-muted);
  padding-bottom: 1.8rem;
  margin-bottom: 2.2rem;
  border-bottom: 1px solid var(--c-line);
}
.legal h2 {
  font-family: var(--f-display);
  font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -.022em;
  margin-top: 2.6rem;
  margin-bottom: .8rem;
  color: var(--c-ink);
}
.legal h3 {
  font-family: var(--f-display);
  font-size: 1.03rem;
  font-weight: 600;
  letter-spacing: -.015em;
  margin-top: 1.6rem;
  margin-bottom: .5rem;
  color: var(--c-ink);
}
.legal p, .legal li { font-size: .96rem; line-height: 1.72; color: var(--c-muted); }
.legal p + p { margin-top: .9rem; }
.legal strong { color: var(--c-ink); font-weight: 600; }
.legal a { color: var(--c-terra-deep); text-decoration: underline; text-underline-offset: 2px; }

.legal ul.legal-elenco {
  display: grid;
  gap: .55rem;
  margin-top: .9rem;
  padding-left: 1.2rem;
  list-style: disc;
}
.legal ul.legal-elenco li { padding-left: .3rem; }

.legal-nota {
  margin-top: 1.4rem;
  padding: 1.1rem 1.3rem;
  background: var(--c-chip);
  border: 1px solid var(--c-chip-line);
  border-radius: var(--radius-sm);
}
.legal-nota p { color: var(--c-ink); }

.legal-tabella-scroll {
  overflow-x: auto;
  margin-top: 1.2rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
}
.legal-tabella {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: .87rem;
}
.legal-tabella th, .legal-tabella td {
  padding: .8rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--c-line);
}
.legal-tabella th {
  font-size: .82rem;
  font-weight: 600;
  color: var(--c-muted);
  background: var(--c-surface);
}
.legal-tabella td { color: var(--c-muted); }
.legal-tabella tr:last-child td { border-bottom: none; }
.legal-tabella code {
  font-family: var(--f-mono);
  font-size: .84em;
  color: var(--c-ink);
  background: var(--c-chip);
  padding: .12rem .4rem;
  border-radius: 4px;
}

.legal-torna {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 3rem;
  font-size: .92rem;
  font-weight: 600;
  color: var(--c-ink);
  text-decoration: none;
  border-bottom: 1.5px solid var(--c-line-strong);
  padding-bottom: .2rem;
}
.legal-torna:hover { border-bottom-color: var(--c-ink); }