/* ==========================================================================
   Lizard Digital — Design tokens
   Estratti dal Figma "Lizard Digital" › pagina "New Web site - 2026"
   ========================================================================== */

:root {
  /* ===== DESIGN SYSTEM LIZARD DIGITAL ==================================
     Un solo set di token per tutto il sito. Le pagine non definiscono
     colori, dimensioni o spaziature proprie: usano questi. */
  color-scheme: light;

  /* --- Colore ---------------------------------------------------------- */
  --color-accent:        #00FF9C;               /* verde brand: l'unico verde del sito */
  --color-ink:           #1D1F1D;               /* testo e superfici scure */
  --color-ink-2:         #2A2D2A;               /* superficie scura rialzata, segnaposto foto */
  --color-ink-3:         #151715;               /* superficie scura profonda (disegni) */
  --color-background:    #F7F7F5;               /* fondo pagina */
  --color-surface:       #EFEEEA;               /* fondo sezione alternata, fondo media */
  --color-white:         #FFFFFF;
  --color-text:          var(--color-ink);
  --color-text-muted:    rgba(29, 31, 29, 0.72); /* testo secondario su chiaro */
  --color-text-subtle:   rgba(29, 31, 29, 0.45); /* terzo livello su chiaro */
  --color-text-accent-2: #676F62;               /* verde-grigio: secondo tono delle headline */
  --color-border:        rgba(29, 31, 29, 0.12);
  --color-border-strong: rgba(29, 31, 29, 0.26);
  /* testo e linee su fondo scuro */
  --on-dark:             #F7F7F5;
  --on-dark-hi:          rgba(247, 247, 245, 0.86);
  --on-dark-md:          rgba(247, 247, 245, 0.72);
  --on-dark-lo:          rgba(247, 247, 245, 0.45);
  --on-dark-faint:       rgba(247, 247, 245, 0.28);
  --border-on-dark:      rgba(247, 247, 245, 0.16);
  /* verde in trasparenza (solo fondi e aloni) */
  --accent-a06:          rgba(0, 255, 156, 0.06);
  --accent-a15:          rgba(0, 255, 156, 0.15);
  --accent-a30:          rgba(0, 255, 156, 0.30);
  --accent-a50:          rgba(0, 255, 156, 0.50);
  /* colori di servizio (non di brand) */
  --color-error:         #C2452F;
  --color-todo:          #FFF3B0;
  --sand:                #D5CFC3;               /* hover menu settori, segnaposto */
  --sage:                #99A193;               /* hover menu soluzioni */
  --taupe:               #968E83;               /* hover menu servizi */

  /* alias storici: puntano ai token sopra */
  --accent:      var(--color-accent);
  --accent-mid:  var(--color-accent);
  --accent-ink:  var(--color-accent);
  --ink:         var(--color-ink);
  --ink-menu:    var(--color-ink);
  --ink-70:      var(--color-text-muted);
  --muted:       var(--color-text-accent-2);
  --muted-50:    rgba(80, 80, 80, 0.5);
  --paper:       var(--color-background);
  --paper-2:     var(--color-surface);
  --white:       var(--color-white);
  --line:        var(--color-border);
  --line-strong: var(--color-border-strong);
  --line-invert: var(--border-on-dark);

  /* --- Tipografia: Lexend ---------------------------------------------- */
  --font: "Lexend", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --fw-light: 300;   /* H2, lead, testo */
  --fw-reg:   400;   /* hero, H1 */
  --fw-med:   500;   /* H3, H4, pulsanti, etichette maiuscole */
  --fw-bold:  700;   /* enfasi nei titoli, etichette di sezione */

  /* Scala unica. Un livello = un token. */
  --fs-display: clamp(2.4rem, 10.5vw, 9.5rem);        /* solo scritte decorative giganti */
  --fs-hero:    clamp(2.5rem, 4.45vw, 4rem);          /* titolo hero: 64px */
  --fs-h1:      clamp(2.25rem, 3.9vw, 3.5rem);        /* H1 di pagina senza hero, statement: 56px */
  --fs-h2:      clamp(1.75rem, 3.2vw, 2.75rem);       /* titolo di sezione: 44px */
  --fs-h3:      clamp(1.375rem, 2vw, 1.75rem);        /* titolo di blocco, frase in evidenza: 28px */
  --fs-h4:      1.25rem;                              /* titolo di card: 20px */
  --fs-lead:    clamp(1.125rem, 1.5vw, 1.35rem);      /* lead / sottotitolo: 21.6px */
  --fs-body:    1rem;                                 /* 16px */
  --fs-small:   0.875rem;                             /* 14px: descrizioni card, pulsanti, menu */
  --fs-micro:   0.8125rem;                            /* 13px: etichette maiuscole, numeri, didascalie */
  --fs-tag:     0.75rem;                              /* 12px: tag e badge */
  --fs-label:   1.25rem;                              /* 20px: etichetta di sezione */

  --lh-tight: 1.1;    /* hero, H1 */
  --lh-snug:  1.22;   /* H2, H3, H4 */
  --lh-ui:    1.45;   /* lead, testo breve, card */
  --lh-body:  1.6;    /* paragrafi */

  --ls-display: -0.02em;  /* hero, H1, H2 */
  --ls-tight:   -0.01em;  /* H3, frasi grandi */
  --ls-wide:    0.06em;   /* tag */
  --ls-caps:    0.14em;   /* etichette maiuscole */

  /* --- Spazio ------------------------------------------------------------ */
  --s-1: 0.5rem;   /*  8 */
  --s-2: 1rem;     /* 16 */
  --s-3: 1.5rem;   /* 24 */
  --s-4: 2rem;     /* 32 */
  --s-5: 3rem;     /* 48 */
  --s-6: 4rem;     /* 64 */
  --s-7: 6rem;     /* 96 */
  --s-8: 8rem;     /* 128 */
  --space-1: var(--s-1); --space-2: var(--s-2); --space-3: var(--s-3); --space-4: var(--s-4);
  --space-5: var(--s-5); --space-6: var(--s-6); --space-7: var(--s-7); --space-8: var(--s-8);
  --section-y:       clamp(4.25rem, 10vw, 9.5rem);   /* distanza verticale tra sezioni */
  --section-y-tight: clamp(3rem, 6vw, 5.5rem);

  --gutter: clamp(1.25rem, 4vw, 4.5rem);            /* padding laterale dei container */
  --card-pad:    clamp(1.5rem, 3vw, var(--s-5));    /* padding interno delle card grandi */
  --card-pad-sm: clamp(1.25rem, 2.4vw, var(--s-4)); /* padding interno delle card in griglia */
  --grid-gap:    var(--s-3);                        /* distanza tra card */
  --maxw: 1440px;
  --measure: 64ch;                                  /* larghezza massima del testo */
  --bp-md: 920px;  /* breakpoint tablet (riferimento: le media query usano 920px) */
  --bp-sm: 640px;  /* breakpoint mobile */

  /* --- Forma ------------------------------------------------------------- */
  --r-xs:   2px;     /* barre e indicatori */
  --r-ctl:  4px;     /* pulsanti, campi, tendine */
  --r-md:   16px;    /* elementi medi, icone */
  --r-lg:   32px;    /* card e immagini contenute */
  --r-pill: 999px;   /* tag, pallini */

  /* --- Movimento --------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 200ms;
  --dur: 440ms;
  --dur-slow: 900ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; }
}

/* ==========================================================================
   Lizard Digital — Foglio di stile
   Costruito sul Figma "New Web site - 2026".
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: var(--fw-med); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--accent); color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: var(--r-xs); }
.section--dark :focus-visible, .hero :focus-visible { outline-color: var(--accent); }

.skip-link { position: absolute; left: -9999px; z-index: 999; background: var(--ink); color: var(--white); padding: var(--s-2) var(--s-3); }
.skip-link:focus { left: var(--s-2); top: var(--s-2); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------- Impaginazione */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-tight); }
.section--dark { background: var(--ink); color: var(--paper); }
.section--paper2 { background: var(--paper-2); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.section--dark .rule { background: var(--line-invert); }

/* ---------------------------------------------------------- Tipografia */

/* Etichetta di sezione: ◇ AMBITI DI INTERVENTO ───────── */
.slabel {
  display: flex; align-items: center; gap: 0.7em;
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--s-4);
}
.slabel::before {
  content: ""; width: 10px; height: 10px; flex: none;
  background: var(--accent);
  transform: rotate(45deg);
}
.slabel::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.section--dark .slabel { color: var(--paper); }
.section--dark .slabel::after { background: var(--line-invert); }

/* Headline a due toni — il pattern del Figma */
.h-two {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  text-wrap: balance;
}
.h-two b { font-weight: var(--fw-bold); }
.h-two .lo { color: var(--muted-50); }
.h-two .mid { color: var(--muted); }
.h-two .acc { color: var(--accent-ink); }
.section--dark .h-two { color: var(--paper); }
.section--dark .h-two .lo { color: var(--on-dark-lo); }
.section--dark .h-two .mid { color: var(--on-dark-md); }
.section--dark .h-two .acc { color: var(--accent); }

.h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: var(--fw-light); letter-spacing: var(--ls-tight); }
.h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); font-weight: var(--fw-med); }

.lead {
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  line-height: var(--lh-ui);
  max-width: 58ch;
}
.lead b { font-weight: var(--fw-med); }

.body-text { color: var(--ink-70); max-width: 64ch; line-height: var(--lh-body); }
.body-text b { font-weight: var(--fw-med); color: var(--ink); }
.section--dark .body-text { color: var(--on-dark-md); }
.body-text + .body-text { margin-top: var(--s-2); }

.eyebrow {
  font-size: var(--fs-small);
  font-weight: var(--fw-med);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: var(--s-2);
}
.section--dark .eyebrow { color: var(--accent); }

/* ---------------------------------------------------------- Bottoni */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  padding: 0.85em 1.6em;
  min-height: 42px;
  border-radius: var(--r-ctl);
  border: 1px solid transparent;
  font-size: var(--fs-small);
  font-weight: var(--fw-med);
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: none; }
.btn .arr { transition: transform var(--dur-fast) var(--ease); }
.btn:hover .arr { transform: translateX(3px); }

.btn--accent { background: var(--accent); color: var(--ink); }
.btn--accent:hover,
.btn--accent:focus,
.btn--accent:active {
  background: var(--ink);
  color: var(--accent);
  border-color: var(--btn-edge, transparent);
}
/* Su fondo scuro il pieno verde, allo stato attivo, diventa nero su nero:
   un bordo chiaro tiene visibile la sagoma del pulsante. */
.header, .mobile-menu, .hero, .cta, .footer, .section--dark { --btn-edge: var(--line-invert); }

.btn--dark { background: var(--ink); color: var(--paper); }
.btn--dark:hover { background: var(--accent); color: var(--ink); }

.btn--ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.section--dark .btn--ghost, .hero .btn--ghost { border-color: var(--line-invert); color: var(--paper); }
.section--dark .btn--ghost:hover, .hero .btn--ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* "Approfondisci" con freccia in cerchio */
.more {
  display: inline-flex; align-items: center; gap: 0.7em;
  font-size: var(--fs-small); font-weight: var(--fw-med);
  color: var(--ink);
}
.more__c {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.more:hover .more__c { background: var(--accent); border-color: var(--accent); color: var(--ink); transform: translateX(3px); }
.section--dark .more { color: var(--paper); }
.section--dark .more__c { border-color: var(--line-invert); }

/* ---------------------------------------------------------- Header */
.header {
  position: sticky; top: 0; z-index: 200;
  background: var(--ink-menu);
  color: var(--white);
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  height: 96px;
}

.logo { display: inline-flex; align-items: baseline; gap: 0.12em; font-size: var(--fs-lead); font-weight: var(--fw-med); letter-spacing: var(--ls-display); white-space: nowrap; }
.logo .a { color: var(--accent); }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.1vw, 2.1rem); }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 0.35em;
  font-size: var(--fs-small); font-weight: var(--fw-med);
  color: var(--white); padding-block: 0.5rem;
  position: relative;
  transition: color var(--dur-fast) var(--ease);
}
.nav__link:hover, .nav__link.is-active { color: var(--accent); }
.nav__link .chev { transition: transform var(--dur-fast) var(--ease); }
.nav__item:hover .chev, .nav__item:focus-within .chev { transform: rotate(180deg); }
.nav__link.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--accent);
}

/* Tendine */
.dd {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 210px;
  background: var(--ink-menu);
  border-radius: var(--r-ctl);
  padding: var(--s-1);
  box-shadow: 0 26px 60px -22px rgba(0,0,0,0.6);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
}
.nav__item:hover .dd, .nav__item:focus-within .dd {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.dd a {
  display: block; padding: 0.55em 1.4em;
  font-size: var(--fs-small); font-weight: var(--fw-med);
  color: var(--white); border-radius: var(--r-ctl);
  transition: background var(--dur-fast) var(--ease);
  position: relative;
}
.dd a::before {
  content: ""; position: absolute; left: 0.7em; top: 50%;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  transform: translateY(-50%) scale(0);
  transition: transform var(--dur-fast) var(--ease);
}
.dd a:hover::before { transform: translateY(-50%) scale(1); }
.dd--settori a:hover { background: rgba(213,207,195,0.7); }
.dd--soluzioni a:hover { background: var(--sage); }
.dd--servizi a:hover { background: var(--taupe); }

.burger { display: none; background: none; border: 0; width: 44px; height: 44px; padding: 0.5rem; }
.burger span { display: block; width: 22px; height: 1.5px; background: var(--white); margin: 5px auto; transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 96px 0 0 0; z-index: 199;
  background: var(--ink-menu); color: var(--white);
  padding: var(--s-4) var(--gutter) var(--s-6);
  overflow-y: auto;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
}
.mobile-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.mobile-menu a { display: block; padding: 0.75rem 0; border-bottom: 1px solid var(--line-invert); font-size: var(--fs-h4); font-weight: var(--fw-med); }
.mobile-menu .mm-group { font-size: var(--fs-small); color: var(--on-dark-lo); text-transform: uppercase; letter-spacing: var(--ls-caps); margin-top: var(--s-4); display: block; font-weight: var(--fw-med); }
.mobile-menu .mm-sub { font-size: var(--fs-body); font-weight: var(--fw-light); padding-left: var(--s-2); }
.mobile-menu .btn { width: 100%; margin-top: var(--s-4); }

/* ---------------------------------------------------------- Hero */
.hero {
  position: relative;
  background: var(--ink);
  color: var(--white);
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
.hero__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: clamp(420px, 62vh, 745px);
  display: flex; align-items: flex-end;
  isolation: isolate;
}
.hero__img {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
  transform: scale(1.05);
  animation: heroIn 2200ms var(--ease) forwards;
}
@keyframes heroIn { to { transform: scale(1); } }
.hero__media::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(29, 31, 29, 0.95) 0%, rgba(29, 31, 29, 0.8) 30%, rgba(29, 31, 29, 0.42) 60%, rgba(29, 31, 29, 0.24) 85%, rgba(29, 31, 29, 0.14) 100%),
    linear-gradient(180deg, rgba(29, 31, 29, 0.34) 0%, rgba(29, 31, 29, 0.2) 40%, rgba(29, 31, 29, 0.8) 100%);
}
.hero__body { padding: clamp(1.5rem, 4vw, var(--s-6)); width: 100%; }
.hero__h1 {
  font-size: var(--fs-hero);
  font-weight: var(--fw-reg);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  max-width: 18ch;
  text-wrap: balance;
}
.hero__h1 .acc { color: var(--accent); }
.hero__actions { margin-top: var(--s-4); display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* Manifesto sotto l'hero */
.manifesto { text-align: center; padding-block: clamp(2.5rem, 6vw, var(--s-6)); }
.manifesto .lead { margin-inline: auto; color: var(--on-dark-hi); }

/* Wordmark gigante DIGITAL CONTRACTOR */
.wordmark {
  font-size: var(--fs-display);
  line-height: 0.92;
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-display);
  color: var(--border-on-dark);
  white-space: nowrap;
  text-align: center;
  user-select: none;
  padding-bottom: clamp(1.5rem, 4vw, var(--s-5));
}

/* ---------------------------------------------------------- Griglie */
.grid { display: grid; gap: var(--s-3); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2rem, 5vw, var(--s-7)); align-items: start; }
.split--sticky > :first-child { position: sticky; top: 130px; }

.section__head { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: clamp(1.5rem,4vw,var(--s-6)); align-items: end; margin-bottom: var(--s-5); }
.section__head--single { grid-template-columns: 1fr; }
.section__head .head-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* ---------------------------------------------------------- Card competenze */
.comp {
  border-top: 1px solid var(--line);
  padding-top: var(--s-3);
}
.comp__t { font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; margin-bottom: var(--s-2); }
.comp__d { color: var(--ink-70); font-size: var(--fs-small); line-height: var(--lh-body); }
.section--dark .comp { border-color: var(--line-invert); }
.section--dark .comp__d { color: var(--on-dark-md); }

/* ---------------------------------------------------------- Card settore */
.sector {
  position: relative; display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 3/4;
  background: var(--ink-menu);
  isolation: isolate;
}
.sector__img { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; transition: transform var(--dur-slow) var(--ease); }
.sector:hover .sector__img { transform: scale(1.06); }
.sector::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(29,31,29,0.05) 34%, rgba(29,31,29,0.88) 100%);
}
.sector__body { position: absolute; inset: auto 0 0 0; padding: var(--s-3); color: var(--white); }
.sector__n {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  font-size: var(--fs-lead); font-weight: var(--fw-med); line-height: var(--lh-snug);
}
.sector__n .arr { color: var(--accent); transition: transform var(--dur) var(--ease); flex: none; }
.sector:hover .arr { transform: translate(4px,-4px); }
.sector__d {
  font-size: var(--fs-small); font-weight: var(--fw-light); line-height: var(--lh-ui);
  color: var(--on-dark-hi);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height var(--dur) var(--ease), opacity var(--dur) var(--ease), margin-top var(--dur) var(--ease);
}
.sector:hover .sector__d, .sector:focus-visible .sector__d { max-height: 7em; opacity: 1; margin-top: 0.5rem; }

/* ---------------------------------------------------------- Card soluzione */
.solution {
  background: var(--white);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.solution:hover { transform: translateY(-5px); box-shadow: 0 26px 54px -28px var(--color-text-subtle); }
.solution__media { aspect-ratio: 16/10; position: relative; overflow: hidden; background: var(--paper-2); }
.solution__img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform var(--dur-slow) var(--ease); }
.solution:hover .solution__img { transform: scale(1.05); }
.solution__body { padding: var(--s-3); display: flex; flex-direction: column; gap: var(--s-1); flex: 1; }
.solution__t { font-size: var(--fs-h4); font-weight: var(--fw-med); }
.solution__d { color: var(--ink-70); font-size: var(--fs-small); line-height: var(--lh-body); }
.solution__f { margin-top: auto; padding-top: var(--s-3); }
.section--dark .solution { background: rgba(247,247,245,0.06); }
.section--dark .solution__t { color: var(--paper); }
.section--dark .solution__d { color: var(--on-dark-md); }

/* ---------------------------------------------------------- Processo (accordion) */
.steps { border-top: 1px solid var(--line); }
.section--dark .steps { border-color: var(--line-invert); }
.step { border-bottom: 1px solid var(--line); }
.section--dark .step { border-color: var(--line-invert); }

.step__btn {
  width: 100%; background: none; border: 0; text-align: left;
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-3);
  align-items: center;
  padding: var(--s-3) 0;
  color: inherit;
  transition: color var(--dur-fast) var(--ease);
}
.step__btn:hover { color: var(--muted); }
.section--dark .step__btn:hover { color: var(--accent); }
.step__n { font-size: var(--fs-small); font-weight: var(--fw-med); color: var(--muted); font-variant-numeric: tabular-nums; }
.step__t { font-size: var(--fs-h3); font-weight: var(--fw-med); }
.step__ic { width: 22px; height: 22px; position: relative; flex: none; }
.step__ic::before, .step__ic::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 1.5px; background: currentColor;
  transition: transform var(--dur-fast) var(--ease);
}
.step__ic::after { transform: rotate(90deg); }
.step__btn[aria-expanded="true"] .step__ic::after { transform: rotate(0); }

.step__panel { overflow: hidden; max-height: 0; transition: max-height var(--dur) var(--ease); }
.step__panel-in { padding: 0 0 var(--s-4) calc(var(--s-3) + 1.6rem); }
.step__panel-in .body-text { max-width: 70ch; }

/* Variante scura per lo step aperto, come nel mockup */
.step.is-open { background: var(--ink); color: var(--paper); border-radius: var(--r-lg); border-color: transparent; padding-inline: var(--s-3); }
.step.is-open + .step { border-top: 1px solid var(--line); }
.step.is-open .step__n { color: var(--accent); }
.step.is-open .body-text { color: var(--on-dark-md); }

/* ---------------------------------------------------------- Case study */
.case {
  display: grid; grid-template-columns: 1fr 1fr;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--ink); color: var(--paper);
  min-height: 444px;
}
.case__body { padding: var(--card-pad); display: flex; flex-direction: column; }
.case__t { font-size: var(--fs-h3); font-weight: var(--fw-med); line-height: var(--lh-snug); }
.case__d { color: var(--on-dark-md); font-size: var(--fs-small); margin-top: var(--s-2); line-height: var(--lh-body); }
.case__tags { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-3); }
.case__f { margin-top: auto; padding-top: var(--s-4); }
.case__media { position: relative; overflow: hidden; background: var(--paper-2); }
.case__img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform var(--dur-slow) var(--ease); }
.case:hover .case__img { transform: scale(1.04); }

.tag {
  font-size: var(--fs-tag); font-weight: var(--fw-med);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  padding: 0.4em 0.9em; border-radius: var(--r-pill);
  border: 1px solid var(--line); color: var(--muted); background: transparent;
}
.section--dark .tag, .case .tag { border-color: var(--line-invert); color: var(--on-dark-md); }
.tag--accent { border-color: var(--accent); color: var(--accent); }

/* Card progetto in griglia */
.project { display: block; }
.project__media { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16/11; position: relative; background: var(--paper-2); }
.project__img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform var(--dur-slow) var(--ease); }
.project:hover .project__img { transform: scale(1.05); }
.project__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: var(--s-2); }
.project__t { font-size: var(--fs-h4); font-weight: var(--fw-med); margin-top: 0.6rem; line-height: var(--lh-snug); }
.project__d { color: var(--ink-70); font-size: var(--fs-small); margin-top: 0.3rem; line-height: var(--lh-body); }

/* ---------------------------------------------------------- Carousel */
.carousel { position: relative; }
.carousel__track {
  display: flex; gap: var(--s-3);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-bottom: var(--s-2);
}
.carousel__track::-webkit-scrollbar { display: none; }
/* (2/10) Scroll verticale mai catturato dai caroselli.
   Con overflow-x: auto il browser calcola overflow-y: auto. Le card non ancora
   rivelate (.reveal, translateY 20px) sporgevano di 12px sotto il binario, che
   diventava scorrevole anche in verticale: la rotella sopra il carosello faceva
   scorrere prima il binario e il gesto vi restava agganciato (sul trackpad la
   pagina si fermava del tutto). Con overflow-y: hidden il binario scorre solo in
   orizzontale e il movimento verticale passa sempre alla pagina. */
.carousel__track, .cs-gal__track, .spazi__nav { overflow-y: hidden; }
.carousel__track > * { scroll-snap-align: start; flex: 0 0 auto; }
.carousel__nav { display: flex; gap: var(--s-1); justify-content: center; margin-top: var(--s-3); }
.cbtn {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink);
  display: grid; place-items: center;
  transition: all var(--dur-fast) var(--ease);
}
.cbtn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cbtn[disabled] { opacity: 0.3; cursor: not-allowed; }
.section--dark .cbtn { border-color: var(--line-invert); color: var(--paper); }
.section--dark .cbtn:hover { background: var(--accent); color: var(--ink); border-color: var(--accent); }

/* ---------------------------------------------------------- Loghi partner */
.brands { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.5rem, 5vw, 4.5rem); }
.brand {
  font-size: var(--fs-lead); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight);
  color: var(--muted); opacity: 0.75;
  transition: opacity var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.brand:hover { opacity: 1; color: var(--ink); }

/* Loghi dei clienti al posto dei nomi.
   Una riga sola, altezze tarate a occhio: i tre marchi hanno proporzioni
   diverse, la stessa altezza li farebbe pesare in modo diverso. */
.brands--loghi { gap: clamp(1.75rem, 5vw, 4.5rem); }
.brand-logo { width: auto; flex: none; }
.brand-logo--poli     { height: clamp(30px, 4.0vw, 46px); }
.brand-logo--deda     { height: clamp(26px, 3.5vw, 40px); }
.brand-logo--trentino { height: clamp(34px, 4.5vw, 52px); }

/* ---------------------------------------------------------- Pain points */
.pains { margin-top: var(--s-3); }
.pain {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-2);
  align-items: start; padding-block: var(--s-2);
  border-top: 1px solid var(--line);
  font-size: var(--fs-lead); font-weight: var(--fw-light); line-height: var(--lh-ui);
}
.pain:last-child { border-bottom: 1px solid var(--line); }
.pain__m { color: var(--accent-ink); font-weight: var(--fw-med); font-size: var(--fs-small); padding-top: 0.4em; }
.section--dark .pain { border-color: var(--line-invert); }
.section--dark .pain__m { color: var(--accent); }
/* voce con titolo e spiegazione (Retail): il titolo resta al corpo delle voci
   semplici, la spiegazione scende al corpo del testo e al grigio del paragrafo */
.pain__t { display: block; }
.pain__d { display: block; margin-top: 0.4rem; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-70); }

/* ---------------------------------------------------------- FAQ */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; background: none; border: 0; text-align: left;
  padding: var(--s-3) 0;
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3);
  font-size: var(--fs-h4); font-weight: var(--fw-med); line-height: var(--lh-ui);
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease);
}
.faq__q:hover { color: var(--muted); }
.faq__ic { width: 20px; height: 20px; position: relative; flex: none; margin-top: 0.3em; }
.faq__ic::before, .faq__ic::after { content: ""; position: absolute; inset: 50% 0 auto 0; height: 1.5px; background: currentColor; transition: transform var(--dur-fast) var(--ease); }
.faq__ic::after { transform: rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__ic::after { transform: rotate(0); }
.faq__a { overflow: hidden; max-height: 0; transition: max-height var(--dur) var(--ease); }
.faq__a-in { padding: 0 var(--s-6) var(--s-4) 0; color: var(--ink-70); max-width: 72ch; }
.faq__a-in p + p { margin-top: 0.75em; }

/* ---------------------------------------------------------- Filtri */
.filters { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); padding-block: var(--s-3); border-block: 1px solid var(--line); margin-bottom: var(--s-4); }
.fgroup { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.fgroup__l { font-size: var(--fs-small); font-weight: var(--fw-med); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--muted); margin-right: 0.4rem; }
.chip {
  border: 1px solid var(--line); background: transparent;
  border-radius: var(--r-pill); padding: 0.45em 1em;
  font-size: var(--fs-small); font-weight: var(--fw-light); color: var(--ink);
  transition: all var(--dur-fast) var(--ease);
}
.chip:hover { border-color: var(--ink); }
.chip.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.count { font-size: var(--fs-small); color: var(--muted); margin-bottom: var(--s-3); }
.empty { padding: var(--s-7) 0; text-align: center; color: var(--muted); }

/* ---------------------------------------------------------- Lead magnet */
.magnet {
  background: var(--sand);
  border-radius: var(--r-lg);
  padding: var(--card-pad);
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-3); align-items: center;
  position: relative; overflow: hidden;
}
.magnet__t { font-size: var(--fs-h3); font-weight: var(--fw-med); line-height: var(--lh-snug); }
.magnet__d { color: var(--color-text-muted); font-size: var(--fs-small); margin-top: 0.4rem; max-width: 54ch; line-height: var(--lh-body); }

/* ---------------------------------------------------------- Configuratore */
.config { background: var(--white); border-radius: var(--r-lg); padding: var(--card-pad); }
.config__bar { display: flex; gap: 0.35rem; margin-bottom: var(--s-4); }
.config__dot { flex: 1; height: 3px; background: var(--paper-2); border-radius: var(--r-xs); transition: background var(--dur-fast) var(--ease); }
.config__dot.is-done { background: var(--accent); }
.config__step { display: none; }
.config__step.is-active { display: block; animation: fadeUp var(--dur) var(--ease) both; }
.config__q { font-size: var(--fs-h3); font-weight: var(--fw-med); line-height: var(--lh-snug); margin-bottom: var(--s-3); }
.config__opts { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); }
/* `display: grid` con `align-content: start` tiene il testo in alto: il
   <button> per sua natura centra il contenuto, e con opzioni di lunghezza
   diversa i titoli finivano su altezze diverse nella stessa riga. */
.config__opt { display: grid; align-content: start; border: 1px solid var(--line); background: var(--paper); border-radius: var(--r-md); padding: var(--s-3); text-align: left; transition: all var(--dur-fast) var(--ease); }
.config__opt:hover { border-color: var(--ink); transform: translateY(-2px); }
.config__opt strong { display: block; font-weight: var(--fw-med); }
.config__opt span { display: block; font-size: var(--fs-small); color: var(--ink-70); margin-top: 3px; line-height: var(--lh-ui); }
.config__back { margin-top: var(--s-3); font-size: var(--fs-small); color: var(--muted); background: none; border: 0; padding: 0; }
.config__back:hover { color: var(--ink); text-decoration: underline; }
/* Trascrizioni automatiche (1/10): risposte su righe piene, senza una card orfana */
.config[data-config-kind="trascrizioni"] .config__opts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.config[data-config-kind="trascrizioni"] .config__opts:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 920px) { .config[data-config-kind="trascrizioni"] .config__opts, .config[data-config-kind="trascrizioni"] .config__opts:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .config[data-config-kind="trascrizioni"] .config__opts, .config[data-config-kind="trascrizioni"] .config__opts:has(> :nth-child(4):last-child) { grid-template-columns: 1fr; } }

/* Il contatore dice quanto manca: con nove domande la sola barra non basta a
   far capire a che punto si e'. */
