/* Host Grotesk (titoli) arriva dalla CDN di Google: il link sta nel <head>,
   lo mette render.py. Qui resta solo Tobias, il carattere del testo, che
   non è su Google e va servito da noi. */
@font-face {
  font-family: 'Tobias';
  src: url("font/Tobias-Regular.e5d0e4517d53.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Tobias';
  src: url("font/Tobias-RegularItalic.1bcda063bc7d.woff2") format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --as-blue: #003d62;
  --as-dark-blue: #00304d;
  --as-gold: #caaf75;
  --as-gold-50: rgba(202, 175, 117, 0.5);
  --as-body: #47708f;
  --as-light-grey: #e5e5e5;
  --as-bg: #fafafa;
  --as-bg-alt: #f3f5f7;
  --as-white: #ffffff;
  --as-shell: 1280px;
  --as-radius: 5px;
  --as-radius-btn: 41px;   /* i bottoni, e solo loro */
}

body {
  font-family: 'Host Grotesk', sans-serif;
  font-size: 16px;
  line-height: 1.2;
  color: var(--as-body);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin: 0;
  color: var(--as-blue);
  font-family: 'Tobias', Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.02em;
}

h1, .h1 { font-size: 50px; line-height: 56px; }
h2, .h2 { font-size: 42px; line-height: 52px; }
h3, .h3 { font-size: 33px; line-height: 40px; }
h4, .h4 { font-size: 28px; line-height: 32px; }
h5, .h5 { font-size: 23px; line-height: 30px; }
h6, .h6 { font-size: 22px; line-height: 26px; }

.small,
.eyebrow,
.pill,
.badge {
  font-family: 'Host Grotesk', sans-serif;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.body,
.body-t {
  font-family: 'Host Grotesk', sans-serif;
  font-size: 16px;
  line-height: 1.2;
  color: var(--as-body);
}

a {
  color: inherit;
  text-decoration-color: var(--as-gold);
  text-underline-offset: 0.2em;
}

button,
.btn,
input[type='submit'],
input[type='button'] {
  border-radius: var(--as-radius-btn);
  font-family: 'Host Grotesk', sans-serif;
  font-size: 14px;
  line-height: 1;
  font-weight: 500;
}

.btn,
button,
a.btn {
  border: 1px solid transparent;
}

.wrap,
header > div,
footer > div,
.navbar,
.container,
.shell {
  max-width: var(--as-shell);
  margin-left: auto;
  margin-right: auto;
}

/* Le pillole e le etichette a pillola stanno un gradino sopra le altre
   maiuscolette: 12px, non gli 11px di .small ed .eyebrow. L'etichetta
   annidata (.small dentro la pillola) va ripetuta qui, altrimenti si
   tiene i suoi 11px e la pillola non cambia di una virgola. */
.pill,
.badge {
  font-size: 11px;
}

.pill .small,
.pill .eyebrow,
.badge .small,
.badge .eyebrow {
  font-size: 11px;
}

.pill {
  border-radius: var(--as-radius-btn);
  border: 1px solid var(--as-gold-50);
}

.badge {
  border-radius: var(--as-radius-btn);
  border: 1px solid var(--as-gold-50);
}

.pill.solid,
.badge.solid,
.badge.fill {
  background: var(--as-gold);
  color: var(--as-white);
}

hr,
.rule {
  border: 0;
  border-top: 1px solid var(--as-light-grey);
}

header .navlink,
header nav a,
header nav .navitem > button,
header .menu a,
header .dropdown-wrap > a {
  font-family: 'Host Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--as-body);
}

header nav a:hover,
header nav .navitem > button:hover,
header .navlink:hover {
  color: var(--as-blue);
}

@media (max-width: 1100px) {
  h1, .h1 { font-size: 40px; line-height: 46px; }
  h2, .h2 { font-size: 32px; line-height: 40px; }
  h3, .h3 { font-size: 27px; line-height: 34px; }
  h4, .h4 { font-size: 24px; line-height: 30px; }
}

@media (max-width: 760px) {
  h1, .h1 { font-size: 34px; line-height: 40px; }
  h2, .h2 { font-size: 26px; line-height: 34px; }
  h3, .h3 { font-size: 24px; line-height: 30px; }
  h4, .h4 { font-size: 22px; line-height: 28px; }
}

/* Stacco sotto la sezione "L'associazione" in homepage. Margine, non padding:
   i 120px restano fuori dalla sezione, che non ha sfondo proprio. */
#chi-siamo {
  margin-bottom: 120px;
}


/* ══ Componenti «Assoholding 2026» ═══════════════════════════════════════
   Copiati da frontend-rebrand/Associazione.dc.html, che resta la pagina di
   riferimento del sistema. Stanno qui perché le altre pagine possano essere
   costruite con gli stessi pezzi invece di rifarli a stili inline.

   Il prototipo se li tiene anche nel suo <style>: aperto da solo, senza
   Django, deve continuare a vedersi giusto. render.py accoda questo foglio
   DOPO lo <style> della pagina, quindi a parità di specificità vince questo:
   le due copie vanno tenute uguali.

   Il padding laterale di .wrap non viene copiato: sul sito lo azzera
   layout-1280.css, che sopra i 980px porta la colonna a 1280 piena.
   ══════════════════════════════════════════════════════════════════════ */

.sec { padding: 110px 0; }

/* Badge appaiati (etichetta oro piena + tagline bordata) */
.badges { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.badge { display: inline-flex; align-items: center; justify-content: center; padding: 6px 18px; border-radius: 41px; border: 1px solid rgba(202,175,117,0.5); font: 700 11px/1.2 'Host Grotesk',system-ui,sans-serif; text-transform: uppercase; letter-spacing: 0.02em; color: #CAAF75; }
.badge.fill { background: #CAAF75; color: #fff; }
.badge.fill-blue { background: #CAAF75; color: #003D62; }
.badge.grey { background: #E5E5E5; border-color: #E5E5E5; color: #003D62; }

/* Tipografia */
.h-big { font: 400 42px/52px 'Tobias',Georgia,serif; letter-spacing: -1px; color: #003D62; margin: 0; text-indent: 160px; }
.h-big.white { color: #fff; }
.h3 { font: 400 33px/40px 'Tobias',Georgia,serif; letter-spacing: -0.33px; color: #003D62; margin: 0; }
.h4 { font: 400 28px/32px 'Tobias',Georgia,serif; letter-spacing: -0.28px; color: #003D62; margin: 0; }
.h5 { font: 400 23px/30px 'Tobias',Georgia,serif; letter-spacing: -0.23px; color: #003D62; margin: 0; }
.h6 { font: 400 22px/26px 'Tobias',Georgia,serif; letter-spacing: -0.22px; color: #003D62; margin: 0; }
.body-t { font: 400 16px/1.2 'Host Grotesk',system-ui,sans-serif; color: #47708F; margin: 0; }
.body-t.light { color: #E5E5E5; }
.eyebrow { font: 700 11px/1.2 'Host Grotesk',sans-serif; text-transform: uppercase; letter-spacing: 0.02em; color: #CAAF75; }

/* Bottoni rettangolari */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; border-radius: 41px; background: #003D62; color: #fff !important; font: 500 14px/1.2 'Host Grotesk',sans-serif; transition: box-shadow .2s ease, transform .2s ease; }
.btn:hover { box-shadow: 0 12px 26px -14px rgba(0,61,98,0.6); }
.btn.outline { background: transparent; color: #003D62 !important; border: 2px solid #003D62; padding: 12px 26px; }
.btn.white { background: #fff; color: #003D62 !important; }
/* La Homepage ha il suo sistema e chiama .invert il bottone bianco che qui
   si chiama .white. Il `color: #fff !important` di .btn — che serve a
   scavalcare i colori inline rimasti nei prototipi — glielo mangiava, e
   restavano quattro bottoni con la scritta bianca su fondo bianco. */
.btn.invert { background: #fff; color: #003D62 !important; }
.link { display: inline-flex; gap: 12px; align-items: center; font: 500 14px/1.2 'Host Grotesk',sans-serif; color: #003D62; }
.link.white { color: #fff; }
/* come la freccia dei bottoni: a riposo fuori e senza ingombro, all'hover
   entra da sinistra davanti al testo. 12px è il gap del .link */
.link .arr { order:-1; display:inline-block; width:10px; text-align:center; opacity:0;
             margin-left:-22px;   /* 10 di chevron + 12 di gap del .link */
             transition:margin-left .45s ease, opacity .3s ease; }
.link:hover .arr, .link:focus-visible .arr { opacity:1; margin-left:0; }

/* Griglie con linee sottili (hairline) */
.grid4 { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5; }
.grid4 > div { padding: 60px 30px 60px 24px; border-left: 1px solid #E5E5E5; }
.grid4 > div:nth-child(4n) { border-right: 1px solid #E5E5E5; }
.grid2 { display: grid; grid-template-columns: repeat(2,1fr); border-top: 1px solid #E5E5E5; }
/* Sei colonne per la fila dei loghi istituzionali: qui il filetto sta sulla
   cella, non sul div, perche' le celle sono .c-cella-nome */
.grid6 { display: grid; grid-template-columns: repeat(6,1fr); }
.grid6 > * + * { border-left: 1px solid #E5E5E5; }
/* La fascia dei loghi degli associati, la stessa di «Chi ci ha scelto»
   dell'homepage: quindici loghi su tre file da cinque. Sta in .bleed-rows,
   che porta le righe sopra e sotto a tutto schermo; i montanti chiudono la
   colonna da 1280 ai due lati. Le righe interne le disegna il gap da 1px
   sul fondo grigio, cosi' tengono a ogni numero di colonne (15: file piene
   a 5, 3 e 1). */
.loghi { display: grid; grid-template-columns: repeat(5,1fr); gap: 1px; background: #E5E5E5;
  border-left: 1px solid #E5E5E5; border-right: 1px solid #E5E5E5;
  width: min(1280px, calc(100% - 80px)); margin-inline: auto; }
.loghi > .logo-cell { background: #fff; min-width: 0; height: 207px; padding: 24px 28px;
  display: flex; align-items: center; justify-content: center; }
/* la scatola di responsive.css (156px) non deve uscire dalla cella quando
   la cella e' piu' stretta */
.loghi > .logo-cell .cli-logo { max-width: min(156px, 100%); }
/* come in homepage: tre per fila sotto i 1100, una sul telefono */
@media (max-width: 1100px) { .loghi { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 980px) { .loghi { width: calc(100% - 48px); } }
@media (max-width: 760px) {
  .loghi { grid-template-columns: 1fr; border-left: 0; border-right: 0; }
  .loghi > .logo-cell { height: 150px; }
  .loghi > .logo-cell .cli-logo { max-width: min(182px, 100%); }
}
.grid3 { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid #E5E5E5; }
/* Le righe sopra e sotto escono dalla colonna e corrono per tutta la
   larghezza dello schermo; il bordo della griglia lo porta il contenitore.
   Le celle stanno su 1280, la stessa misura dell'homepage: 40px per lato
   più larghe del .wrap, che di 1280 ne spende 80 in padding. */
.bleed-rows { border-top: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5; }
.dark .bleed-rows { border-color: #47708F; }
.bleed-rows > .grid2, .bleed-rows > .grid3, .bleed-rows > .grid4 { border-top: 0; border-bottom: 0;
  width: min(1280px, calc(100% - 80px)); margin-inline: auto; }
.grid2 > div { padding: 30px 30px 30px 24px; border-left: 1px solid #E5E5E5; }
.grid2 > div:nth-child(2n) { border-right: 1px solid #E5E5E5; }
/* La hero del Figma 474:512 divide 1280 in 869 e 411, non a meta'. */
.grid2.hero-griglia { grid-template-columns: 869fr 411fr; }
.grid3 > div { padding: 66px 30px 66px 24px; border-left: 1px solid #E5E5E5; }
/* Una griglia di schede a due colonne («Le forme di holding» con quattro
   voci): il respiro delle celle è quello della .grid3, non i 30px pensati
   per le celle della hero. Solo sopra i 980: più sotto vale la regola
   comune a tutte le griglie, che questa (più specifica) scavalcherebbe. */
@media (min-width: 981px) { .grid2.celle-ampie > div { padding: 66px 30px 66px 24px; } }
.grid3 > div:nth-child(3n) { border-right: 1px solid #E5E5E5; }
/* Dalla seconda riga in poi ogni cella porta anche il filetto sopra: senza,
   le righe di una griglia a piu' righe restano incollate. Il colore sul
   fondo scuro lo rimette la regola .dark qui sotto, che tocca tutti i lati. */
.grid2 > div:nth-child(n+3),
.grid3 > div:nth-child(n+4),
.grid4 > div:nth-child(n+5) { border-top: 1px solid #E5E5E5; }
.dark .grid4, .dark .grid3, .dark .grid2 { border-color: #47708F; }
.dark .grid4 > div, .dark .grid3 > div, .dark .grid2 > div { border-color: #47708F; }
/* L'icona è un quadrato pieno, il titolo no: sotto la sua riga resta lo
   spazio dei discendenti, sopra no. Con lo stesso margine la distanza
   dall'icona sembra più stretta di quella dal testo, quindi qui il
   margine è più largo di quanto il titolo si porta dietro. */

/* Righe numerate: lo stesso accordion dell'homepage. Il contenuto resta
   nella colonna del .wrap, le righe di separazione no: stanno fuori dal
   contenitore e corrono per tutta la larghezza dello schermo. */
.rule { border: 0; border-top: 1px solid #E5E5E5; margin: 0; }
.srow { display: grid; grid-template-columns: 217px 1fr auto; align-items: center; gap: 0;
        padding: 28px 0 27px;
        width: min(1280px, calc(100% - 80px)); margin-inline: auto;
        cursor: pointer; list-style: none; }
/* il triangolino nativo del <summary>: via in tutti e tre i motori */
.srow::-webkit-details-marker { display: none; }
.srow::marker { content: ''; }
.srow .chev { color: #CAAF75; }
/* il pannello che si apre: stessa colonna della testata, e il testo
   incolonnato sotto il titolo, non sotto il numero */
.srow-panel { width: min(1280px, calc(100% - 80px)); margin-inline: auto;
              padding: 0 0 28px 217px; }
.srow-panel > * + * { margin-top: 14px; }
/* Le FAQ delle pagine Servizi (domanda + chevron, senza numero) scrivono
   le colonne inline, e sotto i 940 responsive.css porta a una colonna
   ogni griglia inline: la chevron finiva sotto la domanda. Qui resta a
   destra, e la domanda va a capo nel suo spazio. */
@media (max-width: 940px) {
  .srow[style*="grid-template-columns:1fr auto"] { grid-template-columns: minmax(0, 1fr) auto !important;
                                                  column-gap: 16px; }
}

/* apertura e chiusura. <details> di suo scatta: da chiuso il contenuto è
   nascosto dal browser e non c'è niente da interpolare. ::details-content
   è la scatola che il browser gli mette attorno, ed è lì che la transizione
   si aggancia; interpolate-size serve perché senza, un'altezza «auto» non è
   un valore interpolabile. Dove non è supportato apre di scatto, come un
   <details> qualsiasi: nessun danno. */
:root { interpolate-size: allow-keywords; }
.srow-item::details-content {
  block-size: 0; overflow: hidden;
  transition: block-size .5s cubic-bezier(.32,.72,0,1),
              content-visibility .5s allow-discrete; }
.srow-item[open]::details-content { block-size: auto; }
/* il contenuto entra in dissolvenza un filo dopo l'altezza, così non sembra
   che scivoli fuori dal bordo */
.srow-panel { opacity: 0; transition: opacity .34s ease .08s; }
.srow-item[open] .srow-panel { opacity: 1; }
/* la freccia gira con la stessa curva e lo stesso tempo dell'apertura */
.srow .chev { transition: transform .5s cubic-bezier(.32,.72,0,1); }
.srow-item[open] > .srow .chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .srow-item::details-content, .srow-panel, .srow .chev { transition: none; }
}

/* Chip / pillole */
.chip { display: inline-flex; align-items: center; padding: 10px 30px; border-radius: 41px; background: #E5E5E5; color: #003D62; font: 400 16px/26px 'Host Grotesk',sans-serif; letter-spacing: -0.22px; white-space: nowrap; }
.chip.blue { background: #003D62; color: #fff; }

.sq { width: 48px; height: 48px; border-radius: 50%; background: #E5E5E5; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

@media (max-width: 980px){
  .wrap { padding: 0 24px; }
  .sec { padding: 64px 0; }
  .h-big { font-size: 30px; line-height: 38px; text-indent: 0; }
  .grid4, .grid3, .grid2, .split { grid-template-columns: 1fr !important; }
  .grid6 { grid-template-columns: repeat(2,1fr); }
  .grid4 > div, .grid3 > div, .grid2 > div { border-left: none; border-right: none !important; border-top: 1px solid #E5E5E5; padding: 32px 0; }
  .srow, .srow-panel,
  .bleed-rows > .grid2, .bleed-rows > .grid3, .bleed-rows > .grid4 { width: calc(100% - 48px); }
  .srow { grid-template-columns: 80px 1fr auto; padding: 24px 0; }
  .srow-panel { padding-left: 80px; }
  .sistema-grid, .timeline-row { grid-template-columns: 1fr !important; }
  .badges { margin-bottom: 40px !important; }
}
/* freccia dei bottoni: la stessa chevron dei link «Scopri di più», ma del
   colore del testo del bottone (currentColor), non oro. A riposo sta fuori
   dal bottone e non occupa spazio: i -20px se la riprendono tutta, 10 di
   chevron più 10 di stacco dal testo. Lo stacco è quello per ogni bottone,
   gap compreso (--g), così la freccia si comporta uguale dappertutto.
   All'hover il margine va a zero: scivola dentro e spinge il testo. */
.arrow-in { flex:none; width:10px; height:15px; opacity:0; vertical-align:middle;
            margin-right:calc(10px - var(--g, 0px));
            margin-left:-20px;
            transition:margin-left .45s ease, opacity .3s ease; }
/* il discendente serve ai bottoni finti dentro una card: «Leggi la guida»
   è uno <span>, e la freccia deve accendersi passando sulla card */
a:hover .arrow-in, button:hover .arrow-in, :hover > .arrow-in,
a:focus-visible .arrow-in, button:focus-visible .arrow-in,
:focus-visible > .arrow-in { opacity:1; margin-left:0; }
/* le frecce dei link sono la stessa chevron dei bottoni: in mezzo al testo
   va allineata a metà riga, non sulla linea di base */
.chev-lnk{ vertical-align:middle; flex:none; }

/* La freccia di un link non si vede da ferma: entra al passaggio del mouse.
   Regola dell'utente del 23/09/2026, per tutto il sito. L'Academy ne resta
   fuori da sola, perche' questo foglio non glielo mettiamo.

   Vale solo dentro qualcosa su cui si passa davvero — un <a>, un <summary>,
   una card .hoverable. Le stesse chevron usate come pallino di un elenco
   (su Associati ce ne sono dodici, grigie, dentro un <div> qualsiasi) non
   sono frecce di link e restano visibili.

   Il margine negativo vale la larghezza della chevron: da ferma non occupa
   spazio, all'hover se lo riprende. E' lo stesso meccanismo di .arrow-in
   sui bottoni. */
a .chev-lnk, summary .chev-lnk, .hoverable .chev-lnk {
  opacity: 0; margin-right: -10px;
  transition: opacity .3s ease, margin-right .45s ease; }
a:hover .chev-lnk, a:focus-visible .chev-lnk,
summary:hover .chev-lnk, summary:focus-visible .chev-lnk,
.hoverable:hover .chev-lnk, .hoverable:focus-within .chev-lnk {
  opacity: 1; margin-right: 0; }
/* dentro .arr la freccia dev'essere piena: a nasconderla ci pensa il
   contenitore, che ha il suo scorrimento da sinistra */
.link .arr .chev-lnk { opacity: 1; margin-right: 0; transition: none; }


/* ══ Componenti estratti dalle pagine ════════════════════════════════════
   Primo passo della rifattorizzazione: gli stili che si ripetevano identici
   su decine di elementi diventano classi. I VALORI NON CAMBIANO — sono
   quelli che il browser già riceveva, cioè il pattern del prototipo passato
   per la normalizzazione di render.py (ori, caratteri e raggi del 2026).
   Così la pagina rende come prima e un errore di refactoring si distingue
   da una scelta di design.

   Il passo dopo è allineare questi valori a quelli di Associazione: da lì
   in avanti si cambia qui, una volta, per tutto il sito.
   ══════════════════════════════════════════════════════════════════════ */

.c-spunta.grande { width:42px; height:42px; }
.c-spunta { flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:#CAAF75; display:inline-flex; align-items:center; justify-content:center; }
.c-cella-nome { background:#fff; padding:26px 16px; display:flex; align-items:center; justify-content:center; font: 400 18px/1.3 'Tobias',Georgia,serif; color:#003D62; text-align:center; }
.c-occhiello { font: 700 11px/1.2 'Host Grotesk',sans-serif; text-transform:uppercase; letter-spacing:0.02em; color:#CAAF75; margin-bottom:18px; }
.c-card { background:#fff; border:1px solid #E5E5E5; border-radius:5px; padding:36px 34px; }
.c-card-s { background:#fff; border:1px solid #E5E5E5; border-radius:5px; padding:32px 28px; }
.c-icona { width:54px; height:54px; border-radius:5px; background:#003D62; display:flex; align-items:center; justify-content:center; }
.c-numero-cerchio { flex:none; width:30px; height:30px; border-radius:41px; border:1px solid rgba(202,175,117,0.5); display:flex; align-items:center; justify-content:center; font:700 11px/1 'Host Grotesk',sans-serif; color:#CAAF75; }
.c-numero { font-family:'Tobias',serif; font-size:28px; color:#CAAF75; line-height:1; }
.c-numero-l { font: 400 33px/40px 'Tobias',Georgia,serif; color:#CAAF75; }
.c-pallino { flex:0 0 auto; font-size:23px; color:#CAAF75; font-weight:400; line-height:1; }
.c-claim { font: 400 20px/26px 'Tobias',Georgia,serif; letter-spacing:-0.22px; color:#CAAF75; margin-bottom:16px; }
.c-riga { display:flex; gap:14px; align-items:flex-start; }
.c-riga-16 { display:flex; gap:16px; align-items:flex-start; }
.c-riga-elenco { padding:22px 0; border-top:1px solid #E5E5E5; }
.c-riga-testata { display:flex; justify-content:space-between; align-items:center; gap:20px; font: 400 20px/26px 'Tobias',Georgia,serif; letter-spacing:-0.22px; color:#003D62; }
.c-tit-card { font: 400 20px/26px 'Tobias',Georgia,serif; letter-spacing:-0.22px; color:#003D62; margin:0 0 12px; }
.c-tit-s { font: 400 20px/26px 'Tobias',Georgia,serif; letter-spacing:-0.2px; color:#003D62; margin:0 0 8px; }
.c-tit-scuro { font: 400 20px/26px 'Tobias',Georgia,serif; letter-spacing:-0.2px; color:#fff; margin:0 0 5px; }
.c-tit-scuro-s { font: 400 18px/22px 'Tobias',Georgia,serif; color:#fff; }
.c-testo-m { font: 400 16px/1.5 'Host Grotesk',system-ui,sans-serif; color:#47708F; }
.c-testo-sez { font: 400 16px/1.6 'Host Grotesk',system-ui,sans-serif; color:#47708F; margin:14px 0 0; max-width:820px; }
.c-testo { font: 400 16px/1.6 'Host Grotesk',system-ui,sans-serif; color:#47708F; margin:0; }
.c-testo-s { font: 400 14px/1.55 'Host Grotesk',system-ui,sans-serif; color:#47708F; margin:0; }
.c-testo-xs { font: 400 14px/1.55 'Host Grotesk',system-ui,sans-serif; color:#47708F; margin:0; }
.c-testo-scuro { font: 400 14px/1.55 'Host Grotesk',system-ui,sans-serif; color:#E5E5E5; margin:0; }
.c-testo-scuro-s { font: 400 14px/1.5 'Host Grotesk',system-ui,sans-serif; color:#E5E5E5; }

/* Hero a due colonne delle pagine Servizi: testo a sinistra, pannello a
   destra. Sotto i 980 diventa una colonna sola, come ogni altra griglia. */
.hero-2col { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: center; }
.c-pannello { background: #fff; border: 1px solid #E5E5E5; border-radius: 5px; padding: 36px; }
@media (max-width: 980px) { .hero-2col { grid-template-columns: 1fr; gap: 40px; } }

/* Varianti per le fasce scure. Il bottone resta la pillola da 41px: cambia
   solo il colore, perché il blu su blu non si vedrebbe. */
.btn.gold { background: #CAAF75; color: #fff !important; }
.btn.outline.white { background: transparent; color: #fff !important; border: 2px solid rgba(202,175,117,0.7); }
/* Il pannello sulla fascia scura, coi valori letti dal Figma 469:10475:
   fondo #00304D al 75% — cosi' il blu della fascia traspare — e un alone
   morbido nel colore del corpo, senza scostamento. Non e' un'ombra che
   cade: e' una luce intorno al riquadro. */
.c-pannello.scuro { background: rgba(0,48,77,0.75); border-color: rgba(255,255,255,0.10);
                    box-shadow: 0 0 40px rgba(71,112,143,0.7); }
.h2.white, .h3.white, .h4.white, .h5.white, .h6.white { color: #fff; }

/* Due pezzi che si ripetevano a mano nei pannelli delle hero Servizi:
   l'etichetta in grassetto accanto alla spunta e il filo che separa
   l'elenco dal numero in fondo. */
.c-etichetta { font: 600 18px/1.4 'Host Grotesk',system-ui,sans-serif; color: #003D62; }
.c-filo { height: 1px; background: #E5E5E5; margin: 26px 0; }

/* Indice dei contenuti dentro un pannello: una voce per riga, divisa da un
   filo, con la stessa chevron dei bottoni. */
.c-voce-indice { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 4px; border-top: 1px solid #E5E5E5;
  font: 500 14px/1.2 'Host Grotesk',sans-serif; color: #003D62; }
.c-voce-indice svg { flex: none; color: #CAAF75; }

/* Su fascia scura il colore lo decide la fascia, non l'attributo style di
   ogni riga: cosi' la stessa riga serve il chiaro e lo scuro senza essere
   riscritta due volte. */
.dark .c-filo { background: rgba(255,255,255,0.22); }
.dark .c-voce-indice { border-color: rgba(255,255,255,0.22); color: #fff; }
.dark .c-etichetta,
.dark .c-testo strong { color: #fff; }
.dark .c-testo,
.dark .c-testo-s,
.dark .c-testo-m,
.dark .c-testo-xs { color: #E5E5E5; }

/* Una scheda bianca dentro una fascia scura — il modulo della CTA — rimette
   i testi sul chiaro: senza, la riga della privacy resta grigia su bianco. */
.dark .su-chiaro .c-testo,
.dark .su-chiaro .c-testo-s,
.dark .su-chiaro .c-testo-m,
.dark .su-chiaro .c-testo-xs { color: #47708F; }
.dark .su-chiaro .c-etichetta { color: #003D62; }

/* Il pannello blu del modulo contatti delle pagine Servizi («Analisi
   preliminare gratuita»): sta dentro il .wrap, quindi i suoi bordi sono
   quelli della barra di navigazione. Sul telefono i 75 di respiro e i 40
   della scheda bianca lasciavano ai campi meno di 250px su 390. */
.cta-pannello { background: #003D62; border-radius: 5px; padding: 75px; }
.cta-scheda { background: #fff; border-radius: 5px; padding: 40px; }
@media (max-width: 760px) {
  .cta-pannello { padding: 40px 20px; }
  .cta-scheda { padding: 28px 20px; }
}
/* «Un esempio concreto» e i riquadri simili delle pagine Servizi: lo stesso
   pannello, con 96 sopra e sotto e 24 ai lati; a destra le cifre in elenco
   fra righe sottili. */
.cta-pannello.esempio { padding: 96px 24px; }
@media (max-width: 760px) { .cta-pannello.esempio { padding: 48px 20px; } }
/* La fascia dell'assessment gratuito delle pagine Servizi: una cella sulla
   colonna da 1280, chiusa dai montanti, fra le righe a tutta larghezza di
   .bleed-rows; dentro occhiello oro, titolo e il bottone blu. Sotto i 980
   i montanti cadono, come nelle altre griglie fra righe. */
.assess { width: min(1280px, calc(100% - 80px)); margin-inline: auto; box-sizing: border-box;
  border-left: 1px solid #E5E5E5; border-right: 1px solid #E5E5E5; padding: 75px 108px;
  display: flex; flex-direction: column; align-items: flex-start; }
@media (max-width: 980px) { .assess { width: calc(100% - 48px); border-left: 0; border-right: 0; padding: 48px 0; } }

/* Le pagine delle persone (Advisory Board, Figma 651:1148).
   .colonna: una cella sulla colonna da 1280 chiusa dai montanti, da mettere
   in .bleed-rows (la hero). .h1-hero: il titolo da 60 della hero, con gli
   stessi tagli della hero dell'homepage. */
.colonna { width: min(1280px, calc(100% - 80px)); margin-inline: auto; box-sizing: border-box;
  border-left: 1px solid #E5E5E5; border-right: 1px solid #E5E5E5; }
@media (max-width: 980px) { .colonna { width: calc(100% - 48px); border-left: 0; border-right: 0; } }
.dark .colonna { border-color: #47708F; }
.colonna.hero-persone { padding: 76px 24px 72px; }
@media (max-width: 980px) { .colonna.hero-persone { padding: 56px 0; } }
.h1-hero { font-size: 60px; line-height: 66px; letter-spacing: -0.6px; }
@media (max-width: 1100px) { .h1-hero { font-size: 48px; line-height: 54px; } }
@media (max-width: 760px) { .h1-hero { font-size: 38px; line-height: 44px; } }

/* La griglia delle persone: quattro card da 320 sulla colonna da 1280, fra
   righe a tutta larghezza. Ogni gruppo (la «sezione» dell'incarico) ha la
   sua etichetta centrata fra due righe; senza sezione resta un gruppo solo,
   senza etichetta. I montanti li danno il bordo sinistro della griglia e
   quello destro di ogni card, le righe fra le file il bordo sotto: cosi'
   un'ultima fila incompleta resta chiusa, senza celle vuote disegnate. Il
   -1px sotto la griglia fa coincidere l'ultima riga con quella del gruppo. */
.persone-gruppo + .persone-gruppo { margin-top: 120px; }
.persone-etichetta { margin: 0; padding: 12px 24px; border-top: 1px solid #E5E5E5; text-align: center;
  font: 400 22px/26px 'Tobias',Georgia,serif; letter-spacing: -1px; color: #47708F; }
.persone-righe { border-top: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5; }
.persone { display: grid; grid-template-columns: repeat(4,1fr); margin: 0 auto -1px;
  width: min(1280px, calc(100% - 80px)); border-left: 1px solid #E5E5E5; }
.persona { display: flex; flex-direction: column; min-width: 0; color: inherit;
  border-right: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5; }
.persona-foto { aspect-ratio: 4/5; background: #FAFAFA; overflow: hidden; border-bottom: 1px solid #E5E5E5; }
.persona-foto > img { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.persona:hover .persona-foto > img { transform: scale(1.03); }
.persona-testo { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 23px 22px; }
.persona-nome { font: 400 22px/26px 'Tobias',Georgia,serif; letter-spacing: -1px; color: #003D62; }
.persona-ruolo { margin-top: 8px; font: 300 16px/1.3 'Host Grotesk',system-ui,sans-serif; color: #003D62; }
@media (max-width: 980px) {
  .persone { grid-template-columns: repeat(2,1fr); width: calc(100% - 48px); }
  .persone-gruppo + .persone-gruppo { margin-top: 96px; }
}
@media (max-width: 560px) { .persone { grid-template-columns: 1fr; } }
@media (max-width: 940px) {
  section:has(> .persone-elenco), section:has(> .stampa-anno) { padding-left: 0 !important; padding-right: 0 !important; }
}

/* L'organigramma degli Organi (Figma 651:1787): le stesse card, ma chiuse
   tutt'intorno e in file centrate (chi ha una carica tutta sua sta solo al
   centro, i consiglieri occupano la colonna), legate da un tratto verticale.
   I bordi sono un'ombra da 1px fuori dalla card e le card stanno a 1px
   l'una dall'altra: le due ombre cadono sullo stesso pixel, la riga resta
   singola anche quando una fila va a capo. */
.persone-etichetta.chiusa { border-bottom: 1px solid #E5E5E5; }
.organigramma { width: min(1280px, calc(100% - 80px)); margin: 76px auto 0; }
.organigramma + .persone-etichetta { margin-top: 120px; }
.organigramma-fila { display: flex; flex-wrap: wrap; justify-content: center; gap: 1px; }
.organigramma-fila > .persona { flex: 0 0 calc((100% - 3px) / 4); border: 0; box-shadow: 0 0 0 1px #E5E5E5; }
.organigramma .persona-ruolo { color: #47708F; }
.organigramma-tratto { width: 1px; height: 75px; margin: 1px auto; background: #E5E5E5; }
@media (max-width: 980px) {
  .organigramma { width: calc(100% - 48px); margin-top: 56px; }
  .organigramma-fila > .persona { flex-basis: calc((100% - 1px) / 2); }
  .organigramma-tratto { height: 48px; }
}
@media (max-width: 560px) { .organigramma-fila > .persona { flex-basis: 100%; } }

/* La rassegna della Sala stampa (Figma 654:2051): un'etichetta per anno
   (.persone-etichetta.chiusa), poi una riga per lancio, alta 80, fra righe
   a tutta larghezza. Dentro, sulla colonna da 1280: fonte e data in oro,
   il titolo a 22 e la chevron oro da 14x21. Qui la chevron resta sempre
   visibile, per scelta dell'utente: è l'eccezione alla regola delle frecce
   solo al passaggio (a .chev-lnk, piu' su). */
.stampa-anno + .stampa-anno { margin-top: 120px; }
.stampa-riga { display: grid; grid-template-columns: 217px minmax(0, 954px) minmax(24px, 1fr); align-items: center;
  min-height: 80px; box-sizing: border-box; padding: 14px max(40px, calc((100% - 1280px) / 2));
  border-bottom: 1px solid #E5E5E5; color: inherit; transition: background-color .25s ease; }
.stampa-riga:hover { background: #FAFAFA; }
.stampa-fonte { font: 700 12px/1.25 'Host Grotesk',sans-serif; text-transform: uppercase; color: #CAAF75; }
.stampa-titolo { font: 400 22px/26px 'Tobias',Georgia,serif; letter-spacing: -1px; color: #003D62; }
.stampa-riga > .chev-lnk { justify-self: end; color: #CAAF75; width: 14px; height: 21px; opacity: 1; margin-right: 0; }
@media (max-width: 980px) { .stampa-riga { padding-inline: 24px; } }
@media (max-width: 760px) {
  .stampa-riga { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; padding-block: 20px; }
  .stampa-fonte { grid-column: 1 / -1; }
  .stampa-titolo { font-size: 20px; line-height: 25px; }
  .stampa-anno + .stampa-anno { margin-top: 96px; }
}

/* Campi dei moduli: gli stessi della mailing list dell'homepage, che se li
   tiene anche nel suo <style> — le due copie vanno tenute uguali. Niente
   etichetta sopra: il nome del campo sta nel placeholder (e in aria-label). */
.field { width: 100%; box-sizing: border-box; font: 400 16px/1.4 'Host Grotesk',system-ui,sans-serif;
         color: #003D62; padding: 15px 18px; border: 1px solid #E5E5E5; border-radius: 5px;
         background: #fff; outline: none; transition: border-color .18s ease; }
.field::placeholder { color: #8EA7B8; }
.field:focus { border-color: #CAAF75; }

/* Passi numerati in colonna (Figma «Landing Tipologia 2», «Come lavoriamo»
   e «Un esempio concreto»): un cerchio oro al 50% da 50 col numero, una
   linea verticale dello stesso oro che li lega e, a 41 dal cerchio,
   titolo e testo fra due filetti grigi. I filetti corrono solo sotto il
   testo, non sotto i cerchi. La linea parte dall'alto della lista e si
   ferma al centro dell'ultimo cerchio: ogni voce ne porta il suo pezzo. */
.passi { list-style: none; margin: 0; padding: 0; }
.passi > li { position: relative; display: grid; grid-template-columns: 50px 1fr; column-gap: 41px; }
.passi > li::before { content: ""; position: absolute; left: 24.5px; top: 0; bottom: 0; width: 1px;
                      background: rgba(202,175,117,0.5); }
/* 27 di respiro sopra il titolo + 4 di scarto del cerchio + metà cerchio */
.passi > li:last-child::before { bottom: auto; height: 56px; }
.passo-n { position: relative; z-index: 1; width: 50px; height: 50px; margin-top: 31px; border-radius: 50%;
           background: #E4D7BA; display: flex; align-items: center; justify-content: center;
           font: 400 23px/30px 'Tobias',Georgia,serif; color: #003D62; }
.passo-testo { border-top: 1px solid #E5E5E5; padding: 27px 0; }
.passi > li:last-child .passo-testo { border-bottom: 1px solid #E5E5E5; }
.passo-testo > * + * { margin-top: 8px; }

/* Il consenso privacy dei moduli: casella e frase stanno in un <label>
   flex, e la frase è uno <span> solo (se testo e link fossero figli
   sciolti del label, diventerebbero tre colonne). Sotto i 940
   responsive.css manda a capo i flex delle section: lo span, che partiva
   largo quanto la riga, scendeva sotto la casella. Con base 0 si stringe
   accanto a lei e va a capo dentro di sé. */
label > input[type="checkbox"] + span { flex: 1 1 0; min-width: 0; }

/* Una cella lasciata vuota apposta in una .split, per tenere il testo nella
   colonna di destra. Quando le colonne si impilano non deve occupare un
   posto: lo spazio della griglia resterebbe lì come un buco sopra il testo. */
@media (max-width: 980px) { .split > .vuota { display: none; } }

/* Le righe a tutta larghezza (.bleed-rows) devono toccare i bordi dello
   schermo anche sul telefono: responsive.css dà 16-20px di fianco a ogni
   section sotto i 940, e le righe si fermavano lì. Il contenuto non ne
   risente: .wrap e le griglie in .bleed-rows hanno già i loro 24px. */
@media (max-width: 940px) {
  section:has(> .bleed-rows) { padding-left: 0 !important; padding-right: 0 !important; }
}
/* Sotto i 980 le celle impilate si separano col bordo superiore: la prima,
   dentro .bleed-rows, lo avrebbe subito sotto la riga a tutta larghezza,
   e le due righe a un pixel di distanza si leggono come una riga doppia. */
@media (max-width: 980px) {
  .bleed-rows > .grid2 > div:first-child,
  .bleed-rows > .grid3 > div:first-child,
  .bleed-rows > .grid4 > div:first-child { border-top: 0 !important; }
}

/* Le pile stanno in fondo apposta. Sono utilita' di impaginazione e devono
   vincere sul margine azzerato dei componenti, ma hanno la stessa
   specificita' di .c-testo e .body-t: a parita' vince chi e' scritto dopo,
   quindi devono stare qui e non piu' su, fra le griglie. */
.stack12 > * + * { margin-top: 12px; }
.stack22 > * + * { margin-top: 22px; }
.stack22 > .sq + * { margin-top: 30px; }