/* ==========================================================================
   SUNPRIME — Pagina "Chi siamo"
   Ricostruita dal frame Figma CHI SIAMO (2844:2731) del file SUNPRIME (interno).
   Canvas di riferimento 1920×12697, contenuto 1760 con gutter 80.

   Le misure di Figma sono espresse in clamp(min, Nvw, max): a 1920px di
   viewport coincidono al pixel con il progetto, sotto scalano senza salti.
   N = valore / 1920 * 100.
   ========================================================================== */

.page-chisiamo {
  /* I raggi e la scala tipografica stanno in base.css: valgono per tutto il
     sito, non solo per questa pagina. Qui restano i soli alias .cs-*, cosi'
     le regole gia' scritte non vanno riscritte tutte. */
  --cs-radius-panel: var(--radius-panel);
  --cs-radius-card: var(--radius-card);
  --cs-radius-media: var(--radius-media);

  /* Ritmo verticale: le sezioni del Figma respirano molto */
  --cs-pad-block: clamp(64px, 6.25vw, 120px);

  /* Passaggio del mouse su card e schede media: curva dolce, senza scatto
     iniziale, e durate lunghe. I due effetti condividono questi valori per
     restare identici fra loro. */
  --cs-ease-morbido: var(--ease-morbido);
  --cs-salita: 10px;
  --cs-durata-salita: .62s;
  --cs-durata-riempimento: var(--durata-riempimento);
  --cs-ombra: 0 14px 34px rgba(0, 0, 0, .2);

  background: var(--c-navy);
  color: var(--c-white);
}

/* Il footer del sito è su fondo blu come in Figma (rect 7031) */
.page-chisiamo .site-footer-wrap { background: var(--c-blue); }

/* Le griglie e i caroselli sono liste: vanno azzerati padding e marcatori,
   altrimenti i 40px di default del browser stringono ogni colonna. */
/* Il reset ha specificita' zero, anche sulla classe della pagina: con
   .page-chisiamo fuori dal :where() valeva quanto .cs-news-row, e siccome
   questo foglio carica dopo components.css ne azzerava il margine — il nastro
   news finiva attaccato al pulsante "Scopri di piu'" (feedback 14/09). */
:where(.page-chisiamo) :where(ul[class^="cs-"], ul[class*=" cs-"]) {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   Testo: due stili ricorrenti in tutta la pagina
   -------------------------------------------------------------------------- */

/* Occhiello mono (SOSTENIBILITÀ, PROGETTI, FOUNDERS, FAQ…) */
.cs-eyebrow {
  font-size: var(--fs-32);
  line-height: 1.5;
  font-weight: 400;
  font-variation-settings: "MONO" 100, "wght" 400;
  text-transform: uppercase;
  margin: 0;
  color: var(--c-white);
}

/* Colonna destra: titolo + testo, larghezza 873 su 1760 */
.cs-col {
  width: min(100%, 49.6%);
  margin-left: auto;
}
.cs-col h2 {
  font-size: var(--fs-48);
  line-height: 1;
  letter-spacing: -0.01em;
  font-weight: 400;
  margin: 0;
}
.cs-col p {
  font-size: var(--fs-32);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 400;
  margin: clamp(16px, 1.25vw, 24px) 0 0;
}
.cs-col .btn { margin-top: clamp(24px, 2.08vw, 40px); }
/* Nelle news il pulsante sta subito sotto il testo (Figma: 40px, non 136) */
.cs-news .cs-col .btn { margin-top: clamp(16px, 1.46vw, 28px); }

.cs-split {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(24px, 3vw, 56px);
}

/* --------------------------------------------------------------------------
   1. Hero — resta fermo mentre il pannello blu gli sale sopra
   -------------------------------------------------------------------------- */

.cs-cover { position: relative; }

.cs-hero {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100svh;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #01030f;
}
.cs-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cs-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 42%;
  display: block;
}
/* Velo scuro in basso: il testo bianco deve reggere sopra la foto */
.cs-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(1,3,15,.15) 0%, rgba(1,3,15,0) 30%, rgba(1,3,15,.55) 78%, rgba(1,3,15,.78) 100%);
}

