/* Chi siamo — la struttura di questa pagina (04/10/2026, Design/STRUTTURE-PAGINE.md).
   La linea grafica è quella di style.css (colori di :root, Archivo e Instrument Sans, la cornice
   quadrata del logo, il segno sopra i titoli, pulsanti, fascia navy, entrate morbide): qui cambia solo
   la struttura. Apertura EDITORIALE (la frase grande, poi la foto larga) · modulo-firma: le TRE
   DISCIPLINE in tre colonne alte, numerate · spunte grandi · fascia navy · tre tasselli · settori in
   riga e lavori per comune · invito finale centrato. Caricato solo da /chi-siamo/, dopo style.css. */

/* testo che si legge con lo screen reader ma non si vede (i due punti fra comune e lavoro) */
.chi-nascosto,.incarico__due-punti{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── apertura editoriale ──────────────────────────────── */
/* l'azzurro dell'apertura si ferma a metà foto: la foto sta a cavallo fra l'apertura e la pagina */
.hero.editoriale{padding:clamp(40px,4.6vw,76px) 0 0;
  background:linear-gradient(var(--soft) 0 calc(100% - clamp(110px,11vw,190px)),var(--white) calc(100% - clamp(110px,11vw,190px)))}
.hero.editoriale::before{-webkit-mask:radial-gradient(80% 70% at 22% 18%,#000 0%,transparent 70%);mask:radial-gradient(80% 70% at 22% 18%,#000 0%,transparent 70%)}
.editoriale .editoriale__titolo{font-size:clamp(40px,4.45vw,66px);line-height:1.02;letter-spacing:-.032em;font-stretch:var(--wide);margin-bottom:clamp(30px,3.2vw,48px)}
.editoriale__titolo .accent{display:block}
.editoriale__riga{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:22px clamp(32px,5vw,80px);
  padding-top:clamp(22px,2.2vw,30px);border-top:1px solid rgba(53,104,154,.2);margin-bottom:clamp(36px,3.8vw,56px)}
.editoriale__lead{--d:1;max-width:31em;color:var(--heading)}
.editoriale__azioni{--d:2;flex-wrap:nowrap}
.editoriale__foto{--d:2;margin:0 22px 22px 0}
.editoriale__foto .photo{aspect-ratio:2.55}
.editoriale__foto .photo img{object-position:50% 6%}

/* ── modulo-firma: le tre discipline, tre colonne alte ── */
.discipline{padding-top:calc(var(--sec) * .9)}
.discipline__testa{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px clamp(32px,5vw,80px);align-items:end;margin-bottom:clamp(30px,3.2vw,48px)}
.discipline__testa .h2{margin-bottom:0}
.discipline__lead{max-width:27em;padding-bottom:4px}
.discipline__colonne{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--white);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh-2);overflow:hidden}
.disciplina{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-height:clamp(400px,33vw,480px);padding:clamp(26px,2.6vw,40px) clamp(24px,2.5vw,38px) clamp(28px,2.6vw,40px);
  transition:background-color .45s var(--ease)}
.disciplina + .disciplina{border-left:1px solid var(--border)}
.disciplina::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
/* i numeri disegnati col filo, come la cornice del logo */
.disciplina__num{font-family:var(--font-display);font-stretch:112%;font-size:clamp(58px,5.4vw,84px);font-weight:700;line-height:.86;letter-spacing:-.045em;
  color:transparent;-webkit-text-stroke:1.25px var(--primary);font-variant-numeric:tabular-nums lining-nums;transition:color .45s ease}
.disciplina__icona{--sq:clamp(88px,7.4vw,108px);margin-top:clamp(28px,3vw,44px)}
.disciplina__icona .icon{stroke-width:1.35}
.disciplina__titolo{margin-top:auto;padding-top:clamp(26px,2.6vw,36px);font-family:var(--font-display);font-stretch:var(--wide);font-size:clamp(20px,1.65vw,25px);font-weight:640;line-height:1.16;letter-spacing:-.016em;color:var(--heading)}
.disciplina__testo{margin-top:10px;font-size:clamp(15.5px,1.12vw,16.5px);line-height:1.56;color:var(--body);max-width:22em}
.disciplina__testo::first-letter{text-transform:uppercase}
@media (hover:hover){
  .disciplina:hover{background:var(--card-soft)}
  .disciplina:hover::before{transform:scaleX(1)}
  .disciplina:hover .disciplina__num{color:rgba(53,104,154,.12)}
  .disciplina:hover .sq{background:var(--navy);color:var(--white)}
  .disciplina:hover .sq::after{border-color:rgba(255,255,255,.36)}
}

/* ── come lavoriamo: le spunte grandi ─────────────────── */
.metodo__testa{max-width:44em;margin-bottom:clamp(28px,3vw,44px)}
.metodo__lead{max-width:34em}
.metodo__lista{margin-left:clamp(0px,16vw,260px);border-bottom:1px solid rgba(53,104,154,.18);counter-reset:voce}
.metodo__voce{display:flex;align-items:center;gap:clamp(16px,1.8vw,26px);padding:clamp(14px,1.4vw,20px) 0;border-top:1px solid rgba(53,104,154,.18);
  font-family:var(--font-display);font-stretch:var(--wide);font-size:clamp(19px,1.75vw,27px);font-weight:600;line-height:1.25;letter-spacing:-.014em;color:var(--heading)}
.metodo__spunta{--sq:clamp(48px,4.2vw,62px)}
.metodo__spunta .icon{stroke-width:2.2;color:var(--primary)}
.metodo__esito{display:flex;align-items:flex-start;gap:14px;margin:clamp(24px,2.4vw,34px) 0 0 clamp(0px,16vw,260px);max-width:36em;font-size:clamp(16.5px,1.3vw,19.5px);font-weight:550;line-height:1.5;color:var(--heading)}
.metodo__esito .icon{width:22px;height:22px;margin-top:2px;color:var(--primary);stroke-width:1.9}

/* ── il centro di formazione: fascia navy a tre colonne ── */
.training.centro__fascia{grid-template-columns:auto minmax(0,.85fr) minmax(0,1.15fr);align-items:start;gap:clamp(24px,3.4vw,56px);padding:clamp(44px,4.4vw,68px) clamp(28px,4.4vw,68px)}
.centro__icona{--sq:clamp(92px,8vw,118px)}
.centro__titolo{margin:0}
.centro__testo .lead{max-width:30em}
.centro__nota{margin-top:14px;font-size:clamp(15.5px,1.12vw,17px);line-height:1.6;color:var(--on-navy);max-width:34em}
.centro__testo .more{margin-top:clamp(20px,2vw,28px)}

/* ── dopo la consegna: la testa e tre tasselli quadrati ── */
.consegna__griglia{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.75fr);gap:clamp(24px,3.4vw,56px);align-items:stretch}
.consegna__lead{max-width:22em}
.consegna__tasselli{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
/* il tassello è il quadrato del logo in grande: fondo azzurro e la linea sottile dentro */
.tassello{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:clamp(250px,21vw,300px);padding:clamp(24px,2.2vw,32px);
  background:var(--soft);border-radius:var(--r);transition:background-color .4s ease}
.tassello::after{content:"";position:absolute;inset:10px;border:1px solid rgba(53,104,154,.2);border-radius:var(--r-xs);pointer-events:none;transition:border-color .4s ease}
.tassello .sq{--sq:58px}
.tassello__testo{font-size:clamp(15.5px,1.15vw,17px);line-height:1.5;color:var(--heading)}
.tassello__testo::first-letter{text-transform:uppercase}
.tassello__testo a{position:relative;z-index:1;color:var(--heading);text-decoration:underline;text-decoration-color:rgba(53,104,154,.45);text-underline-offset:3px;transition:color .2s ease}
.tassello__testo a:hover{color:var(--primary)}
@media (hover:hover){
  .tassello:hover{background:var(--trust)}
  .tassello:hover::after{border-color:rgba(53,104,154,.5)}
}

/* ── le aziende che seguiamo: i settori in riga, i lavori per comune ── */
.aziende .h2{margin-bottom:clamp(18px,1.8vw,26px)}
.aziende__settori{max-width:33em;font-family:var(--font-display);font-stretch:var(--wide);font-size:clamp(23px,2.25vw,34px);font-weight:600;line-height:1.5;letter-spacing:-.016em;color:var(--heading)}
.settore{white-space:nowrap}
.settore .sq{--sq:1.3em;display:inline-grid;vertical-align:-.22em;margin-right:.32em}
.settore .sq .icon{stroke-width:1.7}
.aziende__anno{margin:clamp(40px,4vw,60px) 0 clamp(16px,1.6vw,22px);font-family:var(--font-display);font-stretch:var(--wide);font-size:clamp(17px,1.3vw,19px);font-weight:620;color:var(--heading)}
.incarichi{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid rgba(53,104,154,.22)}
.incarico{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:22px clamp(14px,1.5vw,24px) 6px}
.incarico:first-child{padding-left:0}
.incarico + .incarico{border-left:1px solid rgba(53,104,154,.16)}
.incarico .sq{--sq:42px}
.incarico .sq .icon{width:21px;height:21px}
.incarico__comune{font-family:var(--font-display);font-stretch:var(--wide);font-size:clamp(17.5px,1.38vw,20px);font-weight:640;line-height:1.2;letter-spacing:-.01em;color:var(--heading)}
.incarico__lavoro{font-size:clamp(15px,1.08vw,16px);line-height:1.52;color:var(--body)}
.incarico__lavoro::first-letter{text-transform:uppercase}

/* ── parlaci della tua azienda: l'invito finale, grande e centrato ── */
.invito{position:relative;isolation:isolate;padding:clamp(76px,8.4vw,136px) 0;text-align:center}
.invito::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(53,104,154,.075) 1px,transparent 1px) 50% 0/48px 48px,linear-gradient(90deg,rgba(53,104,154,.075) 1px,transparent 1px) 50% 0/48px 48px;
  -webkit-mask:radial-gradient(46% 70% at 50% 50%,#000 0%,transparent 78%);mask:radial-gradient(46% 70% at 50% 50%,#000 0%,transparent 78%)}
.invito__dentro{display:flex;flex-direction:column;align-items:center}
.invito .invito__titolo{max-width:13em;font-size:clamp(40px,5.2vw,78px);line-height:1;letter-spacing:-.034em;margin-bottom:clamp(18px,1.8vw,26px)}
.invito__titolo::before{margin-inline:auto}
.invito__lead{max-width:30em;margin-bottom:clamp(28px,2.8vw,40px);color:var(--heading)}
.invito__azioni{justify-content:center}

/* ═══ tablet ═══ */
@media (max-width:1099px){
  .discipline__colonne{grid-template-columns:repeat(3,minmax(0,1fr))}
  .disciplina{min-height:400px}
  .training.centro__fascia{grid-template-columns:auto minmax(0,1fr)}
  .centro__testo{grid-column:2}
  .consegna__griglia{grid-template-columns:minmax(0,1fr)}
  .consegna__lead{max-width:36em}
  .incarichi{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:12px}
  .incarico:nth-child(4){border-left:0;padding-left:0}
}
@media (max-width:959px){
  .editoriale__riga{grid-template-columns:minmax(0,1fr)}
  .discipline__testa{grid-template-columns:minmax(0,1fr)}
  .discipline__colonne{grid-template-columns:minmax(0,1fr)}
  .disciplina{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:22px;align-items:start;min-height:0}
  .disciplina + .disciplina{border-left:0;border-top:1px solid var(--border)}
  .disciplina__num{position:absolute;top:22px;right:24px;font-size:52px}
  .disciplina__icona{grid-row:1 / span 2;--sq:76px;margin-top:0}
  .disciplina__titolo{margin-top:0;padding:6px 64px 0 0}
  .metodo__lista,.metodo__esito{margin-left:0}
  .training.centro__fascia{padding:40px 28px}
}

/* ═══ telefono ═══ */
@media (max-width:640px){
  /* l'ordine del telefono non è quello della home: la frase grande, SUBITO la foto larga a cavallo
     fra l'azzurro e il bianco, e solo dopo la riga con l'indirizzo e i due inviti affiancati.
     L'azzurro è il fondo dell'apertura; il bianco lo stende la riga, da metà foto in giù. */
  .hero.editoriale{container-type:inline-size;padding:28px 0 0;background:var(--soft)}
  .editoriale .container{display:flex;flex-direction:column}
  .editoriale .editoriale__titolo{font-size:clamp(30px,9.1vw,37px);line-height:1.04;letter-spacing:-.03em;margin-bottom:26px}
  .editoriale__foto{--d:1;order:1;margin:0 10px 10px 0;--fx:10px;--fy:10px}
  .editoriale__foto .photo{aspect-ratio:1.3}
  .editoriale__foto .photo img{object-position:18% 0}
  .editoriale__riga{order:2;position:relative;gap:18px;margin:0;padding:24px 0 10px;border-top:0}
  .editoriale__riga::before{content:"";position:absolute;z-index:-1;left:calc(var(--gutter) * -1);right:calc(var(--gutter) * -1);bottom:0;
    top:calc((100cqi - var(--gutter) * 2 - 10px) / -2.6 - 10px);background:var(--white)}
  .editoriale__lead{--d:2;font-size:16px;line-height:1.55}
  .editoriale__azioni{--d:3;flex-wrap:wrap;gap:14px 18px}
  .editoriale__azioni .btn{flex:none;width:auto;min-height:50px;padding:12px 18px;gap:10px;font-size:15px}
  .editoriale__azioni .link{flex:0 1 auto;width:min-content;align-items:flex-end;gap:8px;font-size:15px;line-height:1.3}
  .editoriale__azioni .link .icon{margin-bottom:2px}
  /* sotto i 380 px i due inviti non stanno affiancati: il link va a capo intero, su una riga */
  @media (max-width:379px){.editoriale__azioni .link{width:auto;align-items:center}.editoriale__azioni .link .icon{margin-bottom:0}}

  .discipline__testa{margin-bottom:24px}
  .disciplina{column-gap:16px;padding:22px 18px 22px}
  .disciplina__num{top:18px;right:16px;font-size:40px}
  .disciplina__icona{--sq:60px}
  .disciplina__titolo{padding:2px 48px 0 0;font-size:19px}
  .disciplina__testo{margin-top:6px;font-size:15px}

  .metodo__voce{gap:14px;padding:12px 0;font-size:17px;line-height:1.3}
  .metodo__spunta{--sq:42px}
  .metodo__spunta .icon{width:21px;height:21px}
  .metodo__esito{gap:10px;font-size:15.5px}
  .metodo__esito .icon{width:19px;height:19px}

  .training.centro__fascia{grid-template-columns:minmax(0,1fr);gap:18px;padding:32px 18px 26px;border-radius:var(--r)}
  .centro__testo{grid-column:auto}
  .centro__icona{--sq:64px}
  .centro__nota{font-size:15.5px}

  .consegna__tasselli{grid-template-columns:minmax(0,1fr);gap:10px}
  .tassello{flex-direction:row;align-items:center;justify-content:flex-start;gap:14px;min-height:0;padding:18px 16px}
  .tassello::after{inset:6px}
  .tassello .sq{--sq:44px}
  .tassello__testo{font-size:15px}

  .aziende__settori{font-family:var(--font);font-stretch:normal;font-size:15.5px;font-weight:550;line-height:1.85;letter-spacing:0}
  .settore .sq{--sq:22px;vertical-align:-.4em;margin-right:.26em}
  .settore .sq::after{inset:3px}
  .settore .sq .icon{width:13px;height:13px}
  .aziende__anno{margin-top:30px}
  .incarichi{grid-template-columns:minmax(0,1fr);row-gap:0;border-top:0}
  .incarichi .incarico{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:start;padding:12px 0;border-left:0;border-top:1px solid rgba(53,104,154,.16)}
  .incarico .sq{--sq:36px;grid-row:1 / span 2}
  .incarico .sq .icon{width:18px;height:18px}
  .incarico__comune{font-size:16.5px;padding-top:1px}
  .incarico__lavoro{font-size:15px}

  .invito{padding:64px 0 72px}
  .invito .invito__titolo{font-size:clamp(30px,8.6vw,36px);line-height:1.05}
  .invito__azioni{width:100%}
  .invito__azioni .link{align-self:center}
}

@media (prefers-reduced-motion:reduce){
  .disciplina,.disciplina::before,.tassello,.tassello::after{transition:none}
}