/* =====================================================================
   assets/css/main.css → PUN Advisor — foglio di stile unico
   Mobile-first (solo min-width). Breakpoint: 640px · 1024px · 1440px
   Linguaggio grafico "v2": angoli arrotondati (14px / 7px), intestazioni
   su foto con velo navy, header in vetro smerigliato, schede con ombra morbida.
   Indice:
     1. FONT              9. HERO (FOTO, PUNTI FORTI, STRISCIA ENTI)
     2. VARIABILI        10. FOOTER
     3. RESET            11. NUMERI (KPI)
     4. TIPOGRAFIA       12. SERVIZI (CARD + CAROSELLO AD ARCO)
     5. LAYOUT           13. METODO (4 FASI)
     6. UTILITÀ          14. CHI SIAMO (TEASER) + SPAZIO IMMAGINE
     7. BOTTONI          15. CONFORMITÀ (ENTI E NORME)
     8. HEADER / NAV     16. MODULI (CAMPI, ERRORI, CARD MODULO)
                         17. CONTATTI IN EVIDENZA (SEZIONE FINALE)
                         18. INTESTAZIONE PAGINA (PAGINE INTERNE)
                         19. CONTATTI + GRAZIE
                         20. PAGINE LEGALI (INDICE, TABELLE, DATI)
                         21. PAGINA SERVIZI (INDICE, DETTAGLIO)
                         22. DOMANDE FREQUENTI + FASCIA CTA
                         23. PAGINA CHI SIAMO (VALORI, SEDE)
                         24. PAGINA 404
                         25. ANIMAZIONI / RIDUZIONE MOVIMENTO
   ===================================================================== */


/* === FONT ===
   Self-hosted (GDPR). Percorsi relativi a questo file: ../fonts/ */
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/dm-sans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/dm-sans-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/dm-sans-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* === VARIABILI === */
:root {
  /* Colori — navy dal logo (scritta PUN) */
  --c-navy:        #003848; /* Sezioni scure, schede in evidenza, bottone scuro */
  --c-navy-deep:   #011D26; /* Velo delle foto, sezione contatti, menu mobile */
  --c-navy-mid:    #002535; /* Footer, striscia enti, barra punti forti */

  /* Colori — verde acqua dal logo (goccia + ADVISOR) */
  --c-teal:        #10BC94; /* Stato "premuto" del bottone primario, dettagli */
  --c-teal-light:  #10D39C; /* CTA primarie (testo navy-deep), accenti su scuro */
  --c-teal-dark:   #039587; /* Dettagli grafici */
  --c-teal-ink:    #057A68; /* Testo e link su sfondo chiaro (5.3:1 su bianco) */
  --c-teal-soft:   #E7F8F4; /* Fondo dei riquadri icona su chiaro */

  /* Colori — ambra dal logo (sole). MAI per CTA primarie */
  --c-amber:       #F5B502; /* Icone, numeri, fili d'accento su scuro */
  --c-amber-dark:  #F88900; /* Dettagli su chiaro (mai testo piccolo) */
  --c-amber-ink:   #A35A00; /* Testo ambra su chiaro (etichette "Norma"): 5.2:1 su bianco */

  /* Testo e sfondi */
  --c-white:       #FFFFFF;
  --c-off-white:   #F5F8F7;
  --c-placeholder: #E7EEF0; /* Spazi immagine in attesa della foto */
  --c-text:        #1A2B33; /* 14.6:1 su bianco */
  --c-text-muted:  #4A6572; /* 6.2:1 su bianco */
  --c-border:      #D0DBE0; /* Bordi di schede e separatori (non per i campi) */
  --c-border-input:#7A909A; /* Bordi campi modulo: 3.3:1 su bianco (WCAG 1.4.11) */
  --c-error:       #B42318; /* Errori modulo: 6.6:1 su bianco */
  --c-on-dark:        var(--c-white);
  --c-on-dark-muted:  #B9CCD3; /* 7.6:1 su navy */
  --c-on-dark-soft:   #DBE6EA; /* Testo introduttivo sopra le foto */
  --c-on-dark-border: rgba(255, 255, 255, 0.14);
  --c-on-dark-line:   rgba(255, 255, 255, 0.12);

  /* Veli sulle foto (navy-deep trasparente) */
  --veil-strong: rgba(1, 29, 38, 0.94);
  --veil-mid:    rgba(1, 29, 38, 0.78);
  --veil-light:  rgba(1, 29, 38, 0.25);
  --veil-faint:  rgba(1, 29, 38, 0.1);
  --veil-glass:  rgba(1, 29, 38, 0.4);   /* header sopra la foto */
  --veil-solid:  rgba(1, 29, 38, 0.9);   /* header dopo lo scroll */
  --veil-bar:    rgba(0, 37, 53, 0.55);  /* barra punti forti in fondo all'hero */
  --glass-blur:  12px;

  /* Ruoli (cambiano per contesto: vedi .section--dark) */
  --c-bg:      var(--c-white);
  --c-fg:      var(--c-text);
  --c-fg-soft: var(--c-text-muted);
  --c-strong:  var(--c-navy);      /* titoli in evidenza, bottone a contorno */
  --c-link:    var(--c-teal-ink);
  --c-focus:   var(--c-teal-ink);

  /* Tipografia */
  --ff-heading: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --ff-body:    'DM Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --fs-hero:    clamp(2.8rem, 7.4vw, 6.25rem);
  --fs-h1:      clamp(2.25rem, 5vw, 4rem);      /* Titolo delle pagine interne */
  --fs-h2:      clamp(1.9rem, 3.6vw, 3rem);
  --fs-h2-sm:   clamp(1.6rem, 2.8vw, 2.25rem);  /* Titoli di pannelli e fasce */
  --fs-h3:      1.25rem;
  --fs-card:    1.375rem;                       /* Titolo delle schede servizio */
  --fs-lead-lg: clamp(1.0625rem, 1.5vw, 1.3rem); /* Testo sotto i titoli sulle foto */
  --fs-lead:    1.0625rem;
  --fs-body:    1rem;
  --fs-sm:      0.9375rem; /* 15px: testi delle schede */
  --fs-small:   0.875rem;
  --fs-xs:      0.8125rem;
  --fs-label:   0.75rem;
  --fs-tag:     0.6875rem;
  --fs-kpi:     clamp(2.75rem, 5vw, 4rem); /* Contatori numerici */

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-body:    1.65;
  --lh-heading: 1.1;
  --lh-hero:    0.98;

  --ls-hero:  -0.04em;
  --ls-h1:    -0.03em;
  --ls-h2:    -0.025em;
  --ls-label: 0.12em;
  --ls-kicker: 0.14em;

  --measure: 65ch; /* Lunghezza riga ideale per il testo */

  /* Spaziatura (sistema 8px) */
  --space-half: 4px;
  --space-1:  8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  40px;
  --space-6:  48px;
  --space-7:  56px;
  --space-8:  64px;
  --space-9:  72px;
  --space-10: 80px;
  --space-12: 96px;
  --space-15: 120px;

  --section-py: clamp(var(--space-8), 9vw, var(--space-15)); /* 64 → 120px */
  --gutter:     var(--space-3);

  /* Breakpoint — solo documentazione: le media query non leggono variabili.
     Tenere allineati: 640px · 1024px · 1440px */
  --bp-tablet:  640px;
  --bp-desktop: 1024px;
  --bp-wide:    1440px;
  --container:  1208px;

  /* Bordi e raggi */
  --radius:       14px;  /* Schede, bottoni, pannelli */
  --radius-sm:    7px;   /* Riquadri icona, campi, voci di elenco */
  --radius-pill:  999px;
  --radius-badge: 4px;
  --border-w:     1px;
  --border-input: 1.5px;
  --focus-w:      3px;
  --control-h:    50px; /* Altezza dei campi (area tocco ≥ 44px) */

  /* Ombre (navy trasparente) */
  --shadow-1:     0 1px 2px rgba(1, 29, 38, 0.06), 0 8px 24px rgba(1, 29, 38, 0.06);
  --shadow-2:     0 18px 40px rgba(1, 29, 38, 0.14);
  --shadow-dark:  0 24px 60px rgba(1, 29, 38, 0.28);
  --shadow-badge: 0 20px 50px rgba(1, 29, 38, 0.3);
  --shadow-float: 0 30px 80px rgba(0, 0, 0, 0.35);
  --shadow-cta:   0 12px 34px rgba(16, 211, 156, 0.3);
  --shadow-header: 0 8px 24px rgba(1, 29, 38, 0.25);

  /* Movimento (valori allineati alla tabella animazioni) */
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;
  --ease:     cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0, 0, 0.58, 1);

  /* Livelli */
  --z-header: 100;
  --z-menu:   90;
  --z-cookie: 200;
  --z-skip:   300;

  /* Header e indice fisso delle pagine interne */
  --subnav-h: 56px;
  --header-h: 72px;
  --logo-h:   38px;
}