.config__n {
  display: block; margin-bottom: var(--s-2);
  font-size: var(--fs-micro); font-weight: var(--fw-med);
  letter-spacing: var(--ls-caps); color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.config__n i { font-style: normal; color: var(--accent-mid); margin-inline: 0.15em; }

/* La scelta gia' fatta resta segnata: tornando indietro si vede cosa si era
   risposto, invece di dover ricordare. */
.config__opt.is-on { border-color: var(--ink); background: var(--white); }
.config__opt.is-on strong::after {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 0.5em;
  border-radius: 1px; background: var(--accent); transform: rotate(45deg) translateY(-1px);
}

/* Esito */
.config__recap {
  margin-bottom: var(--s-3); max-width: 46ch;
  font-size: var(--fs-lead); font-weight: var(--fw-light);
  line-height: var(--lh-ui); color: var(--ink);
}
.config__list { list-style: none; display: grid; gap: var(--s-2); max-width: 62ch; }
.config__list li {
  position: relative; padding-left: 1.6rem;
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-70);
}
.config__list li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 7px; height: 7px; border-radius: 1px;
  background: var(--accent); transform: rotate(45deg);
}
.config__coda { margin-top: var(--s-4); max-width: 58ch; color: var(--muted); }

/* ---------------------------------------------------------- Form */
.form { display: grid; gap: var(--s-3); }
.field { display: grid; gap: 0.45rem; }
.field label { font-size: var(--fs-small); font-weight: var(--fw-med); color: var(--muted); }
.field input, .field textarea, .field select {
  font: inherit; font-weight: var(--fw-light); color: var(--ink);
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-ctl); padding: 0.85em 1em; width: 100%;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent-a30);
}
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--color-error); }
.field__e { color: var(--color-error); font-size: var(--fs-micro); display: none; }
.field.has-error .field__e { display: block; }
.field--row { grid-template-columns: 1fr 1fr; gap: var(--s-2); }

.consent { display: flex; gap: 0.65rem; align-items: flex-start; font-size: var(--fs-micro); color: var(--ink-70); line-height: var(--lh-ui); }
.consent input { width: 18px; height: 18px; flex: none; margin-top: 2px; accent-color: var(--ink); }

.form-ok { display: none; text-align: center; padding: var(--s-6) var(--s-3); animation: fadeUp var(--dur) var(--ease) both; }
.form-ok.is-on { display: block; }
.form-ok__t { width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--ink); display: grid; place-items: center; margin: 0 auto var(--s-3); font-size: var(--fs-lead); }

/* Selettore CTA */
.picker { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s-2); margin-bottom: var(--s-4); }
.pick { border: 1px solid var(--line); background: var(--white); border-radius: var(--r-md); padding: var(--s-3); text-align: left; transition: all var(--dur-fast) var(--ease); }
.pick:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.pick.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pick__e { font-size: var(--fs-micro); font-weight: var(--fw-med); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--muted); }
.pick.is-on .pick__e { color: var(--accent); }
.pick__t { font-size: var(--fs-body); font-weight: var(--fw-med); margin-top: 0.35rem; }
.pick__d { font-size: var(--fs-small); color: var(--ink-70); margin-top: 0.25rem; line-height: var(--lh-ui); }
.pick.is-on .pick__d { color: var(--on-dark-md); }

/* ---------------------------------------------------------- Banda CTA */
.cta { background: var(--ink); color: var(--paper); position: relative; overflow: hidden; }
/* L'alone verde è centrato sui due assi. Stava a `top: -50%`, cioè con il
   centro del cerchio sopra la banda: si vedeva solo l'arco inferiore e
   sembrava tagliato. Centrato, è un alone dietro al titolo e sfuma da solo
   prima di toccare i bordi. */
.cta::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 900px; height: 900px; transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--accent-a15) 0%, transparent 62%);
  pointer-events: none;
}
.cta__in { position: relative; padding-block: clamp(3.5rem, 8vw, var(--s-8)); text-align: center; }
.cta__in .h-two { max-width: 22ch; margin-inline: auto; }
.cta__d { color: var(--on-dark-md); max-width: 58ch; margin: var(--s-3) auto 0; font-size: var(--fs-lead); font-weight: var(--fw-light); line-height: var(--lh-ui); }
.cta__a { margin-top: var(--s-4); display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; }
.cta__m { margin-top: var(--s-5); font-size: var(--fs-small); color: var(--on-dark-lo); }
/* 48px, lo stesso stacco che il pulsante ha sopra di sé: così il pulsante
   resta al centro della propria aria e la riga secondaria si legge come una
   battuta a parte, invece di sembrare un pezzo del blocco del pulsante. */

/* ---------------------------------------------------------- Footer */
.footer { background: var(--ink-menu); color: var(--paper); padding-block: var(--s-6) var(--s-4); }
.footer__top { display: grid; grid-template-columns: 1.5fr repeat(3,1fr); gap: var(--s-5) var(--s-4); }
.footer .logo { font-size: var(--fs-h3); }
.footer__p { color: var(--on-dark-md); margin-top: var(--s-2); max-width: 36ch; font-size: var(--fs-small); line-height: var(--lh-body); }
.footer__col h4 { font-size: var(--fs-micro); font-weight: var(--fw-med); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--on-dark-lo); margin-bottom: var(--s-2); }
.footer__col a { display: block; padding-block: 0.3rem; color: var(--on-dark-hi); font-size: var(--fs-small); transition: color var(--dur-fast) var(--ease); }
.footer__col a:hover { color: var(--accent); }
.footer__nl { margin-top: var(--s-3); display: flex; gap: 0.5rem; max-width: 400px; }
.footer__nl input { flex: 1; background: transparent; border: 1px solid var(--line-invert); border-radius: var(--r-ctl); padding: 0.75em 1em; color: var(--paper); font: inherit; font-size: var(--fs-small); }
.footer__nl input::placeholder { color: var(--on-dark-lo); }
.footer__nl input:focus { outline: none; border-color: var(--accent); }
.footer__bot { margin-top: var(--s-6); padding-top: var(--s-3); border-top: 1px solid var(--line-invert); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); justify-content: space-between; font-size: var(--fs-micro); color: var(--on-dark-lo); }

/* ---------------------------------------------------------- Breadcrumb */
.crumbs { display: flex; flex-wrap: wrap; gap: 0.55em; align-items: center; font-size: var(--fs-micro); color: var(--muted); padding-top: var(--s-4); }
.crumbs a:hover { color: var(--ink); }
.crumbs .s { opacity: 0.5; }
.hero .crumbs { color: var(--on-dark-md); }
.hero .crumbs a:hover { color: var(--accent); }

/* ---------------------------------------------------------- Segnaposto immagini */
.ph {
  background: linear-gradient(135deg, var(--sand) 0%, var(--paper-2) 100%);
  position: relative; overflow: hidden;
  display: grid; place-items: center;
}
.ph::after {
  content: attr(data-label);
  font-size: var(--fs-micro); font-weight: var(--fw-med);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--color-text-accent-2); padding: 0 1rem; text-align: center;
}
/* slot con la foto vera: niente etichetta, niente fondo segnaposto */
.ph--foto { background: var(--ink); }
.ph--foto::after { content: none; }
.ph--dark { background: linear-gradient(135deg, var(--color-ink-2) 0%, var(--ink) 100%); }
.ph--dark::after { color: var(--on-dark-faint); }
.ph--r { border-radius: var(--r-lg); }
.ph--tall { aspect-ratio: 3/4; }
.ph--wide { aspect-ratio: 16/10; }
.ph--sq { aspect-ratio: 1/1; }

/* ---------------------------------------------------------- Reveal */
.reveal { opacity: 0; transform: translateY(20px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal[data-d="1"].is-in { transition-delay: 80ms; }
.reveal[data-d="2"].is-in { transition-delay: 160ms; }
.reveal[data-d="3"].is-in { transition-delay: 240ms; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .hero__img { animation: none; transform: none; }
}

/* ---------------------------------------------------------- Responsive */
@media (max-width: 1100px) {
  .grid--4 { grid-template-columns: repeat(2,1fr); }
  .footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 920px) {
  .nav, .header__inner > .btn { display: none; }
  .burger { display: block; }
  .grid--3 { grid-template-columns: repeat(2,1fr); }
  .split, .section__head { grid-template-columns: 1fr; }
  .split--sticky > :first-child { position: static; }
  .case { grid-template-columns: 1fr; }
  .case__media { min-height: 260px; }
  .picker, .magnet { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .field--row { grid-template-columns: 1fr; }
  .faq__a-in { padding-right: 0; }
  .step__panel-in { padding-left: 0; }
}

/* ---------------------------------------------------------- Link testuale */
.link-u {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-weight: var(--fw-med);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  padding-bottom: 2px;
}
.link-u:hover { background-size: 0% 1px; color: var(--muted); }

/* ==========================================================================
   Correzioni
   ========================================================================== */

/* I segnaposto riempiono sempre il contenitore media */
.hero__media > .ph,
.sector > .ph,
.solution__media > .ph,
.project__media > .ph,
.case__media > .ph {
  position: absolute; inset: 0; z-index: 0;
  aspect-ratio: auto; border-radius: 0;
}
.hero__media > .ph { z-index: -2; }
.sector > .ph { z-index: -2; }
.hero__media > .ph > *, .sector > .ph > *,
.solution__media > .ph > *, .project__media > .ph > *,
.case__media > .ph > * { position: absolute; inset: 0; }

/* Dove il testo va sopra l'immagine, il segnaposto è scuro */
.hero__media > .ph, .sector > .ph, .case__media > .ph {
  background: linear-gradient(135deg, var(--color-ink-2) 0%, var(--color-ink) 100%);
}
.hero__media > .ph::after, .sector > .ph::after, .case__media > .ph::after {
  color: var(--on-dark-faint);
}

/* Grassetto leggibile sulle sezioni scure */
.section--dark .body-text b,
.hero .body-text b { color: var(--paper); }
.section--dark .lead b, .hero .lead b { color: var(--white); }

/* Wordmark: si adatta sempre alla larghezza, qualunque font */
.wordmark { padding-bottom: clamp(1.5rem, 4vw, var(--s-5)); }
.wordmark svg { width: 100%; height: auto; display: block; overflow: visible; }
.wordmark text {
  font-family: var(--font);
  font-weight: var(--fw-light);
  fill: var(--border-on-dark);
}

/* Testata di sezione: le azioni restano in basso a destra */
.section__head .head-actions { justify-content: flex-start; align-self: end; }

/* Card settore: gradiente più marcato per la leggibilità del nome */
.sector::after {
  background: linear-gradient(180deg, var(--color-border) 26%, var(--color-text-muted) 62%, rgba(29,31,29,0.93) 100%);
}

/* La banda CTA è un contesto scuro a tutti gli effetti */
.cta .h-two { color: var(--paper); }
.cta .h-two .lo { color: var(--on-dark-lo); }
.cta .h-two .mid { color: var(--on-dark-md); }
.cta .h-two .acc { color: var(--accent); }
.cta .eyebrow { color: var(--accent); }
.cta .btn--ghost { border-color: var(--line-invert); color: var(--paper); }
.cta .btn--ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* Etichetta del segnaposto hero in alto a destra, non sopra il titolo */
.hero__media > .ph { place-items: start end; padding: var(--s-3); }

/* hidden deve vincere sui display di layout */
[hidden] { display: none !important; }

/* Selettore CTA: le tre righe vanno impilate */
.pick__e, .pick__t, .pick__d { display: block; }

/* --------------------------------------------------------------------------
   Wordmark tranciato dal bordo della sezione scura.
   Il blocco si ferma a metà dell'altezza dei glifi e taglia il resto:
   la sezione chiara che segue completa il taglio.
   -------------------------------------------------------------------------- */
.hero--home { padding-bottom: 0; }

/* Il titolo della home è costruito su due frasi: il punto è una battuta, non
   una pausa qualsiasi, quindi il <br> tiene ciascuna frase sulla propria riga.
   La misura di 18ch dell'hero generico spezzerebbe la prima frase lasciando
   "integra." orfano: qui si allarga quanto basta perché ogni frase respiri.
   Solo sulla home — gli altri hero restano come sono. */
.hero--home .hero__h1 { max-width: 32ch; }


.wordmark {
  padding-bottom: 0;
  overflow: hidden;
  /* l'SVG ha viewBox 1000×118; fermandosi a 54 il taglio cade
     circa a metà dell'altezza delle maiuscole */
  aspect-ratio: 1000 / 54;
}
.wordmark svg { display: block; width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   Manifesto sotto l'hero: due righe volute su desktop.
   Sotto i 900px torna a flusso libero, altrimenti la seconda riga
   diventerebbe illeggibile su schermo stretto.
   -------------------------------------------------------------------------- */
.manifesto .lead { max-width: min(100%, 1120px); margin-inline: auto; }
.manifesto .mline { display: inline; }
@media (min-width: 900px) {
  .manifesto .mline { display: block; }
}

/* --------------------------------------------------------------------------
   Logo Lizard Digital
   Vettoriale in linea, versione negativa: header e footer sono su fondo scuro.
   Il rapporto è 5,34:1, quindi si dimensiona sull'altezza e la larghezza segue.
   -------------------------------------------------------------------------- */
.logo { display: inline-flex; align-items: center; }
.logo__svg { display: block; width: auto; }
.logo__svg--header { height: 34px; }
.logo__svg--footer { height: 38px; }

/* Il logo dell'header reagisce al passaggio del mouse come gli altri link */
.header .logo { transition: opacity var(--dur-fast) var(--ease); }
.header .logo:hover { opacity: 0.75; }

@media (max-width: 640px) {
  .logo__svg--header { height: 24px; }
  .logo__svg--footer { height: 32px; }
}

/* --------------------------------------------------------------------------
   Tendine del menu — correzione sovrapposizione
   Il problema: cliccando una voce il focus restava sul link e :focus-within
   teneva la sua tendina aperta; passando poi su un'altra voce se ne apriva
   una seconda e le due si accavallavano.
   -------------------------------------------------------------------------- */

/* La voce sotto il mouse sta sempre sopra alle vicine */
.nav__item { z-index: 1; }
.nav__item:hover { z-index: 10; }

/* Allineata alla voce di menu, non centrata: più prevedibile e non sconfina
   sulla voce accanto. Larghezza sul contenuto, così nessuna riga si taglia. */
.dd {
  left: 0;
  transform: translateY(-6px);
  width: max-content;
  min-width: 200px;
  max-width: 300px;
  padding: var(--s-2) var(--s-1);
}

/* Apertura: col mouse sempre, con la tastiera solo quando il focus è
   davvero visibile. Così il clic non lascia più la tendina bloccata aperta. */
.nav__item:hover .dd,
.nav__item:has(:focus-visible) .dd {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0);
}
/* Annulla la vecchia regola centrata */
.nav__item:focus-within .dd { transform: translateY(-6px); }
.nav__item:hover .dd,
.nav__item:has(:focus-visible) .dd { transform: translateY(0); }

/* Un filo d'aria in più fra le voci, così le tendine non si sfiorano */
.nav { gap: clamp(1.1rem, 2.4vw, 2.4rem); }

.dd a { padding: 0.6em 1.4em; white-space: nowrap; }

/* Ripiego per i browser senza :has() — la tastiera continua a funzionare */
@supports not selector(:has(*)) {
  .nav__item:focus-within .dd {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
  }
}

/* Ponte invisibile sopra la tendina: copre i 10px vuoti fra la voce di menu
   e il pannello, altrimenti il mouse "esce" e la tendina si chiude prima
   che tu riesca a raggiungerla. */
.dd::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -14px;
  height: 14px;
}

/* Bordo sottile: su fondo scuro la sola ombra non stacca il pannello */
.dd { border: 1px solid rgba(247, 247, 245, 0.1); }

/* --------------------------------------------------------------------------
   Tendina Soluzioni a gruppi (23 set). Le intestazioni sono solo etichette:
   non sono link, non ricevono il puntatore. La voce «Soluzioni» porta alla
   pagina con tutte le soluzioni; la tendina si apre al passaggio del mouse.
   -------------------------------------------------------------------------- */
.dd--soluzioni { max-width: none; }
.dd__h {
  display: block; padding: 0.35em 1.4em 0.4em;
  font-size: var(--fs-micro); font-weight: var(--fw-med);
  letter-spacing: var(--ls-caps); text-transform: uppercase; white-space: nowrap;
  color: var(--on-dark-lo); pointer-events: none; user-select: none;
}
.dd__g + .dd__g { margin-top: 0.5em; padding-top: 0.6em; border-top: 1px solid rgba(247,247,245,0.08); }
.mobile-menu .mm-cat { margin-top: var(--s-2); padding: 0.5rem 0 0.2rem var(--s-2); font-size: var(--fs-micro); }

/* --------------------------------------------------------------------------
   Testata di sezione impilata: titolo e poi l'azione subito sotto, a sinistra.
   Usata in "Ambiti di intervento", dove il link non deve stare in colonna
   a destra ma seguire la headline.
   -------------------------------------------------------------------------- */
.section__head--stack { grid-template-columns: 1fr; }
.section__head--stack .head-actions { margin-top: var(--s-3); }

/* La headline mantiene la misura che aveva in colonna, invece di distendersi
   su tutta la larghezza: a riga piena perde il ritmo del mockup. */
.section__head--stack .h-two { max-width: 22ch; }

/* --------------------------------------------------------------------------
   Carosello dei settori — tutti e nove, con i pallini sotto
   -------------------------------------------------------------------------- */
.carousel__track--sectors > .sector {
  flex: 0 0 clamp(230px, 23vw, 310px);
}

.carousel__dots {
  display: flex; justify-content: center; align-items: center;
  gap: var(--s-1);
  margin-top: var(--s-4);
}
.dot {
  width: 9px; height: 9px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--on-dark-faint);
  transition: background var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              width var(--dur) var(--ease);
}
.dot:hover { background: var(--on-dark-lo); transform: scale(1.15); }
.dot.is-on { background: var(--accent); width: 26px; border-radius: var(--r-pill); }

/* Sulle sezioni chiare i pallini invertono il contrasto */
.section:not(.section--dark) .dot { background: var(--color-border-strong); }
.section:not(.section--dark) .dot:hover { background: var(--color-text-subtle); }
.section:not(.section--dark) .dot.is-on { background: var(--accent-ink); }

/* Il track scorre a filo del contenitore anche in fondo alla pagina */
.carousel__track { scroll-padding-inline: 0; }

/* Su telefono una card per volta, con un assaggio della successiva:
   a 230px se ne vedrebbe una e mezza, che è la larghezza peggiore. */
@media (max-width: 640px) {
  .carousel__track--sectors > .sector { flex: 0 0 min(78vw, 300px); }
}

/* ==========================================================================
   Respiro — revisione della scala verticale
   La griglia originale era tarata stretta: etichette, titoli e contenuti si
   toccavano. Qui si alza il ritmo in modo coerente su tutta la pagina,
   invece di ritoccare i singoli blocchi.
   ========================================================================== */

/* Le sezioni respirano di più, ma restano contenute su schermi piccoli */
.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-tight); }

/* Etichetta di sezione staccata dal titolo che introduce */
.slabel { margin-bottom: var(--s-5); }

/* Testata e contenuto: il salto più importante della pagina */
.section__head { margin-bottom: var(--s-6); gap: clamp(2rem, 5vw, 5rem); }
.section__head--stack .head-actions { margin-top: var(--s-4); }
.section__head--stack .h-two { line-height: var(--lh-snug); }

/* Griglie: più aria fra le colonne e fra le righe */
.grid { gap: var(--s-4); }
.grid--3, .grid--4 { gap: var(--s-4) var(--s-3); }

/* Colonne delle competenze: più stacco dalla riga di separazione */
.comp { padding-top: var(--s-4); }
.comp__t { margin-bottom: var(--s-2); }

/* Card: interni meno compressi */
.solution__body { padding: var(--s-4); gap: 0.4rem; }
.solution__f { padding-top: var(--s-4); }
.sector__body { padding: var(--s-4); }

/* Hero: il blocco di testo non tocca il bordo dell'immagine */
.hero__body { padding: clamp(1.75rem, 4.5vw, 3.5rem); }
.hero__actions { margin-top: var(--s-5); }

/* Manifesto e wordmark */
.manifesto { padding-block: clamp(3rem, 7vw, 5.5rem); }

/* Titoli a due toni: un filo di interlinea in più li rende meno compatti */
.h-two { line-height: var(--lh-snug); }

/* Processo: righe più alte, testo del pannello più staccato */
.step__btn { padding-block: var(--s-4); }
.step__panel-in { padding-bottom: var(--s-5); }

/* FAQ */
.faq__q { padding-block: var(--s-4); }
.faq__a-in { padding-bottom: var(--s-5); }

/* Carosello: i pallini non stanno appiccicati alle card */
.carousel__dots { margin-top: var(--s-5); }
.carousel__track { gap: var(--s-4); padding-bottom: var(--s-1); }

/* Banda CTA e footer */
.cta__in { padding-block: clamp(4.5rem, 10vw, 9.5rem); }
.cta__a { margin-top: var(--s-5); }
.footer { padding-block: var(--s-7) var(--s-5); }
.footer__top { gap: var(--s-6) var(--s-5); }
.footer__col a { padding-block: 0.45rem; }

/* Loghi partner */
.brands { gap: clamp(2rem, 6vw, 5.5rem); }

/* Azione posta sotto la headline, dentro la colonna sinistra della testata */
.head-actions--under { margin-top: var(--s-4); }

/* --------------------------------------------------------------------------
   Testata a colonna unica: titolo, paragrafo e azione tutti sullo stesso
   asse di sinistra. Le misure massime evitano che titolo e testo si
   distendano su tutta la larghezza, dove perderebbero leggibilità.
   -------------------------------------------------------------------------- */
.section__head--left { grid-template-columns: 1fr; }
.section__head--left .h-two { max-width: 30ch; }
.section__head--left .body-text { margin-top: var(--s-3); max-width: 58ch; }
/* Il sommario in corpo grande porta meno caratteri per riga del testo che lo
   segue, ma chiude sullo stesso margine destro: le due misure formano un
   blocco unico invece di due colonne di larghezza diversa. */
.section__head--left .lead { max-width: 44ch; }

/* --------------------------------------------------------------------------
   Card settore con descrizioni lunghe
   I testi dei settori sono diventati paragrafi (fino a 294 caratteri), non
   più una riga: il pannello in apertura deve poterli contenere e il velo
   sull'immagine deve reggere la leggibilità di dodici righe di testo.
   -------------------------------------------------------------------------- */
/* 15px invece di 13: a 13 il testo sopra la foto si leggeva male da computer.
   Il pannello cresce di conseguenza — il tetto d'altezza è in em, quindi
   scala da solo con il corpo e non taglia il testo. */
.sector__d {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}
.sector:hover .sector__d,
.sector:focus-visible .sector__d { max-height: 26em; }

/* ==========================================================================
   Deck dei settori — pagina Settori
   Le nove card non stanno in griglia ma in profondità: una al centro a piena
   scala, le altre che rientrano a scatti sempre più corti finché le ultime
   non sono più schede ma orizzonte. Tutto è fatto con transform e opacity —
   niente librerie: gli stati sono discreti, una transizione CSS li collega
   e resta lavoro per la GPU.
   Le misure arrivano dal JS come variabili, così la stessa regola serve
   desktop e telefono senza duplicare nulla.
   ========================================================================== */
.deck {
  --deck-w: clamp(230px, 23vw, 350px);
  --deck-dur: 860ms;
  --deck-ease: cubic-bezier(.22, 1, .36, 1);
  position: relative;
  margin-inline: calc(var(--gutter) * -1);
  padding-block: var(--s-2);
  overflow: hidden;
}

.deck__stage {
  position: relative;
  height: calc(var(--deck-w) * 4 / 3);
  /* La prospettiva sta qui, sul genitore diretto delle card, e NON si usa
     `transform-style: preserve-3d`: dentro un contesto 3D il browser ordina
     ciò che disegna secondo la posizione nello spazio e ignora lo z-index —
     con le card molto sovrapposte finivano davanti quelle sbagliate. Così
     invece la prospettiva arriva lo stesso e l'ordine lo decidiamo noi. */
  perspective: 1900px;
  touch-action: pan-y;              /* lo swipe orizzontale è nostro, quello verticale resta alla pagina */
  cursor: grab;
  /* Le card sono link: senza questo il browser avvia il proprio trascinamento
     del link, annulla il puntatore (pointercancel) e lo swipe muore al primo
     movimento. */
  user-select: none; -webkit-user-select: none;
  transition: transform var(--deck-dur) var(--deck-ease);
}
.deck.is-dragging .deck__stage { cursor: grabbing; transition: none; }

.deck .sector {
  position: absolute; top: 0; left: 50%;
  width: var(--deck-w);
  margin-left: calc(var(--deck-w) / -2);
  transform: translate3d(var(--dx, 0px), 0, 0) scale(var(--sc, 1)) rotateY(var(--ry, 0deg));
  opacity: var(--op, 1);
  /* Su fondo scuro allontanare significa spegnere, non sbiadire:
     `brightness` fa rientrare la card nel buio, l'opacità la renderebbe
     solo grigia e piatta. */
  filter: blur(var(--bl, 0px)) brightness(var(--br, 1));
  z-index: var(--zi, 1);
  transition: transform var(--deck-dur) var(--deck-ease),
              opacity   var(--deck-dur) var(--deck-ease),
              filter    var(--deck-dur) var(--deck-ease);
  will-change: transform, opacity;
  -webkit-user-drag: none;
}

/* Lo zoom sull'immagine al passaggio del mouse vale solo per la card attiva:
   sulle altre il gesto giusto è portarle al centro, non ingrandirle sul posto. */
.deck .sector:hover .sector__img { transform: none; }
.deck .sector.is-active:hover .sector__img { transform: scale(1.05); }

/* Il velo scuro segue l'attiva, non il mouse */
.deck .sector:hover::after { background: linear-gradient(180deg, var(--color-border) 26%, var(--color-text-muted) 62%, rgba(29,31,29,0.93) 100%); }
.deck .sector.is-active::after,
.deck .sector.is-active:hover::after {
  background: linear-gradient(180deg,
    rgba(29,31,29,0.02) 0%,
    var(--color-border-strong) 56%,
    rgba(29,31,29,0.88) 100%);
}
/* Senza descrizione il nome è l'unica voce della card: guadagna un filo di
   corpo sulla card al centro, così la gerarchia resta leggibile. */
.deck .sector.is-active .sector__n { font-size: var(--fs-h3); }
/* La card al centro è appoggiata sopra le altre: un'ombra bassa e larga la
   stacca dal fondo senza diventare un effetto. */
.deck .sector.is-active { box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.85); }

/* --------------------------------------------------------------------------
   Hero della pagina Settori: niente fotografia, il deck prende quel posto.
   Il testo va in asse con la composizione, che è simmetrica: allineato a
   sinistra sopra un deck centrato resterebbe fuori squadra.
   -------------------------------------------------------------------------- */
/* Il fiato: abbastanza perché ogni blocco si stacchi dal successivo, non
   tanto da spingere il deck fuori dalla prima schermata. */
.hero--deck { padding-block: clamp(1.25rem, 2.5vw, 2rem) clamp(3.5rem, 7vw, 6rem); }
.hero--deck .crumbs { padding-top: 0; }
.hero--deck .hero__intro {
  text-align: center;
  max-width: 70ch;
  margin: clamp(1.5rem, 3.5vw, 2.75rem) auto clamp(2.5rem, 5vw, 4rem);
}
.hero--deck .hero__h1 { max-width: none; margin-top: var(--s-2); }
/* Il manifesto sta sotto le card: prima si vedono i nove ambienti, poi si
   legge perché sono diversi. */
/* Il manifesto non è più il testo d'apertura ma il commento sotto le card:
   scende di corpo, dal `--fs-lead` ereditato a poco più del testo normale. */
.hero--deck .hero__coda {
  max-width: 74ch;
  margin: clamp(2.75rem, 5.5vw, 4.5rem) auto 0;
  text-align: center;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--on-dark-md);
}
/* Su schermi bassi la card si lascia limitare anche dall'altezza, così titolo
   e deck restano insieme nella prima schermata. */
@media (min-width: 761px) {
  .deck { --deck-w: min(clamp(230px, 23vw, 350px), 34vh); }
}
.hero--deck .eyebrow { margin-bottom: 0; }
/* l'a capo del manifesto era pensato per il testo a bandiera: al centro
   le due frasi si compongono meglio da sole */
.hero--deck .hero__coda .br-lg { display: none; }

/* ==========================================================================
   Gli spazi che progettiamo — selettore di spazi (2/10)
   Componente unico per le pagine Settori. I contenuti stanno in un blocco
   dati per pagina (<template data-spazi-dati>, JSON: number, title, subtitle,
   description, image, alt); il JS costruisce palco, indice, barra e frecce.
   image: null → segnaposto neutro con le stesse proporzioni (3:2) che avrà
   l'immagine definitiva; basta scrivere il percorso per sostituirlo.
   Fondo chiaro: niente verde fluo, i segni attivi sono in ink.
   ========================================================================== */
.spazi { margin-top: var(--gap-block, var(--s-6)); }

/* --- il palco: testo a sinistra, immagine a destra ------------------------ */
.spazi__palco {
  display: grid;
  grid-template-columns: minmax(0, 36fr) minmax(0, 64fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4.5rem);
  padding: clamp(1.75rem, 4.4vw, 4.5rem) clamp(1.75rem, 3.6vw, 3.5rem) clamp(1.75rem, 4.4vw, 4.5rem) clamp(1.75rem, 4.4vw, 4.5rem);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  touch-action: pan-y;               /* lo swipe orizzontale lo gestisce il JS */
}
.spazi__testo, .spazi__media {
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur) var(--ease);
}
.spazi__media { transition-delay: 0ms; }
.spazi__testo { transition-delay: 40ms; }
.spazi.is-cambio .spazi__testo,
.spazi.is-cambio .spazi__media { opacity: 0; transform: translateY(8px); transition-duration: 160ms; transition-delay: 0ms; }

.spazi__n {
  display: block;
  font-size: var(--fs-micro);
  font-weight: var(--fw-med);
  letter-spacing: 0.08em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.spazi__n i { font-style: normal; margin-inline: 0.35em; opacity: 0.6; }
.spazi__h {
  margin-top: var(--s-5);
  font-size: var(--fs-h2);
  font-weight: var(--fw-med);
  line-height: 1.08;
  letter-spacing: var(--ls-display, -0.02em);
  color: var(--ink);
  text-wrap: balance;
}
.spazi__s {
  margin-top: var(--s-2);
  max-width: 22ch;
  font-size: var(--fs-h3);
  font-weight: var(--fw-light);
  line-height: var(--lh-snug);
  color: var(--ink);
  text-wrap: balance;
}
.spazi__d {
  margin-top: var(--s-4);
  max-width: 40ch;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-70);
}
.spazi__s:empty, .spazi__d:empty { display: none; }