.cs-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: clamp(40px, 4.7vw, 90px);
}
/* Filetto sopra il blocco di testo (PROGRESS LINE del Figma) */
.cs-hero-rule {
  height: 2px;
  background: var(--c-white);
  transform: scaleX(0);
  transform-origin: 0 50%;
  animation: cs-line 1s cubic-bezier(.22,1,.36,1) .25s forwards;
}
@keyframes cs-line { to { transform: scaleX(1); } }
.cs-hero-text {
  display: flex;
  align-items: flex-start;
  gap: clamp(24px, 2.8vw, 54px);
  padding-top: clamp(20px, 1.7vw, 32px);
}
.cs-hero-text h1 {
  flex: 0 0 auto;
  width: min(100%, 42.4%);
  font-size: var(--fs-44);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 500;
  margin: 0;
}
.cs-hero-text p {
  flex: 1 1 auto;
  max-width: 49.3%;
  margin: 0 0 0 auto;
  font-size: var(--fs-28);
  line-height: 1.5;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.cs-hero-text h1,
.cs-hero-text p {
  opacity: 0;
  transform: translateY(18px);
  animation: cs-rise .9s cubic-bezier(.22,1,.36,1) .5s forwards;
}
.cs-hero-text p { animation-delay: .62s; }
@keyframes cs-rise { to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   2. Blocco blu introduttivo — sale sopra l'hero
   -------------------------------------------------------------------------- */

.cs-intro {
  position: relative;
  z-index: 1;
  background: var(--c-blue);
  border-radius: var(--cs-radius-panel) var(--cs-radius-panel) 0 0;
  padding-block: clamp(72px, 9.22vw, 177px) clamp(80px, 12.08vw, 232px);
}
.cs-intro-inner { max-width: 83.7%; }   /* 1472 su 1760 */
/* Revisione 21/09: stesso trattamento dei numeri della home. Il testo occupa
   la parte alta e a sinistra restava una fascia di blu piatto: la scintilla
   entra li' sotto, grande e appena accennata, e l'alone le da' profondita'.
   Qui non ci sono cifre da far salire: la sezione e' di solo testo. */
.sfondo-forme-intro {
  --forme-x: 4%;
  --forme-y: 78%;
  --forme-dim: clamp(200px, 26vw, 470px);
  --forme-giro: -8deg;
  --forme-segno: rgba(255, 255, 255, 0.06);
  --forme-alone: rgba(0, 13, 51, 0.22);
}
.cs-intro .cs-lead {
  font-size: var(--fs-40);
  line-height: 1;
  letter-spacing: -0.01em;
  font-weight: 400;
  margin: 0;
  max-width: 49.3%;
}
.cs-intro .cs-statement {
  font-size: var(--fs-64);
  line-height: 1.1;
  font-weight: 500;
  margin: clamp(28px, 2.5vw, 48px) 0 0;
}
.cs-intro .cs-statement + .cs-statement { margin-top: 1.1em; }

/* --------------------------------------------------------------------------
   3. L'integrazione che crea valore — 7 card
   -------------------------------------------------------------------------- */

.cs-chain {
  background: var(--c-navy);
  padding-block: clamp(64px, 7.08vw, 136px) clamp(64px, 7.08vw, 136px);
}
/* La testata è centrata sul canvas (x 376, larghezza 1167) */
.cs-chain-head {
  max-width: 66.3%;
  margin: 0 auto clamp(48px, 4.2vw, 80px);
}
.cs-chain-head .cs-lead {
  font-size: var(--fs-40);
  line-height: 1;
  letter-spacing: -0.01em;
  font-weight: 400;
  margin: 0;
}
.cs-chain-head p:last-child {
  font-size: var(--fs-48);
  line-height: 1.1;
  font-weight: 500;
  margin: clamp(28px, 2.5vw, 48px) 0 0;
}

/* Griglia 4×2 del Figma (Frame 298, 3143:6329): card 424×330, spazi 21 e 20.
   La cella (.cs-card) tiene il posto e non cambia mai misura. Quello che si
   apre e' il pannello dentro (.cs-card-panel), posizionato sopra la cella:
   aperto si allunga sulla cella della stessa colonna, sotto o sopra, e la
   copre. Nessun'altra card si sposta — e' questo che impedisce le aperture a
   catena quando il mouse resta fermo (feedback 14/09). */
.cs-chain-grid {
  --cs-chain-gap: clamp(10px, 1.04vw, 20px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(10px, 1.09vw, 21px);
  row-gap: var(--cs-chain-gap);
}

.cs-card {
  position: relative;
  aspect-ratio: 424 / 330;
  /* Le misure interne sono in cqi, cioe' in proporzione alla larghezza della
     card: numero, icona ed etichetta stanno dentro la cella a qualunque
     larghezza, con le proporzioni del Figma a 424px. */
  container-type: inline-size;
}
.cs-card-panel {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  border: 2px solid var(--c-blue);
  border-radius: var(--cs-radius-card);
  background: var(--c-navy);
  color: var(--c-blue);
  overflow: hidden;
  isolation: isolate;
  transition: top .55s var(--cs-ease-morbido), bottom .55s var(--cs-ease-morbido), color .4s var(--ease);
}
/* Riempimento blu che entra dal basso quando la card si apre */
.cs-card-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-blue);
  transform: translateY(101%);
  transition: transform var(--cs-durata-riempimento) var(--cs-ease-morbido);
}
.cs-card.is-open { z-index: 2; }
.cs-card.is-open .cs-card-panel { color: var(--c-white); }
.cs-card.is-open .cs-card-panel::before { transform: translateY(0); }
/* Verso: chisiamo.js mette .apre-giu o .apre-su secondo la riga */
.cs-card.is-open.apre-giu .cs-card-panel { bottom: calc(-100% - var(--cs-chain-gap)); }
.cs-card.is-open.apre-su .cs-card-panel { top: calc(-100% - var(--cs-chain-gap)); }

.cs-card-btn {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8.25cqi;   /* 35 su 424 */
  width: 100%;
  padding: 5.66cqi 6.6cqi 6.6cqi;   /* 24 · 28 · 28 */
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: calc(var(--cs-radius-card) - 2px);
}
.cs-card-btn:focus-visible { outline: 2px solid var(--c-lime); outline-offset: -6px; }

.cs-card-num {
  font-size: clamp(11px, 5.66cqi, 24px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 500;
  font-variation-settings: "MONO" 100, "wght" 500;
}
.cs-card-label {
  margin-top: auto;
  font-size: clamp(11px, 6.6cqi, 28px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 500;
  font-variation-settings: "MONO" 100, "wght" 500;
  text-transform: uppercase;
}
/* L'icona è il file SVG esportato da Figma, usato come maschera:
   così il tratto può passare da blu a bianco senza duplicare il file. */
.cs-card-icon {
  display: block;
  width: 33.5cqi;    /* 142 su 424 */
  height: 33.5cqi;
  background-color: currentColor;
  -webkit-mask-position: left center;
  mask-position: left center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
/* I percorsi delle maschere stanno qui e non in un --icon inline: dentro una
   custom property il browser li risolve rispetto al foglio di stile, e
   finivano su /css/assets/. */
.cs-icon-01 { -webkit-mask-image: url("../assets/img/chisiamo/icone/01-origination.svg"); mask-image: url("../assets/img/chisiamo/icone/01-origination.svg"); }
.cs-icon-02 { -webkit-mask-image: url("../assets/img/chisiamo/icone/02-project-development.svg"); mask-image: url("../assets/img/chisiamo/icone/02-project-development.svg"); }
.cs-icon-03 { -webkit-mask-image: url("../assets/img/chisiamo/icone/03-engineering.svg"); mask-image: url("../assets/img/chisiamo/icone/03-engineering.svg"); }
.cs-icon-04 { -webkit-mask-image: url("../assets/img/chisiamo/icone/04-construction.svg"); mask-image: url("../assets/img/chisiamo/icone/04-construction.svg"); }
.cs-icon-05 { -webkit-mask-image: url("../assets/img/chisiamo/icone/05-connection.svg"); mask-image: url("../assets/img/chisiamo/icone/05-connection.svg"); }
.cs-icon-06 { -webkit-mask-image: url("../assets/img/chisiamo/icone/06-asset-management.svg"); mask-image: url("../assets/img/chisiamo/icone/06-asset-management.svg"); }
.cs-icon-07 { -webkit-mask-image: url("../assets/img/chisiamo/icone/07-om.svg"); mask-image: url("../assets/img/chisiamo/icone/07-om.svg"); }

/* Didascalia: chiusa non occupa spazio, aperta entra sotto l'etichetta */
.cs-card-caption {
  display: none;
  margin: 0;
  padding: 0 6.6cqi 6.6cqi;
  font-size: clamp(12px, 5.2cqi, 24px);
  line-height: 1.25;
  font-variation-settings: "MONO" 100, "wght" 400;
}
.cs-card.is-open .cs-card-btn { padding-bottom: 2.8cqi; }
.cs-card.is-open .cs-card-caption { display: block; animation: cs-rise .5s var(--cs-ease-morbido) both; }

/* --------------------------------------------------------------------------
   4. Una piattaforma. Due realtà.
   -------------------------------------------------------------------------- */

.cs-duo {
  background: var(--c-blue);
  border-radius: var(--cs-radius-panel) var(--cs-radius-panel) 0 0;
  padding-block: clamp(64px, 7.1vw, 136px) clamp(64px, 6.8vw, 130px);
}
.cs-duo-head { margin-bottom: clamp(32px, 2.9vw, 56px); }
.cs-duo-head .cs-eyebrow {
  font-size: var(--fs-32);
  line-height: 1;
  white-space: pre-line;
}
.cs-duo-head p {
  width: min(100%, 49.6%);
  font-size: var(--fs-40);
  line-height: 1.1;
  font-weight: 500;
  margin: 0;
}
/* Erano due blocchi appaiati nella meta' destra, uno sotto l'altro. Rimasto
   uno solo, tenerlo li' avrebbe lasciato vuota tutta la meta' sinistra della
   sezione: e' lo stesso vuoto che il cliente ha segnalato sui numeri della
   home. Il blocco prende la larghezza intera e le due cifre si dividono lo
   spazio, con le forme di .sfondo-forme a lavorare dietro. */
.cs-duo-block {
  width: 100%;
  padding-block: clamp(24px, 2.29vw, 44px);
}
/* La scintilla sta bassa a destra, dalla parte opposta rispetto alla home:
   due sezioni con la stessa forma nello stesso angolo si leggerebbero come
   una ripetizione invece che come un sistema. */
.sfondo-forme-duo {
  --forme-x: 62%;
  --forme-y: 74%;
  --forme-dim: clamp(200px, 27vw, 480px);
  --forme-giro: 14deg;
  --forme-segno: rgba(255, 255, 255, 0.07);
  --forme-alone: rgba(0, 13, 51, 0.24);
}
.cs-duo-block h3 {
  font-size: var(--fs-32);
  line-height: 1.2;
  font-weight: 500;
  font-variation-settings: "MONO" 100, "wght" 500;
  text-transform: uppercase;
  margin: 0 0 clamp(24px, 2.08vw, 40px);
}
.cs-duo-figures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 56px);
}
.cs-duo-figures b {
  display: block;
  font-size: var(--fs-96);
  line-height: 1.1;
  font-weight: 500;
  font-variation-numeric: tabular-nums;
}
.cs-duo-figures span {
  display: block;
  margin-top: clamp(12px, 1.25vw, 24px);
  font-size: var(--fs-28);
  line-height: 1.2;
  font-weight: 500;
  font-variation-settings: "MONO" 100, "wght" 500;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   4b. Struttura degli hub territoriali — mappa a destra, scheda a sinistra
   Figma CHI SIAMO 3110:1730: testo 3160:6623, mappa "italia" 3175:6152
   (856×1052 a x 968), scheda dell'hub 3161:6679. La scheda nel prototipo era
   un velo a tutto schermo; qui vive nella colonna sinistra, vuota nel Figma.
   -------------------------------------------------------------------------- */

/* Correzione 22/09: sotto non c'era nessun padding e mappa e scheda finivano
   incollate al bordo della sezione. Lo zero era voluto quando sotto c'era il
   pannello blu dei Founders che saliva a coprire; tolta quella sezione, lo
   zero e' rimasto senza piu' niente a giustificarlo. */
.cs-hubs {
  background: var(--c-navy);
  padding-block: clamp(64px, 7.3vw, 140px) clamp(56px, 6.4vw, 120px);
}
.cs-hubs-head .cs-eyebrow {
  font-size: var(--fs-32);
  line-height: 1;
  white-space: pre-line;
}
.cs-hubs-head .cs-col p {
  font-size: var(--fs-40);
  line-height: 1.1;
  font-weight: 500;
  margin: 0;
}

.cs-hubs-body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(24px, 3vw, 56px);
  margin-top: clamp(40px, 5.1vw, 98px);   /* Figma: testo a 4972, mappa a 5072 */
}
/* La colonna sinistra resta ferma mentre la mappa, piu' alta, scorre: la
   scheda aperta non esce dallo schermo mentre si guarda il pin. */
.cs-hubs-side {
  position: sticky;
  top: clamp(96px, 7.3vw, 140px);
  flex: 1 1 auto;
  max-width: 47%;
}
/* Revisione 21/09: la mappa era "enorme sugli schermi grandi". Alla larghezza
   in percentuale si affianca un tetto in pixel: oltre quel punto la sezione
   continua a crescere e la mappa no. */
.cs-hubs-map {
  position: relative;
  width: min(100%, 48.6%);   /* 856 su 1760 */
  max-width: clamp(320px, 34vw, 560px);
  margin-left: auto;
  flex: 0 0 auto;
}
/* La sagoma idealizzata entra come maschera: il riempimento e' un colore CSS,
   non un pixel del file. Cosi' l'estrusione grigia non esiste piu' — non e'
   spenta, non c'e' — e la mappa puo' reagire senza avere una seconda immagine.
   Il gradiente le da' il minimo di volume che serve a non sembrare piatta,
   senza tornare al rilievo da videogioco che il cliente ha bocciato. */
.cs-hubs-italia {
  display: block;
  width: 100%;
  aspect-ratio: 856 / 1052;
  background: linear-gradient(160deg,
              color-mix(in srgb, var(--c-blue) 88%, white) 0%,
              var(--c-blue) 55%,
              color-mix(in srgb, var(--c-blue) 86%, black) 100%);
  -webkit-mask: url("../assets/img/chisiamo/hub/italia-idealizzata.svg") center / contain no-repeat;
  mask: url("../assets/img/chisiamo/hub/italia-idealizzata.svg") center / contain no-repeat;
  transition: filter .4s var(--ease);
}
/* Quando un hub e' indicato la mappa fa un passo indietro, cosi' il punto
   acceso non compete con la campitura. */
.cs-hubs-map.ha-indicato .cs-hubs-italia { filter: brightness(.82); }

/* ---- Pin ----
   Erano gocce da mappa generica. Il cliente ha chiesto marker "piu' raffinati"
   e coerenti con la scintilla usata piu' in alto nel sito: il segno ora e'
   quello del marchio, mascherato dallo stesso file che disegna le forme di
   sfondo. Un solo disegno per tutto il sito, e il punto sulla mappa smette di
   essere un simbolo preso a prestito.
   La scintilla e' simmetrica, quindi il punto d'aggancio torna al centro: la
   goccia si agganciava per la punta. */
.cs-hub-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  /* Rimpiccioliti il 22/09: la cartina era stata ridotta e i pin no, cosi'
     cinque gocce da 5,2% su una mappa da 540px sembravano spilli da mappamondo.
     Il bersaglio da 44px resta garantito dal padding qui sotto, non dal
     disegno: sotto i 44px il pin si rimpicciolisce, l'area sensibile no. */
  width: max(30px, 3.9%);
  padding: 7px;
  box-sizing: content-box;
  aspect-ratio: 51 / 64;
  display: grid;
  place-items: stretch;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  /* Il punto d'aggancio torna a essere la punta, non il centro: la goccia
     indica il luogo con la punta, e centrarla lo sposterebbe a nord. */
  transform: translate(-50%, -94.5%);
  transform-origin: 50% 94.5%;
  transition: transform .35s var(--cs-ease-morbido);
}
/* La goccia torna a essere un SVG nel markup e non una maschera CSS.
   Il motivo e' il contorno: il pin e' blu su una mappa blu, e a renderlo
   visibile e' il bordo bianco. Una maschera sa riempire una forma, non
   contornarla, e col solo riempimento i pin sparivano dentro la sagoma. */
.cs-hub-pin svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cs-hub-pin path {
  fill: var(--c-blue);
  stroke: var(--c-white);
  stroke-width: 2;
  transition: fill .3s var(--ease), stroke .3s var(--ease);
}
/* La targhetta con il nome: sta ferma sopra il segno e compare solo quando
   quel punto e' indicato. E' la risposta chiesta in call all'hover sulle
   schede di sinistra. */
.cs-hub-tag {
  position: absolute;
  /* Lo stacco dalla goccia: a filo, targhetta e pin si leggevano come un
     unico oggetto e il nome sembrava incollato alla punta (22/09). */
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, 5px);
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: var(--c-lime);
  color: var(--c-navy);
  font-size: clamp(11px, 0.83vw, 14px);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s var(--ease), transform .28s var(--cs-ease-morbido);
}
.cs-hub-pin:hover,
.cs-hub-pin:focus-visible,
.cs-hub-pin.e-indicato,
.cs-hub-pin[aria-expanded="true"] { transform: translate(-50%, -94.5%) scale(1.14); }