@media (min-width: 640px) {
  :root {
    --gutter: var(--space-4);
  }
}

@media (min-width: 1024px) {
  :root {
    --header-h: 76px;
    --logo-h:   42px;
  }
}


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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--space-2));
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  min-height: 100vh;
  background: var(--c-bg);
  color: var(--c-fg);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* le schede laterali del carosello non allargano la pagina */
}

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

img {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

p,
h1,
h2,
h3,
h4 {
  overflow-wrap: break-word;
}

table {
  border-collapse: collapse;
  width: 100%;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: var(--focus-w) solid var(--c-focus);
  outline-offset: 2px;
}

::selection {
  background: var(--c-teal-light);
  color: var(--c-navy-deep);
}

main:focus {
  outline: none;
}


/* === TIPOGRAFIA === */
h1,
h2,
h3,
h4,
.h1,
.h2,
.h3,
.h4 {
  font-family: var(--ff-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: inherit;
  text-wrap: balance;
}

h1,
.h1 {
  font-size: var(--fs-h1);
  letter-spacing: var(--ls-h1);
}

h2,
.h2 {
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-h2);
}

h3,
.h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h4,
.h4 {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
}

p {
  text-wrap: pretty;
}

a {
  color: var(--c-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--dur-fast) var(--ease);
}

a:hover {
  text-decoration-thickness: 2px;
}

strong,
b {
  font-weight: var(--fw-bold);
}

small,
.text-small {
  font-size: var(--fs-small);
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--c-fg-soft);
  max-width: 60ch;
}

/* Kicker: etichetta maiuscola sopra i titoli */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-kicker);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--c-link);
}

/* Variante con filo (intestazioni su foto) */
.kicker--line {
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
}

.kicker--line::before {
  content: '';
  flex-shrink: 0;
  width: var(--space-5);
  height: 2px;
  background: currentColor;
}

/* Contenuto testuale libero (pagine legali, testi lunghi) */
.prose > * + * {
  margin-top: var(--space-2);
}

.prose > * + h2,
.prose > * + h3,
.prose > * + section {
  margin-top: var(--space-5);
}

.prose ul,
.prose ol {
  padding-left: var(--space-3);
}

.prose {
  max-width: var(--measure);
}


/* === LAYOUT === */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Le pagine senza intestazione scura partono sotto l'header fisso */
main {
  display: block;
  padding-top: var(--header-h);
}

.section {
  padding-block: var(--section-py);
  background-color: var(--c-bg);
  color: var(--c-fg);
}

.section--alt {
  --c-bg: var(--c-off-white);
}

.section--dark,
.site-header,
.site-footer,
.hero,
.page-hero,
.ref-strip {
  --c-bg:      var(--c-navy);
  --c-fg:      var(--c-on-dark);
  --c-fg-soft: var(--c-on-dark-muted);
  --c-strong:  var(--c-on-dark);
  --c-link:    var(--c-teal-light);
  --c-focus:   var(--c-teal-light);
}

.section--deep {
  --c-bg: var(--c-navy-deep);
}

.section--mid {
  --c-bg: var(--c-navy-mid);
}

/* Trama a griglia sottile (sezioni scure di contatto) */
.section--grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: var(--space-8) var(--space-8);
}

.section--tight {
  padding-block: var(--space-6);
}

/* Segue una sezione con lo stesso sfondo: niente doppio spazio */
.section--flush-top {
  padding-top: 0;
}

.section__head {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  max-width: var(--measure);
}

.section__head > .kicker {
  margin-bottom: calc(-1 * var(--space-half));
}

.section__head h2 {
  max-width: 24ch;
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}

/* Intestazione di sezione su due colonne: titolo a sinistra, testo a destra */
.section-intro {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.section-intro__main {
  display: grid;
  gap: 12px;
  justify-items: start;
}

.section-intro__main h2 {
  max-width: 22ch;
}

.section-intro__aside {
  max-width: 56ch;
  color: var(--c-fg-soft);
  font-size: var(--fs-lead);
}

.section-intro--compact {
  margin-bottom: var(--space-5);
}

@media (min-width: 1024px) {
  .section-intro {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--space-8);
  }
}

/* Griglie: 1 colonna su mobile, poi 2, poi n */
.grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .grid--split {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-8);
    align-items: center;
  }

  .grid--split-alt {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

/* Stack: elementi in colonna con spaziatura uniforme */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.stack--sm { gap: var(--space-1); }
.stack--lg { gap: var(--space-4); }

/* Cluster: elementi in riga che vanno a capo */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.cluster--between { justify-content: space-between; }
.cluster--lg      { gap: var(--space-4); }


/* === UTILITÀ === */
[hidden] {
  display: none !important;
}

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

.skip-link {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-skip);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--c-teal-light);
  color: var(--c-navy-deep);
  font-weight: var(--fw-bold);
  text-decoration: none;
}

.skip-link:not(:focus):not(:focus-visible) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.text-center { text-align: center; }
.text-muted  { color: var(--c-fg-soft); }
.measure     { max-width: var(--measure); }

.icon {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  fill: currentColor;
}

.icon--accent { color: var(--c-amber); }
.icon--teal   { color: var(--c-teal-light); }

.badge {
  display: inline-block;
  padding: var(--space-half) var(--space-1);
  border-radius: var(--radius-badge);
  background: var(--c-amber);
  color: var(--c-navy-deep);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}


/* === BOTTONI ===
   Primario: verde acqua pieno + testo navy-deep (9:1). Uno solo per schermata.
   Scuro: navy pieno (moduli, "vedi tutti"). Contorno: nel colore del contesto.
   Ghost: vetro scuro sopra le foto. Altezze: sm 44 · base 52 · lg 58. */
.btn {
  --btn-bg:     transparent;
  --btn-fg:     var(--c-fg);
  --btn-border: currentColor;
  --btn-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 var(--space-3);
  border: var(--border-input) solid var(--btn-border);
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: var(--btn-shadow);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-base) var(--ease);
}

.btn:hover {
  transform: translateY(-2px);
  text-decoration: none;
}

.btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn:focus-visible {
  outline-offset: 3px;
}

.btn[disabled],
.btn[aria-disabled='true'] {
  opacity: 0.5;
  pointer-events: none;
}

.btn .icon {
  width: 18px;
  height: 18px;
  transition: transform var(--dur-fast) var(--ease);
}

.btn:hover .icon--arrow {
  transform: translateX(3px);
}

.btn--primary {
  --btn-bg:     var(--c-teal-light);
  --btn-fg:     var(--c-navy-deep);
  --btn-border: var(--c-teal-light);
}

.btn--primary:hover {
  --btn-bg:     color-mix(in srgb, var(--c-teal-light) 82%, var(--c-white));
  --btn-border: color-mix(in srgb, var(--c-teal-light) 82%, var(--c-white));
  --btn-shadow: var(--shadow-cta);
}

.btn--primary:active {
  --btn-bg:     var(--c-teal);
  --btn-border: var(--c-teal);
}

.btn--dark {
  --btn-bg:     var(--c-navy);
  --btn-fg:     var(--c-white);
  --btn-border: var(--c-navy);
}

.btn--dark .icon {
  color: var(--c-teal-light);
}

.btn--dark:hover {
  --btn-bg:     color-mix(in srgb, var(--c-navy) 82%, var(--c-teal));
  --btn-border: color-mix(in srgb, var(--c-navy) 82%, var(--c-teal));
  --btn-shadow: var(--shadow-2);
}

.btn--dark:active {
  --btn-bg:     var(--c-navy-deep);
  --btn-border: var(--c-navy-deep);
}

.btn--secondary {
  --btn-fg:     var(--c-strong);
  --btn-border: var(--c-strong);
}

.btn--secondary:hover {
  --btn-bg: var(--c-strong);
  --btn-fg: var(--c-bg);
}

.btn--secondary:active {
  --btn-bg: color-mix(in srgb, var(--c-strong) 85%, var(--c-bg));
}

