/* ==========================================================
   TRAVIO — Chi siamo
   Caricare dopo bootstrap.min.css e travio.css
   ========================================================== */

.cs-occhiello{margin:0 0 10px;font-family:var(--mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--giallo-scuro)}
.cs-occhiello--giallo{color:var(--giallo)}

/* ---------- INTRO ---------- */
.cs-intro{background:#fff;color:#14171E;
  padding:clamp(26px,3vw,42px) 0 clamp(34px,4vw,56px)}

.briciole{display:flex;align-items:center;gap:9px;margin:0 0 clamp(20px,2.4vw,34px);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.briciole a{color:#8A9099;transition:color .2s}
.briciole a:hover{color:var(--giallo-scuro)}
.briciole span{color:rgba(20,23,30,.25)}
.briciole b{font-weight:500;color:#14171E}

.cs-testa{display:grid;gap:clamp(16px,2.4vw,44px);margin-bottom:clamp(32px,3.8vw,52px)}
@media (min-width:1000px){.cs-testa{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  align-items:end}}
.cs-testa h1{font-size:clamp(28px,3.4vw,46px);margin:0;line-height:1.06}
.cs-testa p{margin:0;color:#5A6270;font-size:16px;line-height:1.7}
.cs-testa b{color:#14171E;font-weight:600}

/* le cifre: righe di numeri, non riquadri */
.cs-cifre{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 0;
  border-top:1px solid rgba(20,23,30,.12);padding-top:clamp(24px,2.6vw,34px)}
@media (min-width:900px){.cs-cifre{grid-template-columns:repeat(4,1fr)}}
.cs-cifra b{display:block;font-family:var(--display);font-weight:800;letter-spacing:-.05em;
  font-size:clamp(38px,4.4vw,60px);line-height:1;
  background:linear-gradient(160deg,#14171E 35%,#4A5364 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.cs-cifra span{display:block;margin-top:10px;font-size:14px;line-height:1.5;color:#6B7280;
  max-width:24ch}

/* ---------- STORIA: linea del tempo ---------- */
.cs-storia{background:var(--carta);color:#14171E;
  padding:clamp(36px,4.2vw,60px) 0 clamp(40px,4.6vw,66px)}
.cs-storia h2{font-size:clamp(22px,2.5vw,34px);margin:0 0 clamp(28px,3.2vw,44px)}

.cs-tappe{position:relative;display:grid;gap:0}
/* la linea verticale che unisce le tappe */
.cs-tappe::before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:2px;
  background:linear-gradient(var(--giallo),rgba(255,210,63,.15))}
@media (min-width:800px){.cs-tappe::before{left:calc(22% + 7px)}}

.cs-tappa{position:relative;display:grid;gap:4px;padding:0 0 clamp(26px,3vw,38px) 34px}
.cs-tappa:last-child{padding-bottom:0}
@media (min-width:800px){
  .cs-tappa{grid-template-columns:22% 1fr;gap:0 46px;padding-left:0}
}
.cs-tappa::before{content:"";position:absolute;left:0;top:5px;width:16px;height:16px;
  border-radius:50%;background:#fff;border:3px solid var(--giallo)}
@media (min-width:800px){.cs-tappa::before{left:22%}}

.cs-tappa__quando{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--giallo-scuro);padding-top:4px}
.cs-tappa__testo h3{font-size:clamp(18px,1.8vw,23px);margin:0 0 8px}
.cs-tappa__testo p{margin:0;color:#5A6270;font-size:15px;line-height:1.7;max-width:70ch}

/* ---------- DUE BLOCCHI ---------- */
.cs-doppia-sez{background:#fff;color:#14171E;padding:clamp(36px,4.2vw,60px) 0}
.cs-doppia{display:grid;gap:clamp(18px,2.2vw,30px)}
@media (min-width:1000px){.cs-doppia{grid-template-columns:repeat(2,1fr)}}

.cs-blocco{background:var(--carta);border-radius:10px;padding:clamp(24px,2.8vw,40px)}
.cs-blocco h2{font-size:clamp(20px,2.1vw,28px);margin:0 0 12px}
.cs-blocco p{margin:0;color:#5A6270;font-size:15px;line-height:1.7}

.cs-settori{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.cs-settore{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:100px;
  background:#fff;border:1px solid rgba(20,23,30,.14);font-size:13.5px;color:#14171E}
.cs-settore::before{content:"";width:6px;height:6px;background:var(--giallo);
  transform:rotate(45deg)}

.cs-blocco--scuro{background:var(--ink);color:#fff}
.cs-blocco--scuro h2{color:#fff}
.cs-blocco--scuro p{color:var(--txt)}
.cs-punti{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px}
.cs-punti li{position:relative;padding-left:19px;font-size:14.5px;color:var(--txt)}
.cs-punti li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;
  background:var(--giallo);transform:rotate(45deg)}

/* ---------- METODO ---------- */
.cs-metodo{background:var(--carta);color:#14171E;
  padding:clamp(36px,4.2vw,60px) 0 clamp(40px,4.6vw,66px)}
.cs-metodo h2{font-size:clamp(22px,2.5vw,34px);margin:0 0 12px}
.cs-metodo__lead{margin:0 0 clamp(26px,3vw,40px);color:#5A6270;font-size:15.5px;line-height:1.7;
  max-width:80ch}

.cs-metodo__griglia{display:grid;grid-template-columns:1fr;gap:0;
  border-top:1px solid rgba(20,23,30,.14)}
@media (min-width:700px){.cs-metodo__griglia{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.cs-metodo__griglia{grid-template-columns:repeat(4,1fr)}}

.cs-metodo__griglia article{position:relative;padding:clamp(22px,2.4vw,30px) 26px
  clamp(22px,2.4vw,30px) 0;border-bottom:1px solid rgba(20,23,30,.1)}
@media (min-width:1100px){
  .cs-metodo__griglia article{border-bottom:0;border-right:1px solid rgba(20,23,30,.1);
    padding-left:26px}
  .cs-metodo__griglia article:first-child{padding-left:0}
  .cs-metodo__griglia article:last-child{border-right:0}
}
.cs-metodo__griglia article::before{content:"";position:absolute;left:0;top:-1px;height:2px;
  width:0;background:var(--giallo);transition:width .4s cubic-bezier(.2,.7,.3,1)}
.cs-metodo__griglia article:hover::before{width:100%}
.cs-n{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  color:var(--giallo-scuro);margin-bottom:12px}
.cs-metodo__griglia h3{font-size:17px;margin:0 0 7px}
.cs-metodo__griglia p{margin:0;font-size:14.5px;line-height:1.6;color:#5A6270}

/* ---------- CHIUSURA ---------- */
.cs-chiusura{background:var(--ink);color:#fff;padding:clamp(36px,4.2vw,60px) 0}
.cs-chiusura .container-t{display:flex;flex-wrap:wrap;gap:22px 40px;
  align-items:center;justify-content:space-between}
.cs-chiusura h2{margin:0 0 8px;font-size:clamp(20px,2.2vw,30px);color:#fff}
.cs-chiusura p{margin:0;color:var(--txt);font-size:15px;line-height:1.65;max-width:56ch;
  font-weight:300}
.cs-chiusura__azioni{display:flex;flex-wrap:wrap;gap:12px}
.btn-t--ghost-scuro{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.btn-t--ghost-scuro:hover{background:#fff;color:var(--ink);border-color:#fff}