/* L'accensione e' quella nuova: lime pieno e un alone, come il 21/09. */
.cs-hub-pin:hover path,
.cs-hub-pin:focus-visible path,
.cs-hub-pin.e-indicato path,
.cs-hub-pin[aria-expanded="true"] path { fill: var(--c-lime); stroke: var(--c-lime); }
/* Niente alone (22/09): il lime pieno basta a dire quale punto e' acceso, e
   il bagliore su una mappa piatta sembrava una macchia fuori fuoco. */
.cs-hub-pin:hover .cs-hub-tag,
.cs-hub-pin:focus-visible .cs-hub-tag,
.cs-hub-pin.e-indicato .cs-hub-tag,
.cs-hub-pin[aria-expanded="true"] .cs-hub-tag {
  opacity: 1;
  transform: translate(-50%, 0);
}
.cs-hub-pin:focus-visible { outline: none; }
/* Calvatone e' la sede centrale: a riposo pulsa piano, cosi' si distingue
   dagli altri quattro senza bisogno di un secondo colore. */
/* Calvatone e' la sede centrale: bianca piena gia' a riposo, come prima. */
.cs-hub-pin.is-centrale path { fill: var(--c-white); stroke: var(--c-white); }
@keyframes cs-hub-respiro {
  0%, 100% { opacity: 1; }
  50%      { opacity: .58; }
}
/* Calvatone respira piano: si distingue dagli altri quattro senza bisogno di
   un secondo colore e senza alone. */