.btn--ghost {
  --btn-bg:     rgba(1, 29, 38, 0.3);
  --btn-fg:     var(--c-on-dark);
  --btn-border: rgba(255, 255, 255, 0.45);
  font-weight: var(--fw-medium);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.btn--ghost:hover {
  --btn-bg:     rgba(255, 255, 255, 0.12);
  --btn-border: var(--c-on-dark);
}

.btn--ghost:active {
  --btn-bg: rgba(1, 29, 38, 0.5);
}

.btn--sm {
  min-height: 44px;
  padding-inline: 20px;
  font-size: var(--fs-sm);
}

.btn--lg {
  min-height: 58px;
  padding-inline: 30px;
  font-size: var(--fs-lead);
}

.btn--primary.btn--lg {
  --btn-shadow: var(--shadow-cta);
}

.btn--block {
  width: 100%;
}


/* === HEADER / NAV ===
   Vetro smerigliato: il velo e la sfocatura stanno su ::before, non
   sull'header. backdrop-filter crea un nuovo riferimento per gli elementi
   position: fixed, e il pannello del menu mobile resterebbe chiuso
   nell'altezza dell'header. */
.site-header {
  --header-veil: var(--veil-solid);
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  height: var(--header-h);
  color: var(--c-fg);
}

.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--header-veil);
  border-bottom: var(--border-w) solid var(--c-on-dark-line);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  transition:
    background-color var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out);
}

.site-header.is-scrolled::before {
  box-shadow: var(--shadow-header);
}

/* Sopra una foto: velo leggero, più pieno dopo lo scroll o con il menu aperto */
.site-header--transparent {
  --header-veil: var(--veil-glass);
}

.site-header--transparent.is-scrolled,
.has-menu-open .site-header--transparent {
  --header-veil: var(--veil-solid);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  height: 100%;
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: inherit;
  border-radius: var(--radius-sm);
}

.site-header__logo {
  width: auto;
  height: var(--logo-h);
}

/* Hamburger */
.site-header__toggle {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 48px;
  height: 48px;
  padding: var(--space-1) 11px;
  margin-right: calc(-1 * var(--space-1));
  border-radius: var(--radius-sm);
  color: var(--c-fg);
}

.site-header__toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform-origin: center;
  transition:
    transform var(--dur-base) var(--ease-out),
    opacity var(--dur-fast) var(--ease);
}

.site-header__toggle[aria-expanded='true'] .site-header__toggle-bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.site-header__toggle[aria-expanded='true'] .site-header__toggle-bar:nth-child(2) {
  opacity: 0;
}

.site-header__toggle[aria-expanded='true'] .site-header__toggle-bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Menu: pannello a schermo intero su mobile/tablet */
.site-nav {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: var(--z-menu);
  display: none;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-4) var(--gutter) var(--space-6);
  overflow-y: auto;
  background: var(--c-navy-deep);
}

.site-nav.is-open {
  display: flex;
}

.site-nav__list {
  display: flex;
  flex-direction: column;
}

.site-nav__item {
  border-bottom: var(--border-w) solid var(--c-on-dark-line);
}

.site-nav__link {
  position: relative;
  display: block;
  padding: var(--space-2) 0;
  color: var(--c-on-dark);
  font-family: var(--ff-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

.site-nav__link[aria-current='page'] {
  color: var(--c-teal-light);
}

.site-nav__cta {
  width: 100%;
  min-height: 52px;
}

.has-menu-open,
.has-menu-open body {
  overflow: hidden;
}

@media (min-width: 1024px) {
  .site-header__toggle {
    display: none;
  }

  .site-nav,
  .site-nav.is-open {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
    padding: 0;
    overflow: visible;
    background: none;
  }

  .site-nav__list {
    flex-direction: row;
    gap: 28px;
  }

  .site-nav__item {
    border: 0;
  }

  .site-nav__link {
    padding: 10px 0;
    font-family: var(--ff-body);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--c-on-dark);
  }

  /* Filo verde acqua che sale dal basso (200ms ease-out) */
  .site-nav__link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--c-teal-light);
    opacity: 0;
    transform: translateY(4px);
    transition:
      opacity var(--dur-base) var(--ease-out),
      transform var(--dur-base) var(--ease-out);
  }

  .site-nav__link:hover::after,
  .site-nav__link[aria-current='page']::after {
    opacity: 1;
    transform: translateY(0);
  }

  .site-nav__link[aria-current='page'] {
    color: var(--c-on-dark);
  }

  .site-nav__cta {
    width: auto;
    min-height: 44px;
  }
}


/* === HERO (FOTO, PUNTI FORTI, STRISCIA ENTI) ===
   La foto è position: fixed dietro la pagina (z-index -1 nel contesto
   radice): l'hero è trasparente e la lascia vedere attraverso un velo
   navy; le sezioni successive, con il loro sfondo, la coprono scorrendo.
   Per questo .hero e .page-hero NON devono creare un contesto di
   sovrapposizione (niente isolation, z-index, transform, filter). */
.hero-photo {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: -1;
  height: 100vh;
  height: 100lvh;
  max-height: 1100px;
  background: var(--c-navy-deep);
  pointer-events: none;
}

.hero-photo__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
}

/* Fuori schermo (main.js): non va ridisegnata mentre si legge il resto */
.hero-photo.is-offscreen {
  visibility: hidden;
}

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: min(100svh, 960px);
  margin-top: calc(-1 * var(--header-h));
  padding-top: var(--header-h);
  background-color: var(--c-navy-deep); /* senza foto (o browser senza :has) */
  color: var(--c-fg);
}

/* Con la foto: solo il velo. Su mobile il testo occupa tutta la larghezza,
   quindi il velo è uniforme; da desktop sfuma verso destra */
.hero:has(.hero-photo) {
  background-color: transparent;
  background-image:
    linear-gradient(180deg, var(--veil-mid) 0%, rgba(1, 29, 38, 0.7) 50%, var(--veil-strong) 100%);
}

.hero__main {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
}

.hero__inner {
  padding-block: clamp(var(--space-7), 9vw, var(--space-15));
}

.hero__title {
  max-width: 12ch;
  margin-top: 28px;
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-hero);
  text-shadow: 0 2px 30px rgba(1, 29, 38, 0.4);
  text-wrap: initial;
}

/* Parola chiave nel titolo (SEO), in piccolo sopra lo slogan */
.hero__title-pre {
  display: block;
  margin-bottom: var(--space-2);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--c-on-dark-muted);
  text-shadow: none;
}

.hero__title-accent {
  color: var(--c-teal-light);
}

.hero__lead {
  max-width: 52ch;
  margin-top: 28px;
  font-size: var(--fs-lead-lg);
  line-height: 1.6;
  color: var(--c-on-dark-soft);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--space-5);
}

/* Barra dei punti forti in fondo all'hero: vetro scuro */
.hero__bar {
  background: var(--veil-bar);
  border-top: var(--border-w) solid var(--c-on-dark-line);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.hero__highlights {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.hero__highlight {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-block: var(--space-2);
}

.hero__highlight + .hero__highlight {
  border-top: var(--border-w) solid var(--c-on-dark-line);
}

.hero__highlight-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: var(--border-w) solid rgba(16, 211, 156, 0.4);
  border-radius: var(--radius-sm);
  color: var(--c-teal-light);
}

.hero__highlight--warm .hero__highlight-icon {
  border-color: rgba(245, 181, 2, 0.45);
  color: var(--c-amber);
}

.hero__highlight-icon .icon {
  width: 20px;
  height: 20px;
}

.hero__highlight-text {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  font-size: var(--fs-small);
  color: var(--c-on-dark-muted);
}

.hero__highlight-title {
  font-size: var(--fs-body);
  color: var(--c-on-dark);
}

@media (min-width: 640px) {
  .hero__highlights {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hero__highlight {
    padding: 22px var(--space-3) 22px 0;
  }

  .hero__highlight + .hero__highlight {
    border-top: 0;
  }
}

@media (min-width: 1024px) {
  .hero:has(.hero-photo) {
    background-image:
      linear-gradient(90deg, var(--veil-strong) 0%, var(--veil-mid) 38%, var(--veil-light) 72%, var(--veil-faint) 100%),
      linear-gradient(0deg, rgba(1, 29, 38, 0.9) 0%, rgba(1, 29, 38, 0) 45%);
  }

  .hero__highlights {
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 0.6fr);
  }
}

/* Striscia enti e norme sotto l'hero (link al pannello con la nota di non affiliazione) */
.ref-strip {
  background: var(--c-navy-mid);
  color: var(--c-on-dark-muted);
  border-top: var(--border-w) solid rgba(255, 255, 255, 0.08);
}

.ref-strip__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding-block: 22px;
}

.ref-strip__label {
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
}

.ref-strip__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px var(--space-5);
}

.ref-strip__item a {
  display: inline-block;
  padding-block: var(--space-half);
  color: var(--c-on-dark);
  font-family: var(--ff-heading);
  font-size: 1.125rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: var(--radius-badge);
  transition: color var(--dur-base) var(--ease-out);
}

.ref-strip__item a:hover {
  color: var(--c-teal-light);
}


