/* PAGINA CHI SIAMO — sopra il linguaggio della homepage: testata, manifesto,
   il blocco su Gregorio e quello sulla sostenibilità. */

.cs-hero{position:relative;min-height:660px;display:flex;align-items:flex-end;padding:220px 6% 70px;isolation:isolate;overflow:hidden}
.cs-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.cs-hero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#081728,rgba(8,23,40,.3) 92%),linear-gradient(90deg,#081728d9,transparent 72%)}
.cs-hero-copy{width:min(760px,100%)}
.cs-hero h1{font-size:clamp(54px,6.6vw,104px);line-height:.98;margin-bottom:22px}
.cs-hero h1 em{font-style:normal;color:var(--mint)}
.cs-hero .intro{font-size:15px;line-height:1.8;color:#d9e2ea;max-width:600px;margin:0 0 30px}
.cs-hero .hero-azioni{display:flex;flex-wrap:wrap;gap:12px}
.cs-hero .hero-side{position:absolute;right:24px;top:210px;writing-mode:vertical-rl;font-size:8px;letter-spacing:2px;color:#cfdce8}

/* il manifesto: il testo resta il protagonista, la foto sta dietro appena visibile */
.cs-manifesto{position:relative;isolation:isolate;padding:110px 6%;overflow:hidden;background:#040d1c}
.cs-manifesto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.22}
.cs-manifesto:after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 90% at 50% 45%,rgba(4,13,28,.35),#040d1c 78%)}
.cs-manifesto-inner{max-width:1180px;margin:0 auto;text-align:center}
.cs-manifesto .eyebrow{justify-content:center;margin-bottom:38px}
.cs-manifesto blockquote{
	margin:0;
	font-family:Arial,Helvetica,sans-serif;
	font-weight:900;
	letter-spacing:-.04em;
	/* il corpo è calcolato perché ogni verso stia su una riga sola:
	   il più lungo è "di tutta Italia, dove il nuoto si unisce alla meraviglia," */
	font-size:clamp(16px,2.05vw,29px);
	line-height:1.4;
	text-transform:uppercase;
	text-wrap:balance;
}
.cs-manifesto blockquote p{margin:0 0 26px}
.cs-manifesto-chiusa{color:var(--mint)}
.cs-manifesto-chiusa em{font-style:normal}

/* Gregorio: foto alta a sinistra, citazione e testo a destra */
.cs-greg-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:6%;align-items:center}
.cs-greg-foto{position:relative}
.cs-greg-foto img{width:100%;height:620px;object-fit:cover;object-position:center 35%}
.cs-greg-foto span{display:block;font-size:9px;letter-spacing:1.5px;padding-top:14px;color:#b6c5d5}
.cs-citazione{margin:0 0 30px;padding-left:22px;border-left:2px solid var(--mint);font-size:clamp(19px,1.9vw,26px);line-height:1.5;color:#fff}
.cs-greg-testo p{font-size:15px;line-height:1.85;color:#d2dfed;margin:0 0 18px;max-width:560px}
.cs-greg-testo strong{color:var(--mint);font-weight:700}
.cs-greg-testo .text-link{max-width:290px}

/* sostenibilità: riusa il blocco "mare" della homepage */
.cs-sostenibilita{position:relative}
.cs-sostenibilita img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.cs-sostenibilita:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#040d1ce6,rgba(4,13,28,.45) 70%)}
.cs-sost-copy{max-width:640px}
.cs-sost-copy h2{font-size:clamp(38px,4.2vw,64px);margin:0 0 26px}
.cs-sost-copy h2 span{color:var(--mint)}
.cs-sost-copy p{font-size:15px;line-height:1.85;color:#e0e9f2;margin:0 0 26px}
.cs-sost-copy em{font-style:normal;color:var(--mint);font-weight:700}
.cs-sostenibilita .sea-note{position:absolute;right:24px;bottom:26px;font-size:8px;letter-spacing:2px;color:#cfdce8}

@media(max-width:900px){
	.cs-manifesto blockquote br{display:none}
	.cs-manifesto blockquote{text-wrap:pretty}
	.cs-greg-layout{grid-template-columns:1fr;gap:34px}
	.cs-greg-foto img{height:460px}
	#insieme{grid-template-columns:1fr;gap:34px}
}
@media(max-width:620px){
	.cs-hero{min-height:560px;padding:170px 7% 45px}
	.cs-hero h1{font-size:12.5vw;line-height:1.04}
	.cs-hero .intro{font-size:13px}
	.cs-hero .hero-side{display:none}
	.cs-hero .hero-azioni .button{width:100%;justify-content:space-between}
	.cs-manifesto{padding:70px 7%}
	.cs-manifesto blockquote{font-size:17px;line-height:1.45}
	.cs-greg-foto img{height:360px}
	.cs-citazione{font-size:16px;padding-left:16px}
	.cs-sost-copy h2{font-size:9.5vw}
}

/* stessa griglia delle altre sezioni sugli schermi larghi */
@media(min-width:1600px){.cs-hero,.cs-manifesto{padding-left:9%;padding-right:9%}}