/* =========================================================
   CHI SIAMO — stile istituzionale premium
   ========================================================= */
:root{
  --cs-dark:#161616;
  --cs-gray:#6a6f74;
  --cs-soft:#f6f8fa;
  --cs-line:#e7e9ec;
  --cs-accent:#d31919;
  --cs-accent-2:#ff4a4a;
  --cs-container:min(1180px, 92vw);
  --cs-radius:16px;
}

.cs-page{ color:var(--cs-dark); overflow-x:clip; }
.cs-container{ width:var(--cs-container); margin-inline:auto; padding-inline:16px; }

/* HERO */
.cs-hero{
  padding: clamp(60px, 8vw, 110px) 0  clamp(30px, 5vw, 48px);
  background: radial-gradient(900px 260px at 50% 0, #fff 20%, #fafbfc 65%, #f4f6f8 100%);
  border-bottom:1px solid var(--cs-line);
}
.cs-hero__title{
  margin:0 0 12px;
  text-align:center;
  font-weight:800;
  letter-spacing:.01em;
  font-size: clamp(28px, 4.6vw, 46px);
  line-height:1.06;
  background:linear-gradient(180deg, var(--cs-accent), var(--cs-accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.cs-hero__lead{
  max-width:940px; margin:0 auto;
  text-align:center; color:var(--cs-gray);
  font-size: clamp(16px, 1.25vw, 18px); line-height:1.75;
}
.cs-hero__lead p{ margin:0 0 12px; }
.cs-hero__lead strong{ color:var(--cs-dark); }

/* BANNER FULL */
.cs-banner{ padding: clamp(36px, 5.2vw, 64px) 0; background:#fff; }
.cs-banner__figure{ margin:0; }
.cs-banner__img{
  width:100%; height:auto; display:block;
  border-radius: var(--cs-radius);
  box-shadow: 0 26px 68px rgba(0,0,0,.14),
              0 1px 0 1px rgba(255,255,255,.65) inset;
}

/* INTRO SINGOLO */
.cs-intro{ padding: clamp(32px, 4.6vw, 56px) 0; background:#fff; }
.cs-intro__title{
  margin:0 0 10px; text-align:center; font-weight:800;
  font-size: clamp(24px, 2.8vw, 34px);
}
.cs-intro__text{
  max-width:900px; margin:0 auto; text-align:center;
  color:var(--cs-gray); font-size: clamp(16px, 1.2vw, 18px); line-height:1.7;
}




/* SPLIT (immagine + testo) */
.cs-split{
  padding: clamp(48px, 6.8vw, 110px) 0;
  background: linear-gradient(180deg, var(--cs-soft) 0, var(--cs-soft) 100%, #fff 58%);
}
.cs-split + .cs-split{ background:#fff; } /* alternanza morbida */

.cs-split__grid{
  display:grid; align-items:center; gap: clamp(16px, 2.8vw, 36px);
  grid-template-columns: minmax(520px, 1.3fr) minmax(340px, .9fr);
}

/* Contenuto: piccolo boost di stacking per evitare coperture casuali su mobile */
.cs-split__content{ position:relative; z-index:1; }

.cs-split__media{ margin:0; }
.cs-split__img{
  width:100%; height:auto; display:block;
  border-radius: var(--cs-radius);
  box-shadow: 0 26px 68px rgba(0,0,0,.14),
              0 1px 0 1px rgba(255,255,255,.65) inset;
  transition: transform .32s cubic-bezier(.2,.65,.2,1), box-shadow .32s ease;
}
.cs-split__img:hover{
  transform: translateY(-2px);
  box-shadow: 0 36px 88px rgba(0,0,0,.18),
              0 1px 0 1px rgba(255,255,255,.65) inset;
}

.cs-split__title{
  margin:0 0 8px; font-weight:800; line-height:1.15;
  font-size: clamp(22px, 2.6vw, 30px);
}
.cs-split__title::after{
  content:""; display:block; width:64px; height:4px; margin-top:10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cs-accent), var(--cs-accent-2));
}
.cs-split__content p{
  margin:0 0 12px; color:var(--cs-gray);
  font-size: clamp(16px, 1.2vw, 18px); line-height:1.7;
}

/* Alternanza automatica: 2°, 4°, 6° split con immagine a destra */
.cs-splits > .cs-split:nth-child(even) .cs-split__grid{
  grid-template-columns: minmax(340px, .9fr) minmax(520px, 1.3fr);
}
.cs-splits > .cs-split:nth-child(even) .cs-split__media{ order: 2; }
.cs-splits > .cs-split:nth-child(even) .cs-split__content{ order: 1; }

/* Responsive */
@media (max-width:1200px){
  .cs-split__grid{ grid-template-columns: minmax(380px,1fr) minmax(340px,1fr); }
}

/* MOBILE – tutto in colonna e ordine naturale (testo NON deve sparire) */
@media (max-width:960px){
  .cs-split{ background: linear-gradient(180deg, var(--cs-soft) 0, var(--cs-soft) 40%, #fff 40%); }
  .cs-split__grid{ grid-template-columns: 1fr; }
  .cs-splits > .cs-split:nth-child(even) .cs-split__grid{ grid-template-columns: 1fr; }
  .cs-splits > .cs-split:nth-child(even) .cs-split__media,
  .cs-splits > .cs-split:nth-child(even) .cs-split__content{ order: initial; }
}

@media (max-width:768px){
  .cs-hero{ padding: 56px 0 38px; }
  .cs-intro{ padding: 34px 0; }
  .cs-split{ padding: 15px 0; }
  .cs-split__title::after{ width:56px; }
}