.cs-hub-pin.is-centrale svg { animation: cs-hub-respiro 3.4s var(--ease) infinite; }

/* ---- Elenco degli hub, stato di partenza della colonna ----
   Con una scheda aperta l'elenco lascia il posto alla scheda (chisiamo.js
   mette .is-aperto); sotto i 1100px resta visibile sopra la scheda. */
.cs-hubs-side.is-aperto .cs-hubs-list { display: none; }
.cs-hubs-hint {
  font-size: var(--fs-24);
  line-height: 1.2;
  font-variation-settings: "MONO" 100, "wght" 400;
  text-transform: uppercase;
  color: var(--c-white-soft);
  margin: 0 0 clamp(16px, 1.25vw, 24px);
}
.cs-hubs-list ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-sep); }
.cs-hub-voce {
  display: flex;
  width: 100%;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(16px, 1.46vw, 28px) 0;
  border: 0;
  border-bottom: 1px solid var(--c-sep);
  background: none;
  color: var(--c-white);
  text-align: left;
  cursor: pointer;
  transition: color .3s var(--ease), padding-left .35s var(--cs-ease-morbido);
}
.cs-hub-voce span {
  font-size: var(--fs-40);
  line-height: 1.1;
  font-weight: 500;
}
.cs-hub-voce small {
  font-size: var(--fs-20);
  line-height: 1.2;
  font-variation-settings: "MONO" 100, "wght" 400;
  text-transform: uppercase;
  color: var(--c-white-soft);
  transition: color .3s var(--ease);
}
.cs-hub-voce:hover,
.cs-hub-voce:focus-visible { color: var(--c-lime); padding-left: 12px; }
/* Sotto i 1100px l'elenco resta visibile accanto alla scheda: la voce aperta
   si riconosce come il pin, in lime */
.cs-hub-voce[aria-expanded="true"] { color: var(--c-lime); border-color: var(--c-lime); }
.cs-hub-voce[aria-expanded="true"] small { color: var(--c-lime); }
.cs-hub-voce:hover small,
.cs-hub-voce:focus-visible small { color: var(--c-lime); }
.cs-hub-voce:focus-visible { outline: 2px solid var(--c-lime); outline-offset: 2px; border-radius: 4px; }

