/* HERO — overlay più intenso solo qui */
.pg-metodo__hero::before{background:rgba(0,0,0,.35)}

.intro-section{background-color:var(--cl-stone)}

/* ========= PROCESSO IN 4 FASI (overview) ========= */
.pg-metodo .process-overview{background:var(--cl-ivory)}
.pg-metodo .fasi-grid{
  display:grid;gap:clamp(1rem,2.5vw,1.5rem);
  grid-template-columns:repeat(4,1fr)
}
@media (max-width:1366px){.pg-metodo .fasi-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:1024px){.pg-metodo .fasi-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.pg-metodo .fasi-grid{grid-template-columns:1fr}.pg-metodo .feature-card{flex-flow:column;align-items: flex-start !important;}}

/* Card ultra-leggere: solo bordo e tanto bianco */
.pg-metodo .fase-card,
.pg-metodo .pipeline-card{
  border:1px solid rgba(12,22,24,.12);
  background:#fff;border-radius:12px;
  padding:clamp(1rem,1.8vw,1.5rem);
  display:flex;flex-direction:column;
  transition:background-color .2s ease,border-color .2s ease
}
.pg-metodo .fase-card{justify-content:initial}
.pg-metodo .fase-card:hover{background:var(--cl-ivory);border-color:rgba(12,22,24,.16)}

.pg-metodo .fase-hd{
  display:flex;gap:.75rem;margin-bottom:.25rem;
  flex-direction:column;align-items:flex-start
}
.pg-metodo .fase-num{
  display:flex;align-items:center;justify-content:center;
  max-width:40px;width:100%;height:40px;border-radius:50%;
  background:var(--cl-stone);
  font:600 .875rem/1 var(--font-base);
  color:var(--color-text-grey)
}
.pg-metodo .fase-card .p.small{line-height:1.5;opacity:.92}
.pg-metodo .fase-card .cta-link{margin-top:.25rem}

/* =========================
   PG Metodo → Strumenti operativi
   ========================= */

/* 1) Griglia un filo più ariosa */
.pg-metodo .method-features__grid{gap:clamp(22px,2.2vw,32px)}

/* 2) Card essenziale con separatore tenue */
.pg-metodo .feature-card{
  gap:clamp(14px,1.4vw,18px);
  padding-block:clamp(24px,2vw,28px);
  border-top:1px solid rgba(12,22,24,.12);
  min-height:92px
}
.feature-content p{margin: 0;}
.pg-metodo .feature-card{display: flex;align-items:center;}
/* 3) ICONA – più contrasto, niente riempimenti “a pallino” */
.pg-metodo .feature-icon{
  width:clamp(56px,4.6vw,64px);height:clamp(56px,4.6vw,64px);
  border-radius:12px;
  background:color-mix(in oklab,var(--cl-sage) 22%,#fff 78%);
  box-shadow:0 0 0 1px color-mix(in oklab,var(--cl-sage) 38%,transparent);
  display:grid;place-items:center;flex:0 0 auto;
  color:var(--cl-ottanio) /* currentColor per l’SVG */
}

/* dimensione SVG e tratto più incisivo */
.pg-metodo .feature-icon svg{
  width:clamp(26px,2.4vw,36px);height:clamp(26px,2.4vw,36px);
  display:block
}
/* ========= PIPELINE (media centrale) ========= */
.pg-metodo .pipeline-section{background:var(--cl-ivory)}
.pg-metodo .pipeline-section__title{margin-bottom:clamp(1.5rem,2.2vw,2.5rem)}

.pg-metodo .pipeline-grid{
  display:grid;gap:16px;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:240px 240px;
  grid-template-areas:
    "card1 media card2"
    "card3 media card4"
}
.pg-metodo .card-1{grid-area:card1}
.pg-metodo .card-2{grid-area:card2}
.pg-metodo .card-3{grid-area:card3}
.pg-metodo .card-4{grid-area:card4}

.pg-metodo .pipeline-card{justify-content:center;gap:.5rem}
.pg-metodo .pipeline-media{grid-area:media;height:100%}
.pg-metodo .pipeline-img{width:100%;height:100%;object-fit:cover;border-radius:12px;display:block}
.pg-metodo .pipeline-card .card-icon{width:36px;height:36px}
.pg-metodo .pipeline-card .card-icon svg{width:100%;height:100%;fill:var(--cl-sage)}

@media (max-width:1024px){
  .pg-metodo .pipeline-grid{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "card1 media"
      "card2 media"
      "card3 card4"
  }
}
@media (max-width:768px){
  .pg-metodo .pipeline-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "card1"
      "card2"
      "media"
      "card3"
      "card4"
  }
  .pg-metodo .pipeline-card,
  .pg-metodo .pipeline-media{height:auto}
}

