/* Chi Siamo / Servizi page styling */
:root{
  --cs-blue: #34546A;
  --cs-red: #6C3835;
  --cs-beige: #efe8e1;
}

.cs{ font-family:'Poppins',sans-serif; color:#26323c; }

/* Hero */
.cs-hero-top{ background:transparent; padding:26px 12px 18px; text-align:center; }
.cs-hero-logo{ width:min(320px, 70vw); height:auto; display:inline-block; }

.cs-hero-band{ background:transparent; color:inherit; text-align:center; padding:28px 18px 10px; }
.cs-big{ font-size: clamp(28px, 5.2vw, 48px); letter-spacing:.22em; margin:2px 0 8px; font-weight:700; color:var(--cs-blue); }
.cs-sub{ font-size: clamp(16px, 2.2vw, 22px); opacity:.9; margin-bottom:14px; letter-spacing:.1em; color:#3a4a5a; }
.cs-desc{ max-width:900px; margin:0 auto; font-weight:400; line-height:1.55; color:#374151; }
.cs-cta{ color:var(--cs-red); font-weight:700; margin:20px 0 10px; }

.cs-contacts{ display:flex; flex-wrap:wrap; gap:14px 22px; justify-content:center; align-items:center; margin-top:6px; }
.cc-item{ display:flex; align-items:center; gap:10px; font-weight:700; color:#1f2937; }
.cc-item .cc-ico{ width:22px; height:22px; display:block; color:var(--cs-blue); fill:var(--cs-blue); }
.cc-item.addr{ font-weight:500; }
.cc-item.addr .cc-ico{ color:var(--cs-blue); fill:var(--cs-blue); }

.cs-services-teaser{ background:transparent; color:inherit; padding:14px 18px 24px; }
.cs-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:1100px; margin:0 auto; }
.cs-tile{ text-align:center; }
.cs-tile .ph{ background:#f1f5f9; border:1px solid #e5e7eb; height:180px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#5b6772; font-weight:700; text-transform:uppercase; box-shadow:0 4px 14px rgba(0,0,0,.06); }
.cs-tile img.ph{ width:100%; height:180px; object-fit:cover; display:block; }
.cs-tile figcaption{ margin-top:10px; letter-spacing:.12em; color:#334155; font-weight:600; }
.cs-scroll{ display:inline-block; margin:16px auto 0; padding:8px 14px; border:1.5px solid var(--cs-blue); color:var(--cs-blue); border-radius:999px; text-decoration:none; font-weight:600; transition:all .15s ease; }
.cs-scroll:hover{ background:var(--cs-blue); color:#fff; }

/* Team leads section */
.team-leads {
  background: linear-gradient(135deg, rgba(52,84,106,0.04) 0%, rgba(52,84,106,0.02) 100%);
  padding: 50px 30px;
  margin: 30px 0;
  border-top: 2px solid rgba(52,84,106,0.12);
  border-bottom: 2px solid rgba(52,84,106,0.12);
  border-radius: 16px;
  position: relative;
}

.team-leads::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cs-blue), transparent);
}

.people-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}

.person {
  text-align: center;
  background: white;
  padding: 30px 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}

.person:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 20px rgba(52,84,106,0.15);
}

.person-icon {
  color: var(--cs-blue);
  width: 100px;
  height: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(52,84,106,0.08), rgba(52,84,106,0.12));
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.person:hover .person-icon {
  background: linear-gradient(135deg, rgba(52,84,106,0.15), rgba(52,84,106,0.2));
  transform: scale(1.05);
}

.person-icon svg {
  width: 60px;
  height: 60px;
}

.person h3 {
  margin: 12px 0 8px;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--cs-blue);
}

.person .role {
  margin: 0;
  font-size: 0.95rem;
  color: #666;
  font-weight: 500;
}

.person .desc {
  margin: 4px 0 0;
  font-size: 0.88rem;
  color: #999;
  font-style: italic;
}

/* Services list */
.cs-list{ background:transparent; color:inherit; padding:20px 14px 30px; }
.cs-list-wrap{ max-width: 1120px; margin: 0 auto; }
.cs-list h2{ margin:6px 0 18px; font-weight:700; letter-spacing:.08em; color:var(--cs-blue); }
.cs-items{ display:flex; flex-direction:column; gap:12px; }
.cs-item .bar{ display:inline-block; background:transparent; color:#111827; border-left:4px solid var(--cs-red); padding:6px 10px; border-radius:2px; font-weight:700; margin-bottom:6px; }
.cs-item p{ margin:0; max-width:860px; color:#374151; }

.cs-bottom{ display:grid; grid-template-columns: 1fr; gap:18px; margin-top:18px; align-items:start; }
.cs-bottom.no-photo{ grid-template-columns: 1fr; justify-items: center; }
.cs-bottom.no-photo .cs-aside{ width: min(400px, 92vw); }
.cs-photo .ph{ background:#f9fafb; border:1px solid #e5e7eb; height:320px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#6b7280; font-weight:700; text-transform:uppercase; box-shadow:0 6px 18px rgba(0,0,0,.06); }
.cs-aside{ background:white; color:#2a3a49; border-radius:10px; padding:8px 8px 6px; border:1px solid #e5e7eb; box-shadow:0 6px 18px rgba(0,0,0,.06); }
.cs-aside h3{ color:#2a3a49; margin:4px 0 12px; }
.cs-aside-row{ display:flex; align-items:center; gap:10px; margin:8px 0; }
.cs-aside-row .cc-ico{ width:22px; height:22px; display:block; color:var(--cs-blue); fill:var(--cs-blue); }
.cs-bottom-logo{ display:block; margin:16px 0 0 auto; width:180px; height:auto; }

/* Make phone links look like text */
.cc-item a,
.cs-aside-row a{ color:inherit; text-decoration:none; }
.cc-item a:hover,
.cs-aside-row a:hover{ text-decoration:underline; }

.cs [data-reveal]{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
  transition-delay: var(--reveal-delay, 0ms);
}
.cs [data-reveal].is-visible{
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .cs [data-reveal]{
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 820px){
  .cs-tiles{ grid-template-columns:1fr; }
  .cs-bottom{ grid-template-columns:1fr; }
  .cs-bottom-logo{ margin:12px auto 0; }
  
  .people-list { 
    grid-template-columns: 1fr; 
    gap: 25px;
  }
  
  .team-leads { 
    padding: 40px 20px; 
  }
  
  .person-icon {
    width: 80px;
    height: 80px;
  }
  
  .person-icon svg {
    width: 48px;
    height: 48px;
  }
}