/* ---- Scheda dell'hub ---- */
/* Come nel Figma: testo a sinistra, foto a pentagono a destra, persone in
   fondo. Sotto i 1100px la foto sale sopra il testo. */
.cs-hub-card {
  position: relative;
  display: grid;
  /* La foto non e' piu' una cella della griglia: e' il fondo della scheda.
     La griglia resta a una colonna sola, con il testo trattenuto nella meta'
     sinistra dove il velo e' pieno. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "testa" "testo" "persone";
  grid-template-rows: auto 1fr auto;
  column-gap: clamp(20px, 1.67vw, 32px);
  row-gap: clamp(24px, 2.6vw, 50px);
  background: var(--c-blue);
  border-radius: var(--cs-radius-card);
  padding: clamp(24px, 2.29vw, 44px);
  overflow: hidden;
  isolation: isolate;
  animation: cs-rise .55s var(--cs-ease-morbido) both;
}
/* Il bagliore del velo del Figma (rgba blu 60% + blur 45) diventa una luce
   morbida dietro la foto: senza fotografia a tutto schermo non c'e' nulla
   da sfocare. */
/* Revisione 21/09: "parte sinistra, eliminare la forma a rombo, usare
   immagine di sfondo con effetto glass sopra".
   Un rombo in questa colonna non c'era mai stato: c'era questo bagliore tondo,
   l'unica forma geometrica della colonna, ed e' quello che il cliente ha
   indicato. Al suo posto la scheda poggia su una fotografia e ci sta sopra in
   vetro, come chiesto. */
.cs-hub-card::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  /* Pieno sotto al testo, che deve restare leggibile, e via via trasparente
     verso destra, dove la fotografia deve potersi vedere. Un velo uniforme
     avrebbe spento la foto ovunque, e allora tanto valeva non metterla. */
  background: linear-gradient(90deg,
              rgba(0, 13, 51, 0.90) 0%,
              rgba(0, 13, 51, 0.86) 46%,
              rgba(0, 13, 51, 0.30) 78%,
              rgba(0, 13, 51, 0.18) 100%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
/* La fotografia dell'hub: era una cella accanto al testo, ora e' il fondo
   della scheda. Ogni hub porta la sua, quindi non c'e' nessun file cablato
   nel CSS: resta l'<img> del markup, spostata dietro. */
.cs-hub-foto {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Tre strati, tutti con indice positivo: fotografia (0), velo (1), contenuto
   (2). Con la fotografia a indice negativo il browser non la dipingeva
   affatto — restava il fondo blu della scheda — e il velo sopra non aveva
   niente da velare. Gli indici negativi qui non servono: la scheda ha gia'
   il suo contesto di impilamento con isolation. */
.cs-hub-card > header,
.cs-hub-card > p,
.cs-hub-card > .cs-hub-persone { position: relative; z-index: 2; }
.cs-hub-card header {
  grid-area: testa;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.cs-hub-card h3 {
  font-size: var(--fs-32);
  line-height: 1;
  font-weight: 400;
  font-variation-settings: "MONO" 100, "wght" 400;
  text-transform: uppercase;
  margin: 0;
  outline: none;
}
.cs-hub-card h3 small {
  display: block;
  margin-top: 10px;
  font-size: var(--fs-20);
  color: var(--c-white-soft);
}
/* Chiudi: quadrato bianco 64, raggio 10 (Figma 3173:6143) */
.cs-hub-close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(44px, 3.33vw, 64px);
  height: clamp(44px, 3.33vw, 64px);
  border: 0;
  border-radius: 10px;
  background: var(--c-white);
  color: var(--c-navy);
  cursor: pointer;
  transition: background-color .3s var(--ease);
}
.cs-hub-close svg { width: 14px; height: 14px; }
.cs-hub-close:hover { background: var(--c-lime); }
.cs-hub-close:focus-visible { outline: 2px solid var(--c-lime); outline-offset: 3px; }
/* genera-sito.py avvolge ogni foto in un <picture> per AVIF e WebP: senza
   display: contents la griglia vedrebbe il <picture>, e la foto perderebbe
   la sua area finendo fuori dalla scheda. */
.cs-hub-card > picture { display: contents; }
.cs-hub-card p { grid-area: testo; max-width: min(100%, 56%); }
.cs-hub-card p {
  font-size: var(--fs-28);
  line-height: 1.2;
  font-weight: 500;
  margin: 0;
}
.cs-hub-card .cs-hub-persone {
  grid-area: persone;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 42px);
  font-size: var(--fs-32);
  font-variation-settings: "MONO" 100, "wght" 400;
}
.cs-hub-persone b { font-weight: 400; }
/* L'icona e' l'SVG del Figma (Livello_9) usato come maschera */
.cs-hub-persone-icona {
  display: block;
  width: clamp(48px, 3.9vw, 75px);
  aspect-ratio: 74.93 / 79.7;
  background-color: var(--c-white);
  -webkit-mask: url("../assets/img/chisiamo/hub/icon-persone.svg") center / contain no-repeat;
  mask: url("../assets/img/chisiamo/hub/icon-persone.svg") center / contain no-repeat;
}

/* La sezione 5 (Founders) e' stata eliminata alla revisione del 21/09, e con
   lei tutto il suo CSS: .cs-team, .cs-team-grid, .cs-person e il cuneo animato
   che riempiva la scheda al passaggio del mouse. La numerazione delle sezioni
   qui sotto resta quella del Figma, cosi' i riferimenti ai nodi continuano a
   tornare. */

/* --------------------------------------------------------------------------
   6+7. Progetti e Sostenibilità — un unico pannello blu (rect 7028)
   -------------------------------------------------------------------------- */

.cs-blue-block {
  position: relative;
  z-index: 1;
  background: var(--c-blue);
  border-radius: var(--cs-radius-panel);   /* stondato anche in basso, sopra la foto */
  padding-block: clamp(64px, 6.25vw, 120px) clamp(64px, 6.25vw, 120px);
}
/* Revisione 21/09: da griglia a nastro. Con tre sole schede la griglia
   bastava, ma il cliente ha chiesto che ogni scorrimento orizzontale del sito
   abbia i suoi comandi e il suo invito: se il nastro dei progetti si
   comportasse diversamente da quello delle news si perderebbe proprio la cosa
   che si sta cercando di insegnare.
   Le frecce le costruisce main.js su [data-strip-frecce] e spariscono da sole
   quando le schede ci stanno tutte, quindi su schermo largo non compare un
   comando che non serve. */
.cs-projects-grid {
  display: flex;
  overflow-x: auto;
  /* overflow-y esplicito. Dichiarando solo overflow-x: auto, il CSS calcola
     overflow-y come "auto" e non come "visible": basta una riga di testo in
     piu' o un font che arriva tardi perche' dentro al nastro compaia uno
     scorrimento verticale di pochi pixel. Segnalato il 22/09 — "questa
     tipologia di sezioni non deve mai avere scorrimento verticale". */
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: clamp(14px, 1.08vw, 19px);
  margin-top: clamp(40px, 3.8vw, 72px);
  --cs-proj-gap: clamp(14px, 1.08vw, 19px);
}
.cs-projects-grid::-webkit-scrollbar { display: none; }
/* Tre schede entrano esatte su schermo largo: li' non c'e' niente da scorrere
   e le frecce si nascondono da sole, perche' un comando che non fa niente e'
   peggio che nessun comando. Sotto, quando non ci stanno piu', compaiono. */
.cs-projects-grid > li {
  flex: 0 0 calc((100% - 2 * var(--cs-proj-gap)) / 3);
  scroll-snap-align: start;
}
.cs-project figure {
  position: relative;
  margin: 0;
  aspect-ratio: 1;
  border-radius: var(--cs-radius-card);
  overflow: hidden;
}
.cs-project img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s var(--ease);
}
.cs-project:hover img { transform: scale(1.03); }
/* Come il .news-go della home: 80x80, raggio 16, non un cerchio */
.cs-project-go {
  position: absolute;
  right: clamp(6px, .47vw, 9px);
  bottom: clamp(8px, .63vw, 12px);
  width: clamp(44px, 4.17vw, 80px);
  height: clamp(44px, 4.17vw, 80px);
  border-radius: clamp(10px, .83vw, 16px);
  background: var(--c-white);
  color: var(--c-navy);
  display: grid;
  place-items: center;
  transition: background-color .3s var(--ease);
}
.cs-project-go svg { width: 26%; height: auto; }
.cs-project a:hover .cs-project-go,
.cs-project a:focus-visible .cs-project-go { background: #e9ecf5; }
.cs-project figcaption { margin-top: clamp(14px, 1.25vw, 24px); }
.cs-project .cs-project-kind {
  display: block;
  font-size: var(--fs-20);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
}
.cs-project .cs-project-place {
  display: block;
  font-size: var(--fs-32);
  line-height: 1;
  font-weight: 500;
  margin: clamp(10px, 1.04vw, 20px) 0 0;
}
.cs-project a { display: block; color: inherit; text-decoration: none; }

.cs-sustain { margin-top: clamp(64px, 8.6vw, 165px); }

/* --------------------------------------------------------------------------
   8. Storia per immagini — sezione bloccata, tre quadri in successione
   -------------------------------------------------------------------------- */

.cs-story { position: relative; }
.cs-story-track { height: 300vh; }        /* tre quadri: 100vh ciascuno */
.cs-story-pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--c-navy);
}
.cs-story-shot {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .7s var(--ease);
}
.cs-story-shot.is-on { opacity: 1; }
.cs-story-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.06);
  transition: transform 1.6s var(--ease);
}
.cs-story-shot.is-on img { transform: scale(1); }