/* immagine o segnaposto: stesso ingombro, nessuno scatto d'altezza */
.spazi__media { position: relative; aspect-ratio: 3 / 2; }
.spazi__media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.spazi__ph {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.spazi__ph span {
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.7;
}

/* --- indice degli spazi ---------------------------------------------------- */
.spazi__nav {
  display: grid;
  grid-auto-flow: column;
  /* colonne pensate per dieci voci: con meno spazi le miniature restano della
     stessa misura e l'indice si ferma prima, invece di gonfiarsi */
  --g: clamp(0.5rem, 0.9vw, 0.875rem);
  grid-auto-columns: minmax(7.5rem, calc((100% - 9 * var(--g)) / 10));
  gap: var(--g);
  margin-top: var(--s-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.spazi__nav::-webkit-scrollbar { display: none; }
.spazi__tab {
  /* (2/10) voce a colonna, allineata in alto: il pulsante non centra più il contenuto in
     verticale, quindi le miniature stanno tutte sulla stessa riga e ogni voce ha la stessa
     altezza (miniatura + fascia testo fissa), qualunque sia la lunghezza del nome */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-self: start;
  min-width: 0;
  padding: 0;
  background: none;
  border: 0;
  text-align: left;
  color: var(--muted);
  cursor: pointer;
  scroll-snap-align: start;
  transition: color var(--dur-fast) var(--ease);
}
.spazi__mini {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm, 8px);
  overflow: hidden;
  opacity: 0.6;
  transition: opacity var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.spazi__mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spazi__lab {
  /* fascia del testo alta sempre due righe: un nome su una riga è centrato in verticale,
     uno su due righe la riempie; l'altezza della voce non dipende dal testo. Il numero
     resta sulla prima riga del nome (baseline), anche quando il nome va a capo. */
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.5em;
  align-content: center; align-items: baseline;
  height: calc(2 * 1.35em);
  overflow: hidden;
  margin-top: 0.875rem;
  font-size: 0.75rem;
  line-height: 1.35;
  font-weight: var(--fw-reg, 400);
}
.spazi__lab b { font-weight: var(--fw-med); font-variant-numeric: tabular-nums; opacity: 0.75; }
.spazi__tab:hover { color: var(--ink); }
.spazi__tab:hover .spazi__mini { opacity: 0.85; }
.spazi__tab.is-on { color: var(--ink); }
.spazi__tab.is-on .spazi__lab { font-weight: var(--fw-med); }
.spazi__tab.is-on .spazi__lab b { opacity: 1; }
.spazi__tab.is-on .spazi__mini { opacity: 1; border-color: var(--ink); }
.spazi__tab:focus-visible { outline-offset: 2px; border-radius: var(--r-xs); }

/* --- barra di avanzamento e frecce ----------------------------------------- */
.spazi__piede {
  display: flex; align-items: center; gap: var(--s-4);
  margin-top: var(--s-4);
}
.spazi__barra { position: relative; flex: 1; height: 1px; background: var(--line); }
.spazi__barra i {
  position: absolute; left: 0; top: -0.5px; height: 2px;
  background: var(--ink);
  transition: transform var(--dur) var(--ease);
}
.spazi__frecce { display: flex; gap: 0.75rem; flex: none; }

.spazi__chiusa { margin-top: var(--s-6); }

@media (prefers-reduced-motion: reduce) {
  .spazi.is-cambio .spazi__testo, .spazi.is-cambio .spazi__media { transform: none; }
}

/* tablet: le colonne si avvicinano */
@media (max-width: 1100px) {
  .spazi__palco { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); }
}
/* telefono e tablet stretto: una colonna, immagine sopra al testo */
@media (max-width: 860px) {
  .spazi__palco { grid-template-columns: 1fr; gap: var(--s-4); align-items: start; padding: clamp(1.25rem, 5vw, 2rem); border-radius: var(--r-md); }
  .spazi__media { order: -1; }
  .spazi__h { margin-top: var(--s-3); }
  .spazi__s, .spazi__d { max-width: none; }
  .spazi__nav {
    grid-auto-columns: 8.5rem;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
  .spazi__piede { gap: var(--s-3); }
}
/* ==========================================================================
   Esplora lo spazio (Retail) — isometria con punti cliccabili e pannello
   I contenuti stanno in un blocco JSON dentro la pagina
   (<template data-esplora-dati>): nomi, testi,
   soluzioni, immagini e coordinate dei punti si cambiano lì, senza toccare
   il componente. Le coordinate sono in percentuale dell'immagine, quindi
   restano giuste a ogni larghezza.
   ========================================================================== */
.esplora { margin-top: var(--s-5); }

.esplora__switch {
  display: inline-flex; gap: 2px; padding: 4px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.esplora__sw {
  border: 0; background: transparent; color: var(--ink-70);
  border-radius: var(--r-pill);
  padding: 0.62em 1.35em;
  font-size: var(--fs-small); font-weight: var(--fw-med);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.esplora__sw:hover { color: var(--ink); }
.esplora__sw.is-on { background: var(--ink); color: var(--paper); }

/* Il palco ha le proporzioni dell'isometria: i punti, posizionati in
   percentuale, cadono sempre sullo stesso oggetto. */
.esplora__stage {
  position: relative;
  margin-top: var(--s-4);
  aspect-ratio: 1158 / 582;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--color-surface);
  container-type: inline-size;
}
.esplora__layer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.esplora__layer.is-on { opacity: 1; }
.esplora__layer.ph { border-radius: 0; place-items: end start; padding: var(--s-3); }

.esplora__hs { position: absolute; inset: 0; }
/* Il corpo dei punti segue la larghezza del palco (unità cqw), così la pill
   mantiene lo stesso rapporto con l'immagine a ogni misura. */
.esplora__pin {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 0.55em;
  padding: 0.8em 1.15em;
  border: 0; border-radius: var(--r-pill);
  background: var(--ink); color: var(--white);
  font-size: clamp(10px, 1.18cqw, 15px);
  font-weight: var(--fw-med);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  line-height: 1; white-space: nowrap;
  box-shadow: 0 2px 8px var(--color-border);
  opacity: 0;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
              opacity var(--dur) var(--ease);
}
.esplora__hs.is-in .esplora__pin { opacity: 1; }
.esplora__pin:hover { transform: translate(-50%, -50%) scale(1.06); }
.esplora__pin-dot {
  width: 0.62em; height: 0.62em; flex: none;
  border-radius: 50%; background: var(--white);
  transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
/* Attivo: la pill si inverte e il punto prende il verde del brand,
   cerchiato di scuro perché su bianco il verde da solo non si legge. */
.esplora__pin.is-on {
  background: var(--white); color: var(--ink);
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 0 0 1.5px var(--ink), 0 8px 20px var(--color-border-strong);
  z-index: 2;
}
.esplora__pin.is-on .esplora__pin-dot { background: var(--accent); box-shadow: 0 0 0 1.5px var(--ink); }
.esplora__pin:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Indice degli spazi sotto l'immagine */
.esplora__tabs {
  display: flex; justify-content: space-between; gap: var(--s-4);
  margin-top: var(--s-4);
  border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.esplora__tabs::-webkit-scrollbar { display: none; }
.esplora__tab {
  position: relative; flex: none;
  border: 0; background: none;
  padding: 0 0 var(--s-2);
  font-size: var(--fs-body); font-weight: var(--fw-light);
  color: var(--muted); white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
.esplora__tab:hover { color: var(--ink); }
.esplora__tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-fast) var(--ease);
}
.esplora__tab.is-on { color: var(--ink); font-weight: var(--fw-med); }
.esplora__tab.is-on::after { transform: scaleX(1); }
.esplora__tab:focus-visible { outline-offset: 2px; }

/* Pannello: immagine del dettaglio a sinistra, testo a destra */
.esplora__panel {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  margin-top: var(--s-5);
  opacity: 0; transform: translateY(10px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.esplora__panel.is-in { opacity: 1; transform: none; }
.esplora__media {
  aspect-ratio: 6 / 5;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper-2);
}
.esplora__media img { width: 100%; height: 100%; object-fit: cover; }
.esplora__media .ph { height: 100%; border-radius: 0; }
.esplora__e {
  display: block;
  font-size: var(--fs-micro); font-weight: var(--fw-med);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--muted);
}
.esplora__t {
  margin-top: var(--s-1);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight); letter-spacing: var(--ls-display);
  text-wrap: balance;
}
.esplora__d { margin-top: var(--s-3); max-width: 56ch; color: var(--ink-70); line-height: var(--lh-body); }
.esplora__sol-t {
  margin-top: var(--s-4);
  font-size: var(--fs-micro); font-weight: var(--fw-med);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--ink);
}
.esplora__sol { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--s-2); }
.esplora__sol li {
  padding: 0.45em 0.95em;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  font-size: var(--fs-small); color: var(--ink);
}
.esplora__nota { margin-top: var(--s-3); max-width: 56ch; font-size: var(--fs-small); color: var(--ink-70); line-height: var(--lh-body); }
.esplora__cta { margin-top: var(--s-4); }
.esplora__chiusa { margin-top: var(--s-6); max-width: none; }

@media (max-width: 760px) {
  .esplora__panel { grid-template-columns: 1fr; gap: var(--s-3); }
  .esplora__tabs { justify-content: flex-start; gap: var(--s-3); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .esplora__stage { border-radius: var(--r-md); }
  .esplora__switch { display: flex; }
  .esplora__sw { flex: 1; padding-inline: 0.8em; }
  /* Su telefono le etichette non ci stanno: resta il punto, il nome lo dice
     l'indice sotto l'immagine (e l'aria-label a chi usa un lettore). */
  .esplora__pin { padding: 0; width: 22px; height: 22px; justify-content: center; }
  .esplora__pin-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .esplora__pin-dot { width: 8px; height: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .esplora__layer, .esplora__pin, .esplora__panel, .esplora__tab::after { transition: none; }
}
/* ==========================================================================
   Configuratore a flusso (Retail) — stesso aspetto del configuratore di
   Corporate (.config), in più: scelte multiple, note condizionali, mappa.
   ========================================================================== */
.flusso__intro { margin-top: calc(var(--s-3) * -0.5); margin-bottom: var(--s-2); max-width: 58ch; color: var(--ink-70); }
.flusso__hint {
  margin-bottom: var(--s-3);
  font-size: var(--fs-micro); font-weight: var(--fw-med);
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--muted);
}
.flusso__opts { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.flusso__mappa { margin-top: 0; margin-bottom: var(--s-3); }
.flusso__note:empty { display: none; }
.flusso__nota {
  margin-top: var(--s-3); max-width: 62ch;
  padding: var(--s-2) var(--s-3);
  border-left: 2px solid var(--accent);
  background: var(--paper);
  color: var(--ink); line-height: var(--lh-body);
}
.flusso__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-4); }
.flusso__azioni .config__back { margin-top: 0; }
.flusso__azioni .btn[disabled] { opacity: 0.35; cursor: not-allowed; transform: none; }
.flusso__riepilogo {
  display: grid; grid-template-columns: max-content 1fr; gap: 0.55rem var(--s-4);
  margin: 0 0 var(--s-4); padding: var(--s-3) 0;
  border-block: 1px solid var(--line);
  max-width: 820px;
}
.flusso__riepilogo dt { font-size: var(--fs-micro); font-weight: var(--fw-med); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--muted); padding-top: 0.2em; }
.flusso__riepilogo dd { margin: 0; color: var(--ink); }
.flusso__sol-t { margin-bottom: var(--s-2); font-size: var(--fs-micro); font-weight: var(--fw-med); letter-spacing: var(--ls-caps); text-transform: uppercase; }
@media (max-width: 640px) {
  .flusso__opts { grid-template-columns: 1fr 1fr; gap: var(--s-1); }
  .flusso__opts .config__opt { padding: var(--s-2); font-size: var(--fs-small); }
  .flusso__riepilogo { grid-template-columns: 1fr; gap: 0.2rem; }
  .flusso__riepilogo dd { margin-bottom: var(--s-2); }
}


/* Frecce ai lati della composizione, sopra le card di bordo */
.deck__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 30; }
.deck__nav--prev { left: clamp(0.5rem, 2.5vw, 2.5rem); }
.deck__nav--next { right: clamp(0.5rem, 2.5vw, 2.5rem); }

.deck__dots { margin-top: var(--s-5); position: relative; z-index: 30; }
/* Le card aprono il settore, i pallini e il trascinamento spostano: la
   riga lo dice, sottovoce. */
.deck__hint {
  margin-top: var(--s-2);
  text-align: center;
  font-size: var(--fs-small);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--on-dark-lo);
  position: relative; z-index: 30;
}

/* Chi ha chiesto meno animazioni vede gli stessi stati, senza il passaggio */
@media (prefers-reduced-motion: reduce) {
  .deck .sector, .deck__stage { transition: none; }
}

@media (max-width: 760px) {
  .deck { --deck-w: min(74vw, 320px); --deck-dur: 700ms; }
  .deck__nav { display: none; }   /* su telefono si scorre con il dito */
}

/* Il velo si scurisce solo in apertura: a riposo l'immagine resta pulita */
.sector::after { transition: background var(--dur) var(--ease); }
.sector:hover::after,
.sector:focus-within::after {
  background: linear-gradient(180deg,
    var(--color-text-subtle) 0%,
    var(--color-text-muted) 35%,
    rgba(29,31,29,0.95) 100%);
}

/* Il limite d'altezza e il taglio non si applicano agli elementi in linea:
   senza questo, l'apertura della descrizione non è governabile.
   Il titolo resta flex, altrimenti la freccia scivola sotto al nome. */
.sector__d { display: block; }
.sector__n { display: flex; }

/* L'etichetta del segnaposto deve stare DIETRO alla foto, non sopra:
   resta visibile solo finché quella foto non esiste. */
.ph::after { z-index: 0; }
.hero__media > .ph > *,
.sector > .ph > *,
.solution__media > .ph > *,
.project__media > .ph > *,
.case__media > .ph > * { z-index: 1; }

/* --------------------------------------------------------------------------
   Carosello delle soluzioni — tutte e sei, come per i settori
   La card soluzione è orizzontale (media 16/10), quindi vuole più larghezza
   della card settore: a schermo largo ne restano tre in vista, come prima.
   Il track ha un po' di respiro sopra perché il sollevamento all'hover non
   venga tagliato dall'overflow.
   -------------------------------------------------------------------------- */
.carousel__track--sol {
  padding-top: 6px;
  align-items: stretch;
}
.carousel__track--sol > .solution {
  flex: 0 0 clamp(300px, 30vw, 424px);
}

@media (max-width: 640px) {
  .carousel__track--sol > .solution { flex: 0 0 min(84vw, 340px); }
}
/* (2/10) Pagine Settori e Soluzioni: il carosello delle soluzioni mostra sempre 3 card
   intere (larghezza = binario meno due gap, diviso tre); le altre si raggiungono scorrendo.
   Prima la card era larga fino a 424px e a 1440px ne entravano due e mezza. */
@media (min-width: 921px) {
  :is([data-sezione="settori"], [data-sezione="soluzioni"]) .carousel__track--sol { --sol-gap: var(--s-4); gap: var(--sol-gap); }
  :is([data-sezione="settori"], [data-sezione="soluzioni"]) .carousel__track--sol > .solution { flex: 0 0 calc((100% - 2 * var(--sol-gap)) / 3); }
}

/* --------------------------------------------------------------------------
   A capo manuale solo a schermo largo
   Sotto i 900px il testo si dispone da solo: un a capo forzato lascerebbe
   righe di due parole.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) { .br-lg { display: none; } }

/* --------------------------------------------------------------------------
   Sottotitolo della card soluzione
   Sta fra il nome della tecnologia e la descrizione: una riga sola, in
   corsivo e in peso pieno, per staccare la promessa dal contenuto tecnico.
   Nota: Lexend non ha un corsivo disegnato, quindi l'inclinazione è quella
   sintetica del browser.
   -------------------------------------------------------------------------- */
.solution__c {
  font-style: italic;
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);
  line-height: var(--lh-ui);
  /* stesso taupe delle etichette segnaposto */
  color: var(--color-text-accent-2);
  margin-top: 0.15rem;
  margin-bottom: 0.35rem;
}

/* --------------------------------------------------------------------------
   Card case study: aria fra la targhetta del settore e il nome del cliente
   La targhetta finiva appoggiata al titolo. Qui prende respiro sotto e il
   titolo non ha più bisogno del margine implicito.
   -------------------------------------------------------------------------- */
.case__tags { margin-bottom: var(--s-2); }

/* --------------------------------------------------------------------------
   Case study nel carosello: tutte le card della stessa misura
   Con `flex: 0 0 auto` la larghezza veniva dal contenuto, quindi una scheda
   con l'abstract più lungo diventava più larga delle altre e la sua foto
   più grande. Qui la base è fissa e il testo va a capo.
   -------------------------------------------------------------------------- */
.carousel__track > .case { flex: 0 0 min(880px, 86vw); }
.case__d { max-width: 40ch; }

/* --------------------------------------------------------------------------
   Scheda progetto: tre livelli invece di due
   Sotto al sottotitolo ora c'è un paragrafo. Perché non si equivalgano, il
   sottotitolo sale di peso e di luce e diventa la frase che sintetizza; il
   paragrafo resta il testo che racconta, più basso di tono.
   -------------------------------------------------------------------------- */
.case__d { color: var(--on-dark-hi); font-weight: var(--fw-med); }
.case__p {
  margin-top: var(--s-2);
  max-width: 46ch;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--on-dark-md);
}

/* Allineamento del carosello progetti alla colonna della pagina.
   Il fondo della scheda è lo stesso della sezione (--ink su --ink): il bordo
   della card non si vede, quindi la spaziatura a sinistra non separa nulla,
   rientra soltanto il testo rispetto alla testata di sezione. Tolta, la prima
   scheda si incolonna con titolo, sottotitolo e pulsante; il passo fra le
   schede cresce per tenerle staccate senza quel margine. */
.carousel__track--case { gap: var(--s-5); }
.carousel__track--case > .case > .case__body { padding-left: 0; }

/* Su telefono la card si impila: senza proporzione fissa la foto prende
   l'altezza che avanza e cambia da una scheda all'altra. */
@media (max-width: 900px) {
  .case { min-height: 0; }
  .case__media { min-height: 0; aspect-ratio: 16 / 10; }
}

/* --------------------------------------------------------------------------
   Nastro dei loghi partner
   I loghi sono già normalizzati da loghi.py: stessa misura ottica, stesso
   inchiostro, margini tolti. Qui si occupano tutti la stessa casella e
   scorrono in continuo. Il nastro contiene due copie identiche della fila e
   si sposta di metà larghezza: quando l'animazione riparte, la seconda copia
   è esattamente dove stava la prima, quindi non si vede lo stacco.
   -------------------------------------------------------------------------- */
.marquee {
  position: relative;
  overflow: hidden;
  margin-inline: calc(min(var(--s-4), var(--gutter)) * -1);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: nastro 55s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

.marquee__row {
  display: flex; align-items: center;
  gap: clamp(2.5rem, 5vw, 5rem);
  padding-right: clamp(2.5rem, 5vw, 5rem);
}
.plogo {
  flex: 0 0 auto;
  width: 150px; height: 50px;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  opacity: 0.58;
  transition: opacity var(--dur) var(--ease);
}
.plogo:hover { opacity: 1; }

@keyframes nastro {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Chi ha chiesto meno animazioni scorre il nastro a mano. */
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; }
  .marquee__track { animation: none; }
  .marquee__row[aria-hidden="true"] { display: none; }
}

@media (max-width: 640px) {
  .plogo { width: 120px; height: 40px; }
}

/* --------------------------------------------------------------------------
   Fascia dei marchi partner
   È un appoggio alla pagina, non un capitolo: il titolo scende sotto la scala
   delle sezioni principali (36px contro 44px) e i loghi rimpiccioliscono, così
   la fascia si legge come una nota e non compete con i blocchi sopra e sotto.
   In cambio prende più aria: più respiro ai lati verticali e più stacco fra
   titolo e nastro. Il centraggio stava in uno stile in linea sul titolo: è qui
   ora, dove si può governare.
   -------------------------------------------------------------------------- */
.section--brands { padding-block: clamp(4.5rem, 8.5vw, 7.5rem); }
.section--brands .h-two {
  text-align: center;
  margin-bottom: var(--s-6);
}
.section--brands .plogo { width: 128px; height: 42px; }
@media (max-width: 640px) {
  .section--brands .plogo { width: 104px; height: 34px; }
}

/* --------------------------------------------------------------------------
   Banda di chiusura: titolo su due righe
   La seconda riga va a capo da sola e resta in peso normale, così l'accento
   cade sulla prima. Il rimando a Contatti nella riga piccola è un link vero.
   -------------------------------------------------------------------------- */
.cta__t2 {
  display: block;
  font-weight: var(--fw-reg);
  color: var(--on-dark-hi);
}
/* Le due righe sono già separate a mano: il titolo può occupare tutta la
   larghezza utile invece di andare a capo dentro ciascuna riga. */
.cta__in .h-two:has(.cta__t2) { max-width: 34ch; }
.cta__m .link-u { color: var(--accent); }
.cta__m .link-u:hover { color: var(--paper); }
/* La freccia della riga secondaria segue il link al passaggio del mouse,
   come tutte le altre del sito: senza, sarebbe l'unica ferma. */
.cta__m .link-u .arr { transition: transform var(--dur-fast) var(--ease); }
.cta__m .link-u:hover .arr { transform: translateX(3px); }

/* Banda di chiusura, variante a righe intere.
   La domanda sta su una riga sola: il tetto di 22ch serviva ai titoli
   costruiti su due righe, qui spezzerebbe la frase a metà. Il paragrafo
   si allarga quanto basta perché la seconda frase, staccata dal <br>,
   stia anch'essa su una riga. Sotto i 900px il <br> sparisce e il testo
   torna a fluire da solo. */
.cta__in--wide .h-two { max-width: none; }
.cta__in--wide .cta__d { max-width: 74ch; }

/* ------------------------------------------------ Come lavoriamo (21 set) */
.cl-k { font-size: var(--fs-lead); font-weight: var(--fw-med); line-height: var(--lh-ui); color: var(--ink); }
.cl-vs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: var(--s-5); }
.cl-vs__c { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--card-pad); background: transparent; }
.cl-vs__c--noi { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.cl-vs__l { display: block; font-size: var(--fs-small); font-weight: var(--fw-med); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-2); }
.cl-vs__c--noi .cl-vs__l { color: var(--accent); }
.cl-vs__t { font-size: var(--fs-h3); font-weight: var(--fw-light); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); max-width: 24ch; }
.cl-vs__c--noi .cl-vs__t { font-weight: var(--fw-med); }
.cl-dc { margin-top: var(--s-5); }
.cl-fm { border-left: 2px solid var(--accent); padding-left: var(--s-3); }
.cl-fm .lead { color: var(--ink); }
.cl-m { padding-block: var(--s-5); border-top: 1px solid var(--line); }
.cl-m__h { font-size: var(--fs-h3); }
.cl-m__k { margin-top: var(--s-3); font-size: var(--fs-lead); font-weight: var(--fw-med); line-height: var(--lh-ui); color: var(--ink); max-width: 44ch; }
.cl-n { font-size: var(--fs-h2); text-transform: none; letter-spacing: var(--ls-display); }
.cl-cta .cta__d { max-width: 64rem; }
.cl-head .lead { margin-top: var(--s-3); }
.cl-head .body-text { margin-top: var(--s-2); }
.cl-gruppo .slabel { justify-content: center; }
.cl-gruppo .slabel::after { display: none; }
.cl-gruppo__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-4) clamp(2.5rem, 7vw, 6.5rem); padding-top: var(--s-2); }
.cl-gruppo__a { display: block; border-radius: var(--r-ctl); opacity: 0.86; transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.cl-gruppo__a:hover { opacity: 1; transform: translateY(-3px); }
.cl-gruppo__img { height: clamp(20px, 1.9vw, 28px); width: auto; }
@media (max-width: 760px) { .cl-gruppo__row { flex-direction: column; align-items: center; gap: var(--s-4); } }
.cl-media { display: grid; grid-template-columns: 1fr 1fr 1.7fr; gap: var(--s-3); margin-top: var(--s-6); height: clamp(260px, 28vw, 420px); }
.cl-media__c { margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--ink); min-height: 0; }
.cl-media__v, .cl-media__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-media__img--dc { object-position: 35% 55%; }
@media (max-width: 760px) {
  .cl-media { grid-template-columns: 1fr 1fr; height: auto; gap: var(--s-2); }
  .cl-media__c--video { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .cl-media__c:not(.cl-media__c--video) { aspect-ratio: 4 / 5; }
}
.slabel + .cl-m { border-top: 0; padding-top: 0; }

/* ------------------------------------------------ Servizi di assistenza (21 set) */
.as-card { background: var(--ink); color: var(--paper); border-radius: var(--r-lg); padding: var(--card-pad); }
.as-card__l { display: block; font-size: var(--fs-small); font-weight: var(--fw-med); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--accent-mid); margin-bottom: var(--s-2); }
.as-card .as-card__l { color: var(--accent); }
.as-card__t { font-size: var(--fs-lead); font-weight: var(--fw-med); line-height: var(--lh-ui); }
.as-card__p { margin-top: var(--s-2); color: var(--on-dark-md); line-height: var(--lh-body); }
.as-k { margin-block: var(--s-3) var(--s-2); font-size: var(--fs-lead); font-weight: var(--fw-med); color: var(--paper); }
.as-h { max-width: 26ch; }
.as-intro { margin-top: var(--s-3); }
.as-dove { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: var(--s-5); }
.as-dove__c { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--card-pad); }
.as-dove__n { margin-top: var(--s-3); padding-top: var(--s-2); border-top: 1px solid var(--line); font-weight: var(--fw-med); color: var(--ink); }
.as-sla { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.as-h3 { font-size: var(--fs-h3); }
.as-livelli { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.as-liv { background: var(--white); border-radius: var(--r-lg); padding: var(--card-pad-sm); display: flex; flex-direction: column; }
.as-liv__n { font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; }
.as-liv__n::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--accent); transform: rotate(45deg); margin-right: 0.7em; vertical-align: 0.1em; }
.as-liv__d { margin-top: var(--s-2); color: var(--ink-70); line-height: var(--lh-body); min-height: 4.65em; }
.as-liv__l { margin-top: var(--s-3); border-top: 1px solid var(--line); }
.as-liv__l li { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); padding-block: 0.8rem; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.as-liv__k { color: var(--ink-70); }
.as-liv__v { font-weight: var(--fw-med); text-align: right; }
.as-si { color: var(--accent-mid); display: inline-flex; }
.as-no { color: var(--muted); font-weight: var(--fw-light); }
.as-liv__b { margin-top: var(--s-4); align-self: flex-start; }
.as-cta .cta__d { max-width: 66rem; }
.as-livelli-sez { scroll-margin-top: 96px; }
.cl-head .as-sub { margin-top: var(--s-3); }
.btn .arr--giu { transition: transform var(--dur-fast) var(--ease); }
.btn:hover .arr--giu { transform: translateY(3px); }
@media (max-width: 920px) { .as-livelli { grid-template-columns: 1fr; } .as-liv__d { min-height: 0; } }
@media (max-width: 760px) { .as-dove { grid-template-columns: 1fr; } }

/* ------------------------------------------------ Servizi finanziari · VAAS (21 set) */
.hero__h1.va-h1 { max-width: 26ch; }
.hero__h1.pr-h1 { max-width: 28ch; }
.so-tutte { margin: var(--s-3) 0 var(--s-5); }

/* ------------------------------------------------ Sistemi audio e video (21 set) */
.flusso__aree { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-block: var(--s-2) var(--s-3); }
.flusso__area { padding: 0.55em 1.1em; border-radius: var(--r-pill); background: var(--ink); color: var(--paper); font-size: var(--fs-small); font-weight: var(--fw-med); display: inline-flex; align-items: center; gap: 0.55em; }
.flusso__area::before { content: ""; width: 6px; height: 6px; background: var(--accent); transform: rotate(45deg); }

/* ------------------------------------------------ Audio e video: i nove componenti (21 set)
   Griglia 3x3 su fondo scuro. Le card non hanno fondo pieno: una cornice
   sottile, un numero, un'icona al tratto. Al passaggio del mouse la
   cornice si accende di verde e l'icona sale di un filo. */
