/* Indice delle quattro famiglie nel hero */
    .family-index { display: grid; align-self: center; }
    .family-index a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-m);
      padding-block: var(--space-m);
      border-top: 1px solid var(--line);
      font-size: 1.125rem;
      font-stretch: 112%;
      font-weight: 650;
      text-decoration: none;
      color: var(--ink);
      transition: color var(--dur-fast) ease;
    }
    .family-index a:last-child { border-bottom: 1px solid var(--line); }
    .family-index a:hover { color: var(--cobalt); }
    .family-index svg { flex: none; }
    @media (hover: hover) and (pointer: fine) {
      .family-index svg { transition: transform var(--dur-fast) var(--ease-out); }
      .family-index a:hover svg { transform: translateY(3px); }
    }

    /* ---- FAMIGLIA DI SERVIZI ----------------------------------------------
       Impaginazione unica per tutte e quattro: IMMAGINE grande in cima
       (immagini reali in img/servizi/, generate su misura), poi due
       colonne — intestazione (titolo + lead + settori) sticky a sinistra,
       elenco servizi a destra. Coerente e image-forward. */
    .fam__media {
      display: block;
      width: 100%;
      height: auto;              /* annulla l'attributo height → vale l'aspect-ratio */
      aspect-ratio: 16 / 7;
      object-fit: cover;
      border-radius: var(--radius-l);
      border: 1px solid var(--line);
    }
    .fam__grid {
      display: grid;
      gap: var(--space-xl);
      margin-top: clamp(1.75rem, 4vw, 3rem);
    }
    .fam__head { display: grid; gap: var(--space-m); align-content: start; }
    @media (min-width: 900px) {
      .fam__grid {
        grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
        gap: var(--space-3xl);
        align-items: start;
      }
      .fam__head { position: sticky; top: calc(var(--header-h) + var(--space-l)); }
    }

    /* Elenco servizi con hairline: testo, non card */
    .service-stack { display: grid; }
    .service-stack > li {
      display: grid;
      gap: var(--space-2xs);
      padding-block: var(--space-l);
      border-top: 1px solid var(--line);
    }
    .service-stack > li:last-child { border-bottom: 1px solid var(--line); }
    .service-stack h3 { font-size: 1.2rem; font-stretch: 112%; font-weight: 700; }
    .service-stack p { color: var(--ink-soft); max-width: 62ch; }

    /* Settori tipici, sotto l'intestazione */
    .sector-note { color: var(--ink-soft); text-wrap: pretty; }
    .sector-note strong { color: var(--ink); font-weight: 650; }
    .on-dark .sector-note { color: var(--text-on-dark-soft); }
    .on-dark .sector-note strong { color: var(--text-on-dark); }