/* ═══════════════════════════════════════════════════════════
   Font ospitati su questo server, non richiamati da Google.
   Nessuna chiamata esterna: l'indirizzo IP dei visitatori non
   raggiunge terze parti. Montserrat e Open Sans sono rilasciati
   con licenza SIL Open Font, che consente l'auto-hosting.
   Sottoinsieme latino: copre inglese, francese e italiano.
   ═══════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/montserrat-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/montserrat-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('fonts/open-sans-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/open-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/open-sans-600.woff2') format('woff2');
}

/* ═══════════════════════════════════════════════════════════
   InnerGrid — foglio di stile del sito
   Caricato da tutte le pagine: il browser lo tiene in cache, quindi
   dalla seconda pagina in poi non viene più scaricato.
   ═══════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body { margin: 0; background: #FFFFFF; }
main { display: block; }

/* salto al contenuto: invisibile finché non si arriva con il tasto Tab */
.ig-skip {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  font-family: 'Montserrat', system-ui, sans-serif; font-size: .85rem; font-weight: 600;
  background: #082030; color: #FFFFFF; padding: 12px 18px; text-decoration: none;
}
.ig-skip:focus { left: 0; }

/* ═══ corpo pagina ═══ */
/* ============================================================
   InnerGrid — scoped website styles
   Ogni selettore è prefissato .ig-root: nessun conflitto con il
   CSS del builder. Non modificare i nomi delle classi.
   ============================================================ */

.ig-root,
.ig-root *,
.ig-root *::before,
.ig-root *::after { box-sizing: border-box; margin: 0; padding: 0; }

.ig-root {
  /* --- brand tokens --- */
  --ig-teal: #289090;
  --ig-teal-700: #206D6F;
  --ig-teal-900: #174E4F;
  --ig-teal-50: #DBF4F5;
  --ig-navy: #082030;
  --ig-navy-700: #12384F;
  --ig-ambra: #EBA904;
  --ig-ambra-300: #F9D16C;
  --ig-arancio: #F18A48;

  --ig-ink: #1F2A33;
  --ig-ink-2: #44505A;
  --ig-ink-3: #626C77;   /* 4.86:1 su #F2F4F5; #6B7280 si fermava a 4.42 */
  --ig-line: #D8DCE0;
  --ig-line-soft: #E8EBED;
  --ig-surface: #F2F4F5;
  --ig-white: #FFFFFF;

  --ig-max: 1140px;
  --ig-gutter: clamp(20px, 5vw, 56px);

  font-family: 'Open Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ig-ink);
  background: var(--ig-white);
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}

.ig-root img { max-width: 100%; height: auto; display: block; }
.ig-root ul { list-style: none; }
.ig-root a { color: var(--ig-teal-700); text-decoration: none; }
.ig-root a:hover { text-decoration: underline; }
.ig-root a:focus-visible,
.ig-root button:focus-visible { outline: 2px solid var(--ig-teal); outline-offset: 3px; }

/* ---------- layout primitives ---------- */
.ig-wrap { max-width: var(--ig-max); margin-inline: auto; padding-inline: var(--ig-gutter); }
.ig-sec { padding-block: clamp(38px, 4.8vw, 62px); }
.ig-sec--tight { padding-block: clamp(30px, 3.6vw, 46px); }
.ig-rule { border: 0; border-top: 1px solid var(--ig-line); }

/* ---------- type ---------- */
.ig-root h1, .ig-root h2, .ig-root h3, .ig-root h4 {
  font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.012em;
  color: var(--ig-navy);
  text-wrap: balance;
}
.ig-h1 { font-size: clamp(2.05rem, 5.2vw, 3.35rem); }
.ig-h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.ig-h3 { font-size: clamp(1.12rem, 2vw, 1.3rem); line-height: 1.3; }
.ig-h4 { font-size: 1rem; line-height: 1.35; }

.ig-lead { font-weight: 300; font-size: clamp(1.06rem, 1.9vw, 1.32rem); line-height: 1.55; color: var(--ig-ink-2); max-width: 62ch; }
.ig-body { max-width: 66ch; color: var(--ig-ink-2); }
.ig-small { font-size: 0.875rem; line-height: 1.55; color: var(--ig-ink-3); }
.ig-note { font-size: 0.78rem; line-height: 1.5; color: var(--ig-ink-3); }

/* eyebrow: il glifo a griglia è il marcatore di sezione del brand */
.ig-eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ig-teal-700);
  margin-bottom: 18px;
}
.ig-eyebrow::before {
  content: ""; flex: none; width: 14px; height: 14px;
  background:
    radial-gradient(circle at 3px 3px, currentColor 2px, transparent 2.2px),
    radial-gradient(circle at 11px 3px, currentColor 2px, transparent 2.2px),
    radial-gradient(circle at 3px 11px, currentColor 2px, transparent 2.2px),
    radial-gradient(circle at 11px 11px, currentColor 2px, transparent 2.2px);
}
.ig-eyebrow--light { color: var(--ig-teal-50); }