.avc__head { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: clamp(1.5rem,4vw,var(--s-6)); align-items: end; margin-bottom: var(--s-5); }
.avc__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-invert); border: 1px solid var(--line-invert); border-radius: var(--r-lg); overflow: hidden; }
.avc__c { position: relative; background: var(--ink); padding: clamp(1.5rem, 2.8vw, 2.5rem); min-height: 260px; display: flex; flex-direction: column; transition: background var(--dur) var(--ease); }
.avc__c::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease); }
.avc__c:hover { background: var(--color-ink-2); }
.avc__c:hover::after { transform: scaleX(1); }
.avc__top { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: var(--s-6); }
.avc__n { font-size: var(--fs-small); font-weight: var(--fw-med); color: var(--on-dark-lo); font-variant-numeric: tabular-nums; letter-spacing: var(--ls-wide); }
.avc__ic { color: var(--accent); transition: transform var(--dur) var(--ease); }
.avc__c:hover .avc__ic { transform: translateY(-4px); }
.avc__t { font-size: var(--fs-lead); font-weight: var(--fw-med); color: var(--paper); }
.avc__d { margin-top: var(--s-1); font-size: var(--fs-small); line-height: var(--lh-body); color: var(--on-dark-md); max-width: 38ch; }
@media (max-width: 920px) { .avc__head { grid-template-columns: 1fr; } .avc__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .avc__grid { grid-template-columns: 1fr; } .avc__c { min-height: 0; } .avc__top { padding-bottom: var(--s-3); } }
@media (prefers-reduced-motion: reduce) { .avc__c::after, .avc__ic { transition: none; } }
.av-l__t { font-size: var(--fs-small); font-weight: var(--fw-med); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-2); }
.av-l { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.av-l li { position: relative; padding: 0.9rem 0.5rem 0.9rem 1.5rem; border-bottom: 1px solid var(--line); color: var(--ink); line-height: var(--lh-ui); }
.av-l li::before { content: ""; position: absolute; left: 0.1rem; top: 1.35em; width: 7px; height: 7px; background: var(--accent); transform: rotate(45deg); }
.va-tec.av-tec { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 920px) { .va-tec.av-tec { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .av-l, .va-tec.av-tec { grid-template-columns: 1fr; } }

/* ==========================================================================
   Sistemi audio e video, pagina completa (23 set). Prefisso avp-.
   Riusa i componenti esistenti (split, pains, av-l, avc, config, sector,
   solution, faq, cta) e aggiunge: statement di chiusura del metodo, schema
   del flusso streaming, sezione "in sintesi" con immagine, progetti grandi.
   ========================================================================== */
.avp-eb { color: var(--accent); margin: var(--s-3) 0 var(--s-2); }
.avp-intro { margin-top: var(--s-4); color: var(--ink); max-width: 44ch; }
.avp-pre { margin-top: var(--s-3); }
.avp-sp { margin-top: var(--s-2); }
.avp-ha { margin-top: var(--s-3); }
.avp-pains { margin-top: 0; }
.avp-pains .pain__t { font-weight: var(--fw-reg); }

/* Chiusa della sezione "Cosa deve garantire": filo verde, corpo medio */
.avp-chiusa {
  margin-top: var(--s-5); padding-left: var(--s-3);
  border-left: 2px solid var(--accent);
  font-size: var(--fs-h3); font-weight: var(--fw-med);
  line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--ink); max-width: 30ch;
}

/* Chiusura del metodo: una frase grande a tutta larghezza, come un elemento
   grafico. Le tre decisioni in pieno, il resto in tono basso. */
.avp-stmt {
  margin-top: clamp(3.5rem, 7vw, 6rem);
  padding-top: clamp(2rem, 4vw, 3.5rem);
  border-top: 1px solid var(--line-strong);
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start;
}
.avp-stmt__k { width: 14px; height: 14px; margin-top: 0.85em; background: var(--accent); transform: rotate(45deg); }
.avp-stmt__t {
  font-size: var(--fs-h1); font-weight: var(--fw-light);
  line-height: var(--lh-tight); letter-spacing: var(--ls-display);
  color: var(--color-text-subtle); max-width: 25ch; text-wrap: balance;
}
.avp-stmt__t b { color: var(--ink); font-weight: var(--fw-med); }

/* ---------------------------------------------------- Flusso streaming
   Due sorgenti entrano nella regia, la regia esce su streaming e
   registrazione; il controllo sta sotto e governa tutto (fili tratteggiati). */
.avp-str__t { margin-bottom: var(--s-3); }
.avp-flow {
  --avp-cols: minmax(0, 1fr) clamp(36px, 5vw, 76px) minmax(0, 1.12fr) clamp(36px, 5vw, 76px) minmax(0, 1fr);
  display: grid; grid-template-columns: var(--avp-cols);
  grid-template-rows: 1fr 1fr auto auto; row-gap: var(--s-2);
}
.avp-n--a1 { grid-column: 1; grid-row: 1; }
.avp-n--a2 { grid-column: 1; grid-row: 2; }
.avp-j--in { grid-column: 2; grid-row: 1 / 3; }
.avp-n--hub { grid-column: 3; grid-row: 1 / 3; }
.avp-j--out { grid-column: 4; grid-row: 1 / 3; }
.avp-n--o1 { grid-column: 5; grid-row: 1; }
.avp-n--o2 { grid-column: 5; grid-row: 2; }
.avp-ties { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: var(--avp-cols); height: 44px; margin-block: calc(-1 * var(--s-2)); }
.avp-ties i { justify-self: center; width: 0; border-left: 1.5px dashed var(--line-strong); }
.avp-ties i:nth-child(1) { grid-column: 1; }
.avp-ties i:nth-child(2) { grid-column: 3; }
.avp-ties i:nth-child(3) { grid-column: 5; }
.avp-ctrl { grid-column: 1 / -1; grid-row: 4; }

.avp-n {
  position: relative; display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.avp-n:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: 0 22px 44px -30px var(--color-text-subtle); }
.avp-n__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--s-3); }
.avp-n__num { font-size: var(--fs-micro); font-weight: var(--fw-med); letter-spacing: var(--ls-caps); color: var(--muted); font-variant-numeric: tabular-nums; }
.avp-n__ic { width: 34px; height: 34px; flex: none; color: var(--accent-mid); }
.avp-n__t { font-size: var(--fs-h4); font-weight: var(--fw-med); line-height: var(--lh-snug); }
.avp-n__d { margin-top: 0.45rem; font-size: var(--fs-small); line-height: var(--lh-body); color: var(--ink-70); }

/* La regia è il centro dello schema: fondo scuro, un alone verde */
.avp-n--hub {
  justify-content: center; overflow: hidden; isolation: isolate;
  background: var(--ink); border-color: var(--ink); color: var(--paper);
  padding: clamp(1.75rem, 3vw, 2.75rem);
}
.avp-n--hub::before {
  content: ""; position: absolute; z-index: -1; right: -30%; bottom: -45%;
  width: 90%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--accent-a15) 0%, transparent 65%);
}
.avp-n--hub:hover { border-color: var(--ink); }
.avp-n--hub .avp-n__top { margin-bottom: var(--s-4); }
.avp-n--hub .avp-n__num { color: var(--on-dark-lo); }
.avp-n--hub .avp-n__ic { width: 44px; height: 44px; color: var(--accent); }
.avp-n--hub .avp-n__t { font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--paper); max-width: 16ch; }
.avp-n--hub .avp-n__d { margin-top: var(--s-2); font-size: var(--fs-body); color: var(--on-dark-md); max-width: 34ch; }

/* Connettori: linee a spessore costante, un punto verde dove il segnale entra */
.avp-j { position: relative; }
.avp-j svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.avp-j path { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.avp-j__dot {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); transform: translate(-50%, -50%);
  box-shadow: 0 0 0 0 var(--accent-a50); animation: avp-pulse 2.4s ease-out infinite;
}
.avp-j--in .avp-j__dot { left: 100%; top: 50%; }
.avp-j--out .avp-j__dot--a { left: 100%; top: 25%; animation-delay: 0.6s; }
.avp-j--out .avp-j__dot--b { left: 100%; top: 75%; animation-delay: 1.2s; }
@keyframes avp-pulse { 0% { box-shadow: 0 0 0 0 var(--accent-a50); } 70%, 100% { box-shadow: 0 0 0 9px var(--accent-a06); } }

.avp-ctrl {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding: clamp(1.25rem, 2vw, 1.6rem) clamp(1.25rem, 2.5vw, 2.25rem);
  border: 1.5px dashed var(--line-strong); border-radius: var(--r-md);
}
.avp-ctrl__l { display: flex; align-items: center; gap: var(--s-3); }
.avp-ctrl__b { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: var(--s-4); align-items: baseline; }
.avp-ctrl .avp-n__d { margin-top: 0; max-width: 62ch; }

/* ---------------------------------------------------- In sintesi */
.avp-live { padding-block: clamp(4.5rem, 10vw, 9rem); }
.avp-live__in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(2.5rem, 6vw, 6.5rem); align-items: center; }
.avp-live__t {
  font-size: var(--fs-h1); font-weight: var(--fw-light);
  line-height: var(--lh-tight); letter-spacing: var(--ls-display); color: var(--paper); text-wrap: balance;
}
.avp-live__lo { display: block; margin-bottom: 0.4em; color: var(--on-dark-lo); }
.avp-live__t .acc { color: var(--accent); }
.avp-live__media { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; background: var(--color-ink-2); isolation: isolate; }
.avp-live__img { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; transform: scale(1.02); transition: transform var(--dur-slow) var(--ease); }
.avp-live__media:hover .avp-live__img { transform: scale(1.06); }
.avp-live__media::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--color-border-strong) 0%, rgba(29,31,29,0) 30%, rgba(29,31,29,0) 70%, var(--color-border-strong) 100%); }
/* segni d'inquadratura agli angoli, come nel mirino di una telecamera */
.avp-live__media::before {
  content: ""; position: absolute; inset: clamp(16px, 2vw, 24px); z-index: 1; pointer-events: none; opacity: 0.85;
  --c: var(--on-dark-hi); --l: 22px; --w: 1.5px;
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) left top / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right top / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) right top / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / var(--w) var(--l) no-repeat;
}
.avp-live__badge {
  position: absolute; z-index: 2; top: clamp(30px, 3.4vw, 44px); left: clamp(30px, 3.4vw, 44px);
  display: inline-flex; align-items: center; gap: 0.6em;
  padding: 0.45em 0.95em; border-radius: var(--r-pill);
  background: var(--color-text-muted); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--paper); font-size: var(--fs-micro); font-weight: var(--fw-med);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
}
.avp-live__badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: avp-pulse 1.8s ease-out infinite; }

/* ---------------------------------------------------- Progetti, immagini grandi */
.avp-prjs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.75rem, 5vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.avp-prj { display: block; }
.avp-prj__m { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-lg); overflow: hidden; background: var(--paper-2); }
.avp-prj__img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform var(--dur-slow) var(--ease); }
.avp-prj:hover .avp-prj__img { transform: scale(1.04); }
.avp-prj__b { padding-top: var(--s-3); }
.avp-prj__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.avp-prj__tags li { padding: 0.36em 0.85em; border: 1px solid var(--line); border-radius: var(--r-pill); font-size: var(--fs-tag); font-weight: var(--fw-med); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--muted); }
.avp-prj__t { margin-top: var(--s-2); font-size: var(--fs-h3); font-weight: var(--fw-med); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); }
.avp-prj__d { margin-top: 0.45rem; max-width: 52ch; color: var(--ink-70); line-height: var(--lh-body); }
.avp-prj .more { margin-top: var(--s-3); }
.avp-prj:hover .more__c { background: var(--accent); border-color: var(--accent); color: var(--ink); transform: translateX(3px); }

.avp-faq .h-two { max-width: 18ch; }

@media (max-width: 1100px) {
  .avp-ctrl__b { grid-template-columns: 1fr; gap: 0.35rem; }
}
@media (max-width: 920px) {
  .avp-flow { grid-template-columns: 1fr 1fr; grid-template-rows: none; gap: var(--s-2); }
  .avp-j, .avp-ties { display: none; }
  .avp-n--a1, .avp-n--a2, .avp-n--hub, .avp-n--o1, .avp-n--o2, .avp-ctrl { grid-row: auto; }
  .avp-n--a1, .avp-n--o1 { grid-column: 1; }
  .avp-n--a2, .avp-n--o2 { grid-column: 2; }
  .avp-n--hub, .avp-ctrl { grid-column: 1 / -1; }
  .avp-live__in { grid-template-columns: 1fr; }
  .avp-live__media { aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
  .avp-flow { grid-template-columns: 1fr; }
  .avp-n--a1, .avp-n--a2, .avp-n--o1, .avp-n--o2 { grid-column: 1; }
  .avp-ctrl { grid-template-columns: 1fr; gap: var(--s-2); }
  .avp-prjs { grid-template-columns: 1fr; }
  .avp-stmt { grid-template-columns: 1fr; gap: var(--s-2); }
  .avp-stmt__k { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .avp-j__dot, .avp-live__badge i { animation: none; }
  .avp-n, .avp-prj__img, .avp-live__img { transition: none; }
}

/* ==========================================================================
   Digital Signage, pagina completa (23 set). Prefisso ds-.
   Riusa il sistema avp- della pagina Sistemi audio e video (statement,
   chiusa con filo verde, progetti grandi, FAQ fissa) e aggiunge: griglia a
   4 colonne dei componenti, le quattro voci della gestione contenuti, card
   settore su 5 colonne. Palinsesto illustrato e mosaico dei luoghi tolti
   su richiesta (23 set).
   ========================================================================== */
.ds-h1 { max-width: 20ch; }

/* Componenti: 8 celle su 4 colonne, niente buchi */
.avc__grid.ds-g4 { grid-template-columns: repeat(4, 1fr); }
.ds-g4 .avc__c { min-height: 300px; }
.ds-g4 .avc__top { padding-bottom: var(--s-5); }

/* ---------------------------------------------------- Gestione dei contenuti */
.ds-cap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-4); }
.ds-cap li { border-top: 1px solid var(--line); padding-top: var(--s-2); }
.ds-cap__t { display: flex; align-items: center; gap: 0.6em; font-weight: var(--fw-med); font-size: var(--fs-body); }
.ds-cap__t::before { content: ""; width: 7px; height: 7px; flex: none; background: var(--accent); transform: rotate(45deg); }
.ds-cap__d { display: block; margin-top: 0.35rem; font-size: var(--fs-small); line-height: var(--lh-body); color: var(--ink-70); }

.ds-cap--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3) var(--s-4); }
@media (max-width: 920px) { .ds-cap--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .ds-cap--4 { grid-template-columns: 1fr; } }

/* Settori: cinque card su una riga */
.grid.ds-g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ds-g5 .sector__n { font-size: var(--fs-h4); }

@media (max-width: 1100px) {
  .avc__grid.ds-g4 { grid-template-columns: repeat(2, 1fr); }
  .grid.ds-g5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 920px) {
  .grid.ds-g5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .avc__grid.ds-g4 { grid-template-columns: 1fr; }
  .ds-g4 .avc__c { min-height: 0; }
  .ds-cap { grid-template-columns: 1fr; }
  .grid.ds-g5 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   LEDwall e videowall, pagina completa (23 set). Prefisso lw-.
   Riusa avp- (chiuse, progetti, FAQ) e ds- (4 colonne, voci con rombo).
   Aggiunge: confronto LEDwall / videowall, cinque aspetti dell'integrazione
   architettonica, card settore su 6 colonne, progetti su 3 colonne.
   ========================================================================== */
.lw-h1 { max-width: 20ch; }

/* Confronto: due schede uguali, una "o" fra le due */
.lw-vs { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.lw-vs__c {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--card-pad);
}
.lw-vs__top { display: flex; align-items: center; gap: var(--s-2); }
.lw-vs__ic { width: 40px; height: 40px; flex: none; color: var(--accent-mid); }
.lw-vs__l { font-size: var(--fs-h3); font-weight: var(--fw-med); letter-spacing: var(--ls-tight); }
.lw-vs__t { margin-top: var(--s-3); font-size: var(--fs-lead); font-weight: var(--fw-light); line-height: var(--lh-ui); color: var(--ink); max-width: 44ch; }
.lw-vs__u { margin-top: var(--s-4); }
.lw-vs__o {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink); color: var(--accent);
  font-size: var(--fs-small); font-weight: var(--fw-med); letter-spacing: var(--ls-wide);
  box-shadow: 0 0 0 6px var(--paper-2);
}
.lw-vs__c { padding: 0; overflow: hidden; }
.lw-vs__m { aspect-ratio: 16 / 9; background-size: cover; background-position: center; background-color: var(--paper-2); }
.lw-vs__b { padding: var(--card-pad); }

/* Integrazione nello spazio: cinque aspetti in fila */
.lw-arc { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-3); }
.lw-arc__c { display: flex; flex-direction: column; gap: 0.5rem; padding-top: var(--s-3); border-top: 2px solid var(--ink); }
.lw-arc__n { font-size: var(--fs-micro); font-weight: var(--fw-med); letter-spacing: var(--ls-caps); color: var(--accent-mid); font-variant-numeric: tabular-nums; }
.lw-arc__t { font-size: var(--fs-lead); font-weight: var(--fw-med); line-height: var(--lh-snug); }
.lw-arc__d { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--ink-70); }


/* Settori: sei card su una riga */
.grid.lw-g6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-2); }
.lw-g6 .sector__n { font-size: var(--fs-body); }
.lw-g6 .sector__body { padding: var(--s-2); }

/* Progetti: tre su una riga */
.avp-prjs.lw-prj3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lw-prj3 .avp-prj__t { font-size: var(--fs-h3); }

@media (max-width: 1100px) {
  .lw-arc { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s-4); }
  .grid.lw-g6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 920px) {
  .lw-vs { grid-template-columns: 1fr; }
  .lw-vs__o { display: none; }
  .lw-arc { grid-template-columns: 1fr 1fr; }
  .grid.lw-g6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .avp-prjs.lw-prj3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .lw-arc, .avp-prjs.lw-prj3, .grid.lw-g6 { grid-template-columns: 1fr; }
  .lw-vs__l2 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Sensoristica, pagina completa (23 set). Prefisso sn-.
   Riusa avp- (voci, FAQ), ds- (voci con rombo), lw- (cinque in fila).
   ========================================================================== */
.sn-h1 { max-width: 22ch; }
.sn-h2 { margin-top: var(--s-2); max-width: 58ch; color: var(--on-dark-md); }
.sn-ruolo { margin-top: var(--s-5); color: var(--ink); max-width: 40ch; }
.sn-priv .body-text { margin-top: var(--s-2); }
.sn-priv .lead { color: var(--ink); }
.sn-sp__h { margin-bottom: var(--s-5); }
.ds-cap.sn-cap3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Settori: tre card orizzontali */
.grid.sn-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sn-g3 .sector { aspect-ratio: 4 / 3; }
@media (max-width: 920px) {
  .ds-cap.sn-cap3 { grid-template-columns: 1fr; }
  .grid.sn-g3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .grid.sn-g3 { grid-template-columns: 1fr; }
}
/* Dove può essere utilizzata: tre voci che cambiano l'isometria sotto */
.sn-sw__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.sn-sw__t {
  display: flex; flex-direction: column; gap: 0.35rem; text-align: left;
  background: none; border: 0; border-top: 2px solid var(--line); padding: var(--s-2) 0 0;
  color: var(--ink); cursor: pointer; transition: border-color var(--dur-fast) var(--ease);
}
.sn-sw__t:hover { border-top-color: var(--line-strong); }
.sn-sw__t.is-on { border-top-color: var(--ink); }
.sn-sw__n { display: flex; align-items: center; gap: 0.6em; font-size: var(--fs-h4); font-weight: var(--fw-med); color: var(--muted); transition: color var(--dur-fast) var(--ease); }
.sn-sw__n::before { content: ""; width: 7px; height: 7px; flex: none; background: var(--line-strong); transform: rotate(45deg); transition: background var(--dur-fast) var(--ease); }
.sn-sw__t:hover .sn-sw__n, .sn-sw__t.is-on .sn-sw__n { color: var(--ink); }
.sn-sw__t.is-on .sn-sw__n::before { background: var(--accent); }
.sn-sw__d { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--ink-70); }
.sn-sw__stage { display: grid; margin-top: var(--s-5); }
.sn-sw__p { grid-area: 1 / 1; margin: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(10px); visibility: hidden; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur); }
.sn-sw__p.is-on { opacity: 1; transform: none; visibility: visible; }
.sn-sw__p img { width: 100%; max-width: 820px; height: auto; max-height: 500px; object-fit: contain; }
@media (max-width: 760px) {
  .sn-sw__tabs { grid-template-columns: 1fr; gap: var(--s-2); }
  .sn-sw__stage { margin-top: var(--s-4); }
}
@media (prefers-reduced-motion: reduce) { .sn-sw__p { transition: none; } }

/* ------------------------------------------------ Immagine interattiva con punti (.hs, 1/10)
   Componente riutilizzabile: un'immagine, dei punti posizionati in % con --x/--y
   (e facoltativi --xm/--ym sotto i 720px), una scheda che si apre al clic.
   Desktop: punto + etichetta, scheda accanto al punto. Telefono: punti numerati,
   scheda sotto l'immagine. Nessun contenuto dipende dal passaggio del mouse. */
.sn-sw__n::before { display: none; }
.sn-sw__k { font-size: var(--fs-small); font-weight: var(--fw-reg, 400); letter-spacing: 0.04em; color: var(--muted); font-variant-numeric: tabular-nums; }
.sn-sw__t.is-on .sn-sw__k { color: var(--ink); }
.sn-sw__p { display: block; }
.hs { position: relative; }
.hs__media { position: relative; width: 100%; max-width: min(1120px, calc(min(600px, 72vh) * var(--ar, 1.5))); margin-inline: auto; }
.hs__img { position: relative; }
.sn-sw__p .hs__img > img, .hs__img > img { display: block; width: 100%; max-width: none; height: auto; max-height: none; object-fit: fill; }
.hs__pt {
  --pt: 14px;
  position: absolute; left: var(--x); top: var(--y); z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0; margin: 0; border: 0; background: none; cursor: pointer;
  transform: translate(calc(var(--pt) / -2), -50%);
  color: var(--ink); font: inherit;
}
.hs__dot {
  position: relative; flex: none; width: var(--pt); height: var(--pt); border-radius: 50%;
  background: var(--ink); box-shadow: 0 0 0 3px rgba(255,255,255,.95), 0 2px 10px rgba(29,31,29,.28);
  font-size: 0; color: transparent;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
/* un solo anello che si allarga, due volte quando l'ambito compare: dice che il punto si tocca */
.hs__dot::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 1px solid rgba(29,31,29,.45); opacity: 0; pointer-events: none;
}
.sn-sw__p.is-on .hs__dot::after { animation: hsPulse 2.4s var(--ease) 0.4s 2; }
@keyframes hsPulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.4); } }
.hs__lbl {
  padding: 5px 10px; border-radius: var(--r-xs, 2px);
  background: rgba(255,255,255,.94); border: 1px solid var(--line);
  font-size: 0.6875rem; font-weight: var(--fw-med); letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2; white-space: nowrap;
  box-shadow: 0 2px 10px rgba(29,31,29,.08);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.hs__pt:hover .hs__dot, .hs__pt[aria-expanded="true"] .hs__dot { transform: scale(1.18); }
.hs__pt:hover .hs__lbl { border-color: var(--ink); }
.hs__pt[aria-expanded="true"] .hs__lbl { background: var(--ink); color: var(--color-background, #fff); border-color: var(--ink); }
.hs__pt[aria-expanded="true"] { z-index: 4; }
.hs__pt:focus-visible { outline: none; }
.hs__pt:focus-visible .hs__lbl, .hs__pt:focus-visible .hs__dot { outline: 2px solid var(--ink); outline-offset: 3px; }
/* etichetta a sinistra del punto quando il punto sta sul bordo destro */
.hs__pt.is-l { flex-direction: row-reverse; transform: translate(calc(-100% + var(--pt) / 2), -50%); }

.hs__card {
  position: absolute; z-index: 5; width: min(300px, 70vw);
  padding: 20px 44px 22px 20px; border-radius: var(--r-md);
  background: var(--color-ink, #1D1F1D); color: var(--color-background, #fff);
  box-shadow: 0 18px 40px rgba(29,31,29,.22);
  --accent: var(--brand-green);
  animation: hsCard var(--dur) var(--ease) both;
}
.hs__card[hidden] { display: none; }
@keyframes hsCard { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.hs__n { display: flex; align-items: center; gap: 8px; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark-lo, rgba(255,255,255,.62)); }
.hs__n::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-green); }
.hs__t { margin-top: 10px; font-size: 1.0625rem; font-weight: var(--fw-med); line-height: var(--lh-snug); }
.hs__d { margin-top: 6px; font-size: var(--fs-small); line-height: var(--lh-body); color: var(--on-dark-md, rgba(255,255,255,.78)); }
.hs__x {
  position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; color: inherit; opacity: .7; cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.hs__x:hover, .hs__x:focus-visible { opacity: 1; background: rgba(255,255,255,.1); }
.hs__x:focus-visible { outline: 2px solid var(--brand-green); outline-offset: 2px; }
.hs-hint { margin-top: var(--s-3); text-align: center; font-size: var(--fs-small); color: var(--muted); }

/* (2/10) Nautica — yacht interattivo: stesso componente .hs della Sensoristica.
   La scheda mostra numero, nome e una frase (senza titolo separato); lo yacht è
   scontornato (WebP con trasparenza) e sta direttamente sul fondo della pagina. */
.hs__t:empty { display: none; }
.hs__t:empty + .hs__d { margin-top: 10px; }

/* (3/10) Nautica — rifinitura grafica 2 ott: yacht +15% e marcatori come
   annotazioni tecniche: pallino -> linea -> etichetta. Ogni punto ha la propria
   etichetta fuori dallo scafo (--lx/--ly, in % dell'immagine; --tx/--ty dicono da
   quale bordo l'etichetta si aggancia alla linea). La linea parte dal centro del
   pallino e arriva al bordo dell'etichetta: lunghezza e angolo sono calcolati in
   CSS (unità cqw, rapporto 3:2 dell'immagine). Verde #00FF99 solo per pallini,
   linee e alone al passaggio; etichette bianche con testo scuro. */
.yt-sec .section__head { margin-bottom: var(--s-5); }
.yt-sec .section__head .body-text { max-width: 42ch; }
.hs--yacht { --yg: #00FF99; }
.hs--yacht .hs__media { max-width: min(1035px, calc(min(690px, 82vh) * 1.5)); }
.hs--yacht .hs__img { container-type: inline-size; }
/* ombra di contatto: ellisse sfumata separata dall'immagine (pseudo-elemento dietro
   lo yacht), inclinata come la chiglia; nessun effetto su colori o trasparenza del WebP */
.hs--yacht .hs__img > img { position: relative; z-index: 1; }
.hs--yacht .hs__img::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 86%; width: 104%; height: 15%;
  transform: translate(-50%, -50%) rotate(13deg);
  background: radial-gradient(closest-side, rgba(29,31,29,.16), rgba(29,31,29,.09) 45%, rgba(29,31,29,0));
  filter: blur(22px);
}
.hs--yacht .hs__pt, .hs--yacht .hs__pt.is-l {
  --pt: 12px; flex-direction: row; transform: translate(-50%, -50%);
  --dx: calc((var(--lx) - var(--px)) * 1cqw);
  --dy: calc((var(--ly) - var(--py)) * 1cqw / 1.5);
}
.hs--yacht .hs__dot { background: var(--yg); box-shadow: 0 0 0 2px #fff, 0 1px 6px rgba(29,31,29,.28); transition: box-shadow var(--dur-fast) var(--ease); }
.hs--yacht .hs__dot::after { border-color: var(--yg); }
.hs--yacht .hs__pt::after {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: -1;
  width: hypot(var(--dx), var(--dy)); height: 1px; background: var(--yg);
  transform-origin: 0 50%; transform: translateY(-50%) rotate(atan2(var(--dy), var(--dx)));
  pointer-events: none;
}
.hs--yacht .hs__lbl {
  position: absolute; left: 50%; top: 50%;
  transform: translate(var(--dx), var(--dy)) translate(var(--tx), var(--ty));
  box-shadow: none;
}
.hs--yacht .hs__pt:hover .hs__dot, .hs--yacht .hs__pt[aria-expanded="true"] .hs__dot { transform: none; box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(0,255,153,.35); }
.hs--yacht ~ .hs-hint { margin-top: var(--s-4); }
@media (max-width: 960px) and (min-width: 721px) {
  .hs--yacht .hs__lbl { padding: 4px 8px; font-size: 0.625rem; }
}

@media (max-width: 720px) {
  .hs__pt { --pt: 26px; left: var(--xm, var(--x)); top: var(--ym, var(--y)); transform: translate(-50%, -50%); }
  .hs__pt.is-l { transform: translate(-50%, -50%); }
  .hs__lbl { display: none; }
  .hs__dot {
    display: grid; place-items: center; font-size: 0.75rem; font-weight: var(--fw-med); color: var(--color-background, #fff);
    box-shadow: 0 0 0 2px rgba(255,255,255,.95), 0 2px 8px rgba(29,31,29,.3);
  }
  /* area di tocco piu' ampia del segno visibile */
  .hs__pt::before { content: ""; position: absolute; inset: -8px; }
  .hs__pt:hover .hs__dot, .hs__pt[aria-expanded="true"] .hs__dot { transform: none; }
  .hs__pt[aria-expanded="true"] .hs__dot { background: var(--color-background, #fff); color: var(--ink); box-shadow: 0 0 0 2px var(--ink), 0 2px 8px rgba(29,31,29,.3); }
  .hs__card { position: relative; left: auto !important; top: auto !important; width: 100%; margin-top: var(--s-3); }
  /* yacht su telefono: pallini verdi senza numero, niente linee; la scheda sotto dice il nome */
  .hs--yacht .hs__pt, .hs--yacht .hs__pt.is-l { --pt: 14px; }
  .hs--yacht .hs__pt::before { inset: -10px; }
  .hs--yacht .hs__pt::after { display: none; }
  .hs--yacht .hs__dot { font-size: 0; box-shadow: 0 0 0 2px #fff, 0 1px 6px rgba(29,31,29,.3); }
  .hs--yacht .hs__pt[aria-expanded="true"] .hs__dot { background: var(--yg); box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(0,255,153,.4); }
}
@media (prefers-reduced-motion: reduce) {
  .sn-sw__p.is-on .hs__dot::after, .hs__card { animation: none; }
}

/* ==========================================================================
   Booking system, pagina completa (23 set). Prefisso bk-.
   Riusa avp-, ds-, lw-, sn-: nessun componente nuovo.
   ========================================================================== */
.bk-h1 { max-width: 26ch; }
/* Comune di Magnago: funzioni del tablet, nota, statement finale */
.mg-tab { margin-top: var(--s-4); display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-invert); }
.mg-tab li { padding: 0.8rem 0; border-bottom: 1px solid var(--line-invert); font-size: var(--fs-small); color: var(--on-dark-hi); }
.mg-tab li:nth-child(odd) { padding-right: var(--s-2); }
.mg-nota { margin-top: var(--s-4); font-size: var(--fs-lead); line-height: var(--lh-snug); color: var(--accent); max-width: 30ch; }
.mg-stat { margin-top: var(--s-4); font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--ink); max-width: 28ch; }
@media (max-width: 640px) { .mg-tab { grid-template-columns: 1fr; } .mg-tab li:nth-child(odd) { padding-right: 0; } }
.cs-mg1 { background-image: url(/assets/img/progetti/comune-magnago/foto-1.jpg); background-position: 40% center; }
.cs-mg4 { background-image: url(/assets/img/progetti/comune-magnago/foto-4.jpg); }
.cs-mg5 { background-image: url(/assets/img/progetti/comune-magnago/foto-5.jpg); }
.cs-mg7 { background-image: url(/assets/img/progetti/comune-magnago/foto-7.jpg); }
/* foto aggiornate 1/10 (cartella Foto_aggiornate): classi nuove, quelle vecchie restano
   dove sono usate anche fuori dalla pagina progetto */
.cs-mg8 { background-image: url(/assets/img/progetti/comune-magnago/comune-magnago-immagine-03.jpg); background-position: 45% center; }
.cs-mg9 { background-image: url(/assets/img/progetti/comune-magnago/comune-magnago-immagine-02.jpg); }
.cs-ct6 { background-image: url(/assets/img/progetti/cooperazione-trentina/cooperazione-immagine-2.jpg); }
.cs-ct7 { background-image: url(/assets/img/progetti/cooperazione-trentina/cooperazione-immagine-3.jpg); }
.cs-gp10 { background-image: url(/assets/img/progetti/gruppo-poli/gruppo-poli-02.jpg); }
.cs-tsp7 { background-image: url(/assets/img/progetti/tspace/tspace-immagine-03.jpg); }
.cs-tsp8 { background-image: url(/assets/img/progetti/tspace/tspace-immagine-05.jpg); }
.cs-tsp9 { background-image: url(/assets/img/progetti/tspace/tspace-immagine-04.jpg); }
.cs-tsp10 { background-image: url(/assets/img/progetti/tspace/tspace-immagine-06.jpg); }
/* Poli & Regina: motto, schema LiveSignage, catena, vantaggi extra */
.pr-motto { margin-top: var(--s-4); font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--ink); }
.pr-motto + .btn { margin-top: var(--s-4); }
.pr-focus { background: var(--ink); }
.pr-net { display: flex; flex-direction: column; justify-content: center; gap: var(--s-4); padding: clamp(2.5rem, 5vw, 5rem) clamp(1.5rem, 4vw, 4rem); background: var(--color-ink-2); }
.pr-net svg { width: 100%; max-width: 560px; height: auto; overflow: visible; }
.pr-net__l { fill: none; stroke: var(--border-on-dark); stroke-width: 1.2; }
.pr-net__p { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 6 94; stroke-dashoffset: 100; animation: pr-flow 2.6s cubic-bezier(.45,0,.25,1) infinite; }
@keyframes pr-flow { 0% { stroke-dashoffset: 100; opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.pr-net__c { fill: rgba(0,0,0,0.25); stroke: var(--accent); stroke-width: 1.2; }
.pr-net__ct { fill: var(--paper); font-size: 13px; font-weight: var(--fw-med); }
.pr-net__cs { fill: var(--on-dark-lo); font-size: 11px; }
.pr-net__d { fill: var(--ink); stroke: var(--accent); stroke-width: 1.5; animation: pr-hit 2.6s cubic-bezier(.45,0,.25,1) infinite; }
@keyframes pr-hit { 0%, 80% { fill: var(--ink); } 90% { fill: var(--accent); } 100% { fill: var(--ink); } }
.pr-net__t { fill: var(--paper); font-size: 15px; font-weight: var(--fw-med); }
.pr-net__s { fill: var(--on-dark-md); font-size: 11.5px; }
.pr-net__q { font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--on-dark-md); max-width: 20ch; }
.pr-net__q b { font-weight: inherit; color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .pr-net__p { animation: none; stroke-dasharray: none; stroke: rgba(0,0,0,0); } .pr-net__d { animation: none; fill: var(--accent); } }
.pr-chain { margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: 0.5rem 0; list-style: none; padding: 0; counter-reset: pr; }
.pr-chain li { display: inline-flex; align-items: center; font-size: var(--fs-small); color: var(--on-dark-hi); }
.pr-chain li + li::before { content: ""; width: 22px; height: 1px; margin: 0 0.6rem; background: var(--accent); }
.pr-chain li:last-child { color: var(--accent); }
.pr-plus { margin-top: var(--s-4); border-top: 1px solid var(--line); }
.pr-plus div { padding: 0.9rem 0; border-bottom: 1px solid var(--line); }
.pr-plus dt { font-weight: var(--fw-med); color: var(--ink); }
.pr-plus dd { margin: 0.25rem 0 0; font-size: var(--fs-small); color: var(--color-text-accent-2); }
@media (max-width: 920px) { .pr-net { padding: var(--s-5) var(--cs-pad); } }
.cs-hero__h1.pr-h1 { font-size: var(--fs-hero); white-space: nowrap; }
.cs-pr1 { background-image: url(/assets/img/progetti/poli-regina/foto-1.jpg); background-position: 72% center; }
.cs-pr2 { background-image: url(/assets/img/progetti/poli-regina/foto-2.jpg); background-position: 45% center; }
.cs-pr3 { background-image: url(/assets/img/progetti/poli-regina/foto-3.jpg); }
.cs-pr4 { background-image: url(/assets/img/progetti/poli-regina/foto-4.jpg); }
.cs-pr5 { background-image: url(/assets/img/progetti/poli-regina/foto-5.jpg); }
.cs-pr6 { background-image: url(/assets/img/progetti/poli-regina/foto-6.jpg); }
.cs-pr7 { background-image: url(/assets/img/progetti/poli-regina/foto-7.jpg); }
.cs-pr8 { background-image: url(/assets/img/progetti/poli-regina/foto-8.jpg); }
/* Dedagroup: foto del case study */
.cs-dg1 { background-image: url(/assets/img/progetti/dedagroup/foto-1.jpg); }
.cs-dg2 { background-image: url(/assets/img/progetti/dedagroup/foto-2.jpg); }
.cs-dg3 { background-image: url(/assets/img/progetti/dedagroup/foto-3.jpg); background-position: center top; }
.cs-dg4 { background-image: url(/assets/img/progetti/dedagroup/foto-4.jpg); }
.cs-dg5 { background-image: url(/assets/img/progetti/dedagroup/foto-5.jpg); }
.cs-dg6 { background-image: url(/assets/img/progetti/dedagroup/foto-6.jpg); }
/* Tspace: focus con le quattro configurazioni del display */
.tsp-modi { margin-top: var(--s-5); border-top: 1px solid var(--line-invert); }
.tsp-modi li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--s-3); padding: 1rem 0; border-bottom: 1px solid var(--line-invert); }
.tsp-modi__i { grid-row: span 2; width: 44px; height: 44px; color: var(--on-dark-hi); }
.tsp-modi__i .tsp-d { stroke: var(--accent); stroke-width: 3; }
.tsp-modi__t { font-weight: var(--fw-med); color: var(--paper); }
.tsp-modi__d { margin-top: 0.25rem; font-size: var(--fs-small); color: var(--on-dark-md); max-width: 44ch; }
.cs-tsp1 { background-image: url(/assets/img/progetti/tspace/foto-1.jpg); }
.cs-tsp2 { background-image: url(/assets/img/progetti/tspace/foto-2.jpg); background-position: 50% center; }
/* Cooperazione: rendering e cantiere */
.cs-fig { margin: 0; }
.cs-fig figcaption { display: flex; gap: 0.75rem; margin-top: var(--s-2); font-size: var(--fs-small); opacity: 0.72; }
.cs-fig figcaption span { font-variant-numeric: tabular-nums; opacity: 0.6; }
.cs-behind__media { grid-column: 2; margin-top: var(--s-5); max-width: 640px; }
.cs-behind__media .cs-ph { aspect-ratio: 16 / 9; }
.cs-sec--line { border-top: 1px solid var(--line); }
.cs-cant { display: grid; grid-template-columns: minmax(0, 0.22fr) minmax(0, 1fr); gap: var(--s-4); }
.cs-cant .cs-h { max-width: 18ch; }
.cs-cant .cs-t { margin-top: var(--s-3); max-width: 46ch; }
.cs-cant__media { grid-column: 2; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-3); align-items: start; max-width: 780px; margin-top: var(--s-4); }
.cs-cant__media figure:first-child .cs-ph { aspect-ratio: 3 / 2; }
.cs-cant__media figure:last-child .cs-ph { aspect-ratio: 1 / 1; }
@media (max-width: 920px) {
  .cs-behind__media, .cs-cant__media { grid-column: auto; margin-top: var(--s-3); }
  .cs-cant { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cs-cant__media { grid-template-columns: 1fr; }
  .cs-cant__media figure:last-child { max-width: 300px; }
}

/* Foto del case study Cooperazioni Trentine (file foto-1.jpg ... foto-5.jpg nella cartella progetti, sottocartella cooperazione-trentina) */
.cs-ct1 { background-image: url(/assets/img/progetti/cooperazione-trentina/foto-1.jpg); }
.cs-ct2, .img-13 { background-image: url(/assets/img/progetti/cooperazione-trentina/foto-2.jpg); }
.cs-ct3 { background-image: url(/assets/img/progetti/cooperazione-trentina/foto-3.jpg); }
.cs-ct4 { background-image: url(/assets/img/progetti/cooperazione-trentina/foto-4.jpg); }

/* Foto del case study Gruppo Poli (file foto-1.jpg ... foto-9.jpg nella cartella progetti, sottocartella gruppo-poli) */
.cs-gp1 { background-image: url(/assets/img/progetti/gruppo-poli/foto-1.jpg); }
.cs-gp2 { background-image: url(/assets/img/progetti/gruppo-poli/foto-2.jpg); }
.cs-gp3 { background-image: url(/assets/img/progetti/gruppo-poli/foto-3.jpg); }
.img-11 { background-image: url(/assets/img/progetti/gruppo-poli/foto-4.jpg); }
.cs-gp5 { background-image: url(/assets/img/progetti/gruppo-poli/foto-5.jpg); }
.cs-gp6 { background-image: url(/assets/img/progetti/gruppo-poli/foto-6.jpg); }
.cs-gp7, .img-15 { background-image: url(/assets/img/progetti/gruppo-poli/foto-7.jpg); }
.cs-gp8 { background-image: url(/assets/img/progetti/gruppo-poli/foto-8.jpg); }
/* Video nei riquadri dei case study: copre il riquadro come una foto */
.cs-ph video.cs-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==========================================================================
   Case study editoriale (24 set). Prefisso cs-. Prima pagina: Trentino
   Sviluppo. Sezioni a tutta larghezza, alternanza scuro/chiaro, numerazione
   progressiva, fotografie grandi, linee sottili, verde come unico accento.
   Niente gradienti, ombre o bagliori.
   ========================================================================== */
.cs { --cs-pad: var(--gutter); }
.cs-n { display: block; font-size: var(--fs-micro); font-weight: var(--fw-med); color: var(--accent-mid); letter-spacing: var(--ls-wide); font-variant-numeric: tabular-nums; }
.cs-dark .cs-n, .cs-hero .cs-n { color: var(--accent); }
.cs-l { display: block; margin-top: 0.35rem; font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink); line-height: var(--lh-ui); }
.cs-dark .cs-l { color: var(--paper); }
.cs-h { font-size: var(--fs-h1); font-weight: var(--fw-reg); line-height: var(--lh-tight); letter-spacing: var(--ls-display); color: var(--ink); text-wrap: balance; }
.cs-dark .cs-h { color: var(--paper); }
.cs-t { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-70); max-width: 52ch; }
.cs-dark .cs-t { color: var(--on-dark-md); }
.cs-t + .cs-t { margin-top: var(--s-2); }
.cs-dark { background: var(--ink); color: var(--paper); }
.cs-light { background: var(--paper); }
.cs-sec { padding-block: var(--section-y); }
.cs-ph { position: relative; background: var(--color-ink-2); overflow: hidden; }
.cs-ph > .ph { position: absolute; inset: 0; aspect-ratio: auto; background: var(--color-ink-2); }
.cs-ph > .ph::after { color: var(--on-dark-faint); }
.cs-ph .cs-img { position: absolute; inset: 0; background-size: cover; background-position: center; }

/* 01 Hero: testo a sinistra, foto a destra a tutta altezza */
.cs-hero { display: grid; grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr); min-height: min(88vh, 860px); background: var(--ink); color: var(--paper); }
.cs-hero__txt { display: flex; flex-direction: column; padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3.5vw, 3.5rem) clamp(2rem, 3.5vw, 3rem) var(--cs-pad); }
.cs-hero .crumbs { padding-top: 0; }
.cs-hero__sett { margin-top: clamp(2.5rem, 7vh, 5rem); font-size: var(--fs-micro); font-weight: var(--fw-med); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--accent); }
.cs-hero__h1 { margin-top: var(--s-2); font-size: var(--fs-hero); font-weight: var(--fw-med); line-height: 0.95; letter-spacing: var(--ls-display); }
.cs-hero__sub { margin-top: var(--s-4); max-width: 22ch; font-size: var(--fs-h3); font-weight: var(--fw-light); line-height: var(--lh-snug); color: var(--on-dark-hi); }
.cs-meta { margin-top: auto; padding-top: var(--s-5); display: grid; grid-template-columns: repeat(3, auto); justify-content: start; }
.cs-meta div { padding-inline: 0 var(--s-3); }
.cs-meta div + div { padding-left: var(--s-3); border-left: 1px solid var(--line-invert); }
.cs-meta dt { font-size: var(--fs-tag); color: var(--on-dark-lo); }
.cs-meta dd { margin: 0.2rem 0 0; font-size: var(--fs-small); color: var(--paper); line-height: var(--lh-ui); }
.cs-hero__img { min-height: 420px; }