/* === FOOTER === */
.site-footer {
  --c-bg: var(--c-navy-mid);
  background: var(--c-bg);
  color: var(--c-on-dark-muted);
  font-size: var(--fs-sm);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-5);
  padding-top: var(--space-8);
}

.site-footer__brand {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
}

.site-footer__home {
  display: inline-flex;
  border-radius: var(--radius-sm);
}

.site-footer__logo {
  width: auto;
  height: 40px;
}

.site-footer__claim {
  max-width: 34ch;
  line-height: 1.6;
}

.site-footer__social {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
  color: var(--c-on-dark);
  font-weight: var(--fw-medium);
  text-decoration: none;
}

.site-footer__social .icon {
  width: 16px;
  height: 16px;
  transition: transform var(--dur-base) var(--ease-out);
}

.site-footer__social:hover {
  color: var(--c-teal-light);
}

.site-footer__social:hover .icon {
  transform: translate(2px, -2px);
}

.site-footer__title {
  margin-bottom: 10px;
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--c-on-dark);
}

.site-footer__list {
  display: grid;
  gap: var(--space-half);
}

.site-footer__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 32px;
  color: var(--c-on-dark-muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

.site-footer__link:hover,
.site-footer__link[aria-current='page'] {
  color: var(--c-on-dark);
}

.site-footer__link:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.site-footer__link--more .icon {
  width: 16px;
  height: 16px;
  color: var(--c-teal-light);
}

.site-footer__link--button {
  font-size: inherit;
  text-align: left;
}

.site-footer__address {
  display: grid;
  gap: 10px;
  font-style: normal;
}

.site-footer__address .site-footer__link {
  min-height: 0;
}

.site-footer__cta {
  justify-self: start;
  margin-top: var(--space-3);
  white-space: nowrap;
}

.site-footer__contact {
  display: grid;
  align-content: start;
}

.site-footer__legal {
  display: grid;
  gap: 12px var(--space-3);
  margin-top: var(--space-7);
  padding-block: var(--space-3) var(--space-4);
  border-top: var(--border-w) solid var(--c-on-dark-line);
  font-size: var(--fs-xs);
}

.site-footer__company {
  line-height: 1.7;
}

.site-footer__legal-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
}

@media (min-width: 640px) {
  .site-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .site-footer__inner {
    grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .site-footer__legal {
    grid-auto-flow: column;
    justify-content: space-between;
    align-items: center;
  }
}


/* === NUMERI (KPI) ===
   Schede con etichetta in alto e numero in basso; la prima è scura.
   Il numero finale è già nell'HTML (SEO, no-JS); main.js lo anima da 0
   quando entra in viewport. */
.kpi-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 20px;
  background: var(--c-off-white);
  border: var(--border-w) solid var(--c-border);
  border-radius: var(--radius);
  color: var(--c-text);
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
}

.section--alt .kpi {
  background: var(--c-white);
}

.kpi__tag {
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-teal-ink);
}

.kpi__value {
  display: flex;
  align-items: baseline;
  font-family: var(--ff-heading);
  font-size: var(--fs-kpi);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.kpi__suffix {
  color: var(--c-teal-ink);
}

.kpi__label {
  max-width: 30ch;
  margin-top: 10px;
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

/* Mobile: due schede per riga, quella in evidenza (e l'ultima dispari) a tutta riga */
.kpi--featured,
.kpi-list > :last-child:nth-child(even) {
  grid-column: 1 / -1;
}

@media (min-width: 640px) {
  .kpi-list {
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: var(--space-2);
  }

  .kpi--featured,
  .kpi-list > :last-child:nth-child(even) {
    grid-column: auto;
  }

  .kpi {
    gap: var(--space-5);
    min-height: 220px;
    padding: var(--space-4) 28px;
  }
}

/* In produzione compaiono solo i numeri confermati: se ne resta uno,
   la scheda non si allarga su tutta la riga */
@media (min-width: 640px) {
  .kpi-list:has(> :only-child) {
    grid-template-columns: minmax(0, 400px);
  }
}

/* In evidenza: scheda navy */
.kpi--featured {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: var(--c-on-dark);
}

.section--alt .kpi--featured {
  background: var(--c-navy);
}

.kpi--featured .kpi__tag,
.kpi--featured .kpi__suffix {
  color: var(--c-teal-light);
}

.kpi--featured .kpi__label {
  color: var(--c-on-dark-muted);
}

@media (hover: hover) {
  .kpi:hover {
    transform: translateY(-4px);
    background: var(--c-white);
    box-shadow: var(--shadow-2);
  }

  .kpi--featured:hover {
    background: var(--c-navy);
    box-shadow: var(--shadow-dark);
  }
}

/* Bozza: dato non confermato (mostrato solo in ambiente locale) */
.kpi--draft {
  outline: 2px dashed var(--c-amber);
  outline-offset: -6px;
}

.kpi__draft-note {
  display: inline-block;
  margin-top: var(--space-1);
  padding: 2px var(--space-1);
  border-radius: var(--radius-badge);
  background: var(--c-amber);
  color: var(--c-navy-deep);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
}


/* === SERVIZI (CARD + CAROSELLO AD ARCO) ===
   Scheda servizio: link esteso a tutta la superficie (un solo link per
   scheda). Nel carosello la scheda al centro diventa scura (is-active).

   Carosello (.arc):
   - senza JS: elenco orizzontale con scroll-snap, tutte le schede raggiungibili
   - con JS (.is-ready): le schede stanno tutte nella stessa cella della
     griglia (stessa altezza, la più alta comanda) e ruotano attorno a un
     perno comune sotto il carosello (--arc-radius): così si muovono davvero
     su un arco di cerchio. main.js scrive solo transform e opacity. */
.services__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-4);
}

.service-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  height: 100%;
  padding: var(--space-4);
  background: var(--c-white);
  border: var(--border-w) solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  color: var(--c-text);
  transition:
    background-color var(--dur-slow) var(--ease-out),
    border-color var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out),
    color var(--dur-slow) var(--ease-out);
}

/* Alone che segue il puntatore (--mx/--my da main.js) */
.service-card__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    300px circle at var(--mx, 50%) var(--my, 0%),
    color-mix(in srgb, var(--c-teal-light) 16%, transparent),
    transparent 70%
  );
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
  pointer-events: none;
}

.service-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.service-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  background: var(--c-navy);
  color: var(--c-teal-light);
  transition:
    background-color var(--dur-slow) var(--ease-out),
    color var(--dur-slow) var(--ease-out);
  will-change: transform;
}

.service-card__svg {
  width: 26px;
  height: 26px;
}

.service-card__index {
  font-family: var(--ff-heading);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--c-text-muted);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-slow) var(--ease-out);
}

.service-card__title {
  margin-top: var(--space-1);
  font-size: var(--fs-card);
}

.service-card__link {
  color: inherit;
  text-decoration: none;
}

/* Link esteso: tutta la scheda è cliccabile */
.service-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.service-card__link:focus-visible {
  outline: none;
}

.service-card:has(.service-card__link:focus-visible) {
  outline: var(--focus-w) solid var(--c-teal-ink);
  outline-offset: 3px;
}

.service-card__text {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  transition: color var(--dur-slow) var(--ease-out);
}

.service-card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
  margin-top: auto;
  color: var(--c-teal-ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  transition: color var(--dur-slow) var(--ease-out);
}

.service-card__arrow {
  width: 16px;
  height: 16px;
  transition: transform var(--dur-base) var(--ease-out);
}

/* Scheda in evidenza (al centro del carosello) */
.service-card--active,
.arc__item.is-active .service-card {
  background: var(--c-navy);
  border-color: var(--c-navy);
  box-shadow: var(--shadow-dark);
  color: var(--c-on-dark);
}

.arc__item.is-active .service-card__icon {
  background: var(--c-teal-light);
  color: var(--c-navy-deep);
}

.arc__item.is-active .service-card__index,
.arc__item.is-active .service-card__text {
  color: var(--c-on-dark-muted);
}

.arc__item.is-active .service-card__more {
  color: var(--c-teal-light);
}

.arc__item.is-active .service-card:has(.service-card__link:focus-visible) {
  outline-color: var(--c-teal-light);
}

@media (hover: hover) {
  .arc__item.is-active .service-card:hover .service-card__glow {
    opacity: 1;
  }

  .arc__item.is-active .service-card:hover .service-card__arrow {
    transform: translateX(4px);
  }

  /* Schede laterali: invitano al clic (portano la scheda al centro) */
  .arc.is-ready .arc__item:not(.is-active) .service-card:hover {
    border-color: var(--c-teal-ink);
    box-shadow: var(--shadow-2);
  }
}