/* ---------- surfaces ---------- */
.ig-band {
  background: var(--ig-navy);
  color: #C9D2D8;
  border-radius: 3px;
  padding: clamp(28px, 4vw, 48px) clamp(22px, 3.4vw, 44px);
}
.ig-band h2, .ig-band h3, .ig-band h4 { color: #FFFFFF; }
.ig-band .ig-lead, .ig-band .ig-body { color: #AEBAC3; }
.ig-band a { color: var(--ig-teal-50); }

.ig-panel {
  background: var(--ig-surface);
  border-radius: 3px;
  padding: clamp(22px, 3vw, 32px);
}

/* ---------- buttons ----------
   I selettori dei bottoni sono prefissati con .ig-root perche' devono
   battere la regola generica dei collegamenti: `.ig-root a` ha
   specificita' (0,1,1) e vincerebbe su un semplice `.ig-btn` (0,1,0),
   colorando il testo dei bottoni di teal sul fondo teal. */
.ig-root .ig-btn {
  display: inline-block;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 0.9rem; font-weight: 600; letter-spacing: 0.01em;
  padding: 14px 26px; border-radius: 2px;
  /* teal-700 e non teal-500: bianco su #289090 sta a 3.9:1, sotto la soglia AA */
  background: var(--ig-teal-700); color: #FFFFFF;
  border: 1px solid var(--ig-teal-700);
  transition: background .16s ease, border-color .16s ease;
}
.ig-root .ig-btn:hover { background: var(--ig-teal-900); border-color: var(--ig-teal-900); text-decoration: none; color: #FFF; }
.ig-root .ig-btn--ghost { background: transparent; color: var(--ig-navy); border-color: var(--ig-line); }
.ig-root .ig-btn--ghost:hover { background: transparent; border-color: var(--ig-navy); color: var(--ig-navy); }
.ig-root .ig-band .ig-btn--ghost { color: #FFFFFF; border-color: rgba(255,255,255,.34); }
.ig-root .ig-band .ig-btn--ghost:hover { border-color: #FFFFFF; color: #FFFFFF; }
.ig-btnrow { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.ig-root .ig-link {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 600; font-size: 0.9rem;
  display: inline-flex; align-items: center; gap: 8px;
}
.ig-link::after { content: "→"; transition: transform .16s ease; }
.ig-link:hover::after { transform: translateX(3px); }

/* ---------- grids ---------- */
.ig-grid { display: grid; gap: clamp(22px, 2.4vw, 32px); }
.ig-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.ig-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ig-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(26px, 3.2vw, 44px); align-items: start; }
.ig-split--wide { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }

/* ---------- item: blocco con filetto in testa, non card ---------- */
.ig-item { border-top: 2px solid var(--ig-navy); padding-top: 18px; }
.ig-item--teal { border-top-color: var(--ig-teal); }



.ig-item h3, .ig-item h4 { margin-bottom: 8px; }
.ig-item p { font-size: 0.95rem; color: var(--ig-ink-2); }
.ig-band .ig-item { border-top-color: rgba(255,255,255,.22); }
.ig-band .ig-item p { color: #AEBAC3; }

/* ---------- statistiche ---------- */







/* ---------- liste ---------- */
.ig-list { display: grid; gap: 10px; }
.ig-list li { position: relative; padding-left: 20px; font-size: 0.95rem; color: var(--ig-ink-2); }
.ig-list li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 6px; border-radius: 1px; background: var(--ig-teal);
}
.ig-list--ambra li::before { background: var(--ig-ambra); }


.ig-band .ig-list li { color: #AEBAC3; }

.ig-defs { display: grid; gap: 0; }
.ig-defs > div { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--ig-line-soft); }
.ig-defs dt { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; font-size: 0.9rem; color: var(--ig-navy); }
.ig-defs dd { font-size: 0.95rem; color: var(--ig-ink-2); }

/* ---------- FROM → THROUGH → TO ---------- */







/* pastiglia colore ecosistema: i due caldi restano separati da spazio, mai campiture adiacenti */


/* ============================================================
   IL MODELLO INNERGRID — matrice 2×2
   Tre stati cromatici, tre informazioni diverse:
   · teal / grigio  = appartenenza all'asse (inner o grid), statica
   · schiarimento   = gli altri tre quadranti arretrano, non sono spenti
   · ambra          = attivazione, e vive solo nella striscia azioni
   Non funziona col solo passaggio del mouse: ogni quadrante e ogni riga
   sono raggiungibili da tastiera e reagiscono al focus.
   ============================================================ */
/* l'intestazione degli assi esiste solo nella versione telefono */
.ig-mx__axhead { display: none; }
.ig-mx {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) 140px;
  grid-template-rows: 46px minmax(0, 1fr) 46px;
  align-items: center; justify-items: center;
}
.ig-mx__ax {
  font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ig-navy); text-align: center; font-size: 0.78rem;
}
.ig-mx__ax em {
  display: block; font-style: normal;
  font-family: 'Open Sans', system-ui, sans-serif; font-weight: 400;
  font-size: 0.72rem; letter-spacing: 0; text-transform: none;
  color: var(--ig-ink-3); margin-top: 3px; line-height: 1.35;
}
/* etichette laterali su due righe: "Invisible" / "What drives engagement" */
.ig-mx__ax--l, .ig-mx__ax--r { max-width: 136px; }
.ig-mx__ax--l em, .ig-mx__ax--r em { max-width: 136px; font-size: 0.68rem; white-space: nowrap; }

.ig-quads {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 14px; width: 100%; position: relative; padding: 14px;
}
/* i due assi disegnati dietro i quadranti: sono la croce del marchio */
.ig-quads::before, .ig-quads::after { content: ""; position: absolute; background: var(--ig-ambra); opacity: .85; }
.ig-quads::before { left: 50%; top: -14px; bottom: -14px; width: 2px; transform: translateX(-1px); }
.ig-quads::after { top: 50%; left: -14px; right: -14px; height: 2px; transform: translateY(-1px); }

.ig-q {
  position: relative; z-index: 1; border-radius: 4px;
  padding: clamp(18px, 2.2vw, 26px); border: 1px solid transparent;
  transition: transform .22s ease, box-shadow .22s ease, opacity .22s ease;
}
.ig-q--inner { background: var(--ig-teal-50); border-color: #BCEBEB; }
.ig-q--grid { background: var(--ig-surface); border-color: var(--ig-line); }
.ig-q__ico { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 18px; }
.ig-q--inner .ig-q__ico { background: #BCEBEB; color: var(--ig-teal-900); }
.ig-q--grid .ig-q__ico { background: #E2E6E9; color: var(--ig-navy); }
.ig-q h3 { font-size: clamp(0.95rem, 1.35vw, 1.05rem); line-height: 1.3; }
.ig-q p { font-size: 0.85rem; line-height: 1.5; color: var(--ig-ink-2); margin-top: 9px; }
.ig-q:focus-visible { outline: 2px solid var(--ig-ambra); outline-offset: 3px; }

.ig-mx.is-active .ig-q { opacity: .4; }
.ig-mx.is-active .ig-q.is-on { opacity: 1; transform: translateY(-3px); box-shadow: 0 10px 26px rgba(8,32,48,.13); }

/* striscia azioni: qui l'ambra significa "questo è il punto di intervento" */
.ig-acts {
  background: var(--ig-surface); border-radius: 4px; margin-top: clamp(26px, 3vw, 38px);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
}
.ig-act {
  padding: clamp(20px, 2.4vw, 28px); border-left: 1px solid var(--ig-line);
  transition: background .22s ease, box-shadow .22s ease;
}
.ig-act:first-child { border-left: 0; }
.ig-act.is-on { background: #FEF7E7; box-shadow: inset 0 3px 0 var(--ig-ambra); }
.ig-act.is-on .ig-act__line { width: 52px; background: #936B06; }
.ig-act:focus-visible { outline: 2px solid var(--ig-ambra); outline-offset: -2px; }
.ig-act__dot { width: 11px; height: 11px; border-radius: 2px; margin-bottom: 13px; display: block; }
.ig-act h3, .ig-act h4 { font-size: 0.95rem; }
.ig-act__sub { font-size: 0.85rem; color: var(--ig-ink-3); margin-top: 3px; }
.ig-act__line { width: 34px; height: 2px; background: var(--ig-ambra); margin: 14px 0 13px; border-radius: 1px; transition: width .22s ease, background .22s ease; }
.ig-act p { font-size: 0.86rem; line-height: 1.5; color: var(--ig-ink-2); }

/* ---------- READ → ACT: la sequenza concettuale ---------- */









/* ---------- accordion: la metodologia in dettaglio si apre a richiesta ---------- */











/* ============================================================
   APERTURA DI SEZIONE
   Ogni movimento della pagina Model si apre allo stesso modo:
   filetto ambra, occhiello, titolo. Il ritmo lo fa il filetto,
   non un fondo scuro — tre blocchi navy di fila appesantivano
   la pagina e appiattivano la gerarchia.
   ============================================================ */
.ig-open { border-top: 2px solid var(--ig-ambra); padding-top: 20px; margin-bottom: clamp(24px, 3vw, 34px); }
.ig-open__top { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.ig-open__k {
  font-family: 'Montserrat', system-ui, sans-serif; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ig-teal-700);
}
.ig-open__co { font-size: 0.8rem; color: var(--ig-ink-3); }
.ig-open__co::before { content: "·"; margin-right: 10px; color: var(--ig-line); }
.ig-band .ig-open { border-top-color: var(--ig-ambra); }
.ig-band .ig-open__k { color: var(--ig-ambra-300); }
.ig-band .ig-open__co { color: #8D9BA5; }
.ig-band .ig-open__co::before { color: rgba(255,255,255,.28); }

/* ---------- il localizzatore: la matrice ridotta a quattro quadratini ----------
   Non è un'icona: è lo stesso disegno che il lettore ha appena letto, in
   miniatura, con accesa la riga su cui il motore lavora. */
.ig-loc {
  display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr);
  gap: 2px; width: 30px; height: 30px; flex: none;
}
.ig-loc i { border: 1px solid var(--ig-line); border-radius: 1px; }
.ig-loc i.on { background: var(--ig-navy); border-color: var(--ig-navy); }
.ig-band .ig-loc i { border-color: rgba(255,255,255,.32); }
.ig-band .ig-loc i.on { background: var(--ig-ambra); border-color: var(--ig-ambra); }

/* ---------- FROM → THROUGH → TO su fondo chiaro ---------- */





/* una sezione su fondo chiaro spezza la sequenza di bianchi senza pesare */
.ig-sec--surface { background: var(--ig-surface); }

/* ---------- indice di pagina: le quattro domande come spina dorsale ---------- */
.ig-index { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); margin-top: clamp(26px, 3vw, 36px); }
.ig-index a {
  display: block; border-top: 2px solid var(--ig-ambra); padding-top: 14px;
  color: var(--ig-ink-2); text-decoration: none;
}
.ig-index a:hover { text-decoration: none; color: var(--ig-navy); }
.ig-index a:hover .ig-index__q { color: var(--ig-teal-900); }
.ig-index__q {
  display: block; font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600;
  font-size: 0.78rem; letter-spacing: 0.02em; color: var(--ig-teal-700); margin-bottom: 5px;
  transition: color .16s ease;
}
.ig-index__a { display: block; font-size: 0.85rem; line-height: 1.45; color: var(--ig-ink-3); }
.ig-index.ig-index--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* indice: filetti ambra solo in alto, su tutte le pagine. La prima sezione dopo
   un hero con indice non ripete il filetto ambra, che si leggerebbe come chiusura dell'indice. */
.ig-hero:has(.ig-index) + .ig-sec .ig-open:first-child { border-top: 0; padding-top: 0; }

/* due motori affiancati, versione leggera: solo cosa attivano */
.ig-eng { border-top: 2px solid var(--ig-navy); padding-top: 20px; }
.ig-eng__top { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
.ig-eng__co { font-size: 0.78rem; color: var(--ig-ink-3); }

/* ---------- partner: area logo neutra, proporzioni del marchio intatte ----------
   Lo slot è 150 × 56 px come da specifica. Finché non arrivano i file
   ufficiali mostra il nome composto in tipografia: nessun marchio
   ridisegnato, nessuna immagine presa da una ricerca generica. */


/* i tre marchi hanno proporzioni diverse: un unico limite d'altezza li
   renderebbe otticamente squilibrati. Nessuna deformazione, solo scala. */









/* ============================================================
   SERVICES — due letture affiancate
   A sinistra quello che l'azienda ha davanti, a destra quello che
   People & HR commissiona. Il filo ambra fra le due colonne si
   completa al passaggio del mouse o all'apertura: è il ponte fra
   il problema e il servizio, e si vede solo quando serve.
   ============================================================ */














































/* ============================================================
   IL SISTEMA — due territori, un solo responsabile
   Un oggetto unico: le due metà condivono il bordo, separate da
   un filetto di 1px e non da uno stacco, perché devono leggersi
   come due parti dello stesso sistema. La fascia navy le chiude.
   Ambra sul lato umano, teal su quello delle capacità: entrambi
   solo come filetto e marcatori, mai come testo — l'ambra su
   bianco non raggiunge il contrasto necessario per leggersi.
   ============================================================ */
.ig-syst { border: 1px solid var(--ig-line); border-radius: 3px; overflow: hidden; margin-top: clamp(26px, 3vw, 36px); }
.ig-syst__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ig-syst__half { padding: clamp(24px, 2.8vw, 36px); border-top: 3px solid; }
.ig-syst__half--h { background: #FDF9F3; border-top-color: var(--ig-ambra); }
.ig-syst__half--h .ig-syst__k { color: #7D5B05; }
.ig-syst__half--c { background: #E9F6F7; border-top-color: var(--ig-teal); border-left: 1px solid var(--ig-line); }
.ig-syst__k {
  font-family: 'Montserrat', system-ui, sans-serif; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ig-teal-700); display: block; margin-bottom: 12px;
}
.ig-syst__half h3 { font-size: clamp(1.14rem, 2vw, 1.34rem); line-height: 1.26; }
.ig-syst__sub {
  font-family: 'Montserrat', system-ui, sans-serif; font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ig-ink-3); margin-top: 8px;
}
.ig-syst__half > p:not(.ig-syst__sub) { font-size: 0.95rem; color: var(--ig-ink-2); margin-top: 14px; }

/* la fascia: chiude i due territori su un unico responsabile */
.ig-syst__band {
  background: var(--ig-navy); color: #C9D2D8;
  padding: clamp(24px, 2.8vw, 34px) clamp(24px, 2.8vw, 36px);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(22px, 3vw, 44px); align-items: center;
}
.ig-syst__band h3 { color: #FFFFFF; font-size: clamp(1.1rem, 1.9vw, 1.28rem); margin-top: 10px; }
.ig-syst__band .ig-syst__k { color: var(--ig-ambra-300); margin-bottom: 0; }
.ig-syst__steps {
  font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; font-size: 0.86rem;
  letter-spacing: 0.03em; color: #AEBAC3; margin-top: 12px;
}
.ig-syst__band > p { color: #AEBAC3; font-size: 0.95rem; }
.ig-syst__head { display: flex; align-items: center; gap: 14px; }

/* la citazione del marchio: 2×2, piccola e secondaria */
.ig-syst__cue { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; width: 18px; height: 18px; flex: none; }
.ig-syst__cue i { background: rgba(255,255,255,.26); border-radius: 1px; }
.ig-syst__cue i:nth-child(1) { background: var(--ig-ambra); }
.ig-syst__cue i:nth-child(4) { background: var(--ig-teal); }

@media (max-width: 820px) {
  .ig-syst__cols { grid-template-columns: minmax(0, 1fr); }
  .ig-syst__half--c { border-left: 0; }
  .ig-syst__band { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* ---------- passi numerati (solo dove l'ordine è informazione) ---------- */
.ig-steps { counter-reset: igstep; display: grid; gap: 0; }
.ig-steps > li {
  counter-increment: igstep;
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 20px;
  padding: 20px 0; border-bottom: 1px solid var(--ig-line-soft);
}
.ig-steps > li::before {
  content: counter(igstep, decimal-leading-zero);
  font-family: 'Montserrat', system-ui, sans-serif; font-weight: 700;
  font-size: 0.95rem; color: var(--ig-teal); font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.ig-steps h3, .ig-steps h4 { margin-bottom: 5px; }
.ig-steps p { font-size: 0.93rem; color: var(--ig-ink-2); }
.ig-band .ig-steps > li { border-bottom-color: rgba(255,255,255,.14); }
.ig-band .ig-steps > li::before { color: var(--ig-ambra); }
.ig-band .ig-steps p { color: #AEBAC3; }

/* ---------- casi ---------- */






/* ---------- hero ---------- */
.ig-hero { padding-top: clamp(32px, 4vw, 52px); }
.ig-hero__img { margin-top: clamp(24px, 3vw, 36px); border-radius: 3px; overflow: hidden; }
.ig-hero__img img { width: 100%; object-fit: cover; }
.ig-kicker {
  font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600;
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ig-teal-700); margin-bottom: 20px;
}


/* ---------- form contatti (segnaposto) ---------- */
.ig-form { display: grid; gap: 16px; }
.ig-field { display: grid; gap: 6px; }
.ig-field label { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ig-ink-2); }
.ig-field input, .ig-field textarea {
  font-family: inherit; font-size: 0.95rem; color: var(--ig-ink);
  padding: 12px 14px; border: 1px solid var(--ig-line); border-radius: 2px;
  background: var(--ig-white); width: 100%;
}
.ig-field input:focus, .ig-field textarea:focus { outline: 2px solid var(--ig-teal); outline-offset: 0; border-color: var(--ig-teal); }
.ig-field textarea { min-height: 120px; resize: vertical; }

/* trappola anti-spam: fuori schermo, non display:none (i bot lo riconoscono) */
.ig-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ig-consent { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: start; margin-top: 4px; }
.ig-consent input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--ig-teal-700); }
.ig-consent label { font-size: 0.85rem; line-height: 1.5; color: var(--ig-ink-2); }

.ig-alert { margin-top: 24px; padding: 16px 20px; border-radius: 2px; font-size: 0.93rem; border-left: 3px solid; }
.ig-alert--ok { background: var(--ig-teal-50); border-left-color: var(--ig-teal-700); color: var(--ig-teal-900); }
.ig-alert--err { background: #FDF0E8; border-left-color: #B24E10; color: #8D3E0C; }

/* ---------- fondatore ---------- */



/* ---------- tabelle ---------- */
.ig-tablewrap { overflow-x: auto; }
.ig-root table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 0.92rem; }
.ig-root th, .ig-root td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--ig-line-soft); vertical-align: top; }
.ig-root th { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ig-navy); border-bottom-color: var(--ig-line); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .ig-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ig-split, .ig-split--wide { grid-template-columns: minmax(0, 1fr); }
}

/* la matrice si restringe prima di rompersi, poi cambia forma del tutto */
@media (max-width: 1000px) {
  .ig-mx { grid-template-columns: 76px minmax(0, 1fr) 76px; }
  .ig-mx__ax--l, .ig-mx__ax--r, .ig-mx__ax--l em, .ig-mx__ax--r em { max-width: 74px; white-space: normal; }
}
@media (max-width: 820px) {
  .ig-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ig-act { border-left: 0; border-top: 1px solid var(--ig-line); }
  .ig-act:nth-child(2n) { border-left: 1px solid var(--ig-line); }
  
}

@media (max-width: 700px) {
  .ig-root { font-size: 16px; }
  .ig-index { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ig-index a { padding-block: 14px 16px; }
  .ig-open__co::before { display: none; }
  .ig-open__co { flex-basis: 100%; }
  .ig-g2, .ig-g4 { grid-template-columns: minmax(0, 1fr); }
  
  
  
  .ig-defs > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  
  .ig-acts { grid-template-columns: minmax(0, 1fr); }
  .ig-index { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .ig-index.ig-index--3 { grid-template-columns: minmax(0, 1fr); }
  .ig-act, .ig-act:nth-child(2n) { border-left: 0; }

  /* Su telefono il 2×2 non si rimpicciolisce: cambia forma.
     Prima i due assi dichiarati come intestazione, poi i quadranti in
     colonna — teal quelli inner, grigi quelli grid, così l'appartenenza
     resta leggibile senza la griglia. */
  .ig-mx { display: block; }
  .ig-mx__ax { display: none; }
  .ig-mx__axhead { display: flex; gap: 10px; margin-bottom: 18px; }
  .ig-mx__axhead > div { flex: 1; border-top: 2px solid var(--ig-ambra); padding-top: 10px; }
  .ig-mx__axhead strong {
    display: block; font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600;
    font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ig-navy);
  }
  .ig-mx__axhead em { display: block; font-style: normal; font-size: 0.8rem; color: var(--ig-ink-3); margin-top: 3px; line-height: 1.4; }
  .ig-quads { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding: 0; gap: 10px; }
  .ig-quads::before, .ig-quads::after { display: none; }
  .ig-q__ico { width: 40px; height: 40px; margin-bottom: 14px; }
  .ig-mx.is-active .ig-q { opacity: 1; }
  .ig-mx.is-active .ig-q.is-on { transform: none; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ig-root * { transition: none !important; animation: none !important; }
}

/* ═══ header ═══ */
/* ── InnerGrid · header ─ tutti i selettori sono sotto .ig-hdr ── */
.ig-hdr, .ig-hdr *, .ig-hdr *::before, .ig-hdr *::after { box-sizing: border-box; margin: 0; padding: 0; }

.ig-hdr {
  --h-teal: #289090;
  --h-teal-700: #206D6F;
  --h-navy: #082030;
  --h-ink: #44505A;
  --h-line: #D8DCE0;
  --h-surface: #F2F4F5;
  font-family: 'Open Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: #FFFFFF;
  border-bottom: 1px solid var(--h-line);

  /* Header fisso in alto. */
  position: sticky; top: 0; z-index: 900;
  transition: box-shadow .2s ease;
}
.ig-hdr.is-fixed { position: fixed; top: 0; left: 0; right: 0; }
.ig-hdr.is-scrolled { box-shadow: 0 1px 14px rgba(8,32,48,.10); }

.ig-hdr__in {
  max-width: 1140px; margin-inline: auto;
  padding: 16px clamp(20px, 5vw, 56px);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

.ig-hdr__logo { display: block; flex: none; line-height: 0; }
.ig-hdr__logo img { height: 34px; width: auto; display: block; }

.ig-hdr__nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ig-hdr__nav a {
  font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  font-size: .84rem; font-weight: 600; letter-spacing: .01em;
  color: var(--h-ink); text-decoration: none;
  padding: 9px 14px; border-radius: 2px;
  transition: background .16s ease, color .16s ease;
}
.ig-hdr__nav a:hover { background: var(--h-surface); color: var(--h-navy); }
.ig-hdr__nav a[aria-current="page"] { color: var(--h-navy); box-shadow: inset 0 -2px 0 var(--h-teal); border-radius: 0; }

/* prefissato con .ig-hdr per battere `.ig-hdr__nav a`, che altrimenti
   imporrebbe il colore del testo del menu anche al bottone */
.ig-hdr .ig-hdr__cta {
  font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  font-size: .84rem; font-weight: 600;
  color: #FFFFFF; text-decoration: none;
  /* teal-700: bianco su #289090 non raggiunge il 4.5:1 */
  background: var(--h-teal-700); border: 1px solid var(--h-teal-700);
  padding: 10px 18px; border-radius: 2px; margin-left: 10px;
  white-space: nowrap;
  transition: background .16s ease, border-color .16s ease;
}
.ig-hdr .ig-hdr__cta:hover { background: #174E4F; border-color: #174E4F; color: #FFFFFF; }

.ig-hdr a:focus-visible { outline: 2px solid var(--h-teal); outline-offset: 2px; }

/* ── menu mobile, senza JavaScript ── */
.ig-hdr__cb { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ig-hdr__burger { display: none; flex: none; cursor: pointer; padding: 10px; margin-right: -10px; }
.ig-hdr__burger span, .ig-hdr__burger span::before, .ig-hdr__burger span::after {
  display: block; width: 22px; height: 2px; background: var(--h-navy); border-radius: 1px; content: "";
}
.ig-hdr__burger span::before { transform: translateY(-7px); }
.ig-hdr__burger span::after { transform: translateY(5px); }
.ig-hdr__cb:focus-visible + .ig-hdr__in .ig-hdr__burger { outline: 2px solid var(--h-teal); outline-offset: 2px; }

@media (max-width: 860px) {
  .ig-hdr__in { flex-wrap: wrap; }
  .ig-hdr__burger { display: block; }
  .ig-hdr__nav {
    display: none; order: 3;
    flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0;
    padding-top: 10px; margin-top: 14px; border-top: 1px solid var(--h-line);
  }
  .ig-hdr__cb:checked + .ig-hdr__in .ig-hdr__nav {
    display: flex;
    /* con l'header fisso il menu aperto non deve superare lo schermo */
    max-height: calc(100vh - 110px); overflow-y: auto;
  }
  .ig-hdr__nav a { padding: 13px 4px; font-size: .95rem; border-radius: 0; }
  .ig-hdr__nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--h-teal); padding-left: 14px; }
  .ig-hdr .ig-hdr__cta { margin: 12px 0 4px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) { .ig-hdr * { transition: none !important; } }

/* ═══ footer ═══ */
/* ── InnerGrid · footer ─ tutti i selettori sono sotto .ig-ftr ── */
.ig-ftr, .ig-ftr *, .ig-ftr *::before, .ig-ftr *::after { box-sizing: border-box; margin: 0; padding: 0; }

.ig-ftr {
  --f-teal: #289090;
  --f-teal-50: #DBF4F5;
  --f-navy: #082030;
  --f-dim: #8E9BA4;
  --f-mid: #AEBAC3;
  font-family: 'Open Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 15px; line-height: 1.6;
  background: var(--f-navy);
  color: var(--f-mid);
  border-top: 3px solid var(--f-teal);
}

.ig-ftr__in {
  max-width: 1140px; margin-inline: auto;
  padding: clamp(40px, 6vw, 64px) clamp(20px, 5vw, 56px) 0;
  display: grid; gap: clamp(32px, 4vw, 56px);
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.2fr);
}

.ig-ftr__logo img { height: 34px; width: auto; display: block; }
.ig-ftr__claim {
  font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  font-weight: 600; font-size: 1rem; line-height: 1.45; color: #FFFFFF;
  margin-top: 20px;
}
.ig-ftr__desc { font-size: .88rem; color: var(--f-dim); margin-top: 14px; max-width: 34ch; }

.ig-ftr h2 {
  font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  font-weight: 600; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--f-teal-50); margin-bottom: 16px;
}

.ig-ftr ul { list-style: none; display: grid; gap: 9px; }
.ig-ftr a { color: var(--f-mid); text-decoration: none; font-size: .9rem; }
.ig-ftr a:hover { color: #FFFFFF; text-decoration: underline; }
.ig-ftr a:focus-visible { outline: 2px solid var(--f-teal); outline-offset: 2px; }

.ig-ftr dl { display: grid; gap: 12px; }
.ig-ftr dt {
  font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  font-weight: 600; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--f-dim); margin-bottom: 2px;
}
.ig-ftr dd { font-size: .9rem; color: var(--f-mid); }

.ig-ftr__bar {
  max-width: 1140px; margin-inline: auto;
  margin-top: clamp(36px, 5vw, 56px);
  padding: 20px clamp(20px, 5vw, 56px) clamp(28px, 4vw, 40px);
  border-top: 1px solid rgba(255,255,255,.13);
  display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: baseline;
  font-size: .8rem; color: var(--f-dim);
}
.ig-ftr__bar a { font-size: .8rem; }
.ig-ftr__bar span:first-child { margin-right: auto; }

@media (max-width: 820px) {
  .ig-ftr__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ig-ftr__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .ig-ftr__in { grid-template-columns: minmax(0, 1fr); }
  .ig-ftr__bar span:first-child { margin-right: 0; flex-basis: 100%; }
}


/* ═══════════════════════════════════════════════════════════
   Componenti di pagina
   Fino alla v1.1 vivevano in blocchi <style> dentro le singole pagine.
   Consolidati qui il 16 ottobre 2026 nello stesso ordine in cui la pagina
   li caricava (dopo questo foglio), quindi la cascata non cambia.
   Tutti i selettori sono già specifici del componente (.ig-why, .ig-how,
   .ig-meth, .ig-mxrow, .ig-sv-*, .ig-svc2, .ig-eco-*, .ig-choice, .ig-fdr).
   ═══════════════════════════════════════════════════════════ */

/* ── Home · 4 · Why InnerGrid — due campi pari che si sovrappongono: Inner (forme
   organiche teal del centro del marchio, in tinta) e Grid (quadrati del
   marchio, in tinta, uno in ambra). Nessuna sequenza, nessuna
   trasformazione: coesistenza. Statico, senza JavaScript. ── */
.ig-why__head{max-width:880px}
.ig-why__head .ig-h2{margin-top:16px}
.ig-why__intro{margin:14px 0 0;font-weight:400;font-size:1.08rem;line-height:1.55;color:var(--ig-ink-2);max-width:none}
.ig-why__main{display:grid;grid-template-columns:34fr 32fr 34fr;grid-template-areas:"li vz lg";column-gap:28px;align-items:center;margin-top:36px}
.ig-why__viz{grid-area:vz;display:block;width:100%;max-width:310px;height:auto;margin:0 auto;aspect-ratio:3/2}
.ig-why__lbl.inner{grid-area:li;text-align:right;justify-self:end}
.ig-why__lbl.grid{grid-area:lg;text-align:left;justify-self:start}
.ig-why__name{font-family:'Montserrat',system-ui,sans-serif;font-weight:600;font-size:1.65rem;line-height:1.15;color:var(--ig-navy);margin:0 0 8px}
.ig-why__desc{margin:0 0 6px;font-weight:400;font-size:1rem;line-height:1.45;color:var(--ig-ink-2)}
.ig-why__terms{margin:0;font-weight:400;font-size:.9rem;line-height:1.5;color:var(--ig-ink-3)}
@media (min-width:1024px){.ig-why__terms{white-space:nowrap}}
.ig-why__close{margin:32px auto 0;max-width:62ch;text-align:center}
.ig-why__close p{margin:0;font-family:'Montserrat',system-ui,sans-serif;font-weight:600;font-size:1.12rem;line-height:1.5;color:var(--ig-navy)}
.ig-why__close .ig-btnrow{justify-content:center;margin-top:24px}
@media (max-width:1023px){
  .ig-why__main{grid-template-columns:1fr 1fr;grid-template-areas:"vz vz" "li lg";row-gap:32px;column-gap:32px}
  .ig-why__viz{max-width:280px}
  .ig-why__lbl.inner,.ig-why__lbl.grid{text-align:center;justify-self:center}
}
@media (max-width:767px){
  .ig-why__main{grid-template-columns:1fr;grid-template-areas:"vz" "li" "lg";row-gap:28px;margin-top:32px}
  .ig-why__viz{max-width:230px}
  .ig-why__name{font-size:1.5rem}
}

/* ── Home · 5 · How InnerGrid works: una sfida, la squadra giusta intorno.
   Titolo e testo a tutta larghezza, partner, poi i tre "One" sotto
   l'etichetta "One coordinated delivery". Classi .ig-how ── */
.ig-how { --how-accent: #7CCFCF; }
.ig-how .ig-h2 { margin-top: 12px; }
.ig-how__intro { margin-top: 14px; max-width: 92ch; color: #C9D2D8; font-size: 1rem; line-height: 1.6; }
.ig-how__rule { border: 0; border-top: 1px solid rgba(255,255,255,.16); margin: clamp(26px,3vw,34px) 0 0; }
.ig-how__h { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; font-size: 1.1rem; color: #fff; margin-top: clamp(24px,2.8vw,30px); }
.ig-how__partners { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0 clamp(20px,3vw,40px); margin-top: 18px; }
.ig-how__partners > div { border-top: 1px solid rgba(255,255,255,.3); padding-top: 14px; min-width: 0; }
.ig-how__partners h4 { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; font-size: 1.05rem; margin: 0 0 6px; }
.ig-how__partners h4 a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.28); }
.ig-how__partners h4 a:hover { border-bottom-color: var(--how-accent); }
.ig-how__partners p { font-size: .9rem; line-height: 1.5; color: #AEBAC3; margin: 0; }
.ig-how__div { display: flex; align-items: center; gap: 14px; margin-top: clamp(26px,3vw,34px); }
.ig-how__div::before, .ig-how__div::after { content: ""; flex: 1; border-top: 1px solid rgba(255,255,255,.16); }
.ig-how__div span { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--how-accent); }
.ig-how__ones { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0 clamp(20px,3vw,40px); margin-top: 16px; list-style: none; padding: 0; }
.ig-how__ones li { min-width: 0; }
.ig-how__n { display: block; font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; font-size: .85rem; color: var(--how-accent); font-variant-numeric: tabular-nums; }
.ig-how__ones h3 { color: #fff; font-size: 1.1rem; margin: 10px 0 8px; }
.ig-how__ones p { font-size: .9rem; line-height: 1.5; color: #AEBAC3; margin: 0; }
@media (max-width: 760px) {
  .ig-how__partners, .ig-how__ones { grid-template-columns: minmax(0,1fr); }
  .ig-how__partners > div + div { margin-top: 18px; }
  .ig-how__ones li + li { margin-top: 22px; }
}

/* ── Model · Model: spazio sotto l'indice ridotto; croce ambra degli assi contenuta
   nel riquadro dei quadranti, così non tocca le etichette degli assi. ── */
.ig-hero--model { padding-bottom: clamp(6px, 1vw, 14px); }
.ig-mx .ig-quads::before { top: 0; bottom: 0; }
.ig-mx .ig-quads::after { left: 0; right: 0; }

/* ── Model · What we use: schede metodologia (classi .ig-meth).
   Colore semantico del sito: human engine = teal, capability system = navy.
   L'ambra non entra in questo componente. ── */
.ig-meths { display: grid; gap: 16px; }
.ig-meth {
  --eng: var(--ig-teal); --eng-ink: var(--ig-teal-700);
  background: var(--ig-white); border: 1px solid var(--ig-line-soft); border-left: 3px solid var(--eng);
  border-radius: 6px; transition: box-shadow .2s ease, border-color .2s ease;
}
.ig-meth--c { --eng: var(--ig-navy); --eng-ink: var(--ig-navy); }
.ig-meth:hover, .ig-meth[open] { box-shadow: 0 6px 22px rgba(8,32,48,.06); }
.ig-meth > summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0,1fr) 24px;
  align-items: center; column-gap: 24px; padding: 26px 28px;
}
.ig-meth > summary::-webkit-details-marker { display: none; }
.ig-meth > summary:focus-visible { outline: 2px solid var(--ig-teal); outline-offset: -2px; border-radius: 4px; }
.ig-meth__hd { display: flex; flex-direction: column; min-width: 0; }
.ig-meth__cat {
  font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--eng-ink);
}
.ig-meth__t {
  font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; font-size: clamp(1.15rem, 2.1vw, 1.42rem);
  line-height: 1.25; color: var(--ig-navy); margin-top: 8px; text-wrap: balance;
}
.ig-meth__src { font-size: .85rem; color: var(--ig-ink-3); margin-top: 4px; }
.ig-meth__rel {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--ig-line-soft);
  font-size: .92rem; line-height: 1.45; color: var(--ig-ink-2);
}
.ig-meth__rk {
  font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; font-size: .66rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ig-ink-3);
}
.ig-meth__chev {
  width: 10px; height: 10px; justify-self: end; margin-right: 6px;
  border-right: 2px solid var(--ig-teal); border-bottom: 2px solid var(--ig-teal);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .22s ease;
}
.ig-meth[open] .ig-meth__chev { transform: rotate(225deg) translate(-2px, -2px); }

.ig-meth__body { margin: 0 28px; padding: 28px 0; border-top: 1px solid var(--ig-line); }
.ig-meth__cols { display: grid; grid-template-columns: 40fr 60fr; column-gap: 44px; }
.ig-meth__cols > * { min-width: 0; }
.ig-meth .ig-meth__k {
  font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; font-size: .74rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ig-ink-3); margin: 0 0 12px;
}
.ig-meth__ctx p { font-size: 1rem; line-height: 1.65; color: var(--ig-ink-2); max-width: 46ch; }
.ig-meth__steps { list-style: none; margin: 0; padding: 0; }
.ig-meth__steps > li {
  display: grid; grid-template-columns: 34px minmax(0,1fr); column-gap: 10px;
  padding: 14px 0; border-top: 1px solid var(--ig-line-soft);
}
.ig-meth__steps > li:first-child { border-top: 0; padding-top: 2px; }
.ig-meth__n {
  font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; font-size: .9rem;
  color: var(--eng-ink); font-variant-numeric: tabular-nums; line-height: 1.6;
}
.ig-meth .ig-meth__st {
  font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; font-size: 1.02rem;
  color: var(--ig-navy); margin: 0 0 4px; line-height: 1.4;
}
.ig-meth__steps p { font-size: .94rem; line-height: 1.55; color: var(--ig-ink-2); margin: 0; }
.ig-meth__impl {
  margin-top: 26px; padding: 20px 24px; background: var(--ig-surface);
  border-left: 2px solid var(--eng); border-radius: 0 4px 4px 0;
}
.ig-meth .ig-meth__impl .ig-meth__k { color: var(--eng-ink); margin-bottom: 8px; }
.ig-meth__impl p { font-size: 1rem; line-height: 1.6; color: var(--ig-ink); margin: 0; max-width: 80ch; }

/* apertura misurata, dove il browser la supporta; altrove apertura immediata */
@supports (interpolate-size: allow-keywords) {
  .ig-meths { interpolate-size: allow-keywords; }
  .ig-meth::details-content {
    block-size: 0; overflow: clip;
    transition: block-size .28s ease, content-visibility .28s allow-discrete;
  }
  .ig-meth[open]::details-content { block-size: auto; }
}
@media (max-width: 767px) {
  .ig-meth > summary { padding: 20px 18px; column-gap: 14px; }
  .ig-meth__body { margin: 0 18px; padding: 22px 0; }
  .ig-meth__cols { grid-template-columns: minmax(0,1fr); row-gap: 26px; }
  .ig-meth__impl { padding: 18px; margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .ig-meth, .ig-meth__chev, .ig-meth::details-content { transition: none !important; }
}

/* ── Model · Etichette di riga della matrice: esistono solo su telefono, dove gli assi
   People / Organisation sono nascosti. ── */
.ig-mxrow { display: none; }
@media (max-width: 700px) {
  .ig-mxrow {
    display: block; margin: 8px 0 0;
    font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600;
    font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ig-navy);
  }
  .ig-mxrow:first-child { margin-top: 0; }
  .ig-mxrow em {
    display: block; font-style: normal; text-transform: none; letter-spacing: 0;
    font-family: 'Open Sans', system-ui, sans-serif; font-weight: 400;
    font-size: 0.8rem; color: var(--ig-ink-3); margin-top: 3px;
  }
}

/* ── Services · SERVICES v2: classi .ig-sv*.
   .ig-eng-sec, .ig-row*, .ig-rowhead, .ig-measure, .ig-ftt, che non usa più nessuna pagina. ── */
/* hero tipografico: niente immagine, griglia solo come dettaglio */
.ig-sv-hero { padding-bottom: clamp(6px, 1vw, 14px); }
.ig-sv-hero .ig-h1 { max-width: 14ch; }
.ig-sv-hero .ig-lead { margin-top: 20px; max-width: 54ch; }

/* navigazione per livello */
.ig-sv-key { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; font-size: .86rem; color: var(--ig-ink-3); }
.ig-sv-key span { display: inline-flex; align-items: center; gap: 8px; }
.ig-sv-key i { width: 10px; height: 10px; border-radius: 2px; background: var(--ig-teal); }
.ig-sv-key i.c { background: var(--ig-navy); }
.ig-sv-ind { margin: clamp(18px, 2vw, 24px) 0 0; font-size: .86rem; line-height: 1.5; color: var(--ig-ink-3); max-width: 86ch; }
.ig-sv-tabs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; border-bottom: 1px solid var(--ig-line); margin-top: clamp(22px, 2.6vw, 30px); }
.ig-sv-tab { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: flex; flex-direction: column; justify-content: flex-start; text-align: left; min-width: 0; padding: 14px 18px 16px;
  border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; margin-bottom: -1px;
  transition: background-color .22s ease, box-shadow .22s ease, border-color .22s ease; }
.ig-sv-tab b { display: flex; align-items: baseline; gap: 10px; font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; font-size: 1.08rem; color: var(--ig-ink-3); transition: color .16s ease; }
.ig-sv-tab b em { font-style: normal; font-size: .74rem; color: var(--ig-ink-3); font-weight: 600; }
.ig-sv-tab small { display: block; margin-top: 4px; font-size: .84rem; line-height: 1.4; color: var(--ig-ink-3); }
.ig-sv-tab:hover { background: var(--ig-surface); }
.ig-sv-tab:hover b { color: var(--ig-navy); }
/* scheda attiva: superficie grigia del sito, filetto teal in alto, unita al pannello (niente sfumature) */
.ig-sv-tab[aria-selected="true"] { background: var(--ig-surface); border-color: var(--ig-line); }
.ig-sv-tab[aria-selected="true"]::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--ig-teal); border-radius: 8px 8px 0 0; }
.ig-sv-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ig-surface); }
.ig-sv-tab[aria-selected="true"] b, .ig-sv-tab[aria-selected="true"] b em { color: var(--ig-navy); }
.ig-sv-tab[aria-selected="true"] small { color: var(--ig-teal-900); }
.ig-sv-tab:focus-visible { outline: 2px solid var(--ig-teal-700); outline-offset: 2px; }
/* pannello del livello attivo: stessa superficie piatta della scheda, schede servizio bianche */
.ig-sv.is-tabbed .ig-sv-panel { padding: 22px clamp(14px, 2vw, 22px) 24px; border: 1px solid var(--ig-line); border-top: 0;
  border-radius: 0 0 8px 8px; background: var(--ig-surface); }
.ig-sv-tabs[hidden] { display: none; }
/* senza JavaScript: i tre pannelli restano uno sotto l'altro, ciascuno col suo titolo */
.ig-sv-panel { padding-top: 22px; }
.ig-sv-panel + .ig-sv-panel { margin-top: 26px; }
.ig-sv.is-tabbed .ig-sv-panel + .ig-sv-panel { margin-top: 0; }
.ig-sv-panel__h { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ig-navy); margin: 0 0 14px; }
.ig-sv.is-tabbed .ig-sv-panel__h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ig-sv-list { display: grid; gap: 14px; }

/* scheda servizio */
.ig-svc2 { --eng: var(--ig-teal); --eng-ink: var(--ig-teal-700); --tint: #F1F9F9;
  background: var(--ig-white); border: 1px solid var(--ig-line-soft); border-left: 3px solid var(--eng); border-radius: 6px;
  transition: box-shadow .2s ease; }
.ig-svc2--c { --eng: var(--ig-navy); --eng-ink: var(--ig-navy); --tint: var(--ig-surface); }
.ig-svc2:hover, .ig-svc2[open] { box-shadow: 0 6px 22px rgba(8,32,48,.06); }
.ig-svc2 > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0,1fr) 24px; column-gap: 24px; align-items: center; padding: 22px 26px; }
.ig-svc2 > summary::-webkit-details-marker { display: none; }
.ig-svc2 > summary:focus-visible { outline: 2px solid var(--ig-teal); outline-offset: -2px; border-radius: 4px; }
.ig-svc2__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.ig-svc2__name { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; font-size: .95rem; color: var(--eng-ink); }
.ig-svc2__eng { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; font-size: .64rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ig-ink-3); }
.ig-svc2__head { display: block; font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; font-size: clamp(1.14rem, 2vw, 1.36rem); line-height: 1.28; color: var(--ig-navy); margin-top: 8px; text-wrap: balance; }
.ig-svc2__need { display: block; font-size: .96rem; line-height: 1.5; color: var(--ig-ink-2); margin-top: 6px; max-width: 78ch; }
.ig-svc2__chev { width: 10px; height: 10px; justify-self: end; margin-right: 6px; border-right: 2px solid var(--eng-ink); border-bottom: 2px solid var(--eng-ink);
  transform: rotate(45deg) translate(-2px,-2px); transition: transform .22s ease; }