/* 02 Il progetto in breve */
.cs-brief { display: grid; grid-template-columns: minmax(0, 0.22fr) minmax(0, 1fr); gap: var(--s-4); }
.cs-brief__cols { display: grid; grid-template-columns: 1fr 1fr; }
.cs-brief__col { padding-right: clamp(1.5rem, 4vw, 4rem); }
.cs-brief__col + .cs-brief__col { padding-left: clamp(1.5rem, 4vw, 4rem); padding-right: 0; border-left: 1px solid var(--line); }
.cs-brief__t { font-size: var(--fs-h3); font-weight: var(--fw-reg); letter-spacing: var(--ls-tight); margin-bottom: var(--s-2); }
.cs-keys { grid-column: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(3rem, 6vw, 5rem); }
.cs-keys li { padding: var(--s-3) var(--s-3) 0 0; border-top: 1px solid var(--line-strong); }
.cs-keys b { display: block; font-size: var(--fs-h2); font-weight: var(--fw-reg); letter-spacing: var(--ls-display); line-height: 1; }
.cs-keys span { display: block; margin-top: var(--s-2); font-size: var(--fs-small); color: var(--ink-70); }

/* 03 e 05: testo a sinistra, foto a destra fino al bordo */
.cs-split { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); min-height: min(80vh, 760px); }
.cs-split__txt { display: flex; flex-direction: column; justify-content: center; padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 4vw, 4rem) clamp(4rem, 8vw, 7rem) var(--cs-pad); }
.cs-split__txt .cs-h { margin-top: clamp(2.5rem, 6vw, 5rem); max-width: 12ch; }
.cs-split__txt .cs-t { margin-top: var(--s-4); }
.cs-act { margin-top: var(--s-5); display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-invert); }
.cs-act li { padding: 0.8rem 0; border-bottom: 1px solid var(--line-invert); font-size: var(--fs-small); color: var(--on-dark-hi); }
.cs-act li:nth-child(odd) { padding-right: var(--s-2); }

/* 04 La soluzione */
.cs-sol { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: start; }
.cs-sol .cs-h { margin-top: clamp(2rem, 4vw, 3rem); max-width: 14ch; }
.cs-sol .cs-t { margin-top: var(--s-4); }
.cs-sol .btn { margin-top: var(--s-5); }
.cs-tec { display: grid; grid-template-columns: 1fr 1fr; }
.cs-tec li { padding: var(--s-4) var(--s-4) var(--s-4) 0; border-bottom: 1px solid var(--line); }
.cs-tec li:nth-child(even) { padding-left: var(--s-4); padding-right: 0; border-left: 1px solid var(--line); }
.cs-tec li:nth-last-child(-n+2) { border-bottom: 0; }
.cs-ico { width: 34px; height: 34px; color: var(--accent-mid); }
.cs-dark .cs-ico { color: var(--accent); }
.cs-tec__n { display: block; margin-top: var(--s-3); font-size: var(--fs-tag); color: var(--muted); font-variant-numeric: tabular-nums; }
.cs-tec__t { display: block; margin-top: 0.25rem; font-size: var(--fs-body); font-weight: var(--fw-med); }
.cs-tec__d { display: block; margin-top: 0.4rem; font-size: var(--fs-small); line-height: var(--lh-body); color: var(--ink-70); max-width: 36ch; }

/* 06 Gallery */
.cs-gal__head { display: grid; grid-template-columns: minmax(0, 0.22fr) 1fr auto; gap: var(--s-4); align-items: end; margin-bottom: var(--s-4); }
.cs-gal__ctl { display: flex; align-items: center; gap: var(--s-2); }
.cs-gal__cnt { font-size: var(--fs-small); color: var(--ink-70); font-variant-numeric: tabular-nums; min-width: 4.5em; text-align: right; }
.cs-gal__cnt b { color: var(--ink); font-weight: var(--fw-med); }
.cs-gal__track {
  display: flex; gap: var(--s-2); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-left: calc(var(--cs-pad) + (100vw - 2 * var(--cs-pad)) * 0.22 + var(--s-4));
  padding-right: var(--cs-pad); scroll-padding-left: calc(var(--cs-pad) + (100vw - 2 * var(--cs-pad)) * 0.22 + var(--s-4));
}
.cs-gal__track::-webkit-scrollbar { display: none; }
.cs-gal__i { position: relative; flex: none; height: clamp(300px, 56vh, 600px); aspect-ratio: 3 / 2; scroll-snap-align: start; border: 0; padding: 0; cursor: zoom-in; background: var(--color-ink-2); }
.cs-gal__i--v { aspect-ratio: 2 / 3; }
.cs-gal__i .cs-img { transition: transform var(--dur-slow) var(--ease); }
.cs-gal__i:hover .cs-img { transform: scale(1.03); }
.cs-gal__num { position: absolute; left: 0.9rem; bottom: 0.8rem; z-index: 1; font-size: var(--fs-tag); font-weight: var(--fw-med); letter-spacing: var(--ls-caps); color: var(--paper); font-variant-numeric: tabular-nums; }
.cs-arr { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); display: grid; place-items: center; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.cs-arr:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cs-arr[disabled] { opacity: 0.3; pointer-events: none; }
.cs-arr--prev svg { transform: rotate(180deg); }
.cs-open { font-size: var(--fs-small); font-weight: var(--fw-med); background: none; border: 0; border-bottom: 1px solid currentColor; padding: 0 0 2px; color: var(--ink); }

/* Lightbox */
.cs-lb { position: fixed; inset: 0; z-index: 400; background: rgba(20,21,20,0.97); display: grid; grid-template-rows: auto 1fr; opacity: 0; visibility: hidden; transition: opacity var(--dur-fast) var(--ease), visibility var(--dur-fast); }
.cs-lb.is-open { opacity: 1; visibility: visible; }
.cs-lb__bar { display: flex; justify-content: space-between; align-items: center; padding: var(--s-3) var(--gutter); color: var(--paper); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.cs-lb__stage { position: relative; margin: 0 var(--gutter) var(--gutter); }
.cs-lb__img { position: absolute; inset: 0; background-size: contain; background-repeat: no-repeat; background-position: center; }
.cs-lb__v { width: 100%; height: 100%; object-fit: contain; display: block; }
.cs-lb .cs-arr { position: absolute; top: 50%; margin-top: -22px; border-color: var(--line-invert); color: var(--paper); background: var(--ink); }
.cs-lb .cs-arr:hover { background: var(--paper); color: var(--ink); }
.cs-lb .cs-arr--prev { left: 0; }
.cs-lb .cs-arr--next { right: 0; }
.cs-lb__x { background: none; border: 0; color: var(--paper); font-size: var(--fs-small); display: inline-flex; gap: 0.5rem; align-items: center; }

/* 07 Dietro il progetto */
.cs-behind { display: grid; grid-template-columns: minmax(0, 0.22fr) minmax(0, 1fr); gap: var(--s-4); }
.cs-behind .cs-h { max-width: 18ch; }
.cs-behind .cs-t { margin-top: var(--s-4); }

/* 08 Il risultato */
.cs-res { display: grid; grid-template-columns: minmax(0, 0.22fr) minmax(0, 0.9fr) minmax(0, 1.4fr); gap: var(--s-4); align-items: start; }
.cs-res .cs-h { font-size: var(--fs-h2); }
.cs-res__l { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.cs-res__l li { padding: 0 var(--s-3) var(--s-4) 0; }
.cs-res__l li:nth-child(n+3) { padding-top: var(--s-4); border-top: 1px solid var(--line); }
.cs-res__t { display: block; margin-top: var(--s-2); font-size: var(--fs-body); font-weight: var(--fw-med); }
.cs-res__d { display: block; margin-top: 0.35rem; font-size: var(--fs-small); line-height: var(--lh-body); color: var(--ink-70); max-width: 34ch; }

/* 09 Lizard Digital */
.cs-lz { display: grid; grid-template-columns: minmax(0, 0.22fr) minmax(0, 0.9fr) minmax(0, 1.2fr); gap: var(--s-4); align-items: start; }
.cs-lz .cs-h { max-width: 14ch; }
.cs-lz .cs-t { margin-top: var(--s-4); }
.cs-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-invert); }
.cs-steps li { padding: var(--s-3) var(--s-3) var(--s-4) 0; border-bottom: 1px solid var(--line-invert); }
.cs-steps li:nth-last-child(-n+3) { border-bottom: 0; }
.cs-steps b { display: block; font-size: var(--fs-micro); font-weight: var(--fw-med); color: var(--accent); font-variant-numeric: tabular-nums; }
.cs-steps span { display: block; margin-top: var(--s-2); font-size: var(--fs-lead); font-weight: var(--fw-light); color: var(--paper); }
.cs-steps__nota { margin-top: var(--s-3); font-size: var(--fs-tag); color: var(--on-dark-lo); }

/* 10 CTA */
.cs-cta { display: grid; grid-template-columns: minmax(0, 0.22fr) minmax(0, 1fr) auto; gap: var(--s-4); align-items: end; }
.cs-cta .cs-h { max-width: 16ch; }
.cs-cta .cs-t { margin-top: var(--s-3); }
.cs-cta__a { display: flex; flex-wrap: wrap; gap: var(--s-2); }

@media (max-width: 1100px) {
  .cs-res { grid-template-columns: minmax(0, 0.3fr) minmax(0, 1fr); }
  .cs-res__l { grid-column: 1 / -1; margin-top: var(--s-4); }
  .cs-lz { grid-template-columns: minmax(0, 0.3fr) minmax(0, 1fr); }
  .cs-steps { grid-column: 1 / -1; margin-top: var(--s-4); }
  .cs-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 920px) {
  .cs-hero, .cs-split { grid-template-columns: 1fr; min-height: 0; }
  .cs-hero__img { order: -1; min-height: 0; aspect-ratio: 4 / 3; }
  .cs-hero__txt { padding: var(--s-4) var(--cs-pad) var(--s-5); }
  .cs-hero .crumbs { order: -1; }
  .cs-hero__sett { margin-top: var(--s-4); }
  .cs-split__img { aspect-ratio: 4 / 3; }
  .cs-split__txt { padding: var(--s-6) var(--cs-pad); }
  .cs-split__txt .cs-h { margin-top: var(--s-4); }
  .cs-brief, .cs-behind, .cs-res, .cs-lz, .cs-cta { grid-template-columns: 1fr; }
  .cs-brief__cols { grid-template-columns: 1fr; }
  .cs-brief__col + .cs-brief__col { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); margin-top: var(--s-4); padding-top: var(--s-4); }
  .cs-keys { grid-column: auto; margin-top: var(--s-5); }
  .cs-sol { grid-template-columns: 1fr; }
  .cs-gal__head { grid-template-columns: 1fr auto; }
  .cs-gal__head > div:nth-child(2) { display: none; }
  .cs-gal__track { padding-left: var(--cs-pad); scroll-padding-left: var(--cs-pad); }
}
@media (max-width: 640px) {
  .cs-meta { grid-template-columns: 1fr; gap: var(--s-2); }
  .cs-meta div + div { padding-left: 0; border-left: 0; }
  .cs-tec, .cs-res__l, .cs-steps, .cs-act { grid-template-columns: 1fr; }
  .cs-tec li, .cs-tec li:nth-child(even) { padding: var(--s-3) 0; border-left: 0; }
  .cs-tec li:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  .cs-res__l li, .cs-res__l li:nth-child(n+3) { padding: var(--s-3) 0; border-top: 1px solid var(--line); }
  .cs-steps li:nth-last-child(-n+3) { border-bottom: 1px solid var(--line-invert); }
  .cs-gal__i { height: 62vw; }
}

/* Foto del case study Trentino Sviluppo (file foto-1.jpg ... foto-5.jpg nella cartella progetti, sottocartella trentino-sviluppo) */
.cs-ts1 { background-image: url(/assets/img/progetti/trentino-sviluppo/foto-1.jpg); }
.cs-ts3 { background-image: url(/assets/img/progetti/trentino-sviluppo/foto-3.jpg); }
.cs-ts5 { background-image: url(/assets/img/progetti/trentino-sviluppo/foto-5.jpg); }

/* ==========================================================================
   Votazioni elettroniche, pagina completa (24 set). Prefisso vt-.
   Riusa avp-, avc, av-l, sn-, hy-att, hy-config, ac-light. Unica sezione
   con un'idea grafica forte: il racconto della votazione con l'emiciclo
   che si accende fase dopo fase (JS in initAll, copia vt.js).
   ========================================================================== */
.vt-h1 { max-width: 18ch; }
.avc__grid.vt-g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.vt-g5 .avc__c { min-height: 280px; }
.vt-g5 .avc__top { padding-bottom: var(--s-5); }
.hy-att.vt-att5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Il valore: racconto a sinistra, emiciclo fermo a destra */
.vt-val__h { max-width: 18ch; font-size: var(--fs-h1); }
.vt-story { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(2rem, 6vw, 6rem); margin-top: var(--s-5); }
.vt-story__in { font-size: var(--fs-micro); font-weight: var(--fw-med); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--accent); margin-bottom: var(--s-3); }
.vt-fasi { counter-reset: none; }
.vt-f {
  display: grid; grid-template-columns: 2.5rem 1fr; align-items: baseline;
  padding-block: clamp(1.6rem, 6vh, 3.4rem); border-top: 1px solid var(--line-invert);
  opacity: 0.32; transition: opacity var(--dur) var(--ease);
}
.vt-f:last-child { border-bottom: 1px solid var(--line-invert); }
.vt-f.is-on, .vt-f.is-done { opacity: 1; }
.vt-f.is-done { opacity: 0.55; }
.vt-f__n { font-size: var(--fs-micro); font-weight: var(--fw-med); letter-spacing: var(--ls-caps); color: var(--accent); font-variant-numeric: tabular-nums; }
.vt-f__t { font-size: var(--fs-h3); font-weight: var(--fw-light); line-height: var(--lh-snug); color: var(--paper); letter-spacing: var(--ls-tight); }

.vt-story__vis { position: relative; }
.vt-hemi { position: sticky; top: 150px; padding: var(--card-pad); border: 1px solid var(--line-invert); border-radius: var(--r-lg); background: rgba(247,247,245,0.02); }
.vt-hemi svg { display: block; width: 100%; height: auto; overflow: visible; }
.vt-s { fill: transparent; stroke: var(--on-dark-faint); stroke-width: 1.2; transition: fill var(--dur) var(--ease), stroke var(--dur) var(--ease); transition-delay: 0ms; }
.vt-hemi.is-f1 .vt-s { stroke: rgba(0,255,156,0.75); animation: vt-pulse 1.4s ease-in-out infinite; }
.vt-hemi.is-f2 .vt-s { animation: none; stroke: transparent; transition-delay: calc(var(--i) * 14ms); }
.vt-hemi.is-f2 .vt-s--0 { fill: var(--accent); }
.vt-hemi.is-f2 .vt-s--1 { fill: var(--on-dark-hi); }
.vt-hemi.is-f2 .vt-s--2 { fill: var(--on-dark-faint); }
@keyframes vt-pulse { 50% { stroke: var(--accent-a30); } }
.vt-hemi__scr { fill: var(--color-ink-3); stroke: var(--on-dark-faint); stroke-width: 1.2; transition: stroke var(--dur) var(--ease); }
.vt-hemi__b { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); transition: transform var(--dur-slow) var(--ease) 150ms; }
.vt-hemi__b--0 { fill: var(--accent); }
.vt-hemi__b--1 { fill: var(--on-dark-hi); }
.vt-hemi__b--2 { fill: var(--on-dark-faint); }
.vt-hemi.is-f4 .vt-hemi__scr { stroke: var(--accent); }
.vt-hemi.is-f4 .vt-hemi__b { transform: scaleX(1); }

.vt-bar { display: flex; gap: 3px; height: 8px; margin-top: var(--s-4); border-radius: var(--r-ctl); overflow: hidden; background: rgba(247,247,245,0.06); }
.vt-bar__s { display: block; height: 100%; width: 0; transition: width var(--dur-slow) var(--ease); }
.vt-bar__s--0 { background: var(--accent); }
.vt-bar__s--1 { background: var(--on-dark-hi); transition-delay: 150ms; }
.vt-bar__s--2 { background: var(--on-dark-faint); transition-delay: 300ms; }
.vt-hemi.is-f3 .vt-bar__s { width: var(--w); }

.vt-senza { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); margin-top: clamp(3rem, 8vw, 6rem); }
.vt-senza li { padding-top: var(--s-3); border-top: 2px solid var(--accent); font-size: var(--fs-h3); font-weight: var(--fw-light); line-height: var(--lh-snug); color: var(--paper); }
.vt-val__end { margin-top: var(--s-5); max-width: 40ch; }