/* Carosello — base senza JS: scorrimento orizzontale */
.arc {
  --arc-card-w: min(380px, calc(100vw - 2 * var(--gutter) - 64px));
  position: relative;
}

.arc__viewport {
  margin-inline: calc(-1 * var(--gutter));
  padding: var(--space-1) var(--gutter) var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
}

.arc__track {
  display: flex;
  gap: var(--space-2);
}

.arc__item {
  display: flex;
  flex: 0 0 var(--arc-card-w);
  scroll-snap-align: center;
}

/* Carosello — con JS: arco */
.arc.is-ready .arc__viewport {
  overflow: hidden;
  scroll-snap-type: none;
  padding-block: var(--space-2) var(--arc-drop, var(--space-10));
  touch-action: pan-y;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  mask-image: linear-gradient(90deg, transparent 0, var(--c-navy-deep) 7%, var(--c-navy-deep) 93%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--c-navy-deep) 7%, var(--c-navy-deep) 93%, transparent 100%);
}

.arc.is-dragging .arc__viewport {
  cursor: grabbing;
}

.arc.is-ready .arc__track {
  display: grid;
  justify-content: center;
}

.arc.is-ready .arc__item {
  grid-area: 1 / 1;
  width: var(--arc-card-w);
  transform-origin: 50% calc(50% + var(--arc-radius, 1200px));
  will-change: transform;
}

.arc.is-ready .arc__item .service-card {
  will-change: transform, opacity;
}

.arc.is-ready .arc__item:not(.is-active) .service-card__link {
  cursor: pointer;
}

.arc__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.arc__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border: var(--border-input) solid var(--c-border-input);
  border-radius: var(--radius-pill);
  background: var(--c-white);
  color: var(--c-navy);
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.arc__nav-icon {
  width: 20px;
  height: 20px;
}

.arc__nav--prev .arc__nav-icon {
  transform: rotate(180deg);
}

.arc__nav:hover {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: var(--c-teal-light);
}

.arc__nav:active {
  transform: scale(0.94);
}

.arc__dots {
  display: flex;
  align-items: center;
}

.arc__dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
}

.arc__dot::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--c-border-input);
  transition:
    width var(--dur-slow) var(--ease-out),
    background-color var(--dur-slow) var(--ease-out);
}

.arc__dot:hover::before {
  background: var(--c-teal-ink);
}

.arc__dot[aria-current='true'] {
  width: 32px;
}

.arc__dot[aria-current='true']::before {
  width: 22px;
  background: var(--c-navy);
}

/* Pausa/riprendi (solo con data-arc-autoplay > 0): due barre ↔ triangolo */
.arc__toggle::before,
.arc__toggle::after {
  content: '';
  width: 4px;
  height: 14px;
  margin-inline: 2px;
  border-radius: 1px;
  background: currentColor;
}

.arc__toggle.is-paused::after {
  display: none;
}

.arc__toggle.is-paused::before {
  width: 0;
  height: 0;
  margin-left: 4px;
  border-radius: 0;
  background: none;
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent currentColor;
}

@media (min-width: 640px) {
  .arc__controls {
    gap: var(--space-2);
  }
}


/* === METODO (4 FASI) ===
   Schede su fondo scuro con filo in alto (verde acqua le prime due, ambra
   le ultime): il filo si disegna da sinistra quando la scheda entra. */
.method-steps {
  display: grid;
  gap: var(--space-2);
}

.method-step {
  position: relative;
  overflow: hidden;
  padding: 28px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 0 0 var(--radius) var(--radius);
  transition:
    background-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.method-step__bar {
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--c-teal-light);
  transform-origin: left center;
}

.method-step__num {
  display: inline-block;
  font-family: var(--ff-heading);
  font-size: 2.5rem;
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--c-teal-light);
  transform-origin: left bottom;
}

.method-step--warm .method-step__bar {
  background: var(--c-amber);
}

.method-step--warm .method-step__num {
  color: var(--c-amber);
}

.method-step__title {
  margin: 20px 0 var(--space-1);
}

.method-step__text {
  color: var(--c-on-dark-muted);
  font-size: var(--fs-sm);
}

@media (hover: hover) {
  .method-step:hover {
    background: rgba(255, 255, 255, 0.07);
    transform: translateY(-4px);
  }
}

@media (min-width: 640px) {
  .method-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .method-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}


/* === CHI SIAMO (TEASER) + SPAZIO IMMAGINE ===
   Immagine a sinistra con badge "Dal 2014", testo e punti a destra
   (.about__grid--text-first per l'ordine inverso).
   Senza foto, .media-placeholder occupa lo stesso spazio (niente CLS). */
.about__grid {
  display: grid;
  gap: var(--space-6);
}

.about__head {
  margin-bottom: 0;
}

.about__head .lead + .lead {
  margin-top: calc(-1 * var(--space-half));
}

.about__points {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

.about__point {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--c-off-white);
  color: var(--c-text);
  transition:
    background-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.about__point-icon {
  display: inline-flex;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--c-teal-ink);
}

.about__point-icon .icon {
  width: 22px;
  height: 22px;
}

@media (hover: hover) {
  .about__point:hover {
    background: var(--c-teal-soft);
    transform: translateX(4px);
  }
}

.about__actions {
  margin-top: var(--space-4);
}

.link-download {
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
}

.link-download__meta {
  color: var(--c-fg-soft);
  font-weight: var(--fw-regular);
}

.about__visual {
  position: relative;
}

.about__media {
  position: relative;
  overflow: hidden;
  width: 100%; /* con max-height, una larghezza "auto" si restringerebbe */
  aspect-ratio: 4 / 3;
  margin: 0;
  border-radius: var(--radius);
  background: var(--c-placeholder);
}

.about__media-clip,
.about__media-inner {
  width: 100%;
  height: 100%;
}

.about__img,
.about__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.about__img {
  object-fit: cover;
}

.about__badge {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  display: grid;
  gap: 6px;
  padding: 18px 22px;
  border-radius: var(--radius);
  background: var(--c-navy-deep);
  color: var(--c-on-dark);
  box-shadow: var(--shadow-badge);
}

.about__badge-value {
  font-family: var(--ff-heading);
  font-size: 1.875rem;
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--c-teal-light);
  font-variant-numeric: tabular-nums;
  transform-origin: left bottom;
}

.about__badge-label {
  max-width: 24ch;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--c-on-dark-muted);
}

/* Spazio immagine predisposto (in attesa della foto): righe diagonali chiare */
.media-placeholder {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background-color: var(--c-placeholder);
  background-image: repeating-linear-gradient(135deg, rgba(0, 56, 72, 0.06) 0 12px, transparent 12px 24px);
}

.media-placeholder__mark {
  position: relative;
  width: 38%;
  height: auto;
  opacity: 0.16;
}

.media-placeholder__note {
  position: absolute;
  inset: var(--space-2) var(--space-2) auto var(--space-2);
  padding: var(--space-1) 12px;
  border: var(--border-w) dashed var(--c-amber-dark);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.85);
  color: var(--c-text-muted);
  font-size: var(--fs-label);
  line-height: 1.5;
}

@media (min-width: 640px) {
  .about__media {
    aspect-ratio: 4 / 5;
    max-height: 620px;
  }
}

@media (min-width: 1024px) {
  .about__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
    gap: var(--space-9);
  }

  .about__grid--text-first {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }
}


/* === CONFORMITÀ (ENTI E NORME) ===
   Pannello chiaro con schede tipografiche (nessun logo ufficiale).
   Enti con etichetta verde acqua, norme con etichetta ambra.
   Hover: sollevamento, bordo d'accento, sigla che si "ridecodifica"
   (scrambleText di Anime.js, gestito da main.js). */
.compliance__panel {
  padding: clamp(28px, 4vw, var(--space-7));
  background: var(--c-off-white);
  border: var(--border-w) solid var(--c-border);
  border-radius: var(--radius);
}

.section--alt .compliance__panel {
  background: var(--c-white);
}

.compliance__title {
  font-size: var(--fs-h2-sm);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.compliance__note {
  max-width: 52ch;
  color: var(--c-text-muted);
  font-size: var(--fs-small);
}

.compliance__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* Mobile (2 colonne): l'ultima scheda dispari occupa tutta la riga */
.compliance__list > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.compliance-badge {
  --badge-accent: var(--c-teal-ink);
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 22px;
  background: var(--c-white);
  border: var(--border-w) solid var(--c-border);
  border-radius: var(--radius-sm);
  transition:
    transform var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.section--alt .compliance-badge {
  background: var(--c-off-white);
}

.compliance-badge--norma {
  --badge-accent: var(--c-amber-ink);
}

.compliance-badge__type {
  font-size: var(--fs-tag);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--badge-accent);
}

.compliance-badge__name {
  margin-top: var(--space-half);
  font-family: var(--ff-heading);
  font-size: 1.375rem;
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--c-navy);
}