.ig-svc2[open] .ig-svc2__chev { transform: rotate(225deg) translate(-2px,-2px); }
.ig-svc2__body { margin: 0 26px; padding: 24px 0 26px; border-top: 1px solid var(--ig-line); }
.ig-svc2__cols { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 26px clamp(22px, 2.8vw, 38px); }
.ig-svc2__cols > div { min-width: 0; }
.ig-svc2 .ig-svc2__k { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ig-ink-3); margin: 0 0 8px; }
.ig-svc2__cols p { font-size: .94rem; line-height: 1.6; color: var(--ig-ink-2); margin: 0; }
.ig-svc2__imp { margin-top: 24px; padding: 18px 22px; background: var(--tint); border-left: 2px solid var(--eng); border-radius: 0 4px 4px 0;
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 10px 26px; align-items: start; }
.ig-svc2 .ig-svc2__imp .ig-svc2__k { color: var(--eng-ink); margin: 2px 0 0; }
.ig-svc2__imp ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 26px; }
.ig-svc2__imp li { position: relative; padding-left: 16px; font-size: .94rem; line-height: 1.45; color: var(--ig-ink); }
.ig-svc2__imp li::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border-radius: 1px; background: var(--eng); }
@supports (interpolate-size: allow-keywords) {
  .ig-sv-list { interpolate-size: allow-keywords; }
  .ig-svc2::details-content { block-size: 0; overflow: clip; transition: block-size .26s ease, content-visibility .26s allow-discrete; }
  .ig-svc2[open]::details-content { block-size: auto; }
}
.ig-sv-entry { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 16px 0 0; border-top: 1px dashed var(--ig-line); font-size: .95rem; color: var(--ig-ink-2); }
.ig-sv-entry strong { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; color: var(--ig-navy); }