@media (max-width: 1100px) {
  .avc__grid.vt-g5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hy-att.vt-att5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 920px) {
  .avc__grid.vt-g5, .hy-att.vt-att5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vt-story { grid-template-columns: 1fr; gap: 0; }
  .vt-story__vis { order: -1; position: sticky; top: 96px; z-index: 2; background: var(--ink); padding-block: var(--s-2); }
  .vt-hemi { position: static; padding: var(--s-2); }
  .vt-bar { margin-top: var(--s-2); }
  .vt-senza { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .avc__grid.vt-g5, .hy-att.vt-att5 { grid-template-columns: 1fr; }
  .vt-story__vis { top: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .vt-hemi.is-f1 .vt-s { animation: none; }
  .vt-s, .vt-bar__s, .vt-hemi__b { transition: none; }
}

/* ==========================================================================
   Spazi ibridi, pagina completa (24 set). Prefisso hy-.
   Riusa avp-, avc, lw-arc, av-l, sn-, ac-light. Aggiunge: la linea della
   distanza che svanisce e le attività con icona. (v2: problema e sala
   ridotti a elenchi semplici su richiesta.)
   ========================================================================== */
.hy-h1 { max-width: 20ch; }

/* Il problema: elenco semplice, senza chiusa */
.hy-list { margin-top: 0; }
.hy-list .pain { font-size: var(--fs-lead); }
.hy-sub { margin-top: var(--s-2); margin-bottom: var(--s-5); }

/* Cosa integriamo: il controllo occupa due colonne */
.avc__grid.ds-g4 .hy-wide { grid-column: span 2; }
.hy-wide .avc__d { max-width: 52ch; }

/* Chi è da remoto: la linea della distanza */
.hy-dist {
  --hy-ic: 72px;
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 3vw, 3rem); align-items: start; margin-top: var(--s-3);
}
.hy-dist::before {
  content: ""; position: absolute; left: 0; right: 0; top: calc(var(--hy-ic) / 2 - 1px); height: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-a50) 45%, var(--accent-a06) 100%);
}
.hy-dist__end {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
  padding-top: calc(var(--hy-ic) / 2 - 8px);
  font-size: var(--fs-micro); font-weight: var(--fw-med); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--accent);
  white-space: nowrap;
}
.hy-dist__end i { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 6px var(--accent-a15); }
.hy-dist__end--b { color: var(--on-dark-lo); }
.hy-dist__end--b i { background: var(--ink); border: 1.5px solid var(--on-dark-lo); box-shadow: none; }
.hy-dist__l { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.hy-dist__n { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hy-dist__ic {
  width: var(--hy-ic); height: var(--hy-ic); display: grid; place-items: center; border-radius: 50%;
  background: var(--ink); color: var(--accent); border: 1.5px solid var(--accent-a50);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.hy-dist__n:nth-child(2) .hy-dist__ic { border-color: var(--accent-a50); }
.hy-dist__n:nth-child(3) .hy-dist__ic { border-color: var(--accent-a30); }
.hy-dist__n:nth-child(4) .hy-dist__ic { border-color: var(--accent-a15); }
.hy-dist__n:hover .hy-dist__ic { background: var(--accent); color: var(--ink); transform: translateY(-4px); }
.hy-dist__svg { width: 32px; height: 32px; }
.hy-dist__t { margin-top: var(--s-3); font-size: var(--fs-h3); font-weight: var(--fw-med); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--paper); }
.hy-dist__d { margin-top: 0.4rem; font-size: var(--fs-small); line-height: var(--lh-body); color: var(--on-dark-md); max-width: 24ch; }
.hy-rem__end { margin-top: var(--s-6); max-width: 40ch; }

/* Chi è in sala: elenco a una colonna, una frase di chiusura */
.av-l.hy-l1 { grid-template-columns: 1fr; }
.hy-l1 li { font-size: var(--fs-lead); font-weight: var(--fw-light); }
.hy-sala__end { margin-top: var(--s-5); color: var(--ink); max-width: 44ch; }

/* Le attività */
.hy-att { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.hy-att__c {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: var(--card-pad-sm); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hy-att__c:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: 0 24px 48px -32px var(--color-text-subtle); }
.hy-att__ic {
  width: 56px; height: 56px; margin-bottom: var(--s-3); display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--paper-2); color: var(--accent-mid);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.hy-att__c:hover .hy-att__ic { background: var(--ink); color: var(--accent); }
.hy-att__svg { width: 32px; height: 32px; }
.hy-att__t { font-size: var(--fs-lead); font-weight: var(--fw-med); line-height: var(--lh-snug); }
.hy-att__d { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--ink-70); max-width: 34ch; }

.hy-config { background: var(--paper-2); }

@media (max-width: 920px) {
  .hy-att { grid-template-columns: 1fr 1fr; }
  .hy-dist { --hy-ic: 60px; grid-template-columns: 1fr; gap: var(--s-3); }
  .hy-dist::before { left: calc(var(--hy-ic) / 2 - 1px); right: auto; top: 8px; bottom: 8px; width: 2px; height: auto;
    background: linear-gradient(180deg, var(--accent) 0%, var(--accent-a50) 45%, var(--accent-a06) 100%); }
  .hy-dist__end { flex-direction: row; padding-top: 0; padding-left: calc(var(--hy-ic) / 2 - 8px); }
  .hy-dist__l { grid-template-columns: 1fr; gap: var(--s-3); }
  .hy-dist__n { display: grid; grid-template-columns: var(--hy-ic) 1fr; column-gap: var(--s-3); align-items: center; text-align: left; }
  .hy-dist__ic { grid-row: span 2; }
  .hy-dist__t { margin-top: 0; align-self: end; }
  .hy-dist__d { align-self: start; max-width: none; }
}
@media (max-width: 640px) {
  .hy-att { grid-template-columns: 1fr; }
  .avc__grid.ds-g4 .hy-wide { grid-column: auto; }
}

/* ==========================================================================
   Acustica e comfort, pagina completa (24 set). Prefisso ac-.
   Riusa avp-, avc, lw-arc, sn-, case. Aggiunge: le otto variabili dello
   spazio, l'onda che si smorza (acustica), l'arredo con icone, i tre piani
   in assonometria (arredo, acustica, tecnologia).
   ========================================================================== */
.ac-h1 { max-width: 16ch; }
.ac-light { color: var(--paper); }

/* Otto variabili: griglia 4 x 2 con filo in testa */
.ac-var__h { margin-bottom: var(--s-2); font-size: var(--fs-micro); font-weight: var(--fw-med); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--muted); }
.ac-var { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.ac-var__c {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-4);
  min-height: 150px; padding: var(--s-3) var(--s-3) var(--s-3) 0;
  border-bottom: 1px solid var(--line);
  transition: background var(--dur) var(--ease), padding var(--dur) var(--ease);
}
.ac-var__c:not(:nth-child(4n)) { border-right: 1px solid var(--line); }
.ac-var__c:not(:nth-child(4n+1)) { padding-left: var(--s-3); }
.ac-var__c:hover { background: var(--white); }
.ac-var__n { font-size: var(--fs-micro); font-weight: var(--fw-med); letter-spacing: var(--ls-caps); color: var(--accent-mid); font-variant-numeric: tabular-nums; }
.ac-var__t { font-size: var(--fs-lead); font-weight: var(--fw-light); line-height: var(--lh-snug); color: var(--ink); max-width: 16ch; }
.ac-var__end { max-width: 46ch; }

/* Acustica: onda che si smorza con i quattro fattori sotto */
.ac-wave { position: relative; margin-bottom: var(--s-5); }
.ac-wave svg { display: block; width: 100%; height: clamp(70px, 9vw, 120px); overflow: visible; }
.ac-wave path { fill: none; }
.ac-wave__a { stroke: var(--accent); stroke-width: 1.6; }
.ac-wave__b { stroke: var(--on-dark-faint); stroke-width: 1.2; }
.ac-wave__l { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--s-2); border-top: 1px solid var(--line-invert); }
.ac-wave__l li { padding-top: var(--s-2); font-size: var(--fs-micro); font-weight: var(--fw-med); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--on-dark-lo); }
.ac-pre { margin-bottom: var(--s-3); font-size: var(--fs-micro); font-weight: var(--fw-med); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .ac-wave.reveal .ac-wave__a { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .ac-wave.reveal.is-in .ac-wave__a { animation: ac-draw 2.4s var(--ease) 0.15s forwards; }
}
@keyframes ac-draw { to { stroke-dashoffset: 0; } }

/* Arredo: sei voci con icona in due colonne */
.ac-arr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-1); }
.ac-arr__c {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.85rem 1rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.ac-arr__c:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.ac-arr__ic { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: var(--r-md); background: var(--paper-2); color: var(--accent-mid); }
.ac-arr__svg { width: 28px; height: 28px; }
.ac-arr__t { font-size: var(--fs-body); font-weight: var(--fw-med); line-height: var(--lh-snug); }

/* Tre piani sovrapposti */
.ac-tre { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.ac-stack { --pw: clamp(190px, 19vw, 250px); position: relative; display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); }
.ac-stack::before {
  content: ""; position: absolute; left: calc(var(--pw) / 2); top: 50px; bottom: 50px;
  border-left: 1.5px dashed var(--accent-a50);
}
.ac-layer { position: relative; display: grid; grid-template-columns: var(--pw) 1fr; align-items: center; gap: clamp(1.25rem, 2.5vw, 2.5rem); }
/* freccia verso il piano successivo, come nel brief */
.ac-layer:not(:last-child)::after {
  content: ""; position: absolute; left: calc(var(--pw) / 2 - 5px); bottom: calc(clamp(1.75rem, 3vw, 2.5rem) * -0.5 - 5px);
  width: 10px; height: 10px; border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent);
  transform: rotate(45deg); background: var(--ink);
}
.ac-plate { width: 100%; height: auto; display: block; overflow: visible; }
.ac-plate__top { fill: var(--color-ink-2); stroke: var(--on-dark-faint); stroke-width: 1.2; }
.ac-plate__side { fill: var(--color-ink-3); stroke: var(--border-on-dark); stroke-width: 1; }
.ac-plate__m { fill: var(--accent-a15); stroke: var(--accent); stroke-width: 1.1; }
.ac-plate__w { fill: none; }
.ac-plate__d { fill: var(--accent); }
.ac-layer__b { display: grid; gap: 0.25rem; }
.ac-layer__n { font-size: var(--fs-micro); font-weight: var(--fw-med); letter-spacing: var(--ls-caps); color: var(--accent); font-variant-numeric: tabular-nums; }
.ac-layer__t { font-size: var(--fs-h3); font-weight: var(--fw-med); letter-spacing: 0.01em; color: var(--paper); line-height: var(--lh-snug); }
.ac-layer__d { font-size: var(--fs-small); color: var(--on-dark-md); line-height: var(--lh-ui); max-width: 28ch; }
.ac-layer .ac-plate { transition: transform var(--dur) var(--ease); }
.ac-layer:hover .ac-plate { transform: translateY(-6px); }
.ac-tre__es .pains { margin-top: 0; }

.ac-tre__end { margin-top: var(--s-4); }

/* Dallo spazio alla soluzione: sei voci */
.lw-arc.ac-arc6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ac-poi { margin-top: var(--s-5); }
.ac-an { margin-bottom: var(--s-2); font-size: var(--fs-micro); font-weight: var(--fw-med); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--muted); }

@media (max-width: 1100px) {
  .ac-var { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ac-var__c:not(:nth-child(4n)) { border-right: 0; }
  .ac-var__c:nth-child(odd) { border-right: 1px solid var(--line); }
  .ac-var__c:not(:nth-child(4n+1)) { padding-left: 0; }
  .ac-var__c:nth-child(even) { padding-left: var(--s-3); }
  .lw-arc.ac-arc6 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s-4); }
}
@media (max-width: 920px) {
  .ac-tre { grid-template-columns: 1fr; }
  .ac-arr { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .ac-var__c { min-height: 118px; gap: var(--s-2); }
  .ac-var__t { font-size: var(--fs-body); }
  .ac-wave__l { grid-template-columns: 1fr 1fr; row-gap: 0.25rem; }
  .ac-arr { grid-template-columns: 1fr; }
  .lw-arc.ac-arc6 { grid-template-columns: 1fr 1fr; }
  .ac-stack { --pw: 140px; }
}
/* Progetto in evidenza: il link della card scura resta leggibile */
.ac-prj .case .more { color: var(--paper); }
.ac-prj .case .more__c { border-color: var(--line-invert); }

/* ==========================================================================
   Controllo e automazione, pagina completa (24 set). Prefisso ca-.
   Riusa avp-, avc, lw-arc, sn-. Aggiunge: la console degli scenari
   (un tasto accende i sistemi che attiva) e lo schema a raggiera
   dei sistemi controllabili.
   ========================================================================== */
.ca-h1 { max-width: 22ch; }
.ca-intro .lead { color: var(--ink); }
.ca-intro .body-text + .lead, .ca-intro .lead + .body-text { margin-top: var(--s-3); }


/* --------------------------------------------------------------- Scenari */
.ca-con {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  gap: clamp(1.5rem, 3.5vw, 3.5rem);
  background: var(--ink); color: var(--paper);
  border-radius: var(--r-lg);
  padding: var(--card-pad);
}
.ca-con::before {
  content: ""; position: absolute; z-index: -1; right: -12%; top: -40%;
  width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--accent-a15) 0%, transparent 62%);
  pointer-events: none;
}
.ca-con__keys { display: grid; gap: 0.6rem; align-content: start; }
.ca-key {
  display: flex; align-items: center; gap: 0.9rem; width: 100%;
  padding: 1.05rem 1.15rem; text-align: left;
  background: rgba(247,247,245,0.04); color: var(--on-dark-md);
  border: 1px solid var(--line-invert); border-radius: var(--r-md);
  font-size: var(--fs-small); font-weight: var(--fw-med); letter-spacing: var(--ls-caps); text-transform: uppercase;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.ca-key svg { width: 22px; height: 22px; flex: none; color: var(--accent); transition: color var(--dur-fast) var(--ease); }
.ca-key__l { flex: 1; }
.ca-key__led { width: 8px; height: 8px; border-radius: 50%; background: var(--border-on-dark); flex: none; transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.ca-key:hover { border-color: var(--on-dark-lo); color: var(--paper); }
.ca-key.is-on { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.ca-key.is-on svg { color: var(--ink); }
.ca-key.is-on .ca-key__led { background: var(--ink); }
.ca-key:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.ca-con__stage { display: flex; flex-direction: column; }
.ca-dev { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.ca-dev__c {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-3);
  min-height: 132px; padding: 1.1rem;
  border: 1px solid var(--line-invert); border-radius: var(--r-md);
  background: rgba(247,247,245,0.02);
  opacity: 0.38;
  transition: opacity var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  transition-delay: 0ms;
}
.ca-dev__ic { width: 34px; height: 34px; color: var(--on-dark-hi); transition: color var(--dur) var(--ease); }
.ca-dev__n { font-size: var(--fs-small); font-weight: var(--fw-med); color: var(--paper); }
.ca-dev__led { position: absolute; top: 1rem; right: 1rem; width: 8px; height: 8px; border-radius: 50%; background: var(--on-dark-faint); transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.ca-dev__c.is-on {
  opacity: 1; border-color: var(--accent-a50); background: var(--accent-a06);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.ca-dev__c.is-on .ca-dev__ic { color: var(--accent); transition-delay: calc(var(--i, 0) * 110ms); }
.ca-dev__c.is-on .ca-dev__led { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-a15), 0 0 14px rgba(0,255,156,0.7); transition-delay: calc(var(--i, 0) * 110ms); }

.ca-con__st {
  margin-top: var(--s-3); padding-top: var(--s-2); border-top: 1px solid var(--line-invert);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem;
  min-height: 2.6em; font-size: var(--fs-small); color: var(--on-dark-md);
}
.ca-con__st span { display: inline-flex; align-items: center; gap: 0.6rem; }
.ca-con__st span + span::before { content: "→"; color: var(--accent); }
.ca-sc__note { margin-top: var(--s-3); font-size: var(--fs-small); color: var(--ink-70); max-width: 70ch; }

/* ---------------------------------------- Cosa possiamo controllare: raggiera */
.ca-hub__h { max-width: 24ch; margin-bottom: var(--s-6); }
.ca-hub {
  --ca-gap: clamp(2.5rem, 5.5vw, 5.5rem);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1fr);
  gap: var(--ca-gap); align-items: stretch;
}
.ca-hub__col { display: grid; grid-template-rows: repeat(3, 1fr); gap: var(--s-2); }
.ca-sys {
  position: relative; display: flex; align-items: center; gap: 1rem;
  padding: 1.15rem 1.25rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ca-sys:hover { border-color: var(--line-strong); box-shadow: 0 18px 40px -30px var(--color-text-subtle); }
/* filo verso il centro, con il punto d'innesto sul bordo del nucleo */
.ca-sys::after {
  content: ""; position: absolute; top: 50%; width: var(--ca-gap); height: 0;
  border-top: 1.5px dashed var(--line-strong);
}
.ca-sys::before {
  content: ""; position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -4px;
  background: var(--accent); transform: rotate(45deg);
}
.ca-hub__col--l .ca-sys::after { left: 100%; }
.ca-hub__col--l .ca-sys::before { left: calc(100% + var(--ca-gap) - 5px); }
.ca-hub__col--r .ca-sys::after { right: 100%; }
.ca-hub__col--r .ca-sys::before { right: calc(100% + var(--ca-gap) - 5px); }
.ca-hub__col--r .ca-sys { flex-direction: row; }
.ca-sys__ic {
  width: 52px; height: 52px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--paper-2); color: var(--accent-mid);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ca-sys:hover .ca-sys__ic { background: var(--ink); color: var(--accent); }
.ca-sys__svg { width: 30px; height: 30px; }
.ca-sys__b { display: grid; gap: 0.2rem; }
.ca-sys__t { font-size: var(--fs-h4); font-weight: var(--fw-med); line-height: var(--lh-snug); }
.ca-sys__d { font-size: var(--fs-small); line-height: var(--lh-ui); color: var(--ink-70); }

.ca-hub__core {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: clamp(2rem, 3vw, 3rem) clamp(1.5rem, 2.5vw, 2.5rem);
  background: var(--ink); color: var(--paper); border-radius: var(--r-lg);
}
.ca-hub__core::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle at 50% 38%, var(--accent-a15) 0%, transparent 58%);
}
.ca-hub__ring {
  position: relative; width: 96px; height: 96px; display: grid; place-items: center;
  border-radius: 50%; border: 1.5px solid var(--accent-a50); color: var(--accent);
  box-shadow: 0 0 0 12px var(--accent-a06), 0 0 0 24px var(--accent-a06);
}
.ca-hub__ring svg { width: 38px; height: 38px; }
.ca-hub__k {
  margin-top: var(--s-5); font-size: var(--fs-micro); font-weight: var(--fw-med);
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--accent);
}
.ca-hub__t { margin-top: var(--s-2); max-width: 18ch; font-size: var(--fs-h3); font-weight: var(--fw-light); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); }