.compliance-badge__full {
  color: var(--c-text-muted);
  font-size: var(--fs-small);
  line-height: 1.5;
}

@media (hover: hover) {
  .compliance-badge:hover {
    transform: translateY(-3px);
    border-color: var(--badge-accent);
    box-shadow: var(--shadow-1);
  }
}

@media (min-width: 640px) {
  .compliance__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .compliance__list > :last-child:nth-child(odd) {
    grid-column: auto;
  }

  .compliance-badge__name {
    font-size: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .compliance__list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}


/* === MODULI (CAMPI, ERRORI, CARD MODULO) ===
   Etichette sempre visibili sopra il campo (niente placeholder al posto
   dell'etichetta). Stato di errore = bordo + messaggio testuale, mai solo colore. */
.form {
  display: grid;
  gap: 18px;
}

.form__grid {
  display: grid;
  gap: 18px;
}

.field {
  display: grid;
  gap: 6px;
  align-content: start;
}

.field__label {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--c-fg);
}

.field__optional {
  font-weight: var(--fw-regular);
  color: var(--c-fg-soft);
}

.field__hint {
  margin-top: -2px;
  font-size: var(--fs-label);
  color: var(--c-fg-soft);
}

.field__input {
  width: 100%;
  min-height: var(--control-h);
  padding: 0 var(--space-2);
  border: var(--border-input) solid var(--c-border-input);
  border-radius: var(--radius-sm);
  background: var(--c-white);
  color: var(--c-text);
  font-size: var(--fs-body);
  line-height: 1.4;
  transition:
    border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}

.field__input::placeholder {
  color: var(--c-text-muted);
  opacity: 0.8;
}

.field__input:hover {
  border-color: var(--c-text-muted);
}

/* Focus: bordo verde acqua più spesso (anello interno) + alone morbido */
.field__input:focus,
.field__input:focus-visible {
  outline: none;
  border-color: var(--c-teal-ink);
  box-shadow:
    0 0 0 1px var(--c-teal-ink),
    0 0 0 5px rgba(16, 188, 148, 0.18);
}

.field__input--textarea {
  min-height: calc(var(--control-h) * 3);
  padding-block: 12px;
  resize: vertical;
}

.field--invalid .field__input {
  border-color: var(--c-error);
}

.field--invalid .field__input:focus {
  box-shadow:
    0 0 0 1px var(--c-error),
    0 0 0 5px color-mix(in srgb, var(--c-error) 18%, transparent);
}

.field__error {
  color: var(--c-error);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.checkbox__input {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--c-teal-ink);
  cursor: pointer;
}

.checkbox__label {
  color: var(--c-fg-soft);
  font-size: var(--fs-small);
  line-height: 1.5;
  cursor: pointer;
}

.field--invalid .checkbox__input {
  outline: 2px solid var(--c-error);
  outline-offset: 2px;
}

/* Campo trappola per i bot: fuori schermo, non display:none */
.form__honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__summary {
  padding: var(--space-2) var(--space-3);
  border-left: 4px solid var(--c-error);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--c-error) 6%, var(--c-white));
  color: var(--c-text);
  font-size: var(--fs-small);
}

.form__summary:focus {
  outline: none;
}

.form__summary-title {
  font-weight: var(--fw-medium);
}

.form__summary-list {
  margin-top: var(--space-1);
  padding-left: var(--space-3);
}

.form__summary-list a {
  color: var(--c-error);
}

.form__footer {
  display: grid;
  gap: 12px;
  justify-items: start;
}

.form__submit[aria-busy='true'] {
  opacity: 0.75;
  cursor: progress;
}

.form__meta {
  color: var(--c-fg-soft);
  font-size: var(--fs-xs);
}

/* Modulo rapido: una colonna, bottone a tutta larghezza */
.form--compact .form__footer {
  justify-items: stretch;
  text-align: center;
}

.form--compact .form__submit {
  width: 100%;
  min-height: 56px;
}

@media (min-width: 640px) {
  .form--full .form__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field--wide {
    grid-column: 1 / -1;
  }

  .form--full .form__footer {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--space-3);
  }
}

/* Card che contiene un modulo: sempre chiara, anche dentro una sezione scura */
.form-card {
  --c-bg:      var(--c-white);
  --c-fg:      var(--c-text);
  --c-fg-soft: var(--c-text-muted);
  --c-strong:  var(--c-navy);
  --c-link:    var(--c-teal-ink);
  --c-focus:   var(--c-teal-ink);
  position: relative;
  display: grid;
  gap: var(--space-2);
  padding: clamp(var(--space-3), 3.5vw, var(--space-5));
  border: var(--border-w) solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-bg);
  color: var(--c-fg);
  box-shadow: var(--shadow-1);
}

.form-card--float {
  border-color: transparent;
  box-shadow: var(--shadow-float);
}

.form-card__title {
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--c-text);
}

.form-card__intro {
  margin-top: calc(-1 * var(--space-1));
  margin-bottom: var(--space-1);
  color: var(--c-fg-soft);
  font-size: var(--fs-sm);
}

.form-card__more {
  margin-top: var(--space-1);
  padding-top: 20px;
  border-top: var(--border-w) solid var(--c-border);
  color: var(--c-fg-soft);
  font-size: var(--fs-small);
}

.form-card__more a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-half);
  font-weight: var(--fw-bold);
}

.form-card__more .icon {
  width: 16px;
  height: 16px;
}


/* === CONTATTI IN EVIDENZA (SEZIONE FINALE) ===
   Sezione navy-deep con trama a griglia: messaggio + recapiti a sinistra,
   modulo rapido a destra. .contact-line è riusata nella fascia CTA. */
.cta-final__grid {
  display: grid;
  gap: var(--space-6);
}

.cta-final__intro {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  justify-items: start;
}

.cta-final__title {
  max-width: 18ch;
}

.contact-lines {
  display: grid;
  gap: var(--space-half);
  margin-top: var(--space-3);
}

.contact-line {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  color: var(--c-on-dark);
  font-weight: var(--fw-medium);
  text-decoration: none;
}

.contact-line__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: var(--border-w) solid var(--c-on-dark-border);
  border-radius: var(--radius-sm);
  color: var(--c-teal-light);
  transition:
    border-color var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
}

.contact-line__icon .icon {
  width: 20px;
  height: 20px;
}

a.contact-line:hover {
  color: var(--c-teal-light);
}

a.contact-line:hover .contact-line__icon {
  border-color: var(--c-teal-light);
  background: rgba(16, 211, 156, 0.08);
}

@media (min-width: 1024px) {
  .cta-final__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: start;
    gap: var(--space-9);
  }
}


/* === INTESTAZIONE PAGINA (PAGINE INTERNE) ===
   Stessa foto fissa dell'hero, con un velo più pieno: kicker con filo,
   H1 grande, testo. Da usare con $page_header = 'transparent'.
   Come .hero, non deve creare un contesto di sovrapposizione. */
.page-hero {
  position: relative;
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--header-h) + clamp(var(--space-7), 8vw, 104px));
  padding-bottom: clamp(var(--space-7), 8vw, 104px);
  background-color: var(--c-navy-deep);
  color: var(--c-fg);
}

.page-hero:has(.hero-photo) {
  background-color: transparent;
  background-image:
    linear-gradient(90deg, var(--veil-strong) 0%, rgba(1, 29, 38, 0.85) 55%, rgba(1, 29, 38, 0.62) 100%),
    linear-gradient(0deg, rgba(1, 29, 38, 0.6) 0%, rgba(1, 29, 38, 0) 60%);
}

.page-hero__inner {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}

.page-hero__title {
  max-width: 20ch;
  font-size: var(--fs-h1);
  line-height: 1.05;
  text-shadow: 0 2px 30px rgba(1, 29, 38, 0.4);
}

.page-hero__lead {
  max-width: 58ch;
  font-size: var(--fs-lead-lg);
  line-height: 1.6;
  color: var(--c-on-dark-soft);
}

.page-hero__actions {
  margin-top: var(--space-1);
}

.page-hero--center .page-hero__inner {
  justify-items: center;
  text-align: center;
}

.page-hero--center:has(.hero-photo) {
  background-image: linear-gradient(180deg, rgba(1, 29, 38, 0.88) 0%, rgba(1, 29, 38, 0.8) 100%);
}


/* === CONTATTI + GRAZIE === */
.contact__grid {
  align-items: start;
}

.contact-box {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3);
  background: var(--c-white);
  border: var(--border-w) solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}

.contact-box__title {
  font-size: var(--fs-h3);
  color: var(--c-text);
}