/* come lavoriamo */
.ig-sv-del { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 0 clamp(16px, 2vw, 26px); list-style: none; margin: 0; padding: 0; }
.ig-sv-del li { border-top: 2px solid var(--ig-navy); padding-top: 14px; min-width: 0; }
.ig-sv-del h3 { font-size: 1rem; line-height: 1.3; margin: 0 0 8px; }
.ig-sv-del p { font-size: .9rem; line-height: 1.55; color: var(--ig-ink-2); margin: 0; }
.ig-sv-not { margin-top: clamp(24px, 3vw, 32px); padding: 16px 20px; background: var(--ig-white); border: 1px solid var(--ig-line); border-radius: 4px; font-size: .92rem; line-height: 1.55; color: var(--ig-ink-2); }
.ig-sv-not strong { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; color: var(--ig-navy); margin-right: 6px; }

/* impatto: tre dimensioni collegate, non tre livelli in sequenza */
.ig-sv-imp { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; margin-top: clamp(24px, 3vw, 32px); position: relative; }
/* le quattro righe (etichetta, titolo, domanda, elenco) si allineano fra le colonne */
.ig-sv-imp > div { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start;
  padding: 22px 24px 24px; background: rgba(255,255,255,.04); border-top: 2px solid rgba(255,255,255,.18); min-width: 0; }