@media (max-width: 1100px) {
  .ca-dev { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ca-hub { grid-template-columns: 1fr 1fr; }
  .ca-hub__core { grid-column: 1 / -1; order: -1; padding-block: var(--s-5); }
  .ca-hub__col { grid-template-rows: none; }
  .ca-sys::after, .ca-sys::before { display: none; }
  .ca-hub { gap: var(--s-2); }
}
@media (max-width: 920px) {
  .ca-con { grid-template-columns: minmax(0, 1fr); }
  .ca-con__keys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ca-dev { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ca-dev { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ca-dev__c { min-height: 104px; }
  .ca-con__keys { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .ca-key { padding: 0.85rem 1rem; }
  .ca-hub { grid-template-columns: 1fr; }
  .ca-hub__h { margin-bottom: var(--s-4); }
}
@media (prefers-reduced-motion: reduce) {
  .ca-dev__c, .ca-dev__c.is-on, .ca-dev__ic, .ca-dev__led { transition: none; }
}

/* ------------------------------------------------ Pagine legali: privacy e cookie (21 set) */
.legal__wrap { max-width: 860px; }
.legal__t { margin-top: var(--s-1); }
.legal__agg { margin-top: var(--s-2); font-size: var(--fs-small); color: var(--muted); }
.legal__intro { margin-top: var(--s-4); max-width: 62ch; }
.legal__idx { margin-top: var(--s-5); padding: var(--s-4); background: var(--white); border-radius: var(--r-lg); }
.legal__idx-t { font-size: var(--fs-small); font-weight: var(--fw-med); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-2); }
.legal__idx ol { list-style: decimal; padding-left: 1.3em; columns: 2; column-gap: var(--s-5); }
.legal__idx li { padding-block: 0.3rem; break-inside: avoid; color: var(--muted); }
.legal__go { background: none; border: 0; padding: 0; color: var(--ink); font: inherit; text-align: left; cursor: pointer; vertical-align: top; }
.legal__go:hover { color: var(--accent-mid); text-decoration: underline; }
.legal__s { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--line); scroll-margin-top: 110px; }
.legal__h { font-size: var(--fs-h3); font-weight: var(--fw-med); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); margin-bottom: var(--s-3); }
.legal__s p { color: var(--ink-70); line-height: var(--lh-body); max-width: 70ch; }
.legal__s p + p, .legal__s .legal__l + p, .legal__s .legal__tab + p { margin-top: var(--s-2); }
.legal__s b { font-weight: var(--fw-med); color: var(--ink); }
.legal__l { display: grid; gap: var(--s-2); margin-bottom: var(--s-3); max-width: 70ch; }
.legal__l li { position: relative; padding-left: 1.4rem; color: var(--ink-70); line-height: var(--lh-body); }
.legal__l li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 7px; height: 7px; background: var(--accent); transform: rotate(45deg); }
.legal__tab { margin-block: var(--s-3); border-top: 1px solid var(--line); }
.legal__r { display: grid; grid-template-columns: 11rem 1fr; gap: var(--s-3); padding-block: var(--s-3); border-bottom: 1px solid var(--line); }
.legal__k { font-weight: var(--fw-med); }
.legal__v { color: var(--ink-70); line-height: var(--lh-body); }
.legal__todo { background: var(--color-todo); color: var(--ink); padding: 0 0.3em; border-radius: var(--r-xs); font-weight: var(--fw-med); }
.legal__altro { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--line); color: var(--ink-70); }
.legal__h3 { font-size: var(--fs-h4); font-weight: var(--fw-med); line-height: var(--lh-snug); color: var(--ink); margin: var(--s-4) 0 var(--s-2); }
.legal__h + .legal__h3 { margin-top: 0; }
.legal__s .legal__l + .legal__h3, .legal__s p + .legal__h3, .legal__tab + .legal__h3 { margin-top: var(--s-4); }
.legal__s p + .legal__l { margin-top: var(--s-2); }
.legal__norma { margin-top: var(--s-3); max-width: 70ch; font-size: var(--fs-small); color: var(--muted); line-height: var(--lh-body); }
.legal__nota { margin-top: var(--s-3); padding: var(--s-3) var(--s-4); border-left: 2px solid var(--ink); background: var(--white); border-radius: 0 var(--r-md) var(--r-md) 0; }
.legal__nota-t { color: var(--ink) !important; font-weight: var(--fw-med); margin-bottom: var(--s-2); }
.legal__nota .legal__l { margin-bottom: var(--s-2); }
.legal__go--in { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.footer__bot a { color: inherit; transition: color var(--dur-fast) var(--ease); }
.footer__bot a:hover { color: var(--accent); }
@media (max-width: 640px) { .legal__idx ol { columns: 1; } .legal__r { grid-template-columns: 1fr; gap: var(--s-1); } }
/* ---------------------------------------------- Deck delle tecnologie (Soluzioni, 21 set)
   Lo stesso deck dei settori. In più: frase breve e CTA sulla card attiva.
   Il clic su una card laterale la porta al centro (data-deck-modo="attiva"). */
.hero--deck-tec .hero__sub { margin: var(--s-3) auto 0; max-width: 52ch; color: var(--on-dark-md); text-align: center; }
.deck--tec .sector { cursor: pointer; }
.deck--tec .sector.is-active { cursor: default; }
.deck--tec .sector__d { display: block; max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; font-size: var(--fs-body); line-height: var(--lh-ui); color: var(--on-dark-hi); transition: max-height var(--deck-dur) var(--deck-ease), opacity var(--deck-dur) var(--deck-ease), margin-top var(--deck-dur) var(--deck-ease); }
.deck--tec .sector.is-active .sector__d { max-height: 6em; opacity: 1; margin-top: 0.5rem; }
.deck--tec .sector:hover .sector__d { max-height: 0; opacity: 0; margin-top: 0; }
.deck--tec .sector.is-active:hover .sector__d { max-height: 6em; opacity: 1; margin-top: 0.5rem; }
.sector__cta { display: inline-flex; align-items: center; gap: 0.5em; margin-top: var(--s-2); font-size: var(--fs-small); font-weight: var(--fw-med); color: var(--accent); opacity: 0; pointer-events: none; transition: opacity var(--deck-dur, var(--dur)) var(--ease); }
.sector__cta .arr { transition: transform var(--dur-fast) var(--ease); }
.sector__cta:hover .arr { transform: translateX(3px); }
.deck--tec .sector.is-active .sector__cta { opacity: 1; pointer-events: auto; }
.sector__cta--off { color: var(--on-dark-lo); font-weight: var(--fw-light); }
.deck--tec .sector.is-active .sector__n { font-size: var(--fs-lead); }
.solution.is-vai { box-shadow: 0 0 0 2px var(--accent), 0 26px 54px -28px var(--color-text-subtle); transition: box-shadow var(--dur) var(--ease); }
.va-k { margin-block: var(--s-3); }
.va-bs-h { margin-bottom: var(--s-4); }
.va-centro .slabel { justify-content: center; }
.va-centro .slabel::after { display: none; }
.va-centro .h-two { text-align: center; }
.va-centro .va-ps { margin-inline: auto; max-width: 640px; }
.va-bs-h + .cl-m { border-top: 0; padding-top: var(--s-3); }
.va-b__p { font-size: var(--fs-lead); line-height: var(--lh-ui); font-weight: var(--fw-light); }
.va-tn { display: grid; gap: var(--s-2); align-self: center; }
.va-tn__r { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--card-pad-sm); background: var(--white); }
.va-tn__r--noi { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.va-tn__l { font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--muted); }
.va-tn__r--noi .va-tn__l { color: var(--accent); }
.va-tn__t { font-size: var(--fs-lead); font-weight: var(--fw-light); line-height: var(--lh-snug); }
.va-tn__r--noi .va-tn__t { font-weight: var(--fw-med); }
.va-tec { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-3); }
.va-t { background: var(--white); border-radius: var(--r-lg); padding: var(--s-4) var(--s-3); border: 1px solid var(--line); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.va-t:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -28px var(--color-border-strong); }
.va-t__ic { color: var(--accent-mid); margin-bottom: var(--s-3); }
.va-t__n { font-size: var(--fs-h4); font-weight: var(--fw-med); }
.va-t__d { margin-top: var(--s-1); font-size: var(--fs-small); color: var(--ink-70); line-height: var(--lh-body); }
.va-nota { margin-top: var(--s-5); max-width: 52ch; }
.va-flow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-2); }
.va-flow__s { display: inline-flex; align-items: baseline; gap: 0.6em; padding: 0.9rem 1.3rem; border: 1px solid var(--line-invert); border-radius: var(--r-pill); font-size: var(--fs-h4); font-weight: var(--fw-med); color: var(--paper); }
.va-flow__s:last-child { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.va-flow__n { font-size: var(--fs-tag); color: var(--accent); font-variant-numeric: tabular-nums; }
.va-flow__s:last-child .va-flow__n { color: var(--ink); }
.va-flow__sep { color: var(--on-dark-lo); display: inline-flex; }
.va-flow__c { margin-top: var(--s-5); max-width: 60ch; }
.va-bs { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-3); }
.va-b { grid-column: span 2; border-top: 1px solid var(--line); padding-top: var(--s-3); }
.va-b:nth-child(4), .va-b:nth-child(5) { grid-column: span 3; }
.va-b__m { color: var(--accent-mid); font-weight: var(--fw-med); font-size: var(--fs-small); }
.va-b__t { margin-top: var(--s-1); font-size: var(--fs-lead); font-weight: var(--fw-med); line-height: var(--lh-snug); }
.va-b__d { margin-top: var(--s-2); color: var(--ink-70); max-width: 52ch; }
.va-ps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); counter-reset: none; }
.va-p { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--card-pad-sm); position: relative; }
.va-p__n { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--ink); color: var(--accent); font-size: var(--fs-small); font-weight: var(--fw-med); font-variant-numeric: tabular-nums; }
.va-p__t { margin-top: var(--s-3); font-size: var(--fs-h4); font-weight: var(--fw-med); }
.va-p__d { margin-top: var(--s-1); color: var(--ink-70); font-size: var(--fs-small); line-height: var(--lh-body); }
.va-ps { display: grid; grid-template-columns: 1fr; gap: 0; max-width: 860px; position: relative; }
.va-p { display: grid; grid-template-columns: 3rem 1fr; column-gap: var(--s-4); background: none; border: 0; border-radius: 0; padding: 0 0 var(--s-5); position: relative; }
.va-p:last-child { padding-bottom: 0; }
.va-p::before { content: ""; position: absolute; left: 1.5rem; top: 3rem; bottom: 0; width: 1px; background: var(--line-strong); transform: translateX(-0.5px); }
.va-p:last-child::before { display: none; }
.va-p__n { grid-row: 1 / span 2; width: 3rem; height: 3rem; font-size: var(--fs-small); position: relative; z-index: 1; }
.va-p:last-child .va-p__n { background: var(--accent); color: var(--ink); }
.va-p__t { grid-column: 2; margin-top: 0.55rem; font-size: var(--fs-h3); }
.va-p__d { grid-column: 2; margin-top: var(--s-1); font-size: var(--fs-body); max-width: 60ch; }
@media (max-width: 1100px) { .va-tec { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 920px) { .va-bs { grid-template-columns: 1fr 1fr; } .va-b, .va-b:nth-child(4), .va-b:nth-child(5) { grid-column: auto; } }
@media (max-width: 640px) { .va-tec, .va-bs { grid-template-columns: 1fr; } .va-p { column-gap: var(--s-3); } .va-flow__sep { display: none; } .va-flow { gap: var(--s-1); } }
.cta__s { margin-top: var(--s-2); font-size: var(--fs-lead); font-weight: var(--fw-med); color: var(--accent); }
@media (max-width: 760px) { .cl-vs { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Footer: ragione sociale e presentazione della newsletter
   La riga della divisione sta fra la descrizione e il modulo; sopra al campo
   email c'è scritto a cosa ci si iscrive, altrimenti resta un campo muto.
   -------------------------------------------------------------------------- */
.footer__div {
  margin-top: var(--s-3);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--on-dark-md);
}
.footer__div .link-u { color: var(--on-dark-hi); }
.footer__div .link-u:hover { color: var(--accent); }

.footer__nl-t {
  margin-top: var(--s-4);
  font-weight: var(--fw-med);
  color: var(--paper);
}
.footer__nl-d {
  margin-top: 0.35rem;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--on-dark-md);
  max-width: 42ch;
}
.footer__nl { margin-top: var(--s-3); }

/* --------------------------------------------------------------------------
   Percorso (breadcrumb) dentro l'hero
   Sta appoggiato sopra al titolo, non staccato in cima alla pagina: si legge
   come l'intestazione del titolo stesso. L'ultima voce, che è la pagina
   corrente, prende il verde.
   -------------------------------------------------------------------------- */
.hero__body .crumbs {
  padding-top: 0;
  margin-bottom: var(--s-2);
}
.hero__body .crumbs > span:last-child { color: var(--accent); }



/* Sottotitolo allineato a sinistra, sullo stesso asse del titolo dell'hero. */
.manifesto--left { text-align: left; }
.manifesto--left .lead { margin-inline: 0; max-width: 68ch; }

/* Il titolo dell'hero è rientrato del padding del riquadro con la foto:
   il sottotitolo prende lo stesso rientro, così partono dallo stesso asse. */
.manifesto--left { padding-inline-start: clamp(1.75rem, 4.5vw, 3.5rem); }

/* --------------------------------------------------------------------------
   Mappa della sede — riquadro di Google Maps
   Il fallback sotto resta visibile se il riquadro non puo' caricarsi
   (per esempio nell'anteprima dell'artefatto, che blocca i domini esterni).
   -------------------------------------------------------------------------- */
.mappa {
  position: relative;
  margin-top: var(--s-4);
  aspect-ratio: 16 / 10;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper-2);
  display: grid; place-items: center;
}
.mappa__fb {
  font-size: var(--fs-small); font-weight: var(--fw-med);
  color: var(--muted); text-align: center; padding: 0 1.5rem;
}
.mappa__fb:hover { color: var(--ink); }
.mappa__f { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* immagini incorporate, una sola volta ciascuna */
.img-01{background-image:url(/assets/img/img-01.jpg)}
.img-02{background-image:url(/assets/img/img-02.jpg)}
.img-03{background-image:url(/assets/img/img-03.jpg)}
.img-04{background-image:url(/assets/img/img-04.jpg)}
.img-05{background-image:url(/assets/img/img-05.jpg)}
.img-06{background-image:url(/assets/img/img-06.jpg)}
.img-07{background-image:url(/assets/img/img-07.jpg)}
.img-08{background-image:url(/assets/img/img-08.jpg)}
.img-09{background-image:url(/assets/img/img-09.jpg)}
.img-10{background-image:url(/assets/img/img-10.jpg)}

.img-12{background-image:url(/assets/img/img-12.jpg)}

.img-14{background-image:url(/assets/img/img-14.jpg)}

.img-16{background-image:url(/assets/img/img-16.jpg)}
.img-17{background-image:url(/assets/img/img-17.jpg)}
.img-18{background-image:url(/assets/img/img-18.jpg)}
.img-19{background-image:url(/assets/img/img-19.jpg)}
.img-20{background-image:url(/assets/img/img-20.png)}
.img-21{background-image:url(/assets/img/img-21.png)}
.img-22{background-image:url(/assets/img/img-22.png)}
.img-23{background-image:url(/assets/img/img-23.png)}
.img-24{background-image:url(/assets/img/img-24.png)}
.img-25{background-image:url(/assets/img/img-25.png)}
.img-26{background-image:url(/assets/img/img-26.png)}
.img-27{background-image:url(/assets/img/img-27.png)}
.img-28{background-image:url(/assets/img/img-28.png)}
.img-29{background-image:url(/assets/img/img-29.png)}
.img-30{background-image:url(/assets/img/img-30.png)}
.img-31{background-image:url(/assets/img/img-31.png)}
.img-32{background-image:url(/assets/img/img-32.png)}
.img-33{background-image:url(/assets/img/img-33.png)}
.img-34{background-image:url(/assets/img/img-34.png)}
.img-35{background-image:url(/assets/img/img-35.png)}
.img-36{background-image:url(/assets/img/img-36.png)}
.img-37{background-image:url(/assets/img/img-37.png)}
.img-38{background-image:url(/assets/img/img-38.png)}
.img-39{background-image:url(/assets/img/img-39.png)}
.img-40{background-image:url(/assets/img/img-40.png)}
.img-41{background-image:url(/assets/img/img-41.png)}
.img-42{background-image:url(/assets/img/periactive-poster.jpg);background-position:40% center}
.img-43{background-image:url(/assets/img/img-43.jpg)}
.img-44{background-image:url(/assets/img/img-44.jpg)}
.img-45{background-image:url(/assets/img/img-45.jpg)}
.img-46{background-image:url(/assets/img/img-46.jpg)}
.img-47{background-image:url(/assets/img/img-47.jpg)}
.img-48{background-image:url(/assets/img/img-48.jpg)}
.img-49, .img-50{background-image:url(/assets/img/progetti/comune-magnago.jpg)}

.img-51 { background-image: url(/assets/img/hero-come.jpg); background-position: 60% 40%; }
.img-52 { background-image: url(/assets/img/soluzioni/ledwall.jpg); background-position: 45% 40%; }
.img-53 { background-image: url(/assets/img/soluzioni/videowall.jpg); background-position: 55% 45%; }

/* ===================================================================== SISTEMA
   Allineamento dei componenti ai livelli della scala. Ultimo blocco del CSS:
   vince sulle regole locali. Nessun valore nuovo: solo token. */

/* Hero title: uguale in tutte le pagine (hero con immagine e hero dei case study) */
.hero__h1, .cs-hero__h1, .cs-hero__h1.pr-h1 {
  font-size: var(--fs-hero); font-weight: var(--fw-reg);
  line-height: var(--lh-tight); letter-spacing: var(--ls-display);
}
/* H1 di pagina senza hero (Contatti, Privacy, Cookie) */
h1.h-two { font-size: var(--fs-h1); font-weight: var(--fw-reg); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
/* sottotitolo dell'hero = lead */
.hero__sub, .cs-hero__sub { font-size: var(--fs-lead); font-weight: var(--fw-light); line-height: var(--lh-ui); }

/* H2: un solo stile di titolo di sezione */
h2.h-two, .h-two:not(h1):not(h3), .cs-h, .cs-split__txt .cs-h, .vt-val__h {
  font-size: var(--fs-h2); font-weight: var(--fw-light);
  line-height: var(--lh-snug); letter-spacing: var(--ls-display);
}
.cs-h b, h2.h-two b { font-weight: var(--fw-bold); }

/* H3: titolo di blocco */
h3.h-two, .as-h3, .cl-m__h, .case__t, .config__q, .avp-prj__t, .esplora__t, .va-p__t,
.avc__t, .cs-brief__t, h3.avp-n__t {
  font-size: var(--fs-h3); font-weight: var(--fw-med);
  line-height: var(--lh-snug); letter-spacing: var(--ls-tight);
}
/* H4: titolo di card */
.solution__t, .project__t, .va-t__n, .cs-tec__t, .cs-res__t, .tsp-modi__t, .pr-plus dt {
  font-size: var(--fs-h4); font-weight: var(--fw-med); line-height: var(--lh-snug); letter-spacing: 0;
}
/* descrizione di card */
.solution__d, .project__d, .cs-tec__d, .cs-res__d, .avp-prj__d, .avp-n__d, .comp__d, .va-t__d, .tsp-modi__d, .pr-plus dd {
  font-size: var(--fs-small); line-height: var(--lh-ui);
}

/* Frasi in evidenza: due soli livelli */
.avp-live__t, .avp-stmt__t { font-size: var(--fs-h1); font-weight: var(--fw-light); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
.pr-net__q, .ca-hub__t, .cl-vs__t, .mg-stat, .pr-motto, .avp-chiusa, .mg-nota {
  font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: var(--ls-tight);
}
.pr-net__q, .ca-hub__t, .mg-stat, .pr-motto, .mg-nota { font-weight: var(--fw-light); }

/* Testo */
.lead { font-size: var(--fs-lead); font-weight: var(--fw-light); line-height: var(--lh-ui); }
.body-text, .cs-t { font-size: var(--fs-body); font-weight: var(--fw-light); line-height: var(--lh-body); }

/* Etichette. Etichetta di sezione: una sola (anche nei case study, dove resta il numero sopra) */
.slabel, .cs-l { font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: 0.01em; text-transform: uppercase; line-height: var(--lh-snug); }
.cs-n { font-size: var(--fs-micro); font-weight: var(--fw-med); letter-spacing: var(--ls-caps); color: var(--color-accent); }
/* etichette maiuscole piccole (occhielli, sovratitoli, settore dell'hero) */
.eyebrow, .cs-hero__sett, .ac-an, .ac-var__h, .ac-pre, .vt-story__in, .flusso__hint, .esplora__sol-t, .av-l__t, .legal__idx-t, .deck__hint {
  font-size: var(--fs-micro); font-weight: var(--fw-med); letter-spacing: var(--ls-caps); text-transform: uppercase;
}
.tag { font-size: var(--fs-tag); font-weight: var(--fw-med); letter-spacing: var(--ls-wide); }
.crumbs { font-size: var(--fs-micro); }

/* Sezioni: stessa distanza verticale ovunque */
.cs-split__txt { padding-top: var(--section-y); padding-bottom: var(--section-y); }

/* Card: le card di contenuto (titolo + testo) usano --r-lg; --r-md resta a opzioni, tasti e riquadri icona */
.avp-n { border-radius: var(--r-lg); }

/* Immagini: al vivo = squadrate; contenute nella griglia = --r-lg */
.cs-gal__i, .cs-fig .cs-ph, .cs-behind__media .cs-ph, .cs-cant__media .cs-ph { border-radius: var(--r-lg); overflow: hidden; }

/* ===================================================================== GRIGLIA
   Griglia editoriale unica: 12 colonne dentro il container .wrap (max 1440px,
   margini laterali --gutter). Le griglie a colonne uguali (2, 3, 4, 6) usano lo
   stesso --col-gap e cadono quindi esattamente sulle linee delle 12 colonne.
   Linee di riferimento ricorrenti:
     colonna 1  → bordo sinistro di titoli, testi, card
     colonna 3  → inizio del contenuto nei case study (etichetta su 2 colonne)
     colonna 7  → inizio della seconda metà: testi di destra, card di destra, media
   Sotto i 920px tutto torna a una colonna (regole già presenti). */
:root {
  --cols: 12;
  --col-gap: clamp(1rem, 2vw, 2rem);      /* gutter tra colonne e tra card */
  --row-gap: var(--s-5);                  /* distanza tra righe di card */
  /* ritmo interno delle sezioni */
  --gap-label: var(--s-4);                /* etichetta → titolo */
  --gap-title: var(--s-3);                /* titolo → lead/testo */
  --gap-block: var(--s-6);                /* titolo/testo → blocco successivo (card, media) */
  --gap-group: var(--s-7);                /* gruppo → gruppo dentro la stessa sezione */
  /* misura del testo */
  --measure-title: 22ch;
  --measure-lead:  52ch;
  --measure-body:  64ch;
  --measure-card:  42ch;
}

/* griglie a colonne uguali: stesso gutter ovunque */
.grid { column-gap: var(--col-gap); row-gap: var(--row-gap); }
.grid.lw-g6 { column-gap: var(--col-gap); }
.cl-vs, .cs-tec__g, .as-dove, .va-tn { column-gap: var(--col-gap); }

/* misura del testo */
.lead { max-width: var(--measure-lead); }
.body-text, .cs-t { max-width: var(--measure-body); }
.solution__d, .project__d, .cs-tec__d, .cs-res__d, .avp-n__d, .comp__d, .va-t__d { max-width: var(--measure-card); }

/* ritmo: etichetta → titolo → testo */
.slabel { margin-bottom: var(--gap-label); }
.h-two + .lead, .h-two + .body-text, .cs-h + .cs-t { margin-top: var(--gap-title); }

@media (min-width: 921px) {
  /* due metà: la seconda parte sempre dalla colonna 7 */
  .split, .section__head:not(.section__head--single):not(.section__head--stack):not(.section__head--left) {
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap);
  }
  .split > :first-child, .section__head:not(.section__head--single):not(.section__head--stack):not(.section__head--left) > :first-child {
    grid-column: 1 / 7; padding-right: var(--col-gap);
  }
  .split > :nth-child(2), .section__head:not(.section__head--single):not(.section__head--stack):not(.section__head--left) > :nth-child(2) {
    grid-column: 7 / 13;
  }

  /* case study: etichetta su 2 colonne, contenuto dalla colonna 3 */
  .cs-brief, .cs-behind, .cs-res, .cs-cant, .cs-gal__head {
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap);
  }
  .cs-brief > :first-child, .cs-behind > :first-child, .cs-res > :first-child,
  .cs-cant > :first-child, .cs-gal__head > :first-child { grid-column: 1 / 3; }
  .cs-brief > :nth-child(2), .cs-behind > :nth-child(2), .cs-cant > :nth-child(2) { grid-column: 3 / 13; }
  .cs-brief__cols { column-gap: var(--col-gap); }
  .cs-brief__col + .cs-brief__col { padding-left: var(--col-gap); }
  .cs-res > :nth-child(2) { grid-column: 3 / 7; padding-right: var(--col-gap); }
  .cs-res > :nth-child(3) { grid-column: 7 / 13; }
  .cs-gal__head > :nth-child(2) { grid-column: 3 / 10; }
  .cs-gal__head > :nth-child(3) { grid-column: 10 / 13; justify-self: end; }
  .cs-behind__media, .cs-cant__media { grid-column: 3 / 13; }
  .cs-behind .cs-h, .cs-cant .cs-h { max-width: var(--measure-title); }

  /* case study, «La soluzione»: testo colonne 1–5, card dalla colonna 7 */
  .cs-sol { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .cs-sol > :first-child { grid-column: 1 / 6; }
  .cs-sol > :nth-child(2) { grid-column: 7 / 13; }
}

/* ------------------------------------------------ Come lavoriamo: «Cosa ci distingue»
   Composizione sulla griglia: titolo (colonne 1–6) → due card di pari misura
   (1–6 | 7–12) → due testi che ripartono dagli stessi bordi → tre media (1–3 | 4–6 | 7–12).
   Il filetto verde a destra cade sul bordo della card sopra; il testo rientra quanto il
   testo della card, così le due colonne hanno gli stessi allineamenti interni. */
.cl-vs { margin-top: var(--gap-block); gap: var(--col-gap); }
.cl-vs__c { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-5);
  min-height: clamp(200px, 17vw, 260px); }
.cl-vs__l { margin-bottom: 0; font-size: var(--fs-micro); }
.cl-vs__t { max-width: 22ch; }
.cl-dc { margin-top: var(--gap-group); align-items: start; }
.cl-dc .body-text:first-child { font-size: var(--fs-lead); line-height: var(--lh-ui); color: var(--ink); max-width: var(--measure-lead); }
.cl-dc .body-text + .body-text { margin-top: var(--s-3); }
.cl-fm { border-left: 2px solid var(--accent); padding-left: var(--card-pad); padding-block: 0.2em; }
.cl-fm .lead { max-width: 36ch; }
.cl-media { margin-top: var(--gap-group); }
@media (min-width: 921px) {
  .cl-vs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section .wrap > .h-two + .cl-vs { margin-top: var(--gap-block); }
  .cl-media { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .cl-media > :nth-child(1) { grid-column: 1 / 4; }
  .cl-media > :nth-child(2) { grid-column: 4 / 7; }
  .cl-media > :nth-child(3) { grid-column: 7 / 13; }
}
@media (max-width: 920px) {
  .cl-vs__c { min-height: 0; }
  .cl-dc { row-gap: var(--s-5); }
  .cl-fm { padding-left: var(--s-3); }
}

/* ------------------------------------------------ Composizione: niente centrature di comodo
   Blocchi di testo allineati a sinistra sulla colonna 1; lo spazio negativo resta a destra. */
.manifesto { text-align: left; }
.manifesto .lead { margin-inline: 0; max-width: 46ch; }
.manifesto .lead br { display: none; }   /* gli a capo servivano alla versione centrata */
.cta__in { text-align: left; }
.cta__in .h-two, .cta__in--wide .h-two { margin-inline: 0; max-width: 20ch; }
.cta__d, .cta__in--wide .cta__d { margin: var(--gap-title) 0 0; max-width: var(--measure-lead); }
.cta__a { justify-content: flex-start; margin-top: var(--s-5); }
.cta::before { left: 78%; }
/* banda CTA: titolo sulle colonne 1–6, testo e pulsanti dalla colonna 7 */
@media (min-width: 921px) {
  .cta__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
  .cta__in > * { grid-column: 7 / 13; }
  .cta__in > .h-two { grid-column: 1 / 7; grid-row: 1 / span 4; padding-right: var(--col-gap); }
  .cta__in > .cta__d { margin-top: 0; padding-top: 0.45em; }   /* allineamento ottico con la prima riga del titolo */
  .cta__in > .cta__a { margin-top: var(--s-4); }
  .cta__in > .cta__m, .cta__in > .cta__s { margin-top: var(--s-3); }
}
.section--brands .h-two { text-align: left; margin-bottom: var(--gap-block); }
.cl-gruppo .slabel, .va-centro .slabel { justify-content: flex-start; }
.cl-gruppo .slabel::after, .va-centro .slabel::after { display: block; }
.cl-gruppo__row { justify-content: flex-start; }

/* (5/10) Solo telefono (≤760px)
   1. Menu hamburger: «Prenota un sopralluogo» torna il pulsante standard del sito
      (larghezza del contenuto, padding e corpo del .btn, testo e freccia su una riga);
      prima ereditava padding, corpo, bordo inferiore e display:block dei link del menu.
   2. Come lavoriamo, «Il gruppo Lizard»: loghi in colonna allineati a sinistra. */
@media (max-width: 760px) {
  .mobile-menu a.btn {
    display: inline-flex; width: auto; white-space: nowrap;
    padding: 0.85em 1.6em; border: 1px solid transparent;
    font-size: var(--fs-small); font-weight: var(--fw-med);
  }
  .cl-gruppo__row { align-items: flex-start; }
}
.va-centro .h-two { text-align: left; }
.va-centro .va-ps { margin-inline: 0; }
/* griglie di card: 4 elementi in una griglia da 3 → una riga da 4 (niente card orfana) */
@media (min-width: 1101px) {
  .grid--3:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ------------------------------------------------ FAQ e percorsi: titolo a sinistra, contenuto dalla colonna 7
   (prima: colonna stretta centrata a 900px, fuori dal container) */
@media (min-width: 921px) {
  .va-centro > .wrap {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start;
  }
  .va-centro > .wrap > .slabel { grid-column: 1 / 7; grid-row: 1; padding-right: var(--col-gap); }
  .va-centro > .wrap > .h-two { grid-column: 1 / 6; grid-row: 2; margin-bottom: 0 !important; }
  .va-centro > .wrap > .va-ps { grid-column: 7 / 13; grid-row: 1 / span 3; margin-top: 0; }
}
.va-centro .va-ps { max-width: none; }
/* passo aperto del metodo: su fondo scuro il riquadro scuro non si vede, resta solo il rientro → niente rientro */
.section--dark .step.is-open { padding-inline: 0; background: transparent; }
/* ===================================================================== SETTORI 28/9
   Pagine settore (Nautica, Sanità, Impianti sportivi, Spazi espositivi,
   Università e ricerca, Hospitality): blocchi comuni con prefisso st-.
   Stessi token e stessa griglia del resto del sito. */
.st-hero__lead { margin-top: var(--s-3); color: var(--on-dark-hi); max-width: 52ch; }
.st-hero__lead--2 { margin-top: var(--s-2); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--on-dark-md); max-width: 60ch; }
.st-gap { margin-top: var(--gap-title); }
.st-gap-s { margin-top: var(--s-3); }
.st-head { margin-bottom: var(--gap-block); }
.st-head .h-two { max-width: var(--measure-title); }
.st-txt { max-width: var(--measure-body); }
.st-h3 { font-size: var(--fs-h3); font-weight: var(--fw-light); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); max-width: 28ch; }
.st-h3 b { font-weight: var(--fw-bold); }
.st-h3 .lo { color: var(--muted-50); }
.st-nota { color: var(--muted); font-size: var(--fs-small); }



.st-cols { list-style: none; margin: var(--gap-block) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--row-gap); }
.section__head + .st-cols, .st-head + .st-cols { margin-top: 0; }
.st-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-col { border-top: 1px solid var(--line-strong); padding-top: var(--s-3); }
.st-col__n { display: block; font-size: var(--fs-micro); font-weight: var(--fw-med); color: var(--muted); font-variant-numeric: tabular-nums; }
.st-col__t { margin: var(--s-2) 0 var(--s-1); font-size: var(--fs-lead); font-weight: var(--fw-light); line-height: var(--lh-snug); text-transform: uppercase; letter-spacing: 0.02em; }
.st-col__d { color: var(--ink-70); font-size: var(--fs-small); line-height: var(--lh-body); max-width: var(--measure-card); }
.section--dark .st-col { border-color: var(--line-invert); }
.section--dark .st-col__n { color: var(--on-dark-lo); }
.section--dark .st-col__d { color: var(--on-dark-md); }



.st-scs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); margin-top: var(--gap-block); }
.st-head + .st-scs { margin-top: 0; }
.st-scs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-scs--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.st-sc { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--card-pad-sm); background: var(--white); }
.st-sc__t { font-size: var(--fs-h4); font-weight: var(--fw-med); text-transform: uppercase; letter-spacing: var(--ls-wide); line-height: var(--lh-snug); }
.st-sc__d { margin-top: var(--s-2); color: var(--ink-70); font-size: var(--fs-small); line-height: var(--lh-body); max-width: var(--measure-card); }
.section--dark .st-sc { background: rgba(247, 247, 245, 0.04); border-color: var(--line-invert); }
.section--dark .st-sc__t { color: var(--paper); }
.section--dark .st-sc__d { color: var(--on-dark-md); }
/* Nautica: ospiti e staff come nel Figma, senza riquadro */
.nt-duo .st-sc { border: 0; background: none; padding: 0; border-top: 1px solid var(--line-strong); border-radius: 0; padding-top: var(--s-3); }
.nt-duo .st-sc__t { font-size: var(--fs-h3); font-weight: var(--fw-bold); letter-spacing: 0; }
.nt-duo .st-sc__d { font-size: var(--fs-body); }



/* Nautica: foto dal Figma */
.nt-foto { border-radius: var(--r-lg); overflow: hidden; background: var(--paper-2); aspect-ratio: 3 / 2; }
.nt-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nt-bordo .lead { max-width: 30ch; }

.flusso__campi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-3); }
.flusso__campo { margin-top: var(--s-1); }
.flusso__campo textarea { width: 100%; }
.flusso__priv { display: none; }
.flusso__form .flusso__azioni { margin-top: var(--s-1); }
.flusso__obbl, .flusso__proto { font-size: var(--fs-micro); color: var(--muted); }
.flusso__proto { margin-top: var(--s-4); max-width: 52ch; }
.flusso__ok { margin: 0 0 var(--s-3); }

@media (max-width: 920px) {
  .st-cols, .st-cols--3, .st-scs, .st-scs--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .st-cols, .st-cols--3, .st-scs, .st-scs--2, .st-scs--4 { grid-template-columns: 1fr; }
  .flusso__campi { grid-template-columns: 1fr; }
}

/* ===== Verde fluo solo su fondo scuro (28 settembre) =====
   Regola: su fondo chiaro niente #00FF9C (testi, segni, linee, icone, pulsanti).
   L'accento è contestuale: su chiaro diventa ink, i contenitori scuri lo
   riportano al verde del brand (--brand-green). --on-accent è il colore del
   testo sopra un pieno di accento. */
html:root {
  --brand-green: #00FF9C;
  --color-accent: var(--color-ink); --accent: var(--color-ink); --accent-mid: var(--color-ink); --accent-ink: var(--color-ink);
  --on-accent: var(--color-background);
  --acc-hover-bg: var(--color-ink-2); --acc-hover-c: var(--color-background);
}
.header, .nav, .footer, .mobile-menu, .hero, .section--dark, .cta, .cs-hero, .cs-dark, .sector, .deck__dots,
.avc__c, .avp-n--hub, .avp-live__badge, .hy-dist__ic, .ca-con, .ca-hub__core, .pr-net, .as-card,
.cl-vs__c--noi, .pick.is-on, .step.is-open, .lw-vs__o, .va-p__n, .nt-dark {
  --color-accent: var(--brand-green); --accent: var(--brand-green); --accent-mid: var(--brand-green); --accent-ink: var(--brand-green);
  --on-accent: var(--color-ink);
  --acc-hover-bg: var(--color-ink); --acc-hover-c: var(--brand-green);
}
.va-p:last-child .va-p__n { --accent: var(--color-ink); --on-accent: var(--color-background); }
::selection { color: var(--on-accent); }
.btn--accent { color: var(--on-accent); }
.btn--accent:hover, .btn--accent:focus, .btn--accent:active { background: var(--acc-hover-bg); color: var(--acc-hover-c); }
.btn--dark:hover { color: var(--on-accent); }
.more:hover .more__c, .avp-prj:hover .more__c, .section--dark .cbtn:hover, .form-ok__t,
.hy-dist__n:hover .hy-dist__ic, .ca-key.is-on, .va-flow__s:last-child, .va-p:last-child .va-p__n { color: var(--on-accent); }
.st-cfg__panel { --color-accent: var(--brand-green); --accent: var(--brand-green); --accent-mid: var(--brand-green); --accent-ink: var(--brand-green); --on-accent: var(--color-ink); --acc-hover-bg: var(--color-ink); --acc-hover-c: var(--brand-green); --btn-edge: var(--line-invert); }
/* schede chiare dentro sezioni scure: di nuovo contesto chiaro */
.config { --color-accent: var(--color-ink); --accent: var(--color-ink); --accent-mid: var(--color-ink); --accent-ink: var(--color-ink); --on-accent: var(--color-background); --acc-hover-bg: var(--color-ink-2); --acc-hover-c: var(--color-background); }

/* fine settori 28/9 */
/* ===================================================================== HERO HOME 29/9
   Hero a scorrimento della home: la stanza spenta si accende e le tecnologie
   compaiono una alla volta (punto > linea > etichetta). Tutto con prefisso hx-,
   niente regole globali: le sezioni successive non cambiano. Lo scroll guida
   la sequenza tramite --hx-p (0..1), calcolato in JS. */
.hx { --hx-top: 96px; --hx-gap: clamp(0.75rem, 2vw, 1.5rem); --hx-fx: 0.5; padding-bottom: 0; }
.hx__track { position: relative; height: calc(100svh + 140vh); }
.hx__stage { position: sticky; top: calc(var(--hx-top) + var(--hx-gap)); height: calc(100svh - var(--hx-top) - 2 * var(--hx-gap)); display: flex; align-items: center; }
.hx__stage > .wrap { width: 100%; }
.hx__card {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-lg); background: var(--color-ink-3);
  width: min(100%, calc((100svh - var(--hx-top) - 2 * var(--hx-gap)) * 1.7768));
  aspect-ratio: 1672 / 941; margin-inline: auto;
}
.hx__scene { position: absolute; top: 50%; left: 50%; height: 100%; aspect-ratio: 1672 / 941; transform: translate(calc(var(--hx-fx) * -100%), -50%); }
.hx__img { position: absolute; inset: 0; background-size: 100% 100%; background-repeat: no-repeat; }
.hx__spento, .hx__schermo { background-image: var(--hx-spento); }
.hx__acceso { background-image: var(--hx-acceso); opacity: 0; will-change: opacity; }
/* il videowall resta spento finché la stanza non è accesa */
.hx__schermo { clip-path: polygon(65.6% 25.1%, 87.8% 14.7%, 87.8% 51.4%, 65.6% 49.9%); will-change: opacity; }
/* velo che tiene leggibili le etichette in alto e in basso, solo quando compaiono */
.hx__scrim { position: absolute; inset: 0; opacity: 0; background: linear-gradient(180deg, rgba(21, 23, 21, 0.62) 0%, rgba(21, 23, 21, 0) 26%, rgba(21, 23, 21, 0) 72%, rgba(21, 23, 21, 0.62) 100%); }
/* lettura del titolo: scuro a sinistra, come negli altri hero */
.hx__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, rgba(21, 23, 21, 0.86) 0%, rgba(21, 23, 21, 0.6) 26%, rgba(21, 23, 21, 0.14) 52%, rgba(21, 23, 21, 0) 70%); }

/* annotazioni */
.hx__set { position: absolute; inset: 0; pointer-events: none; }
.hx__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hx__line { fill: none; stroke: var(--accent); stroke-width: 1.3; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0.9; }
.hx__dot { fill: var(--accent); opacity: 0; }
.hx__ring { fill: none; stroke: var(--accent); stroke-width: 1.2; opacity: 0; }
.hx__lab {
  position: absolute; white-space: nowrap; opacity: 0;
  font-size: var(--fs-tag); font-weight: var(--fw-med); letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--white); line-height: 1; text-shadow: 0 1px 10px rgba(21, 23, 21, 0.85);
}
.hx__lab--l { transform: translate(10px, -50%); }
.hx__lab--r { transform: translate(calc(-100% - 10px), -50%); }
.hx__set--m { display: none; }

/* testo */
.hx__body { position: absolute; left: 0; bottom: 0; z-index: 2; padding: clamp(1.5rem, 4.5vw, 3.5rem); max-width: 46rem; }
.hx__eyebrow { font-size: var(--fs-micro); font-weight: var(--fw-med); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--on-dark-hi); margin-bottom: var(--s-3); }
.hx__h1 { font-size: min(var(--fs-hero), 5.2vw); font-weight: var(--fw-reg); line-height: var(--lh-tight); letter-spacing: var(--ls-display); text-transform: uppercase; color: var(--white); }
.hx__h1 .acc { color: var(--accent); }
.hx__lead { margin-top: var(--s-3); font-size: var(--fs-lead); font-weight: var(--fw-light); line-height: var(--lh-ui); color: var(--on-dark-hi); max-width: 34ch; }
.hx__actions { margin-top: var(--s-4); display: flex; }

/* mobile e schermi verticali: stessa sequenza, inquadratura sul videowall, le stesse 6 tecnologie (2/10) */
@media (max-width: 720px), (max-aspect-ratio: 4/5) {
  .hx { --hx-top: 72px; --hx-fx: 0.66; }
  .hx__track { height: calc(100svh + 110vh); }
  .hx__card { width: 100%; height: calc(100svh - var(--hx-top) - 2 * var(--hx-gap)); aspect-ratio: auto; }
  .hx__set--d { display: none; }
  .hx__set--m { display: block; }
  .hx__h1 { font-size: min(var(--fs-hero), 7.2vw); }
  .hx__body { max-width: none; }
  /* la foto occupa la parte alta della scheda, il testo sta sotto */
  .hx__scene { top: 0; height: 62%; transform: translateX(calc(var(--hx-fx) * -100%)); }
  .hx__shade { background: linear-gradient(180deg, rgba(21, 23, 21, 0) 36%, rgba(21, 23, 21, 0.85) 58%, var(--color-ink-3) 64%); }
}

/* niente animazione: la stanza è accesa e le tecnologie sono già indicate */
@media (prefers-reduced-motion: reduce) {
  .hx__track { height: auto; }
  .hx__stage { position: relative; top: 0; }
  .hx__acceso, .hx__scrim, .hx__dot, .hx__ring, .hx__lab { opacity: 1; }
  .hx__schermo { opacity: 0; }
  .hx__line { stroke-dashoffset: 0; }
}
/* fine hero home 29/9 */

/* ===================================================================== COMPONENTI CONDIVISI 30/9
   Revisione di sistema: nessun nuovo stile, solo regole di componente sui token esistenti.
   Sostituisce le correzioni puntuali del 28/9 (niente più padding «di comodo» o :has() per
   singole sezioni). Ordine: ritmo → testate → split → FAQ → hero → CTA → card → varianti di pagina.

   Ritmo interno (uguale in tutto il sito)
     etichetta → titolo          --gap-label   32
     titolo → lead/testo         --gap-title   24
     lead → testo                --s-3         24
     testo → testo               --s-2         16
     testo/elenco → frase finale --s-4         32
     testata → contenuto         --gap-block   48 (mobile) → 64 (desktop)
     contenuto → azioni          --gap-actions 48
     gruppo → gruppo             --gap-group   96 */
:root {
  --gap-block: clamp(var(--s-5), calc(2rem + 3vw), var(--s-6));
  --gap-actions: var(--s-5);
  --label-block: calc(var(--fs-label) * var(--lh-snug) + var(--gap-label));   /* altezza etichetta + distanza dal titolo */
  --cs-label-block: 3.2rem;                                                      /* numero + etichetta dei case study */
  --sticky-top: 130px;
}