.contact-box__list {
  display: grid;
  gap: 12px;
  font-style: normal;
  color: var(--c-text-muted);
}

.contact-box__row {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Icone nei riquadri, come nella sezione contatti della homepage */
.contact-box__row > .icon,
.place__row > .icon {
  box-sizing: content-box;
  width: 20px;
  height: 20px;
  padding: 11px;
  border-radius: var(--radius-sm);
  background: var(--c-teal-soft);
  color: var(--c-teal-ink);
}

.contact-box__link {
  color: var(--c-text);
  text-decoration: none;
}

.contact-box__link:hover span {
  color: var(--c-teal-ink);
  text-decoration: underline;
}

.contact-box__tip {
  padding-top: var(--space-2);
  border-top: var(--border-w) solid var(--c-border);
  color: var(--c-text-muted);
  font-size: var(--fs-small);
}

.steps {
  display: grid;
  gap: var(--space-2);
}

.steps__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--c-text-muted);
}

.steps__item strong {
  color: var(--c-text);
}

.steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--space-4);
  height: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--c-navy);
  color: var(--c-teal-light);
  font-family: var(--ff-heading);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
}

@media (min-width: 1024px) {
  .contact-box {
    padding: var(--space-5) var(--space-4);
  }

  .contact__aside {
    position: sticky;
    top: calc(var(--header-h) + var(--space-3));
  }
}

.thanks__icon {
  display: inline-flex;
  color: var(--c-teal-light);
}

.thanks__icon .icon {
  width: var(--space-9);
  height: var(--space-9);
}

.thanks__icon [data-pop] {
  display: inline-flex;
}

.thanks__tip {
  max-width: 52ch;
  color: var(--c-fg-soft);
  font-size: var(--fs-small);
}

.thanks__actions {
  justify-content: center;
  margin-top: var(--space-2);
}


/* === PAGINE LEGALI (INDICE, TABELLE, DATI) ===
   Indice laterale fisso su desktop (in alto su mobile), testo a misura di
   lettura, tabelle scorrevoli in orizzontale su schermi stretti. */
.legal__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* le tabelle scorrono nel loro riquadro, non allargano la pagina */
  gap: var(--space-5);
}

.legal__toc {
  padding: var(--space-3);
  background: var(--c-off-white);
  border: var(--border-w) solid var(--c-border);
  border-radius: var(--radius);
  font-size: var(--fs-small);
}

.legal__toc-title {
  margin-bottom: var(--space-1);
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--c-teal-ink);
}

.legal__toc-list {
  display: grid;
  gap: var(--space-half);
}

.legal__toc-link {
  position: relative;
  display: block;
  padding: var(--space-half) 0 var(--space-half) var(--space-2);
  color: var(--c-text-muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

.legal__toc-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: var(--space-1);
  height: 2px;
  border-radius: 2px;
  background: var(--c-teal-ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out);
}

.legal__toc-link:hover,
.legal__toc-link[aria-current='true'] {
  color: var(--c-navy);
}

.legal__toc-link:hover::before,
.legal__toc-link[aria-current='true']::before {
  transform: scaleX(1);
}

.legal__body {
  max-width: 72ch;
}

.legal__updated {
  color: var(--c-text-muted);
  font-size: var(--fs-small);
}

.legal__section {
  padding-top: var(--space-2);
}

.legal__section > * + * {
  margin-top: var(--space-2);
}

.legal__section > * + h3 {
  margin-top: var(--space-4);
}

.legal__body h2 {
  font-size: var(--fs-h3);
  letter-spacing: -0.01em;
  color: var(--c-navy);
}

.legal__body h3 {
  font-size: var(--fs-body);
  color: var(--c-navy);
}

.legal__body li + li {
  margin-top: var(--space-1);
}

.legal__body code {
  padding: 1px var(--space-half);
  border: var(--border-w) solid var(--c-border);
  border-radius: var(--radius-badge);
  background: var(--c-off-white);
  font-size: 0.9em;
}

@media (min-width: 1024px) {
  .legal__grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    gap: var(--space-8);
    align-items: start;
  }

  .legal__toc {
    position: sticky;
    top: calc(var(--header-h) + var(--space-3));
  }
}

/* Tabelle di contenuto (privacy, cookie) */
.table-wrap {
  overflow-x: auto;
  border: var(--border-w) solid var(--c-border);
  border-radius: var(--radius-sm);
}

.table-wrap:focus-visible {
  outline-offset: 2px;
}

.table {
  min-width: 560px;
  font-size: var(--fs-small);
}

.table th,
.table td {
  padding: 12px var(--space-2);
  text-align: left;
  vertical-align: top;
  border-bottom: var(--border-w) solid var(--c-border);
}

.table thead th {
  background: var(--c-navy);
  color: var(--c-on-dark);
  font-family: var(--ff-body);
  font-weight: var(--fw-bold);
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.table tbody tr:nth-child(even) {
  background: var(--c-off-white);
}

/* Elenco dati (es. dati societari): etichetta + valore */
.facts {
  display: grid;
  border-top: var(--border-w) solid var(--c-border);
}

.facts__row {
  display: grid;
  gap: var(--space-half);
  padding: var(--space-2) 0;
  border-bottom: var(--border-w) solid var(--c-border);
}

.facts__label {
  color: var(--c-text-muted);
  font-size: var(--fs-small);
}

.facts__value {
  margin: 0;
  color: var(--c-text);
  font-weight: var(--fw-medium);
}

@media (min-width: 640px) {
  .facts__row {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--space-3);
  }
}

/* Pulsante con aspetto di link (azioni dentro un testo) */
.link-button {
  color: var(--c-link);
  font-weight: var(--fw-medium);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.link-button:hover {
  text-decoration-thickness: 2px;
}

/* Solo in locale: punti da verificare con il cliente */
.legal-check {
  padding: 0 2px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--c-amber) 28%, transparent);
  color: inherit;
  outline: 1px dashed var(--c-amber-dark);
  cursor: help;
}

.legal-check--missing {
  padding: 1px var(--space-1);
  background: var(--c-amber);
  color: var(--c-navy-deep);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}


/* === PAGINA SERVIZI (INDICE, DETTAGLIO) === */
/* Indice fisso sotto l'header: su mobile scorre in orizzontale */
.subnav {
  position: sticky;
  top: var(--header-h);
  z-index: calc(var(--z-header) - 1);
  background: var(--c-white);
  border-bottom: var(--border-w) solid var(--c-border);
  box-shadow: var(--shadow-1);
}

.subnav__list {
  display: flex;
  gap: var(--space-1);
  height: var(--subnav-h);
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  mask-image: linear-gradient(90deg, var(--c-navy-deep) 85%, transparent);
  -webkit-mask-image: linear-gradient(90deg, var(--c-navy-deep) 85%, transparent);
}

.subnav__list::-webkit-scrollbar {
  display: none;
}

.subnav__link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--space-2);
  border: var(--border-w) solid var(--c-border);
  border-radius: var(--radius-pill);
  color: var(--c-text-muted);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  text-decoration: none;
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.subnav__link:hover {
  border-color: var(--c-teal-ink);
  color: var(--c-teal-ink);
}

.subnav__link[aria-current='true'] {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: var(--c-white);
}

@media (min-width: 1024px) {
  .subnav__list {
    justify-content: safe center; /* "safe": se le voci non stanno, si allinea a sinistra invece di tagliare */
    mask-image: none;
    -webkit-mask-image: none;
  }
}

/* Le sezioni sotto l'indice fisso non devono finirci sotto quando ci si arriva da un link */
.subnav ~ .section {
  scroll-margin-top: var(--subnav-h);
}

.service-area__list {
  display: grid;
  gap: var(--space-3);
}

/* Scheda di dettaglio: introduzione + "cosa facciamo" */
.service-detail {
  scroll-margin-top: var(--subnav-h); /* si somma a scroll-padding-top di <html> (header) */
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-3);
  background: var(--c-white);
  border: var(--border-w) solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  transition:
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.section--alt .service-detail {
  border-color: transparent;
}

@media (hover: hover) {
  .service-detail:hover {
    box-shadow: var(--shadow-2);
  }
}

.service-detail:target {
  border-color: var(--c-teal-ink);
  box-shadow: 0 0 0 var(--focus-w) color-mix(in srgb, var(--c-teal-light) 35%, transparent);
}

.service-detail__intro {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  justify-items: start;
}

.service-detail__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  background: var(--c-navy);
  color: var(--c-teal-light);
}

.service-detail__svg {
  width: 26px;
  height: 26px;
}

.service-detail__title {
  font-size: var(--fs-h2-sm);
  letter-spacing: -0.02em;
  color: var(--c-text);
}

