/* =============================
   CONTATTI — stile istituzionale
   Prefisso classi: ct-
   ============================= */
:root{
  --ct-dark:#161616;
  --ct-gray:#6a6f74;
  --ct-soft:#f6f8fa;
  --ct-line:#e7e9ec;
  --ct-accent:#d31919;
  --ct-accent2:#ff4a4a;
  --ct-container:min(1180px, 92vw);
  --ct-radius:16px;
}

.ct-page{ color:var(--ct-dark); overflow-x:clip; }

/* ---------- HERO ---------- */
.ct-hero{
  padding: clamp(44px, 6vw, 72px) 0;
  background:#fff;
  border-bottom:1px solid var(--ct-line);
}
.ct-hero__inner{
  width:var(--ct-container);
  margin-inline:auto;
  padding-inline:16px;
  display:grid;
  align-items:center;
  gap: clamp(16px, 2.6vw, 36px);
  grid-template-columns: minmax(360px, .9fr) minmax(520px, 1.1fr);
}
.ct-hero__title{
  margin:0 0 10px;
  font-weight:800;
  letter-spacing:.01em;
  font-size: clamp(28px, 4vw, 44px);
  line-height:1.06;
  background:linear-gradient(180deg, var(--ct-accent), var(--ct-accent2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ct-hero__lead{ color:var(--ct-gray); font-size: clamp(16px, 1.15vw, 18px); line-height:1.7; }
.ct-hero__lead p{ margin:0 0 12px; }
.ct-hero__copy{ position:relative; z-index:1; }

/* wrapper e immagine */
.ct-hero__media{
  position: relative;
  border-radius: var(--ct-radius);
  overflow: hidden;
  box-shadow: 0 26px 68px rgba(0,0,0,.14), 0 1px 0 1px rgba(255,255,255,.65) inset;
}
.ct-hero__img{ width:100%; height:auto; display:block; }



/* (opzionale) lucido leggero sopra l’immagine */
.ct-hero__media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,0) 40%);
  pointer-events:none; mix-blend-mode: soft-light;
}

/* Alternative rapide (scegline una al posto di ct-shape--arc) */
.ct-shape--diagonal{ clip-path: polygon(0 0, 86% 0, 100% 12%, 100% 100%, 0 100%); }
.ct-shape--blob{ clip-path: path("M5,15 C12,0 45,0 60,6 C80,14 92,22 96,40 C100,60 88,88 64,96 C40,104 10,96 2,70 C-2,56 -2,28 5,15 Z"); }
.ct-shape--squircle{
  -webkit-mask:
    radial-gradient(100% 100% at 0 0,#0000 35%,#000 36%) top left,
    radial-gradient(100% 100% at 100% 0,#0000 35%,#000 36%) top right,
    radial-gradient(100% 100% at 100% 100%,#0000 35%,#000 36%) bottom right,
    radial-gradient(100% 100% at 0 100%,#0000 35%,#000 36%) bottom left;
  -webkit-mask-size:51% 51%; -webkit-mask-repeat:no-repeat;
          mask:
    radial-gradient(100% 100% at 0 0,#0000 35%,#000 36%) top left,
    radial-gradient(100% 100% at 100% 0,#0000 35%,#000 36%) top right,
    radial-gradient(100% 100% at 100% 100%,#0000 35%,#000 36%) bottom right,
    radial-gradient(100% 100% at 0 100%,#0000 35%,#000 36%) bottom left;
  mask-size:51% 51%; mask-repeat:no-repeat;
}

/* ---------- PANEL con CARDS ---------- */
.ct-panel{
  padding: clamp(38px, 5vw, 64px) 0;
  background: linear-gradient(180deg, #fff 0, var(--ct-soft) 100%);
}
.ct-panel__inner{
  width:var(--ct-container);
  margin-inline:auto;
  padding: clamp(0px, 2vw, 24px);
  background:#fff;
  border:1px solid var(--ct-line);
  border-radius: calc(var(--ct-radius) + 8px);
  box-shadow: 0 18px 40px rgba(0,0,0,.06);
  display:grid;
  gap: clamp(12px, 2vw, 22px);
  /* auto-fit mantiene 4/2/2 colonne a seconda dello spazio; min 160px per card */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.ct-card{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:10px; text-decoration:none; color:inherit;
  padding:18px; border-radius: var(--ct-radius);
  border:1px solid rgba(0,0,0,.06);
  background:#fff;
  transition: transform .25s cubic-bezier(.2,.65,.2,1), box-shadow .25s, border-color .25s;
}
.ct-card:hover{ transform: translateY(-3px) scale(1.02); box-shadow: 0 18px 50px rgba(0,0,0,.10); border-color: rgba(0,0,0,.12); }

.ct-card__icon{
  width:42px; height:42px; display:grid; place-items:center;
  border-radius: 12px; background: linear-gradient(135deg, var(--ct-accent), var(--ct-accent2));
  box-shadow: 0 8px 18px rgba(211,25,25,.25);
}
.ct-card__icon svg{ width:22px; height:22px; fill:#fff; display:block; }

.ct-card__title{
  margin:6px 0 2px; font-size:18px; font-weight:800; line-height:1.2;
}
.ct-card__text{
  margin:0; color:var(--ct-gray); font-size:15.5px; line-height:1.6;
}
.ct-card__text p{ margin:0 0 6px; }

/* ---------- Responsive ---------- */
@media (max-width:1200px){
  .ct-hero__inner{ grid-template-columns: 1fr 1.1fr; }
}
@media (max-width:980px){
  
  .ct-panel__inner{ grid-template-columns: repeat(2, 1fr); }
}

/* SHAPE: arco elegante sul lato destro */
.ct-shape--arc{
  /* maschera SVG in data-URI: curva morbida a destra */
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'>\
    <path d='M0,0 H80 C95,25 95,75 80,100 H0 Z' fill='white'/>\
  </svg>");
          mask-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'>\
    <path d='M0,0 H80 C95,25 95,75 80,100 H0 Z' fill='white'/>\
  </svg>");
  -webkit-mask-size: 100% 100%;
          mask-size: 110% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}