/* ------------------------------------------------ 0. Header condiviso
   Sotto i 1160px le 6 voci + il pulsante non stanno su una riga (andavano a capo):
   si passa al menu compatto, identico a quello mobile. */
.nav a, .nav button, .header__inner > .btn { white-space: nowrap; }
@media (max-width: 1160px) {
  .nav, .header__inner > .btn { display: none; }
  .burger { display: block; }
}

/* ------------------------------------------------ 1. Flusso del testo */
:is(.h-two, .hero__h1, .cs-h) + :is(.lead, .body-text, .cs-t) { margin-top: var(--gap-title); }
.lead + :is(.body-text, .cs-t) { margin-top: var(--s-3); }
.lead + .lead { margin-top: var(--s-2); }
:is(.body-text, .cs-t) + :is(.body-text, .cs-t) { margin-top: var(--s-2); }
:is(.body-text, .pains, .av-l) + .lead { margin-top: var(--s-4); }
.pains + .body-text { margin-top: var(--s-3); }
.h-two--block { margin-bottom: var(--gap-block); }

/* ------------------------------------------------ 2. Testata di sezione → contenuto
   .section__head (settori, home) e .avc__head (soluzioni) sono lo stesso componente:
   stessa distanza dal contenuto, stessa divisione 1–6 | 7–12. A destra un testo parte
   dall'altezza del titolo; i pulsanti restano allineati in basso. */
.section__head, .avc__head, .st-head, .ca-hub__h, .va-bs-h { margin-bottom: var(--gap-block); }
.va-bs-h + .cl-m { padding-top: 0; }
/* (1/10) righe numerate a due colonne (I vantaggi, Come lavoriamo): il blocco
   numero + titolo e la descrizione si centrano l'uno sull'altra. Prima la
   descrizione partiva all'altezza del numero e il titolo sembrava scendere. */
@media (min-width: 921px) { .split.cl-m { align-items: center; } }
/* su telefono titolo e descrizione restano un blocco unico: 24px, non lo stacco fra sezioni */
@media (max-width: 920px) { .split.cl-m { row-gap: var(--gap-title, 24px); } }
@media (min-width: 921px) {
  .avc__head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .avc__head > :first-child { grid-column: 1 / 7; padding-right: var(--col-gap); }
  .avc__head > :nth-child(2) { grid-column: 7 / 13; }
  :is(.section__head, .avc__head) > :nth-child(2):not(.head-actions) { align-self: start; }
  /* (1/10) con un testo a destra anche il titolo parte dall'alto: prima il titolo
     restava ancorato al fondo (align-items: end, pensato per i pulsanti) e, se il
     testo era piu' alto, scendeva sotto l'inizio del paragrafo. */
  :is(.section__head, .avc__head):has(> :nth-child(2):not(.head-actions)) > :first-child { align-self: start; }
}

/* ------------------------------------------------ 3. Sezioni a due colonne
   (revisione 1/10 dopo l'audit visivo di tutte le sezioni a due colonne)

   Allineamento ottico. I titoli (44px, interlinea 1.22) hanno sopra le maiuscole
   circa 12px di spazio interno; un paragrafo da 16-22px ne ha 6-9, un elenco con
   filetto o una foto 0. Allineando i box, il contenuto di destra sembra sempre
   "più alto" del titolo. La regola quindi allinea alla riga delle maiuscole del
   titolo il primo segno visibile della colonna di destra: la prima riga di testo
   (sua altezza delle maiuscole) oppure il filetto, la card o l'immagine.
   Lexend: ascendente 1.0em, discendente 0.25em, maiuscole 0.70em, quindi la
   maiuscola parte a ((interlinea − 1.25) / 2 + 0.30) em dal bordo della riga. */
:root {
  --cap-h2:   calc(var(--fs-h2) * 0.285);     /* .h-two, interlinea 1.22 */
  --cap-h1:   calc(var(--fs-h1) * 0.225);     /* .cs-h dei case study, interlinea 1.1 */
  --cap-lead: calc(var(--fs-lead) * 0.40);    /* .lead, interlinea 1.45 */
  --cap-body: calc(var(--fs-body) * 0.475);   /* .body-text, interlinea 1.6 */
}

/* Pattern A — colonne con etichetta (.split--rows).
   Due righe condivise: [etichette] [titolo | contenuto]. Le colonne sono subgrid,
   quindi se un'etichetta va a capo (921-1100px) la riga cresce per entrambe e il
   contenuto di destra continua a partire con il titolo. Una colonna di destra
   senza etichetta parte direttamente dalla seconda riga. */
@media (min-width: 921px) {
  .split--rows { grid-template-rows: auto auto; row-gap: 0; }
  .split--rows > * { display: grid; grid-row: 1 / span 2; grid-template-rows: subgrid; align-content: start; min-width: 0; }
  .split--rows > * > .split__body { grid-row: 2; min-width: 0; }
  .split--rows > * > :is(.slabel, .av-l__t, .cs-lab) { grid-row: 1; align-self: start; }
  .split--rows.split--offset > :nth-child(2), .split--rows.cs-sol > :nth-child(2) { padding-top: 0; }
  /* etichetta secondaria a destra («Valutiamo»): sulla riga dell'etichetta di sinistra */
  .split--rows > * > .av-l__t:first-child {
    display: flex; align-items: center;
    min-height: calc(var(--fs-label) * var(--lh-snug));
    margin-bottom: var(--gap-label);
  }
  .split--rows > * > .split__body > :first-child { margin-top: 0; }
  /* allineamento ottico della colonna di destra sul titolo di sinistra */
  .split--rows { --cap-t: var(--cap-h2); }
  .split--rows.cs-sol { --cap-t: var(--cap-h1); }
  .split--rows > :nth-child(2) > .split__body { padding-top: calc(var(--cap-t) - var(--cap-s, 0px)); }
  .split--rows > :nth-child(2) > .split__body:has(> .lead:first-child) { --cap-s: var(--cap-lead); }
  .split--rows > :nth-child(2) > .split__body:has(> .body-text:first-child) { --cap-s: var(--cap-body); }
  /* case study: l'etichetta (numero + nome) sta nella prima riga, il titolo nella seconda */
  .split--rows.cs-sol > * > .cs-lab { margin-bottom: clamp(2rem, 4vw, 3rem); }
  .split--rows.cs-sol .split__body > .cs-h:first-child { margin-top: 0; }
  /* colonne con elemento fisso durante lo scorrimento: il corpo occupa tutta la riga */
  .split--rows.ca-prob > :nth-child(2) > .split__body { align-self: stretch; }

  /* (2/10) Soluzioni, prima sezione sotto l'hero (etichetta + titolo | elenco numerato con
     filetti): stessa griglia unica delle FAQ. L'elenco parte dalla prima riga e il filetto
     del primo punto cade alla quota del filetto dell'etichetta; il filetto dell'etichetta
     arriva al bordo della colonna 6, lasciando un solo gutter fino all'elenco. I numeri
     hanno larghezza fissa (cifre tabulari, 2ch): i titoli dei punti partono tutti dalla
     stessa x, invece di spostarsi con la larghezza di «01», «02», «04». */
  [data-sezione="soluzioni"] > .hero + .section .split--rows:has(> :nth-child(2) > .split__body > .pains:first-child) { --lab-mid: calc(var(--fs-label) * var(--lh-snug) / 2); grid-template-rows: auto 1fr; }
  [data-sezione="soluzioni"] > .hero + .section .split--rows:has(> :nth-child(2) > .split__body > .pains:first-child) > :first-child > .slabel { margin-right: calc(-1 * var(--col-gap)); }
  [data-sezione="soluzioni"] > .hero + .section .split--rows:has(> :nth-child(2) > .split__body > .pains:first-child) > :nth-child(2) > .split__body { grid-row: 1 / span 2; padding-top: calc(var(--lab-mid) - 0.5px); }
  [data-sezione="soluzioni"] > .hero + .section .split--rows:has(> :nth-child(2) > .split__body > .pains:first-child) .pains > .pain > .pain__m { min-width: 2ch; font-variant-numeric: tabular-nums; }
}

/* Pattern B — testata titolo | testo (.section__head, .avc__head, .split con il solo
   titolo a sinistra). Il testo di destra parte sulla riga delle maiuscole del titolo.
   Prima un paragrafo messo direttamente nella testata ereditava il margine
   «titolo → testo» (24px) pensato per l'impilamento verticale e scendeva. */
@media (min-width: 921px) {
  :is(.section__head, .avc__head) > :nth-child(2):not(.head-actions) { margin-top: 0; padding-top: calc(var(--cap-t, var(--cap-h2)) - var(--cap-s, 0px)); }
  :is(.section__head, .avc__head) > :is(.body-text):nth-child(2),
  :is(.section__head, .avc__head) > :nth-child(2):has(> .body-text:first-child) { --cap-s: var(--cap-body); }
  :is(.section__head, .avc__head) > .lead:nth-child(2),
  :is(.section__head, .avc__head) > :nth-child(2):has(> .lead:first-child) { --cap-s: var(--cap-lead); }
  :is(.section__head, .avc__head) > :nth-child(2):not(.head-actions) > :first-child { margin-top: 0; }
  /* titoli di sinistra fuori scala: la riga delle maiuscole cambia con il corpo */
  :is(.section__head, .avc__head, .split):has(> :first-child :is(.st-h3, .as-h3)),
  :is(.section__head, .avc__head, .split):has(> :is(.st-h3, .as-h3):first-child) { --cap-t: calc(var(--fs-h3) * 0.285); }
  :is(.section__head, .avc__head, .split):has(> :first-child h1.h-two),
  :is(.section__head, .avc__head, .split):has(> h1.h-two:first-child) { --cap-t: calc(var(--fs-h1) * 0.225); }
  /* .split con il titolo in testa alla colonna sinistra e l'etichetta sopra la sezione */
  :is(.split:not(.split--rows):has(> .h-two:first-child), .split:not(.split--rows):has(> :first-child > .h-two:first-child)) > :nth-child(2) { padding-top: calc(var(--cap-t, var(--cap-h2)) - var(--cap-s, 0px)); }
  :is(.split:not(.split--rows):has(> .h-two:first-child), .split:not(.split--rows):has(> :first-child > .h-two:first-child)) > :nth-child(2):has(> .body-text:first-child) { --cap-s: var(--cap-body); }
  :is(.split:not(.split--rows):has(> .h-two:first-child), .split:not(.split--rows):has(> :first-child > .h-two:first-child)) > :nth-child(2):has(> .lead:first-child) { --cap-s: var(--cap-lead); }
}

@media (max-width: 920px) {
  .split { row-gap: var(--gap-block); }
  .cs-sol { row-gap: var(--gap-block); }
}

/* ------------------------------------------------ 4. Domande frequenti (componente unico)
   Desktop: etichetta + titolo a sinistra (fissi durante lo scorrimento), domande dalla colonna 7,
   a partire dalla riga del titolo. Mobile: etichetta, titolo, domande. */
.faq-sec__head .h-two { max-width: var(--measure-title); }
.faq-sec > .faq { margin-top: 0; }
@media (min-width: 921px) {
  .faq-sec { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
  .faq-sec__head { grid-column: 1 / 7; padding-right: var(--col-gap); position: sticky; top: var(--sticky-top); }
  .faq-sec > .faq { grid-column: 7 / 13; }
  /* (1/10) Pattern C: le domande partono sulla riga del titolo, non a metà fra
     etichetta e titolo. Testata in subgrid: [etichetta] [titolo]; l'elenco sta
     nella seconda riga e il suo filetto superiore cade sulle maiuscole del titolo. */
  .faq-sec { grid-template-rows: auto auto; }
  .faq-sec__head { grid-row: 1 / span 2; display: grid; grid-template-rows: subgrid; align-content: start; }
  .faq-sec__head > .slabel { grid-row: 1; }
  .faq-sec__head > .h-two { grid-row: 2; }
  /* (2/10) Griglia unica: l'elenco parte dalla prima riga, come la colonna di sinistra, e il
     suo filetto superiore cade sulla stessa quota del filetto dell'etichetta (metà della riga
     dell'etichetta: --lab-mid). Il filetto dell'etichetta arriva al bordo della colonna 6
     (annulla il padding destro della testata), così fra le due linee resta esattamente un
     gutter (--col-gap), come fra le colonne. */
  /* riga 1 = etichetta, alta quanto l'etichetta; l'altezza dell'elenco, che occupa entrambe
     le righe, va tutta alla riga 2 (1fr) e non sposta il titolo */
  .faq-sec { --lab-mid: calc(var(--fs-label) * var(--lh-snug) / 2); grid-template-rows: auto 1fr; }
  .faq-sec__head > .slabel { align-self: start; margin-right: calc(-1 * var(--col-gap)); }
  .faq-sec__head > .h-two { align-self: start; }
  .faq-sec > .faq { grid-row: 1 / span 2; align-self: start; margin-top: calc(var(--lab-mid) - 0.5px); }
}
@media (max-width: 920px) {
  .faq-sec__head { margin-bottom: var(--gap-block); }
}
.faq__q { padding-block: var(--s-4); }
.faq__a-in { padding-bottom: var(--s-4); }
@media (max-width: 640px) {
  .faq__q { padding-block: var(--s-3); }
  .faq__a-in { padding-bottom: var(--s-3); }
}

/* ------------------------------------------------ 5. Hero standard
   Stessa struttura su tutte le pagine: percorso → occhiello → titolo → lead → pulsanti,
   stesse distanze, stessa velatura. .hero__media--short = hero delle pagine indice senza testo. */
.hero__body > .crumbs { padding-top: 0; margin-bottom: var(--s-2); }
.hero__body > .eyebrow { display: block; margin: 0 0 var(--s-2); }
.hero__body > .crumbs + .eyebrow { margin-top: var(--s-2); }
.hero__body .lead { color: var(--on-dark-hi); }
.hero__body .hero__actions { margin-top: var(--gap-actions); }
.hero__media--short { min-height: clamp(340px, 44vh, 520px); }
.cs-hero__img { filter: brightness(0.86); }

/* ------------------------------------------------ 6. CTA finale (uguale su tutte le pagine) */
@media (min-width: 921px) {
  .cta__in > .cta__s { margin-top: 0; }                                   /* sottotitolo all'altezza del titolo */
  .cta__in > .cta__s + .cta__d { padding-top: 0; margin-top: var(--s-2); }
}
@media (max-width: 920px) {
  .cta__in > .cta__s { margin-top: var(--gap-title); }
}

/* ------------------------------------------------ 7. Card
   Progetti: stessa immagine 16:10 e stesso ritmo immagine → (tag) → titolo → testo, sia nella
   griglia compatta (.project) sia nella versione grande delle soluzioni (.avp-prj). */
.project__media, .avp-prj__m { aspect-ratio: 16 / 10; }
.project__media > .ph { aspect-ratio: auto; height: 100%; }
.project__tags { margin-top: var(--s-3); }
.project__t { margin-top: var(--s-3); }
.project__tags + .project__t { margin-top: var(--s-2); }
.project__d { margin-top: var(--s-1); }
.avp-prj__b { padding-top: var(--s-3); }
.avp-prj__t { margin-top: var(--s-2); }
/* (1/10) Pagine Soluzioni: le card progetto non mostrano le targhette delle
   tecnologie. I tag restano nel markup e nei dati (filtri, schede progetto): qui
   smettono solo di essere disegnati. Senza targhetta il titolo sta sotto
   l'immagine alla distanza delle altre card progetto (24px, padding del corpo). */
[data-sezione="soluzioni"] :is(.avp-prj__tags, .case__tags) { display: none; }
[data-sezione="soluzioni"] .avp-prj__t { margin-top: 0; }
.avp-prj__d { margin-top: var(--s-1); }
.avp-prj .more { margin-top: var(--s-3); }
/* scheda progetto singolo (.case) dopo una testata: stessa distanza delle altre card */
.ac-prj .case { margin-top: 0; }
/* elenchi numerati: una sola misura di riga e di testo */
.pains > .pain { padding-block: var(--s-3); font-size: var(--fs-lead); }
/* settori: sui dispositivi touch la descrizione resta visibile (non dipende dall'hover) */
@media (hover: none) {
  :is(.grid, .carousel__track) > .sector .sector__d {
    max-height: none; opacity: 1; margin-top: var(--s-1);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
}
/* icone al passaggio del cursore: riquadro scuro, icona verde (Automazione, Spazi ibridi) */
.hy-att__c:hover .hy-att__ic, .ca-sys:hover .ca-sys__ic { background: var(--ink); color: var(--brand-green); }
/* icone di card informative */
.comp__ic, .as-dove__ic { display: block; color: var(--ink); margin-bottom: var(--s-3); }
.comp__ic { width: 36px; height: 36px; }
.as-dove__ic { width: 40px; height: 40px; }
.section--dark .comp__ic { color: var(--paper); }

/* ------------------------------------------------ 8. Home: hero animato (solo testo e pulsanti) */
.hx__shade { background: linear-gradient(100deg, rgba(21, 23, 21, 0.9) 0%, rgba(21, 23, 21, 0.7) 26%, rgba(21, 23, 21, 0.26) 52%, rgba(21, 23, 21, 0.1) 70%, rgba(21, 23, 21, 0.1) 100%); }
@media (max-width: 720px), (max-aspect-ratio: 4/5) {
  .hx__shade { background: linear-gradient(180deg, rgba(21, 23, 21, 0.12) 0%, rgba(21, 23, 21, 0.12) 36%, rgba(21, 23, 21, 0.88) 58%, var(--color-ink-3) 64%); }
}
.hx__h1 { text-transform: none; }
.hx__body { max-width: 60rem; }
.hx__actions { flex-wrap: wrap; gap: var(--s-2); }
.hero--home .manifesto { text-align: center; }
.hero--home .manifesto .lead { margin-inline: auto; }

/* Home · hero animato: proporzioni costanti tra testo e scheda, etichette in scala con la foto,
   su mobile/verticale la foto e il testo sono due fasce distinte (il testo non copre la stanza) */
.hx__lab { font-size: clamp(0.5625rem, 0.85vw, var(--fs-tag)); }
@media (min-width: 721px) and (min-aspect-ratio: 4/5) {
  .hx__h1 { font-size: min(var(--fs-hero), 4.44vw); }
}
@media (max-width: 720px), (max-aspect-ratio: 4/5) {
  .hx__card { display: flex; flex-direction: column; }
  .hx { --hx-fx: 0.6; }
  .hx__card { height: auto; max-height: none; }
  .hx__scene { position: relative; top: auto; left: 50%; flex: none; width: 130%; height: auto; align-self: flex-start; transform: translateX(calc(var(--hx-fx) * -100%)); }
  .hx__scene::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 24%; background: linear-gradient(180deg, rgba(21, 23, 21, 0), var(--color-ink-3)); pointer-events: none; }
  .hx__shade { display: none; }
  .hx__body { position: relative; flex: none; padding-top: var(--s-3); }
  .hx__lab { font-size: var(--fs-tag); }
}
@media (max-width: 720px) and (max-height: 780px) {
  .hx__scene { width: 125%; }
  .hx__lead { margin-top: var(--s-2); }
  .hx__actions { margin-top: var(--s-3); }
}
@media (max-width: 480px) {
  .hx__actions { flex-direction: column; align-items: stretch; }
  .hx__actions .btn { justify-content: center; text-align: center; }
}

/* ------------------------------------------------ 9. Varianti di pagina (motivate) */
/* Automazione · Il problema: elenco sotto il titolo, colonna destra vuota */
.ca-prob .ca-steps { margin-top: var(--s-4); }
/* Il problema (1/10): testo a sinistra, immagine a destra. L'immagine parte
   all'altezza del titolo (split--offset) e resta in vista mentre si legge l'elenco. */
.ca-prob__media { margin: 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; background: var(--paper-2); }
.ca-prob__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 76% 50%; }
@media (min-width: 921px) { .ca-prob__col { position: sticky; top: calc(80px + var(--s-4)); } }
@media (max-width: 920px) { .ca-prob__media { aspect-ratio: 3 / 2; } .ca-prob__media img { object-position: 60% 50%; } }
/* Sistemi audio e video: frase in evidenza al livello H3 (statement, 28px), sotto gli H2
   di sezione (44px) e sopra il testo; misura allargata perche' a parita' di frase
   il corpo piu' piccolo la manterrebbe sulle stesse righe corte. (1/10) */
.avp-stmt--sm .avp-stmt__t { font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: normal; max-width: 54ch; }
.avp-stmt--sm .avp-stmt__k { width: 10px; height: 10px; margin-top: 0.6em; }
/* Poli & Regina · 07 Il risultato */
.pr-res .pr-plus { margin-top: var(--s-5); }
.pr-res .pr-plus div { padding: var(--s-3) 0; }
.pr-res .pr-plus dd { margin-top: var(--s-1); line-height: var(--lh-body); }
.pr-res .cs-res__l { row-gap: 0; column-gap: var(--s-4); }
.pr-res .cs-res__l li { padding: 0 var(--s-3) var(--s-5) 0; }
.pr-res .cs-res__l li:nth-child(n+3) { padding-top: var(--s-5); }
@media (max-width: 640px) {
  .pr-res .cs-res__l li, .pr-res .cs-res__l li:nth-child(n+3) { padding: var(--s-4) 0; }
}
/* fine componenti condivisi 30/9 */
/* ===================================================================== FINITURA 30/9
   Seconda revisione: accessibilità, motion, 404, configuratore. Nessun nuovo stile visivo. */

/* ------------------------------------------------ Contrasto (WCAG AA)
   Il grigio della seconda parte dei titoli (.lo) passa da 2.3:1 a 3.2:1 (testo grande: minimo 3:1);
   le etichette chiare su fondo scuro da 4.2:1 a 4.8:1; il grigio-verde dei testi piccoli da 4.49:1 a 4.8:1.
   Nei contenitori scuri il grigio «muted» diventa il grigio chiaro del fondo scuro (prima era illeggibile). */
:root {
  --muted-50: rgba(80, 80, 80, 0.68);
  --on-dark-lo: rgba(247, 247, 245, 0.5);
  --color-text-accent-2: #636B5E;
}
.hero, .cs-hero, .section--dark, .cta, .footer, .cs-dark, .mobile-menu { --muted: var(--on-dark-md); }
.cs-fig figcaption span { opacity: 1; }
/* seconda parte dei titoli piccoli (H3): sotto i 24px serve 4.5:1 */
.as-h3 .lo, .st-h3 .lo { color: var(--color-text-muted); }
.vt-f { opacity: 0.6; }
.avp-stmt__t { color: var(--color-text-muted); }

/* ------------------------------------------------ Titoli del footer (ora h2, stessa resa) */
.footer__col .footer__t { font-size: var(--fs-micro); font-weight: var(--fw-med); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--on-dark-lo); margin-bottom: var(--s-2); }
.cs-l:is(h2) { margin: 0; }

/* ------------------------------------------------ Aree di tocco: minimo 24×24 px (WCAG 2.2), aspetto invariato */
.dot { position: relative; }
.dot::before, .esplora__pin::before { content: ""; position: absolute; inset: -8px -3px; }
.esplora__pin::before { inset: -6px; }
.crumbs a, .footer__bot a, .cl-gruppo__a, .sector__cta, .mappa__fb { display: inline-flex; align-items: center; min-height: 24px; }

/* ------------------------------------------------ Motion: una sola grammatica
   pagina → dissolvenza breve all'ingresso; sezioni → reveal già esistente (--dur-slow);
   card → immagine che si avvicina di poco (1.04, --dur-slow); pulsanti → feedback rapido (--dur-fast). */
@keyframes lzIngresso { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
main.is-ingresso { animation: lzIngresso var(--dur) var(--ease) both; }
.sector:hover .sector__img, .project:hover .project__img, .case:hover .case__img,
.avp-prj:hover .avp-prj__img, .solution:hover .solution__img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  main.is-ingresso { animation: none; }
}
/* il titolo che riceve il fuoco al cambio pagina non mostra il contorno (non è un controllo) */
main :is(h1)[tabindex="-1"]:focus { outline: none; }

/* ------------------------------------------------ Configuratore: soluzioni da approfondire */
.flusso__links { margin-top: var(--s-3); display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); }
.flusso__links .more { font-size: var(--fs-small); }

/* ------------------------------------------------ 404 */
.nf { padding-block: var(--section-y); }
.nf .h-two { max-width: 18ch; }
.nf__nav { margin-top: var(--gap-block); border-top: 1px solid var(--line); max-width: 44rem; }
.nf__nav a { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-lead); font-weight: var(--fw-light); }
.nf__nav a > span, .nf__nav .arr { transition: transform var(--dur-fast) var(--ease); }
.nf__nav a small { display: block; font-size: var(--fs-small); color: var(--muted); margin-top: 0.2rem; }
.nf__nav a:hover > span, .nf__nav a:focus-visible > span { transform: translateX(var(--s-1)); }
.nf__nav a:hover .arr { transform: translateX(3px); }
.nf__nav .arr { flex: none; }
/* fine finitura 30/9 */

/* ===================================================================== FRASI 29/9
   Regola editoriale: dopo ogni punto che chiude una frase si va a capo
   (<br class="fr-br"> inserito da script). Gli a capo "solo desktop"
   (.br-lg) che cadono dopo un punto restano visibili anche su mobile. */
br.fr-on { display: inline !important; }
/* fine frasi 29/9 */

/* ===================================================================== IMMAGINI DELLE CARD (1/10)
   Mappatura ufficiale card → immagine (cartella Foto_aggiornate). La regola vale
   solo per l'immagine dentro le card (settore, soluzione, progetto, case, progetto
   soluzione): gli stessi img-NN negli hero e nelle schede «spazi» restano com'erano.
   Pubblica Amministrazione: Card_Pubblica_amministrazione.jpg (con la P maiuscola, la foto
   indicata in chat); l'hero della pagina usa img-50.
   (1/10) Stessa immagine anche per l'hero della pagina di dettaglio corrispondente:
   il selettore dell'hero sta nella stessa regola, così il file è incorporato una volta
   sola. Restano le posizioni (background-position) già definite per ogni hero. */
:is(.sector__img, .solution__img, .project__img, .case__img, .avp-prj__img).img-42, .hero__img.img-42 { background-image: url(/assets/img/card/Card_assistenza_servizi.jpg); }   /* Servizi di assistenza */
:is(.sector__img, .solution__img, .project__img, .case__img, .avp-prj__img).img-16, .hero__img.img-16 { background-image: url(/assets/img/card/Card_acustica_confort.png); }   /* Acustica e comfort */
:is(.sector__img, .solution__img, .project__img, .case__img, .avp-prj__img).img-61, .hero__img.img-61 { background-image: url(/assets/img/card/Card_automazione_controllo.webp); }   /* Controllo e automazione */
:is(.sector__img, .solution__img, .project__img, .case__img, .avp-prj__img).img-19 { background-image: url(/assets/img/card/Card_Cooperazioni_Trentine.jpg); }   /* Cooperazioni Trentine / Piazza InCooperazione */
:is(.sector__img, .solution__img, .project__img, .case__img, .avp-prj__img).img-45, .cs-hero__img .cs-img.cs-tsp1 { background-image: url(/assets/img/card/card_tspace_ok.jpg); }   /* Tspace */
:is(.sector__img, .solution__img, .project__img, .case__img, .avp-prj__img).img-49, .cs-hero__img .cs-img.cs-mg1 { background-image: url(/assets/img/card/Comune_Magnago_immagine_02.png); }   /* Comune di Magnago */
:is(.sector__img, .solution__img, .project__img, .case__img, .avp-prj__img).img-11, .hero__img.img-11 { background-image: url(/assets/img/card/Card_Sistemi_audio_video.png); }   /* Sistemi audio e video */
:is(.sector__img, .solution__img, .project__img, .case__img, .avp-prj__img).img-12, .hero__img.img-12 { background-image: url(/assets/img/card/Card_Digital_signage.png); }   /* Digital Signage */
:is(.sector__img, .solution__img, .project__img, .case__img, .avp-prj__img).img-13, .hero__img.img-13 { background-image: url(/assets/img/card/Card_ledwall_videowall.png); }   /* LEDwall e videowall */
:is(.sector__img, .solution__img, .project__img, .case__img, .avp-prj__img).img-14, .hero__img.img-14 { background-image: url(/assets/img/card/Card_sensoristica.png); }   /* Sensoristica */
:is(.sector__img, .solution__img, .project__img, .case__img, .avp-prj__img).img-15, .hero__img.img-15 { background-image: url(/assets/img/card/Card_booking_system.png); }   /* Booking system */
:is(.sector__img, .solution__img, .project__img, .case__img, .avp-prj__img).img-03, .hero__img.img-03 { background-image: url(/assets/img/card/Retail_card.png); }   /* Retail */
:is(.sector__img, .solution__img, .project__img, .case__img, .avp-prj__img).img-05, .hero__img.img-05 { background-image: url(/assets/img/card/Card_hospitality.png); }   /* Hospitality */
:is(.sector__img, .solution__img, .project__img, .case__img, .avp-prj__img).img-08, .hero__img.img-08 { background-image: url(/assets/img/card/Card_impianti_sportivi.png); }   /* Impianti sportivi */
:is(.sector__img, .solution__img, .project__img, .case__img, .avp-prj__img).img-10, .hero__img.img-10 { background-image: url(/assets/img/card/Card_nautica.png); }   /* Nautica */
:is(.sector__img, .solution__img, .project__img, .case__img, .avp-prj__img).img-09, .hero__img.img-09 { background-image: url(/assets/img/card/Card_sanità.png); }   /* Sanità */
:is(.sector__img, .solution__img, .project__img, .case__img, .avp-prj__img).img-04, .hero__img.img-50 { background-image: url(/assets/img/card/Card_Pubblica_amministrazione.jpg); }   /* Pubblica Amministrazione (foto fornita in chat, 595×272) */
/* (2/10) Le tre soluzioni per la collaborazione: card + hero della pagina di dettaglio, stesso file.
   Il nome del file di Trascrizioni contiene uno spazio: nel CSS è scritto %20 (costruisci.py lo decodifica). */
:is(.sector__img, .solution__img, .project__img, .case__img, .avp-prj__img).img-62, .hero__img.img-62 { background-image: url(/assets/img/card/Card_spazi_ibridi.png); }   /* Spazi ibridi */
:is(.sector__img, .solution__img, .project__img, .case__img, .avp-prj__img).img-63, .hero__img.img-63 { background-image: url(/assets/img/card/Card_votazioni_elettroniche.png); }   /* Votazioni elettroniche */
:is(.sector__img, .solution__img, .project__img, .case__img, .avp-prj__img).img-64, .hero__img.img-64 { background-image: url(/assets/img/card/Card_trascrizioni%20automatiche.png); }   /* Trascrizioni automatiche */
/* fine immagini delle card */