.ig-sv-imp > div + div { border-left: 1px solid rgba(255,255,255,.12); }
.ig-sv-imp > div:first-child { border-top-color: var(--ig-ambra); }
.ig-sv-imp__n { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: #7CCFCF; }
.ig-sv-imp h3 { font-size: 1.12rem; margin: 8px 0 4px; }
.ig-sv-imp__q { font-size: .9rem; color: #AEBAC3; margin: 0 0 14px; }
.ig-sv-imp ul { list-style: none; margin: 0; padding: 0; }
.ig-sv-imp li { font-size: .92rem; line-height: 1.4; color: #E3E8EC; padding: 7px 0; border-top: 1px solid rgba(255,255,255,.1); }
.ig-sv-link { margin-top: 12px; font-size: .86rem; line-height: 1.5; color: #8D9BA5; }
.ig-sv-ev { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0 clamp(18px, 2.4vw, 32px); list-style: none; margin: clamp(26px, 3vw, 34px) 0 0; padding: 0; counter-reset: ev; }
.ig-sv-ev li { counter-increment: ev; display: grid; grid-template-columns: 28px minmax(0,1fr); padding: 12px 0; border-top: 1px solid rgba(255,255,255,.14); font-size: .92rem; line-height: 1.45; color: #AEBAC3; }
.ig-sv-ev li::before { content: counter(ev, decimal-leading-zero); font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; font-size: .8rem; color: var(--ig-ambra); line-height: 1.7; }
.ig-sv-ev strong { color: #fff; font-weight: 600; }
.ig-sv-caveat { margin-top: 22px; max-width: 86ch; font-size: .92rem; line-height: 1.6; color: #AEBAC3; }

@media (max-width: 1023px) {
  .ig-sv-del { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px clamp(16px, 2vw, 26px); }
  .ig-svc2__cols { grid-template-columns: minmax(0,1fr); gap: 18px; }
}
@media (max-width: 760px) {
  .ig-sv-tabs { gap: 4px; }
  .ig-sv-tab { padding: 12px 6px 12px 8px; }
  .ig-sv-tab b { font-size: .86rem; flex-direction: column; gap: 2px; }
  .ig-sv-tab small { display: none; }
  .ig-svc2 > summary { padding: 18px 16px; column-gap: 12px; }
  .ig-svc2__body { margin: 0 16px; padding: 20px 0 22px; }
  .ig-svc2__imp { grid-template-columns: minmax(0,1fr); padding: 16px; }
  .ig-svc2__imp ul { grid-template-columns: minmax(0,1fr); }
  .ig-sv-del { grid-template-columns: minmax(0,1fr); }
  .ig-sv-imp, .ig-sv-ev { grid-template-columns: minmax(0,1fr); }
  .ig-sv-imp > div + div { border-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ig-svc2, .ig-svc2__chev, .ig-svc2::details-content, .ig-sv-tab b { transition: none !important; }
}

/* ── Ecosystem · ═══ 4 · ECOSYSTEM v3 (4 ottobre 2026) ═════════════════════
   Narrazione: perché InnerGrid ha costruito l'ecosistema (scelta
   deliberata, esperienza diretta del fondatore), su cosa si concentra
   (Depth over breadth: Human Engine + Capability System), chi ne fa
   parte (quattro membri a pari peso), come lavora con i clienti
   (Outside perspective. Inside understanding.), con quali evidenze.
   Ordine dei membri fisso Torreluna, Six Seconds, InnerGrid, Pack: ambra
   e arancio mai adiacenti su 4, 2×2 o 1 colonna. Classi .ig-eco-*. ── */
/* 01 · hero: indice a tre voci (il default del sito è a quattro) */
.ig-hero--eco { padding-bottom: clamp(6px, 1vw, 14px); }
.ig-index.ig-eco-index { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* nota del fondatore: discreta, quasi a piè di sezione */
.ig-eco-fn { margin: clamp(28px, 3.4vw, 40px) 0 0; padding-top: 18px; border-top: 1px solid var(--ig-line); display: flex; gap: 14px; align-items: flex-start; max-width: 860px; }
.ig-eco-fn img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; filter: grayscale(.2); }
.ig-eco-fn blockquote { margin: 0; }
.ig-eco-fn blockquote p { margin: 0; font-size: .86rem; line-height: 1.6; font-style: italic; color: var(--ig-ink-3); }
.ig-eco-fn figcaption { margin-top: 6px; font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; font-size: .74rem; color: var(--ig-ink-2); }

/* 04 · i quattro membri, schede identiche */
.ig-eco-members { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); align-items: start; margin-top: clamp(26px, 3vw, 36px); list-style: none; padding: 0; }
.ig-eco-m { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 12px; align-content: start; padding: 22px 20px 20px; border: 1px solid var(--ig-line); border-radius: 3px; background: var(--ig-white); min-width: 0; transition: border-color .16s ease; }
.ig-eco-m:hover { border-color: var(--ig-teal); }
.ig-eco-m__logo { height: 56px; display: flex; align-items: center; }
.ig-eco-m__logo img { display: block; width: auto; height: auto; max-width: 140px; }
.ig-eco-m__logo--torre img { max-height: 56px; }
.ig-eco-m__logo--six img { max-height: 36px; }

.ig-eco-m__logo--pack img { max-height: 44px; }
.ig-eco-m__k { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ig-teal-700); }
.ig-eco-m h3 { margin: 0; align-self: end; }
.ig-eco-m p { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--ig-ink-2); }
.ig-eco-m .ig-link { align-self: end; justify-self: start; font-size: .88rem; }
.ig-eco-strip { margin-top: clamp(22px, 2.6vw, 30px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px clamp(24px, 4vw, 48px); }
.ig-eco-strip p { margin: 0; padding-left: 16px; border-left: 2px solid var(--ig-line); color: var(--ig-ink-2); font-size: .92rem; line-height: 1.6; }
.ig-eco-strip strong { color: var(--ig-navy); font-weight: 600; }

/* 05 · outside perspective, inside understanding (banda navy) */
.ig-eco-intro { margin: 16px 0 0; max-width: 66ch; color: #C9D2D8; font-size: 1.05rem; line-height: 1.6; }
.ig-eco-pr { list-style: none; padding: 0; margin: clamp(28px, 3.4vw, 40px) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 44px) clamp(28px, 4vw, 56px); }
.ig-eco-pr li { border-top: 1px solid rgba(255,255,255,.2); padding-top: 20px; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(16px, 2vw, 24px); align-content: start; min-width: 0; }
.ig-eco-pr__n { grid-row: span 3; font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: .9; color: #7CCFCF; font-variant-numeric: tabular-nums; }
.ig-eco-pr h3 { margin: 0; font-family: 'Montserrat', system-ui, sans-serif; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #7CCFCF; }
.ig-eco-pr__s { margin: 10px 0 0; font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; font-size: clamp(1.08rem, 1.8vw, 1.25rem); line-height: 1.35; color: #FFFFFF; text-wrap: balance; }
.ig-eco-pr__d { margin: 10px 0 0; font-size: .92rem; line-height: 1.6; color: #AEBAC3; }
.ig-eco-pr__d strong { color: #FFFFFF; font-weight: 600; }
.ig-eco-close { margin-top: clamp(32px, 4vw, 48px); padding-top: 26px; border-top: 1px solid rgba(255,255,255,.16); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 24px; align-items: end; }
.ig-eco-close__rule { width: 48px; height: 3px; background: var(--ig-ambra); margin-bottom: 18px; }
.ig-eco-close p { margin: 0; }
.ig-eco-close__lead { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.35; color: #FFFFFF; text-wrap: balance; }
.ig-eco-close__note { font-size: .92rem; line-height: 1.6; color: #AEBAC3; }

/* 06 · esperienza: prima l'evidenza, poi il dettaglio a richiesta */
.ig-eco-xp__intro { margin-top: 14px; max-width: 76ch; color: var(--ig-ink-2); font-size: .95rem; line-height: 1.6; }
.ig-eco-xp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3vw, 36px) clamp(14px, 2vw, 22px); margin-top: clamp(26px, 3vw, 36px); }
.ig-eco-x { border-top: 2px solid var(--ig-teal); padding-top: 18px; display: grid; grid-template-rows: subgrid; grid-row: span 7; row-gap: 10px; align-content: start; min-width: 0; }
.ig-eco-x--cap { border-top-color: var(--ig-navy); }
.ig-eco-x__by { margin: 0; align-self: end; font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; font-size: .8rem; color: var(--ig-navy); line-height: 1.3; }
.ig-eco-x__ctx { margin: 0; font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ig-ink-3); }
.ig-eco-x__n { margin: 0; align-self: end; font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; font-size: clamp(1.8rem, 2.8vw, 2.25rem); line-height: 1; color: var(--ig-navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ig-eco-x__m { font-size: .9rem; line-height: 1.4; color: var(--ig-ink); font-weight: 600; margin: 0; }
.ig-eco-x__type { justify-self: start; align-self: start; font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ig-teal-700); border: 1px solid currentColor; border-radius: 2px; padding: 3px 7px; }
.ig-eco-x__d { margin: 0; align-self: start; font-size: .9rem; line-height: 1.55; color: var(--ig-ink-2); }
.ig-eco-x details { border-top: 1px solid var(--ig-line); margin-top: 4px; }
.ig-eco-x summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 10px 0; font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; font-size: .8rem; color: var(--ig-teal-700); }
.ig-eco-x summary::-webkit-details-marker { display: none; }
.ig-eco-x summary::after { content: "+"; font-size: 1.1rem; line-height: 1; }
.ig-eco-x details[open] summary::after { content: "\2212"; }
.ig-eco-x summary:focus-visible { outline: 2px solid var(--ig-teal); outline-offset: 3px; }
.ig-eco-x dl { margin: 0 0 6px; display: grid; gap: 10px; }
.ig-eco-x dt { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ig-ink-3); }
.ig-eco-x dd { margin: 2px 0 0; font-size: .86rem; line-height: 1.5; color: var(--ig-ink-2); }

@media (max-width: 1023px) {
  .ig-eco-xp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ig-eco-strip, .ig-eco-pr, .ig-eco-close { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .ig-eco-members, .ig-eco-xp { grid-template-columns: minmax(0, 1fr); }
  .ig-eco-pr__n { font-size: 1.6rem; }
}
@media (max-width: 700px) { .ig-index.ig-eco-index { grid-template-columns: minmax(0, 1fr); gap: 0; } }
@media (prefers-reduced-motion: reduce) { .ig-eco-m { transition: none; } }

/* ── Contact · modulo: scelte multiple facoltative, obbligatori segnati ── */
.ig-choices { border: 0; margin: 0; padding: 0; min-width: 0; }
.ig-choices legend { padding: 0; margin-bottom: 12px; font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ig-ink-2); }
.ig-choices legend .ig-opt { display: block; margin-top: 4px; }
.ig-choices__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ig-choice { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; padding: 11px 12px; border: 1px solid var(--ig-line); border-radius: 3px; background: var(--ig-white); cursor: pointer; font-size: 0.9rem; line-height: 1.4; color: var(--ig-ink); transition: border-color .16s ease, background-color .16s ease; }
.ig-choice:hover { border-color: var(--ig-teal); }
.ig-choice input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--ig-teal-700); }
.ig-choice:has(input:checked) { border-color: var(--ig-teal-700); background: var(--ig-teal-50); }
.ig-choice:has(input:focus-visible) { outline: 2px solid var(--ig-teal); outline-offset: 1px; }
.ig-opt { font-family: 'Open Sans', system-ui, sans-serif; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ig-ink-3); }
.ig-req { color: var(--ig-teal-700); }
.ig-formnote { margin: 0; font-size: 0.82rem; color: var(--ig-ink-3); }
.ig-formnote:empty { display: none; }
@media (max-width: 560px) { .ig-choices__grid { grid-template-columns: minmax(0, 1fr); } }

/* ── Contact · Meet the founder: in terza persona, foto vera, nessuna citazione
   (la citazione sul perché dell'ecosistema resta su Ecosystem) ── */
.ig-fdr { display: flex; gap: clamp(20px, 3vw, 32px); align-items: flex-start; max-width: 860px; margin-top: 18px; }
.ig-fdr img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; flex: none; filter: grayscale(.2); }
.ig-fdr__role { margin: 4px 0 0; font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; font-size: .8rem; letter-spacing: .02em; color: var(--ig-teal-700); }
.ig-fdr .ig-body { margin-top: 14px; font-size: .95rem; }
@media (max-width: 560px) {
  .ig-fdr { flex-direction: column; gap: 16px; }
  .ig-fdr img { width: 88px; height: 88px; }
}

/* ── Pagine legali · testo lungo (Privacy, Impressum), 16 ottobre 2026 ── */
.ig-legal > * + * { margin-top: 12px; }
.ig-legal > .ig-h3 { margin-top: 40px; }
.ig-legal > .ig-h4 { margin-top: 22px; }
.ig-legal > .ig-h3 + .ig-body, .ig-legal > .ig-h4 + .ig-body { margin-top: 10px; }
.ig-legal > .ig-list { margin-top: 12px; margin-bottom: 4px; }
.ig-legal > .ig-note { margin-top: 44px; }

/* ── Pagina d'attesa (sito in preparazione): header senza menu, footer senza colonna Navigate ── */
.ig-ftr--attesa .ig-ftr__in { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr); }
@media (max-width: 560px) { .ig-ftr--attesa .ig-ftr__in { grid-template-columns: minmax(0, 1fr); } }

/* ═══ Home · hero v1.2 (19 ottobre 2026) ═════════════════════════
   Composizione unica: testo a sinistra (~45%), fotografia a destra (~55-58%).
   Fondo bianco come il resto della pagina (scelta di Claudio, giro 2): la foto
   sfuma nel bianco verso sinistra. La sfumatura è una maschera di
   trasparenza sull'immagine, non un velo colorato sopra: la foto resta
   quella approvata, senza scurimenti. Nessun bordo, ombra o angolo arrotondato.
   Su telefono la foto scende sotto il testo con un taglio dedicato. */

.ig-hero--home {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--ig-white);
  display: flex; align-items: center;
  min-height: clamp(440px, 36vw, 560px);
  padding-block: clamp(40px, 4.4vw, 64px);
}
.ig-hero--home > .ig-wrap { width: 100%; position: relative; z-index: 1; }
.ig-hero--home .ig-hero__text { max-width: min(35rem, 44vw); }
.ig-hero--home .ig-kicker { margin-bottom: clamp(18px, 1.8vw, 26px); }
.ig-hero--home .ig-lead {
  margin-top: clamp(20px, 2vw, 28px);
  font-size: clamp(1.04rem, 1.35vw, 1.18rem); line-height: 1.6; max-width: 34em;
}
.ig-hero--home .ig-btnrow { margin-top: clamp(28px, 2.8vw, 38px); }

.ig-hero--home .ig-hero__media {
  position: absolute; top: 0; right: 0; bottom: 0; width: 58%; z-index: 0;
}
.ig-hero--home .ig-hero__media picture,
.ig-hero--home .ig-hero__media img { display: block; width: 100%; height: 100%; }
.ig-hero--home .ig-hero__media img {
  object-fit: cover; object-position: 100% 50%;
  /* dissolvenza graduale, a più tappe, per evitare il "bordo" di un gradiente lineare */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.1) 12%, rgba(0,0,0,.42) 26%, rgba(0,0,0,.82) 38%, #000 48%);
          mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.1) 12%, rgba(0,0,0,.42) 26%, rgba(0,0,0,.82) 38%, #000 48%);
}

/* schermi molto larghi: la foto non si allarga oltre la composizione */
@media (min-width: 1600px) {
  .ig-hero--home .ig-hero__media { width: 56%; }
}

/* tablet verticale e telefono: testo pieno, foto sotto con taglio dedicato */
@media (max-width: 860px) {
  .ig-hero--home { display: block; min-height: 0; padding-block: clamp(36px, 7vw, 56px) 0; }
  .ig-hero--home .ig-hero__text { max-width: 36rem; }
  .ig-hero--home .ig-hero__media {
    position: relative; width: 100%; margin-top: clamp(8px, 3vw, 24px);
    aspect-ratio: 16 / 10; max-height: 52vh;
  }
  .ig-hero--home .ig-hero__media img {
    object-position: 60% 50%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.5) 14%, #000 30%);
            mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.5) 14%, #000 30%);
  }
}
@media (max-width: 560px) {
  .ig-hero--home .ig-kicker { letter-spacing: .1em; }
}
@media (min-width: 561px) and (max-width: 860px) {
  .ig-hero--home .ig-hero__media { aspect-ratio: 2 / 1; }
}