/* Scheda in vetro, ferma in basso a sinistra */
.cs-story-card {
  position: absolute;
  left: clamp(20px, 3.49vw, 67px);
  bottom: clamp(24px, 2.6vw, 50px);
  width: min(88%, clamp(320px, 33.3vw, 640px));
  border: .5px solid var(--c-white);
  border-radius: var(--cs-radius-card);
  background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(102,102,102,.1) 100%), rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: clamp(20px, 1.67vw, 32px) clamp(20px, 1.67vw, 32px) clamp(18px, 1.25vw, 24px) clamp(22px, 2.29vw, 44px);
  overflow: hidden;
}
/* Ripiego dove backdrop-filter non e' supportato: senza, la scheda resterebbe
   quasi trasparente sopra la fotografia e il testo bianco non si leggerebbe. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .cs-story-card { background: rgba(0, 13, 51, .82); }
}
.cs-story-panel { display: none; }
.cs-story-panel.is-on { display: block; animation: cs-rise .55s var(--ease) both; }
.cs-story-icon {
  display: block;   /* e' uno <span>: senza questo width/height non si applicano */
  width: clamp(56px, 5vw, 96px);
  height: clamp(44px, 3.85vw, 74px);
  background-color: var(--c-white);
  -webkit-mask-position: left center;
  mask-position: left center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  margin-bottom: clamp(14px, 1.25vw, 24px);
}
.cs-story-icon-1 { -webkit-mask-image: url("../assets/img/chisiamo/storia/icon-1.svg"); mask-image: url("../assets/img/chisiamo/storia/icon-1.svg"); }
.cs-story-icon-2 { -webkit-mask-image: url("../assets/img/chisiamo/storia/icon-2.svg"); mask-image: url("../assets/img/chisiamo/storia/icon-2.svg"); }
.cs-story-icon-3 { -webkit-mask-image: url("../assets/img/chisiamo/storia/icon-3.svg"); mask-image: url("../assets/img/chisiamo/storia/icon-3.svg"); }
.cs-story-panel h3 {
  font-size: var(--fs-24);
  line-height: 1.5;
  letter-spacing: .05em;
  font-weight: 500;
  font-variation-settings: "MONO" 100, "wght" 500;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.cs-story-panel p {
  font-size: var(--fs-28);
  line-height: 1.2;
  font-weight: 400;
  margin: 0;
}
/* Indicatore di avanzamento dei tre quadri */
.cs-story-dots {
  position: absolute;
  right: clamp(20px, 3.49vw, 67px);
  bottom: clamp(28px, 3vw, 58px);
  display: flex;
  gap: 8px;
}
.cs-story-dots i {
  width: 40px; height: 3px;
  background: rgba(255,255,255,.3);
  border-radius: 2px;
  transition: background-color .4s var(--ease);
}
.cs-story-dots i.is-on { background: var(--c-white); }

/* --------------------------------------------------------------------------
   9. Sunprime sui media — card che si accendono in sequenza
   -------------------------------------------------------------------------- */

.cs-media {
  background: var(--c-navy);
  padding-block: clamp(56px, 6.77vw, 130px) clamp(64px, 10.73vw, 206px);
}
.cs-media-row {
  display: flex;
  gap: clamp(14px, 1.15vw, 22px);
  /* Il padding lascia spazio al sollevamento e all'ombra; i margini negativi
     lo riassorbono, così il ritmo verticale della sezione non cambia. */
  padding: 30px 0 48px;
  margin-top: calc(clamp(40px, 11.5vw, 221px) - 30px);
  margin-bottom: -48px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.cs-media-row::-webkit-scrollbar { display: none; }
.cs-media-card {
  flex: 0 0 clamp(280px, 37.5vw, 720px);
  scroll-snap-align: start;
  background: var(--c-white);
  border-radius: var(--cs-radius-media);
  padding: clamp(24px, 2.29vw, 44px) clamp(28px, 4.17vw, 80px) clamp(28px, 3.33vw, 64px) clamp(24px, 2.29vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(20px, 2.5vw, 48px);
  min-height: clamp(260px, 22.5vw, 432px);
  transition: background-color var(--cs-durata-riempimento) var(--cs-ease-morbido),
              transform var(--cs-durata-salita) var(--cs-ease-morbido),
              box-shadow var(--cs-durata-salita) var(--cs-ease-morbido);
}
.cs-media-card:hover {
  transform: translateY(calc(-1 * var(--cs-salita)));
  box-shadow: var(--cs-ombra);
}
.cs-media-logo {
  width: clamp(130px, 11.3vw, 217px);
  height: clamp(76px, 7.5vw, 144px);
  object-fit: contain;
  object-position: left center;
  display: block;
  transition: filter var(--cs-durata-riempimento) var(--cs-ease-morbido);
}
.cs-media-card p {
  font-size: var(--fs-32);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--c-navy);
  margin: 0;
  transition: color var(--cs-durata-riempimento) var(--cs-ease-morbido);
}
.cs-media-card:hover { background: var(--c-blue); }
.cs-media-card:hover p { color: var(--c-white); }
/* I loghi sono neri su trasparente: sul blu vanno invertiti in bianco */
.cs-media-card:hover .cs-media-logo { filter: brightness(0) invert(1); }

/* Card con l'articolo originale (rassegne stampa giugno-luglio 2026): tutta
   la card e' cliccabile, ma il link resta uno solo — la riga con testata e
   data — e il suo ::after la copre per intero. */
.cs-media-row .cs-media-card--link { position: relative; }
.cs-media-go {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: calc(-1 * clamp(8px, 1.25vw, 24px));
  font-size: var(--fs-20);
  line-height: 1.2;
  font-variation-settings: "MONO" 100, "wght" 400;
  text-transform: uppercase;
  color: var(--c-navy);
  text-decoration: none;
  transition: color var(--cs-durata-riempimento) var(--cs-ease-morbido);
}
.cs-media-go::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.cs-media-go svg { flex: 0 0 auto; width: 18px; height: 18px; }
.cs-media-card:hover .cs-media-go { color: var(--c-white); }
.cs-media-card--link:focus-within {
  background: var(--c-blue);
  transform: translateY(calc(-1 * var(--cs-salita)));
  box-shadow: var(--cs-ombra);
}
.cs-media-card--link:focus-within p,
.cs-media-card--link:focus-within .cs-media-go { color: var(--c-white); }
.cs-media-card--link:focus-within .cs-media-logo { filter: brightness(0) invert(1); }
.cs-media-go:focus-visible { outline: none; }
.cs-media-go:focus-visible::after { outline: 3px solid var(--c-lime); outline-offset: 3px; }
/* Il nastro guidato dalla pagina non deve rimbalzare sullo snap */
.cs-media-row.js-news-auto { scroll-snap-type: none; scroll-behavior: auto; }

/* --------------------------------------------------------------------------
   10. News  ·  11. FAQ — la coda della pagina
   La resa sta in components.css sotto .page-tail, con .cs-tail come alias:
   lo schema 6 serve a tutte le pagine, non solo a questa.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   CTA — si riusa .btn .btn-ghost .btn-cta di base.css: bordo bianco e
   riempimento lime che scorre da sinistra. Qui si aggiunge solo il fondo blu
   del Figma, che btn-ghost lascia trasparente.
   -------------------------------------------------------------------------- */

.page-chisiamo .btn-ghost { background: var(--c-blue); }
.page-chisiamo .btn-ghost svg { width: 13px; height: 13px; }

/* Card e schede media portano anche .cs-reveal, che dichiara la shorthand
   `transition`: stando piu' in basso nel foglio la sovrascriverebbe per
   intero, e il sollevamento finirebbe per usare i tempi della comparsa.
   Qui la specificita' piu' alta rimette le cose a posto, elencando tutte le
   proprieta' in gioco — comparsa compresa. */
.cs-media-row .cs-media-card {
  transition:
    background-color var(--cs-durata-riempimento) var(--cs-ease-morbido),
    transform var(--cs-durata-salita) var(--cs-ease-morbido),
    box-shadow var(--cs-durata-salita) var(--cs-ease-morbido),
    opacity .75s var(--ease),
    translate .75s var(--ease);
}

/* --------------------------------------------------------------------------
   Comparsa progressiva delle sezioni
   -------------------------------------------------------------------------- */

/* Stato a riposo visibile: e' .da-rivelare, messa da chisiamo.js, a
   nascondere — e solo quello che sta sotto lo schermo al caricamento.
   Vedi la stessa regola in home.css e la nota nel design system. */
.cs-reveal {
  transition: opacity .75s var(--ease), translate .75s var(--ease);
}
.cs-reveal.da-rivelare { opacity: 0; translate: 0 26px; }
.cs-reveal.senza-attesa { transition: none; }
@media print { .cs-reveal.da-rivelare { opacity: 1; translate: none; } }
.cs-reveal[data-delay="1"] { transition-delay: .09s; }
.cs-reveal[data-delay="2"] { transition-delay: .18s; }
.cs-reveal[data-delay="3"] { transition-delay: .27s; }

/* --------------------------------------------------------------------------
   Mobile e tablet — adattamento non presente in Figma
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .cs-split { flex-direction: column; gap: clamp(16px, 3vw, 28px); }
  .cs-col,
  .cs-duo-block,
  .cs-duo-head p,
  .cs-intro .cs-lead,
  .cs-intro-inner { width: 100%; max-width: 100%; margin-left: 0; }

  .cs-hero-text { flex-direction: column; gap: 20px; }
  .cs-hero-text h1 { width: 100%; }
  .cs-hero-text p { max-width: 100%; margin-left: 0; }

  .cs-chain-head { max-width: 100%; }
  .cs-chain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Una scheda alla volta, con un dito della successiva che sporge: e' il
     modo piu' diretto per dire che il nastro continua. */
  .cs-projects-grid > li { flex-basis: 84%; }

  /* Hub impilati: prima le citta' da scegliere, poi la mappa, poi la scheda
     (feedback 14/09: le pillole vanno sopra). La colonna sinistra si scioglie
     con display: contents, cosi' elenco e scheda possono stare uno sopra e
     l'altra sotto la mappa pur restando nello stesso contenitore. */
  .cs-hubs-body { flex-direction: column; align-items: stretch; gap: clamp(20px, 3vw, 32px); }
  .cs-hubs-side { display: contents; }
  .cs-hubs-list { order: -2; }
  .cs-hubs-map { order: -1; width: min(100%, 640px); margin-inline: auto; }
  .cs-hubs-side.is-aperto .cs-hubs-list { display: block; }
  .cs-hub-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  }
}