/* ========= SINERGIA ========= */
.pg-metodo .synergy-section{background:var(--cl-ivory)}
.pg-metodo .synergy-section .container{gap:clamp(1.25rem,2.5vw,2rem)}
.pg-metodo .synergy-section__text{max-width:60ch;opacity:.95}
@media (max-width:768px){
  .pg-metodo .synergy-section .container{flex-direction:column}
  .pg-metodo .synergy-section__title{max-width:22ch;margin-inline:auto}
  .pg-metodo .synergy-section__text{margin-inline:auto}
}

/* ========= Accessibilità / micro-coerenze ========= */
.pg-metodo a:focus-visible{outline:2px solid var(--cl-ottanio);outline-offset:2px}
.pg-metodo img{-webkit-backface-visibility:hidden;transform:translateZ(0)} /* anti-jaggies */

/* ===== QUALITÀ & CERTIFICAZIONI — fascia editoriale ===== */
.quality-section{
  --quality-bg:color-mix(in oklab,var(--cl-ivory) 82%,var(--cl-stone) 18%);
  background:var(--quality-bg);
  padding-block:clamp(3rem,8vw,7rem);
  position:relative;border-block:0
}

/* Header: titolo + link a destra */
.quality-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}
@media (max-width:820px){.quality-hd{flex-direction:column;align-items:flex-start;gap:.75rem}}

/* Accento minimale sotto al titolo */
.quality-hd .h2{display:inline-block;margin-bottom:.35rem}
.quality-hd .h2::after{
  content:"";display:block;width:64px;height:2px;margin-top:.5rem;border-radius:2px;
  background:var(--cl-petrol)
}

/* Copy: misura confortevole e, su desktop, 2 colonne */
.quality-copy{max-width:88ch}
.quality-copy p{margin:0 0 1rem}
.quality-copy p:last-child{margin-bottom:0}

/* lead leggermente più “forte” */
.quality-copy p:first-child{
  font-size:clamp(1.05rem,.9rem + .55vw,1.25rem);line-height:1.6
}

/* Due colonne dove c’è spazio */
@media (min-width:1100px){
  .quality-copy{column-count:2;column-gap:clamp(2rem,4vw,3rem)}
  .quality-copy p{break-inside:avoid}
}

/* CTA coerente */
.quality-section .link-cta{color:var(--cl-petrol)}
.quality-section .link-cta:hover{color:color-mix(in oklab,var(--cl-petrol) 86%,#000 0%)}
.quality-section .link-cta .icon-arrow{transform:scaleX(-1);transition:transform .18s ease}
.quality-section .link-cta:hover .icon-arrow{transform:translate(.18em,.06em) scaleX(-1)}

/* Micro-tweak coerenti con reveal.css, zero impatto su layout */
.pg-metodo .hero .reveal-up { --rev-distance: 10px; }
.pg-metodo .fase-num.reveal-quick { font-variant-numeric: tabular-nums; }
.pg-metodo .feature-icon.reveal-scale,
.pg-metodo .card-icon.reveal-scale { --rev-distance: 8px; }  /* icone più “leggere” */