.service-detail__summary {
  color: var(--c-text-muted);
}

.service-detail__outcome {
  display: grid;
  gap: var(--space-half);
  width: 100%;
  margin-top: var(--space-1);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--c-teal-soft);
  color: var(--c-text);
  font-weight: var(--fw-medium);
}

.service-detail__outcome-label {
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-teal-ink);
}

.service-detail__subtitle {
  margin-bottom: var(--space-2);
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.checklist {
  display: grid;
  gap: 12px;
}

.checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--c-text);
}

.checklist__icon {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--c-teal-ink);
}

@media (min-width: 1024px) {
  .service-detail {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-8);
    padding: var(--space-6) var(--space-5);
  }

  .service-detail__body {
    padding-left: var(--space-6);
    border-left: var(--border-w) solid var(--c-border);
  }
}


/* === DOMANDE FREQUENTI + FASCIA CTA === */
.faq {
  display: grid;
  gap: 12px;
}

.faq__item {
  background: var(--c-white);
  border: var(--border-w) solid var(--c-border);
  border-radius: var(--radius);
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.faq__item:hover {
  border-color: var(--c-border-input);
}

.faq__item[open] {
  border-color: var(--c-teal-ink);
  box-shadow: var(--shadow-1);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 56px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  color: var(--c-text);
  font-family: var(--ff-heading);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  list-style: none;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question:hover {
  color: var(--c-teal-ink);
}

.faq__question:focus-visible {
  outline-offset: -3px;
}

/* Icona + / − disegnata con due barre, in un riquadro tondo */
.faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: var(--c-teal-soft);
  transition: background-color var(--dur-base) var(--ease-out);
}

.faq__icon::before,
.faq__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
  border-radius: 2px;
  background: var(--c-teal-ink);
  transition:
    transform var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
}

.faq__icon::after {
  transform: rotate(90deg);
}

.faq__item[open] .faq__icon {
  background: var(--c-navy);
}

.faq__item[open] .faq__icon::before,
.faq__item[open] .faq__icon::after {
  background: var(--c-teal-light);
}

.faq__item[open] .faq__icon::after {
  transform: rotate(0deg);
}

.faq__answer {
  overflow: hidden;
}

.faq__answer-inner {
  padding: 0 var(--space-3) var(--space-3);
  color: var(--c-text-muted);
}

.faq__answer-inner strong {
  color: var(--c-text);
}

@media (min-width: 1024px) {
  .faq-section {
    align-items: start;
  }
}

/* Fascia finale con invito al contatto (stessa trama della sezione contatti) */
.cta-band__inner {
  display: grid;
  gap: var(--space-4);
}

.cta-band__text {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
}

.cta-band__title {
  max-width: 20ch;
}

.cta-band__actions {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
}

@media (min-width: 1024px) {
  .cta-band__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: var(--space-8);
  }

  .cta-band__actions {
    justify-items: end;
  }
}


/* === PAGINA CHI SIAMO (VALORI, SEDE) === */
.about--page .about__head {
  max-width: none;
}

.value-grid {
  gap: var(--space-2);
}

/* Scheda valore: come le schede numeri (chiara, angoli morbidi), icona che si inverte */
.value-card {
  display: grid;
  align-content: start;
  gap: 12px;
  height: 100%;
  padding: var(--space-4) 28px;
  background: var(--c-off-white);
  border: var(--border-w) solid var(--c-border);
  border-radius: var(--radius);
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
}

.value-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--c-teal-soft);
  color: var(--c-teal-ink);
  transition:
    background-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

.value-card__svg {
  width: 26px;
  height: 26px;
}

.value-card__title {
  color: var(--c-text);
}

.value-card__text {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

@media (hover: hover) {
  .value-card:hover {
    transform: translateY(-4px);
    background: var(--c-white);
    box-shadow: var(--shadow-2);
  }

  .value-card:hover .value-card__icon {
    background: var(--c-navy);
    color: var(--c-teal-light);
  }
}

/* Dove siamo: immagine della sede + scheda recapiti */
.place__grid {
  align-items: stretch;
}

.place__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius);
  background: var(--c-placeholder);
}

.place__media-clip,
.place__media-inner,
.place__media picture,
.place__img {
  display: block;
  width: 100%;
  height: 100%;
}

.place__img {
  object-fit: cover;
}

.place__card {
  display: grid;
  align-content: center;
  gap: var(--space-3);
  justify-items: start;
}

.place__list {
  display: grid;
  gap: 12px;
  font-style: normal;
  color: var(--c-text-muted);
}

.place__row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.place__link {
  color: var(--c-text);
  text-decoration: none;
}

.place__link:hover span {
  color: var(--c-teal-ink);
  text-decoration: underline;
}

@media (min-width: 1024px) {
  .place__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .place__media {
    aspect-ratio: auto;
    min-height: 420px;
  }
}


/* === PAGINA 404 === */
.notfound__code {
  font-family: var(--ff-heading);
  font-size: clamp(5rem, 14vw, 9rem);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--ls-hero);
}

/* La sfumatura sta sull'elemento animato: su un genitore si perderebbe
   (il figlio trasformato viene disegnato su un livello a sé) */
.notfound__code [data-pop] {
  display: inline-block;
  background: linear-gradient(90deg, var(--c-teal-light), var(--c-amber));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.notfound__actions {
  justify-content: center;
  margin-top: var(--space-2);
}

.notfound__links-title {
  margin-bottom: var(--space-4);
  font-size: var(--fs-h2-sm);
  color: var(--c-text);
}

/* Scheda-collegamento: tutta cliccabile, sollevamento + freccia in hover */
.link-card {
  height: 100%;
}

.link-card__link {
  display: grid;
  align-content: start;
  gap: var(--space-1);
  height: 100%;
  padding: var(--space-4) 28px;
  background: var(--c-white);
  border: var(--border-w) solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  color: var(--c-text);
  text-decoration: none;
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.link-card__title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--c-text);
  font-family: var(--ff-heading);
  font-size: var(--fs-card);
  font-weight: var(--fw-semibold);
}

.link-card__text {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

.link-card__arrow {
  color: var(--c-teal-ink);
  transition: transform var(--dur-base) var(--ease-out);
}

.link-card__link:hover {
  transform: translateY(-4px);
  border-color: var(--c-teal-ink);
  box-shadow: var(--shadow-2);
}

.link-card__link:hover .link-card__arrow {
  transform: translateX(4px);
}

.link-card__link:active {
  transform: translateY(-1px);
  box-shadow: var(--shadow-1);
}


/* === ANIMAZIONI / RIDUZIONE MOVIMENTO ===
   [data-animate] e [data-animate-item] (figli di [data-animate-group])
   partono invisibili solo se JS è attivo e il movimento è consentito;
   main.js li anima con Anime.js (fade + translateY 20→0, 400ms).
   Rete di sicurezza: se Anime.js non parte, dopo 2.5s il contenuto compare. */
@keyframes pa-wipe-fallback {
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes pa-reveal-fallback {
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .js [data-animate] {
    opacity: 0;
    transform: translateY(20px);
    animation: pa-reveal-fallback 0s 2.5s forwards;
  }

  .js [data-animate].is-revealed,
  .js.motion-off [data-animate] {
    animation: none;
  }

  .js.motion-off [data-animate] {
    opacity: 1;
    transform: none;
  }

  /* Elementi di gruppo: a fine animazione main.js toglie gli stili inline,
     quindi lo stato finale è dato dalla classe (serve per l'hover CSS). */
  .js [data-animate-item]:not(.is-revealed) {
    opacity: 0;
    transform: translateY(20px);
    animation: pa-reveal-fallback 0s 2.5s forwards;
  }

  /* Durante l'entrata Anime.js scrive transform a ogni frame: la transition
     CSS dell'hover la rallenterebbe, quindi va sospesa */
  [data-animate-item].is-animating {
    transition: none;
  }

  .js.motion-off [data-animate-item] {
    opacity: 1;
    transform: none;
    animation: none;
  }

  /* Variante "wipe": l'immagine si scopre da sinistra a destra */
  /* La tendina sta su un figlio [data-wipe-clip]: l'elemento osservato
     deve restare "visibile", Chrome esclude dall'osservazione l'area
     nascosta da clip-path. */
  .js [data-animate='wipe'] {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .js [data-animate='wipe'] [data-wipe-clip] {
    clip-path: inset(0 100% 0 0);
    animation: pa-wipe-fallback 0s 2.5s forwards;
  }

  .js [data-animate='wipe'].is-revealed [data-wipe-clip] {
    animation: none;
  }

  .js.motion-off [data-animate='wipe'] [data-wipe-clip] {
    clip-path: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}