@media (max-width: 720px) {
  .page-chisiamo {
    --cs-radius-panel: 24px;
    --fs-96: clamp(44px, 13vw, 64px);
    --fs-64: clamp(28px, 8.4vw, 40px);
    --fs-48: clamp(24px, 7vw, 34px);
    --fs-44: clamp(26px, 7.6vw, 34px);
    --fs-40: clamp(21px, 6.1vw, 30px);
    --fs-32: clamp(17px, 4.9vw, 24px);
    --fs-28: clamp(16px, 4.4vw, 21px);
    --fs-24: clamp(15px, 4.1vw, 19px);
    --fs-20: clamp(13px, 3.5vw, 16px);
  }

  .cs-hero { height: 88svh; }
  .cs-hero-media img { object-position: 68% 40%; }

  .cs-duo-figures { grid-template-columns: 1fr; gap: 28px; }

  /* La sezione a immagini resta bloccata anche su mobile: una foto alla volta
     con la sua scheda, e scorrendo cambiano insieme. */
  .cs-story-card {
    left: clamp(16px, 4vw, 24px);
    right: clamp(16px, 4vw, 24px);
    bottom: clamp(56px, 12vw, 88px);
    width: auto;
    padding: 22px 20px 20px 22px;
  }
  .cs-story-icon { width: 64px; height: 50px; margin-bottom: 14px; }
  .cs-story-dots {
    left: clamp(16px, 4vw, 24px);
    right: auto;
    bottom: clamp(24px, 5vw, 34px);
  }
  .cs-story-dots i { width: 28px; }

  .cs-media-card { flex-basis: 84vw; min-height: 0; }

  /* Hub: l'elenco diventa una fila di chip, la scheda va in colonna.
     I pin scendono a 26px (sopra i 24 del WCAG 2.5.8): a 44 Padova, Bologna e
     Calvatone si coprivano. Il bersaglio comodo per il dito sono i chip. */
  /* I pin scendono sotto i 44px del tocco perche' su schermo stretto il
     bersaglio comodo sono i chip dell'elenco, non la mappa (nota del 14/09).
     Con la scintilla il quadrato e' 1:1, quindi la percentuale cambia. */
  .cs-hub-pin { width: max(26px, 4.6%); }
  .cs-hubs-hint { display: none; }
  .cs-hubs-list ul { display: flex; flex-wrap: wrap; gap: 8px; border: 0; }
  .cs-hub-voce {
    width: auto;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid var(--c-sep);
    border-radius: var(--radius-pill);
  }
  .cs-hub-voce span { font-size: var(--fs-20); }
  .cs-hub-voce small { display: none; }
  .cs-hub-voce:hover,
  .cs-hub-voce:focus-visible { padding-left: 16px; border-color: var(--c-lime); }
  .cs-hub-card {
    grid-template-columns: 1fr;
    grid-template-areas: "testa" "foto" "testo" "persone";
    grid-template-rows: auto;
    row-gap: 20px;
  }
  /* Su schermo stretto il velo diventa uniforme: non c'e' larghezza
     sufficiente perche' testo e fotografia convivano affiancati. */
  .cs-hub-card::before { background: rgba(0, 13, 51, 0.88); }
  .cs-hub-card p { max-width: 100%; }
}