/* ═══ CTA finale · famiglia "carta in rilievo" v1.2 (19 ottobre 2026) ═════
   Regole comuni a tutte le pagine (.ig-paper): fondo carta avorio, rilievo
   generato a parte (keep/paper/emboss.py) e posato come immagine di fondo,
   testo e pulsante in HTML vero sopra la metà sinistra, che è sempre piana.
   Titolo navy, filetto teal 48 × 2 px, testo grigio, pulsante teal del sito.
   Ogni pagina cambia solo la superficie: .ig-paper--<pagina> imposta
   --paper e --paper-m. Separazione dal bianco: un'ombra appena percettibile,
   come un foglio posato, niente bordo. */
.ig-paper {
  --paper-bg: #F8F4EB;   /* = bordo sinistro piano dell'immagine: nessuna giunta visibile */
  position: relative;
  background-color: var(--paper-bg);
  background-image: var(--paper);
  /* l'immagine tocca sempre il bordo destro e alto/basso; a sinistra, dove è piana,
     può tagliarsi o lasciare spazio al colore di fondo, identico */
  background-size: auto 100%; background-position: right center; background-repeat: no-repeat;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(8, 32, 48, .05), 0 10px 28px -18px rgba(8, 32, 48, .18);
  padding: clamp(52px, 6.4vw, 92px) clamp(28px, 5.6vw, 76px);
  min-height: clamp(360px, 33vw, 440px);
  display: flex; align-items: center;
}
.ig-paper__in { max-width: min(31rem, 48%); }
.ig-paper__t { color: var(--ig-navy); text-wrap: balance; }
.ig-paper__t::after {
  content: ""; display: block; width: 48px; height: 2px; background: var(--ig-teal);
  margin-top: clamp(18px, 1.8vw, 24px);
}
.ig-paper__p { margin-top: clamp(18px, 1.8vw, 24px); color: var(--ig-ink-2); max-width: 30rem; }
.ig-paper__cta { margin-top: clamp(26px, 2.6vw, 34px); }

.ig-paper--home { --paper: url("paper-home.jpg"); --paper-m: url("paper-home-m.jpg"); }

@media (max-width: 760px) {
  .ig-paper {
    background-image: var(--paper-m); background-position: right bottom; background-size: 100% auto;
    display: block; min-height: 0;
    padding: 44px 24px clamp(170px, 48vw, 240px);
  }
  .ig-paper__in { max-width: none; }
}

/* ── Variante fotografica della carta (19 ottobre 2026, giro 2): fondi BG1-BG10 di
   Claudio. L'immagine copre tutto il box; il rilievo sta a destra, la luce
   di finestra a sinistra sotto il testo. Le regole comuni di .ig-paper restano. */
