/* =========================================================
   Pagina Chi siamo — INFROP
   Palette: #0065AE · #171F32 · #FF5421
   ========================================================= */

.cs-hero {
    background: linear-gradient(135deg, #0065AE, #171F32);
    color: #fff;
    padding: 4rem 0 3.5rem;
    text-align: center;
}
.cs-hero__eyebrow { color: rgba(255,255,255,.8); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; }
.cs-hero__title { color: #fff; font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; margin: .5rem 0 1rem; }
.cs-hero__sub { color: rgba(255,255,255,.9); max-width: 760px; margin: 0 auto; line-height: 1.6; }

.cs-section-title { color: #171F32; font-size: 1.8rem; font-weight: 700; margin-bottom: 1.2rem; }

/* Video responsive 16:9 */
.cs-video { padding: 3rem 0 1rem; }
.cs-video__frame {
    max-width: 900px; margin: 0 auto;
    position: relative; width: 100%; aspect-ratio: 16 / 9;
    background: #000; border-radius: 14px; overflow: hidden;
    box-shadow: 0 12px 40px rgba(23,31,50,.18);
}
.cs-video__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Fallback per browser senza aspect-ratio */
@supports not (aspect-ratio: 16 / 9) {
    .cs-video__frame { height: 0; padding-bottom: 56.25%; }
}

.cs-mission { padding: 3.5rem 0; }
.cs-mission p { color: #444; line-height: 1.7; }
.cs-mission__box {
    background: #f7f8fa; border: 1px solid #e6e8ec; border-left: 4px solid #0065AE;
    border-radius: 12px; padding: 2rem;
}
.cs-mission__box h3 { color: #0065AE; font-size: 1.3rem; margin-bottom: .6rem; }
.cs-mission__box p { color: #444; margin: 0; }

.cs-values { padding: 3.5rem 0; background: #f7f8fa; }
.cs-value {
    background: #fff; border: 1px solid #e6e8ec; border-radius: 12px;
    padding: 2rem 1.5rem; height: 100%; text-align: center;
}
.cs-value__ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(0,101,174,.12); color: #0065AE; font-size: 1.2rem; margin-bottom: 1rem;
}
.cs-value h3 { color: #171F32; font-size: 1.15rem; margin-bottom: .5rem; }
.cs-value p { color: #666; margin: 0; font-size: .95rem; }

.cs-cta {
    padding: 4rem 0; text-align: center;
    background: linear-gradient(135deg, #171F32, #0065AE); color: #fff;
}
.cs-cta h2 { color: #fff; font-size: 1.9rem; font-weight: 700; margin-bottom: .5rem; }
.cs-cta p { color: rgba(255,255,255,.9); margin-bottom: 1.6rem; }
.cs-cta__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.cs-btn {
    display: inline-block; padding: .9rem 2rem; border-radius: 8px;
    font-weight: 600; text-decoration: none; transition: opacity .2s, background .2s;
}
.cs-btn--light { background: #fff; color: #0065AE; }
.cs-btn--light:hover { color: #0065AE; opacity: .9; }
.cs-btn--accent { background: #FF5421; color: #fff; }
.cs-btn--accent:hover { background: #ff450c; color: #fff; }