/* Catena del valore dove il passaggio del mouse non c'e' (telefono, tablet) o
   lo schermo e' stretto: nessun pannello da aprire, ogni fase mostra subito
   tutto — icona a sinistra, numero, etichetta e didascalia a destra
   (feedback 14/09). chisiamo.js in questo stato non apre niente. */
@media (hover: none), (max-width: 720px) {
  .cs-card { aspect-ratio: auto; container-type: normal; }
  .cs-card-panel {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 16px;
    padding: 18px 18px 20px;
    transition: none;
  }
  .cs-card-panel::before { display: none; }
  .cs-card-btn {
    display: contents;
    cursor: default;
  }
  .cs-card-icon { grid-column: 1; grid-row: 1 / span 3; width: 56px; height: 56px; align-self: start; }
  .cs-card-num { grid-column: 2; grid-row: 1; font-size: 13px; }
  .cs-card-label { grid-column: 2; grid-row: 2; margin-top: 4px; font-size: 16px; color: var(--c-white); }
  .cs-card-caption {
    display: block;
    grid-column: 2;
    grid-row: 3;
    padding: 0;
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--c-white-soft);
    animation: none;
  }
}
@media (max-width: 720px) {
  .cs-chain-grid { grid-template-columns: 1fr; row-gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-hero-rule,
  .cs-hero-text h1,
  .cs-hero-text p { animation: none !important; opacity: 1; transform: none; }
  .cs-reveal { opacity: 1; transform: none; transition: none; }
  .cs-story-shot img { transform: none; }
  .cs-hub-card { animation: none; }
  .cs-hub-pin, .cs-hub-voce { transition: none; }
  .cs-card-panel, .cs-card-panel::before { transition-duration: .01ms; }
}