.ig-paper--photo { background-size: cover; background-position: right center; }
.ig-paper--bg1 { --paper: url("paper-bg1.jpg"); --paper-m: url("paper-bg1.jpg"); }
.ig-paper--bg2 { --paper: url("paper-bg2.jpg"); --paper-m: url("paper-bg2-m.jpg"); --paper-bg: #F8F5EF; }
@media (max-width: 760px) {
  /* telefono: testo su carta piana, il rilievo in un ritaglio dedicato sotto il pulsante;
     il ritaglio sfuma in alto nel colore piano (--paper-bg), senza giunta */
  .ig-paper--photo { background-size: min(100%, 480px) auto; background-position: right bottom; padding-bottom: calc(min(100vw - 40px, 480px) * .74); }
}
/* fondi delle altre pagine: desktop allungato a sinistra con la carta piana, telefono ritagliato
   sul motivo (keep/paper/fondi.py). --paper-bg = colore piano di ogni fondo, senza giunte. */
.ig-paper--bg3  { --paper: url("paper-bg3.jpg");  --paper-m: url("paper-bg3-m.jpg");  --paper-bg: #F8F5EF; }  /* Model */
.ig-paper--bg10 { --paper: url("paper-bg10.jpg"); --paper-m: url("paper-bg10-m.jpg"); --paper-bg: #F8F5EF; }  /* Services */
.ig-paper--bg7  { --paper: url("paper-bg7.jpg");  --paper-m: url("paper-bg7-m.jpg");  --paper-bg: #F8F5EF; }  /* Ecosystem */
/* v2 (19 ottobre 2026): carta materica su tutta la superficie anche sotto il testo
   (keep/paper/fondi.py v2). Su telefono l'immagine verticale copre tutto il box:
   carta con luce di finestra in alto, motivo in basso sotto il pulsante. */
@media (max-width: 760px) {
  .ig-paper--bg3, .ig-paper--bg10, .ig-paper--bg7 {
    background-size: cover; background-position: center bottom;
    padding-bottom: calc((100vw - 40px) * .82);
  }
}

/* ═══ Contact · riquadro su carta piana (19 ottobre 2026) ═══════════════
   Carta della famiglia CTA, senza rilievi (keep/paper/flat.py). Le linee
   sembrano stampate nella carta: tratto colorato appena trasparente e un filo
   di luce sotto, come un segno impresso. Teal fra i punti di ogni parte,
   ocra (più spessa) fra "What happens next" e "Practicalities". */
.ig-panel--paper {
  background: #F8F5EF url("paper-contact.jpg") center / cover no-repeat;   /* v2: BG4, rilievi avorio */
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(8, 32, 48, .05), 0 10px 28px -18px rgba(8, 32, 48, .18);
}
.ig-panel--paper .ig-steps > li { border-bottom: 0; }
.ig-panel--paper .ig-steps > li + li,
.ig-panel--paper .ig-defs > div + div {
  border-top: 1px solid rgba(40, 144, 144, .85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}
.ig-panel--paper .ig-defs > div { border-bottom: 0; }
.ig-panel--paper .ig-rule--ocra {
  border-top: 2px solid rgba(235, 169, 4, .8);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}

/* ═══ Model · Model Board v1.2, giro 2 (19 ottobre 2026) ═══════════════
   Colonne People | Organisation, righe Inner | Grid (brief di Claudio).
   La matrice è un oggetto a sé: un pannello chiaro che contiene quattro
   schede distinte, con assi fuori dalle schede. Colore semantico del sito:
   riga Inner in teal (il nodo del logo), riga Grid neutra (la griglia).
   Il nodo teal siede nell'incrocio dei due canali fra le schede.
   Le quattro risposte stanno fuori dal pannello, su bianco, un livello sotto:
   ognuna allineata sotto la propria colonna (People: Inner, Grid; Organisation:
   Inner, Grid), con il segno ocra dell'attivazione. */
.ig-mb {
  --mb-lab: 150px;
  --mb-gap: 14px;
  --mb-pad: clamp(18px, 2.4vw, 30px);
  margin-top: clamp(28px, 3.2vw, 40px);
}
.ig-mb__grid {
  position: relative;
  display: grid;
  grid-template-columns: var(--mb-lab) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr 1fr;
  gap: var(--mb-gap);
  padding: var(--mb-pad);
  background: #F4F0E8;
  border-radius: 10px;
}
.ig-mb__corner { grid-area: 1 / 1; }
.ig-mb__col:nth-of-type(1) { grid-area: 1 / 2; }
.ig-mb__col:nth-of-type(2) { grid-area: 1 / 3; }
.ig-mb__row:nth-of-type(3) { grid-area: 2 / 1; }
.ig-mb__row:nth-of-type(4) { grid-area: 3 / 1; }
.ig-mb__q[data-q="ip"] { grid-area: 2 / 2; }
.ig-mb__q[data-q="io"] { grid-area: 2 / 3; }
.ig-mb__q[data-q="gp"] { grid-area: 3 / 2; }
.ig-mb__q[data-q="go"] { grid-area: 3 / 3; }

.ig-mb__col {
  text-align: center; padding-top: 2px;
  font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600;
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ig-navy);
}
.ig-mb__row { align-self: center; padding-right: 8px; }
.ig-mb__row strong {
  display: block;
  font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600;
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ig-teal-700);
}
.ig-mb__row em { display: block; margin-top: 6px; font-style: normal; font-size: .8rem; line-height: 1.45; color: var(--ig-ink-3); }

.ig-mb__q {
  position: relative;
  padding: clamp(20px, 2.2vw, 28px);
  border-radius: 8px;
  border: 1px solid #DDD7CC;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(8, 32, 48, .04);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, opacity .2s ease, transform .2s ease;
}
.ig-mb__q[data-q="ip"], .ig-mb__q[data-q="io"] { background: #E6F3F2; border-color: #B9DEDB; }
.ig-mb__node {
  grid-area: 2 / 2 / 4 / 4; place-self: center;
  width: 10px; height: 10px; background: var(--ig-teal);
  pointer-events: none; z-index: 1;
}
.ig-mb__ico {
  display: block; width: 28px; height: 28px; margin-bottom: 14px;
  fill: none; stroke: var(--ig-teal-700); stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter;
}
.ig-mb__ico .f { fill: var(--ig-teal-700); stroke: none; }
.ig-mb__t {
  font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600;
  font-size: clamp(1rem, 1.3vw, 1.1rem); line-height: 1.3; color: var(--ig-navy); text-wrap: balance;
}
.ig-mb__d { margin-top: 8px; font-size: .92rem; line-height: 1.56; color: var(--ig-ink-2); max-width: 42ch; }

/* risposte: fuori dal pannello, stesso passo di colonne */
.ig-mb__acts {
  display: grid;
  grid-template-columns: var(--mb-lab) minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--mb-gap);
  padding-inline: var(--mb-pad);
  margin-top: clamp(22px, 2.6vw, 32px);
}
.ig-mb__grp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 18px; }
.ig-mb__act {
  position: relative;
  padding: 18px 4px 8px 0;
  border-top: 1px solid var(--ig-line);
  outline: none;
  transition: opacity .2s ease;
}
.ig-mb__act::before {                      /* segno ocra = punto di attivazione */
  content: ""; position: absolute; top: -4px; left: 0;
  width: 7px; height: 7px; background: var(--ig-ambra);
  transition: width .25s ease, height .25s ease, top .25s ease;
}
.ig-mb__ah { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; font-size: .86rem; color: var(--ig-navy); }
.ig-mb__as { margin-top: 3px; font-size: .8rem; line-height: 1.4; color: var(--ig-ink-3); }
.ig-mb__ad { margin-top: 10px; font-size: .88rem; line-height: 1.52; color: var(--ig-ink-2); }

/* stato attivo (mouse, tocco, tastiera) */
.ig-mb.is-active .ig-mb__q, .ig-mb.is-active .ig-mb__act { opacity: .45; }
.ig-mb.is-active .ig-mb__q.is-on {
  opacity: 1; border-color: var(--ig-teal);
  box-shadow: 0 0 0 1px var(--ig-teal), 0 12px 28px -16px rgba(8, 32, 48, .35);
  transform: translateY(-2px);
}
.ig-mb.is-active .ig-mb__act.is-on { opacity: 1; }
.ig-mb__act.is-on::before { width: 100%; height: 3px; top: -2px; }
.ig-mb__q:focus-visible { box-shadow: 0 0 0 2px var(--ig-teal-700); }
.ig-mb__act:focus-visible { outline: 2px solid var(--ig-teal-700); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .ig-mb__q, .ig-mb__act, .ig-mb__act::before { transition: none; }
  .ig-mb.is-active .ig-mb__q.is-on { transform: none; }
}

/* tablet: etichette di riga più strette, le due risposte di ogni colonna una sotto l'altra */
@media (max-width: 1000px) {
  .ig-mb { --mb-lab: 104px; --mb-gap: 12px; }
  .ig-mb__grp { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
}
/* telefono: una colonna. Inner / Grid fanno da intestazione, People / Organisation
   compare in testa a ogni scheda; le risposte dicono già a quale quadrante rispondono. */
@media (max-width: 700px) {
  .ig-mb__grid { display: block; padding: 16px; }
  .ig-mb__corner, .ig-mb__col, .ig-mb__node { display: none; }
  .ig-mb__row { padding: 14px 0 10px; }
  .ig-mb__row:nth-of-type(3) { padding-top: 2px; }
  .ig-mb__q + .ig-mb__q { margin-top: 10px; }
  .ig-mb__q::before {
    content: attr(data-col); display: block; margin-bottom: 10px;
    font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600;
    font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ig-navy);
  }
  .ig-mb__ico { width: 26px; height: 26px; margin-bottom: 10px; }
  .ig-mb__acts { display: block; padding-inline: 0; }
  .ig-mb__spacer { display: none; }
  .ig-mb__grp { display: block; }
  .ig-mb__act { padding: 16px 0 12px; margin-top: 8px; }
  .ig-mb.is-active .ig-mb__q, .ig-mb.is-active .ig-mb__act { opacity: .6; }
}

/* ═══ Model · What we activate, opzione C "ponte dal modello" (19 ottobre 2026) ═══
   Ogni motore porta un modellino 2 × 2 con accesa la propria colonna della tavola
   sopra: Human Engine = colonna People (teal), Capability System = colonna
   Organisation (navy). Le celle hanno lo stile delle schede della matrice. */
#activate .ig-g2 > .ig-eng {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 26px;
  border-top: 1px solid var(--ig-line); padding-top: 26px;
}
#activate .ig-eng__top { grid-row: 1 / span 4; flex-direction: column; align-items: flex-start; gap: 12px; margin: 0; }
#activate .ig-eng > :not(.ig-eng__top) { grid-column: 2; }
#activate .ig-loc { width: 84px; height: 84px; gap: 5px; }
#activate .ig-loc i { border-radius: 4px; border-color: #DDD7CC; background: #F4F0E8; }
#activate .ig-eng:first-child .ig-loc i.on { background: #E6F3F2; border: 1.5px solid var(--ig-teal); }
#activate .ig-eng + .ig-eng .ig-loc i.on { background: #E4E9EE; border: 1.5px solid var(--ig-navy); }
#activate .ig-eng__co { font-size: .74rem; line-height: 1.4; max-width: 92px; }
@media (max-width: 560px) {
  #activate .ig-g2 > .ig-eng { grid-template-columns: 64px minmax(0, 1fr); column-gap: 18px; }
  #activate .ig-loc { width: 60px; height: 60px; gap: 4px; }
  #activate .ig-eng__co { max-width: 64px; font-size: .7rem; }
}

/* ═══ Model · fondo della tavola: carta BG5 senza ombre (keep/paper/deshadow.py), 19 ottobre 2026 ═══ */
.ig-mb__grid { background: #F8F5EF url("paper-bg5.jpg") right center / cover no-repeat; }  /* sostituito sotto: bianco */
@media (max-width: 700px) {   /* su telefono si inquadrano le lastre avorio, non quelle teal */
  .ig-mb__grid { background-position: 38% center; }
}


/* ═══ Apertura delle sezioni: un solo sistema (19 ottobre 2026, scelta B di Claudio) ═══
   Model e Services aprivano le sezioni con un filetto ocra, Home ed Ecosystem con
   l'etichetta a glifo. Ora tutte usano l'etichetta teal con il glifo a quattro
   puntini; l'ocra resta riservato ai punti di attivazione (tavola del Model, Contact).
   I filetti dell'indice in testa a Model, Services ed Ecosystem passano al teal. */
.ig-open, .ig-band .ig-open { border-top: 0; padding-top: 0; }
.ig-open__k { display: inline-flex; align-items: center; gap: 12px; }
.ig-open__k::before {
  content: ""; flex: none; width: 14px; height: 14px;
  background:
    radial-gradient(circle at 3px 3px, currentColor 2px, transparent 2.2px),
    radial-gradient(circle at 11px 3px, currentColor 2px, transparent 2.2px),
    radial-gradient(circle at 3px 11px, currentColor 2px, transparent 2.2px),
    radial-gradient(circle at 11px 11px, currentColor 2px, transparent 2.2px);
}
.ig-band .ig-open__k { color: var(--ig-teal-50); }
.ig-index a { border-top-color: var(--ig-teal); }

/* ═══ Sezioni di consultazione (What we use, How we deliver): impaginazione editoriale ═══
   (19 ottobre 2026, opzione B di Claudio, dopo grigio e avorio scartati). Fondo bianco; la
   sezione si apre con un filo grigio a larghezza del contenuto. Da 1001 px: titolo e
   introduzione in una colonna a sinistra che resta ferma durante lo scorrimento, contenuto
   a destra; le cinque modalità di How we deliver passano da 5 colonne strette a 2. */
.ig-sec--side { padding-top: 0; }
.ig-sec--side > .ig-wrap {
  padding-top: clamp(38px, 4.8vw, 62px);
  background: linear-gradient(var(--ig-line), var(--ig-line)) center top / calc(100% - 2 * var(--ig-gutter)) 1px no-repeat;
}
@media (min-width: 1001px) {
  .ig-sec--side > .ig-wrap {
    display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: clamp(36px, 4.4vw, 64px); align-items: start;
  }
  .ig-sec--side .ig-open { grid-column: 1; grid-row: 1 / span 6; position: sticky; top: 104px; margin: 0; }
  .ig-sec--side .ig-open__top { flex-direction: column; align-items: flex-start; gap: 6px; }
  .ig-sec--side .ig-open .ig-split { display: block; }
  .ig-sec--side .ig-open .ig-h2 { text-wrap: balance; }
  .ig-sec--side .ig-open .ig-body { margin-top: 18px; font-size: .98rem; }
  .ig-sec--side > .ig-wrap > :not(.ig-open) { grid-column: 2; }
  .ig-sec--side .ig-sv-del { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 28px; }
}
/* Model · What we use: stesso filo d'apertura, ma a larghezza piena (le colonne laterali
   toglievano spazio alla lettura delle metodologie) */
@media (min-width: 1001px) {
  .ig-sec--side-full > .ig-wrap { display: block; }
  .ig-sec--side-full .ig-open { position: static; margin-bottom: clamp(24px, 3vw, 34px); }
  .ig-sec--side-full .ig-open__top { flex-direction: row; align-items: center; gap: 14px; }
  .ig-sec--side-full .ig-open .ig-split { display: grid; }
  .ig-sec--side-full .ig-open .ig-body { margin-top: 0; font-size: inherit; }
}

/* ═══ Home · hero, giro 3 (19 ottobre 2026): mano e tessere più piccole ═══
   Foto intera (1672 × 941, con libri, pianta e bicchiere ai margini), riquadro un po'
   più stretto e hero più basso: le tessere passano da ~390 a ~300 px a 1366 px. */
.ig-hero--home { min-height: clamp(420px, 34vw, 520px); padding-block: clamp(36px, 4vw, 56px); }
/* il riquadro non occupa più tutta l'altezza dell'hero: la foto si ferma prima di
   bordo alto e basso e sfuma anche lì nel bianco, come già a sinistra */
@media (min-width: 861px) {
  .ig-hero--home .ig-hero__media { width: 54%; top: 9%; bottom: 9%; }
  .ig-hero--home .ig-hero__media img {
    object-position: 100% 55%;
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, rgba(0,0,0,.1) 12%, rgba(0,0,0,.42) 26%, rgba(0,0,0,.82) 38%, #000 48%),
      linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image:
      linear-gradient(to right, transparent 0%, rgba(0,0,0,.1) 12%, rgba(0,0,0,.42) 26%, rgba(0,0,0,.82) 38%, #000 48%),
      linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
            mask-composite: intersect;
  }
}
@media (min-width: 1500px) { .ig-hero--home .ig-hero__media { width: min(52%, 800px); } }


/* ═══ Model · What we use: accordion "indice editoriale" (19 ottobre 2026, opzione C di Claudio) ═══
   Righe invece di schede: filo superiore di 2 px nel colore del motore (teal Human Engine,
   navy Capability System), titolo grande, "Relevant when" in seconda colonna, freccia a V
   che si rovescia all'apertura. Contenuto aperto senza riquadro; Business implication con
   un filo verticale nel colore del motore. Comportamento invariato (<details> nativi). */
.ig-meths { gap: 0; border-bottom: 1px solid var(--ig-line); }
.ig-meth {
  border: 0; border-radius: 0; border-top: 2px solid var(--eng);
  background: transparent; box-shadow: none !important;
  transition: background-color .2s ease;
}
.ig-meth:hover { background: #FCFCFC; }
.ig-meth > summary { padding: 26px 4px 26px 0; grid-template-columns: minmax(0, 1fr) 40px; column-gap: 24px; }
.ig-meth > summary:focus-visible { outline: 2px solid var(--ig-teal-700); outline-offset: 4px; border-radius: 0; }
.ig-meth__hd { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 48px; }
.ig-meth__cat, .ig-meth__t, .ig-meth__src { grid-column: 1; }
.ig-meth__t { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin-top: 10px; }
.ig-meth__rel {
  grid-column: 2; grid-row: 1 / span 3; align-self: end;
  display: block; border-top: 0; margin: 0; padding: 0;
}
.ig-meth__rk { display: block; margin-bottom: 6px; }
.ig-meth__chev {
  width: 13px; height: 13px; margin-right: 8px;
  border-right: 2px solid var(--eng); border-bottom: 2px solid var(--eng);
}
.ig-meth__body { margin: 0; padding: 6px 0 38px; border-top: 0; }
.ig-meth__impl { background: transparent; border-left: 2px solid var(--eng); border-radius: 0; padding: 4px 0 4px 22px; }
@media (max-width: 900px) {
  .ig-meth__hd { grid-template-columns: minmax(0, 1fr); }
  .ig-meth__rel { grid-column: 1; grid-row: auto; margin-top: 14px; }
}
@media (max-width: 767px) {
  .ig-meth > summary { padding: 22px 2px 22px 0; column-gap: 14px; }
  .ig-meth__body { margin: 0; padding: 4px 0 30px; }
  .ig-meth__impl { padding: 4px 0 4px 16px; }
}

/* ═══ Model · tavola su bianco (19 ottobre 2026, richiesta di Claudio) ═══
   Via la carta BG5: fondo bianco, resta il contorno ad angoli arrotondati che fa da
   cornice al modello. Il nodo centrale passa dal teal all'ocra. Quadranti e
   interazione invariati. */
.ig-mb__grid { background: #FFFFFF; border: 1px solid var(--ig-line); }
.ig-mb__node { background: var(--ig-ambra); }
@media (max-width: 700px) { .ig-mb__grid { background-position: initial; } }

/* ═══ Filo di separazione fra sezioni bianche consecutive (19 ottobre 2026) ═══
   Lo stesso filo grigio introdotto su What we use / How we deliver, esteso a tutto il
   sito: solo fra due sezioni bianche. Non sotto l'hero, non prima o dopo una banda
   navy o teal (.ig-band) e non attorno alla CTA in carta (.ig-paper). Il filo sta in
   cima alla sezione, a larghezza del contenuto. */
.ig-sec:not(.ig-hero):not(:has(.ig-band, .ig-paper)) + .ig-sec:not(:has(.ig-band, .ig-paper)) { padding-top: 0; }
.ig-sec:not(.ig-hero):not(:has(.ig-band, .ig-paper)) + .ig-sec:not(:has(.ig-band, .ig-paper)) > .ig-wrap {
  padding-top: clamp(38px, 4.8vw, 62px);
  background: linear-gradient(var(--ig-line), var(--ig-line)) center top / calc(100% - 2 * var(--ig-gutter)) 1px no-repeat;
}
.ig-sec--tight:not(.ig-hero):not(:has(.ig-band, .ig-paper)) + .ig-sec.ig-sec--tight:not(:has(.ig-band, .ig-paper)) > .ig-wrap,
.ig-sec:not(.ig-hero):not(:has(.ig-band, .ig-paper)) + .ig-sec.ig-sec--tight:not(:has(.ig-band, .ig-paper)) > .ig-wrap {
  padding-top: clamp(30px, 3.6vw, 46px);
}

/* ═══ Model · quadranti bianchi, assi ocra (19 ottobre 2026, proposta di Claudio) ═══
   A riposo: quattro schede bianche uguali, croce degli assi in ocra nei canali fra le
   schede, nodo ocra al centro. Al passaggio (mouse, tocco, tastiera) la scheda si accende
   nel colore della sua colonna: People in teal, Organisation in navy, testo in bianco.
   Le altre arretrano come prima; interazione invariata. */
.ig-mb__q, .ig-mb__q[data-q="ip"], .ig-mb__q[data-q="io"] { background: #FFFFFF; border-color: #DDD7CC; }
.ig-mb__grid::before {
  content: ""; grid-area: 2 / 2 / 4 / 4; margin: -12px; pointer-events: none;
  background:
    linear-gradient(var(--ig-ambra), var(--ig-ambra)) center / 2px 100% no-repeat,
    linear-gradient(var(--ig-ambra), var(--ig-ambra)) center / 100% 2px no-repeat;
}
.ig-mb__node { width: 12px; height: 12px; background: var(--ig-ambra); }
.ig-mb__q { transition: background-color .22s ease, border-color .22s ease, box-shadow .22s ease, opacity .22s ease, transform .22s ease; }
.ig-mb__q .ig-mb__t, .ig-mb__q .ig-mb__d { transition: color .22s ease; }
.ig-mb.is-active .ig-mb__q.is-on[data-q="ip"], .ig-mb.is-active .ig-mb__q.is-on[data-q="gp"] { background: #1E7A80; border-color: #1E7A80; }
.ig-mb.is-active .ig-mb__q.is-on[data-q="io"], .ig-mb.is-active .ig-mb__q.is-on[data-q="go"] { background: #183A55; border-color: #183A55; }
.ig-mb.is-active .ig-mb__q.is-on { box-shadow: 0 14px 30px -16px rgba(8, 32, 48, .45); }
.ig-mb.is-active .ig-mb__q.is-on .ig-mb__t { color: #FFFFFF; }
.ig-mb.is-active .ig-mb__q.is-on .ig-mb__d { color: rgba(255, 255, 255, .9); }
.ig-mb.is-active .ig-mb__q.is-on .ig-mb__ico { stroke: #FFFFFF; }
.ig-mb.is-active .ig-mb__q.is-on .ig-mb__ico .f { fill: #FFFFFF; }
.ig-mb.is-active .ig-mb__q.is-on::before { color: #FFFFFF; }
.ig-mb__q:focus-visible { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--ig-teal-700); }
@media (max-width: 700px) { .ig-mb__grid::before { display: none; } }

/* ═══ Model · tavola su teal (prova, 19 ottobre 2026, proposta di Claudio) ═══
   A riposo: pannello teal-700, schede bianche, assi e nodo ocra, etichette in chiaro.
   Al passaggio il pannello si schiarisce quasi a bianco e le etichette tornano scure:
   resta evidente solo la scheda accesa (teal per People, navy per Organisation). */
.ig-mb__grid {
  background: var(--ig-teal-700); border-color: var(--ig-teal-700);
  transition: background-color .3s ease, border-color .3s ease;
}
.ig-mb__q, .ig-mb__q[data-q="ip"], .ig-mb__q[data-q="io"] { border-color: transparent; }
.ig-mb__col, .ig-mb__row strong { color: #FFFFFF; transition: color .3s ease; }
.ig-mb__row em { color: #D3E8E8; transition: color .3s ease; }
.ig-mb.is-active .ig-mb__grid { background: #F1F7F7; border-color: #D6E6E6; }
.ig-mb.is-active .ig-mb__col { color: var(--ig-navy); }
.ig-mb.is-active .ig-mb__row strong { color: var(--ig-teal-700); }
.ig-mb.is-active .ig-mb__row em { color: var(--ig-ink-3); }
.ig-mb.is-active .ig-mb__q:not(.is-on) { border-color: #DDE7E7; }
@media (prefers-reduced-motion: reduce) { .ig-mb__grid, .ig-mb__col, .ig-mb__row strong, .ig-mb__row em { transition: none; } }

/* ═══ Model · pannello fisso #F1F7F7 (19 ottobre 2026, scelta di Claudio) ═══
   Il pannello resta sempre del teal chiarissimo che prima compariva solo al passaggio;
   etichette scure come in origine. Schede bianche, assi ocra, accensione teal/navy invariati. */
.ig-mb__grid, .ig-mb.is-active .ig-mb__grid { background: #F1F7F7; border-color: #D6E6E6; transition: none; }
.ig-mb__col { color: var(--ig-navy); }
.ig-mb__row strong { color: var(--ig-teal-700); }
.ig-mb__row em { color: var(--ig-ink-3); }
.ig-mb__q, .ig-mb__q[data-q="ip"], .ig-mb__q[data-q="io"] { border-color: #DDE7E7; }