/* ============================================================
   raffaelescaglione.com — foglio di stile della home
   Palette "verde foglia" + accento terracotta
   Tutti i colori passano dalle variabili qui sotto:
   per cambiare l'identita' del sito basta toccare :root
   ============================================================ */

/* I colori arrivano da rshm-tokens.css, caricato su tutto il sito. */

/* ============================================================
   1. IMPALCATURA COMUNE
   ============================================================ */

.rshm-section{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
  padding:var(--rs-pad-y) var(--wp--spacing--side, min(3vw,20px));
  margin-top:0 !important;
  margin-bottom:0 !important;
}
.rshm-wrap{
  /* La larghezza e' vincolata con min(): cosi' nessuna regola piu' specifica
     piu' avanti nel foglio (le sezioni che si stringono a 780, 760, 620px)
     puo' far sporgere il contenitore fuori dallo schermo del telefono. */
  width:min(var(--wp--style--global--wide-size, 1200px), 100%);
  max-width:100%;
  font-family:var(--rs-font);
}

.rshm-kicker{
  color:var(--rs-green-700);
  font-size:.875rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-align:center;
  margin:0 0 10px !important;
}
.rshm-h2{
  color:var(--rs-ink);
  font-size:clamp(1.6rem,3vw,2.25rem);
  font-weight:800;
  line-height:1.25;
  letter-spacing:-.01em;
  text-align:center;
  max-width:700px;
  margin:0 auto 46px;
}
.rshm-h2 em{color:var(--rs-green-600);font-style:normal}
.rshm-nowrap{white-space:nowrap}

/* pulsante di azione — l'unico elemento terracotta della pagina */
.rshm-cta{
  display:inline-block;
  background-color:var(--rs-terra);
  color:#fff;
  font-size:1.0625rem;
  font-weight:700;
  padding:16px 38px;
  border-radius:var(--rs-radius-sm);
  text-decoration:none;
  box-shadow:0 8px 24px rgba(180,87,60,.32);
  transition:transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.rshm-cta:hover,.rshm-cta:focus-visible{
  background-color:var(--rs-terra-dark);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(180,87,60,.4);
}
.rshm-link-soft{
  color:var(--rs-on-dark-3);
  font-size:1.0625rem;
  text-decoration:none;
  border-bottom:1px solid rgba(138,154,141,.45);
  padding-bottom:2px;
}
.rshm-link-soft:hover{color:var(--rs-on-dark)}

/* ============================================================
   2. HERO
   ============================================================ */

.rshm-hero{
  background-color:var(--rs-green-900);
  padding-top:110px;
  padding-bottom:100px;
}
.rshm-hero .rshm-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:22px;
  max-width:min(780px, 100%);
}
.rshm-eyebrow{
  display:inline-block;
  color:var(--rs-green-300);
  font-size:.875rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:0 !important;
}
.rshm-h1{
  color:var(--rs-on-dark);
  font-size:clamp(2rem,4.4vw,3.25rem);
  font-weight:800;
  line-height:1.18;
  letter-spacing:-.01em;
  margin:0 !important;
}
.rshm-h1 em{color:var(--rs-green-400);font-style:normal}
.rshm-h1 .rshm-line{display:block}

/* ancore invisibili per i link interni: lasciano respiro sotto l'header.
   I margini vanno azzerati o il tema lascia una banda bianca fra le sezioni. */
.rshm-anchor{
  display:block;height:0;line-height:0;font-size:0;
  margin:0 !important;padding:0 !important;
  scroll-margin-top:100px;
}
.rshm-lede{
  color:var(--rs-on-dark-2);
  font-size:clamp(1rem,1.6vw,1.15rem);
  line-height:1.65;
  max-width:600px;
  margin:0 !important;
}
.rshm-ctarow{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  margin-top:10px;
}

/* ============================================================
   3. BARRA DI FIDUCIA
   ============================================================ */

.rshm-trust{
  background-color:var(--rs-green-800);
  padding-top:26px;
  padding-bottom:26px;
}
.rshm-trust .rshm-wrap{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px 40px;
}
.rshm-trust-item{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--rs-on-dark-2);
  font-size:.9375rem;
  font-weight:500;
  margin:0 !important;
}
.rshm-trust-item svg{flex:none;width:16px;height:16px;stroke:var(--rs-green-400)}

/* ============================================================
   4. TI RICONOSCI? (il problema)
   ============================================================ */

.rshm-pain{background-color:var(--rs-paper)}
.rshm-pain-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  width:100%;
}
.rshm-pain-card{
  background:var(--rs-green-050);
  border:1px solid var(--rs-line);
  border-radius:var(--rs-radius);
  padding:28px 24px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.rshm-pain-icon{
  width:38px;height:38px;
  border-radius:9px;
  background:var(--rs-ochre-soft);
  display:flex;align-items:center;justify-content:center;
}
.rshm-pain-icon svg{width:20px;height:20px;stroke:var(--rs-ochre)}
.rshm-pain-title{
  color:var(--rs-ink);
  font-size:1.0625rem;
  font-weight:700;
  line-height:1.4;
  margin:0 !important;
}
.rshm-pain-text{
  color:var(--rs-ink-2);
  font-size:1.0625rem;
  line-height:1.68;
  margin:0 !important;
}

/* ============================================================
   5. SU COSA POSSO AIUTARTI — le tre colonne
   ============================================================ */

.rshm-servizi{background-color:var(--rs-green-050)}
.rshm-serv-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  width:100%;
  align-items:stretch;
}
.rshm-serv-col{
  position:relative;
  background:var(--rs-paper);
  border:1px solid var(--rs-line);
  border-radius:16px;
  padding:22px;
  display:flex;
  flex-direction:column;
  box-shadow:var(--rs-shadow-card);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
/* sollevamento al passaggio del mouse: la scheda e' cliccabile per intero */
.rshm-serv-col:hover,
.rshm-serv-col:focus-within{
  transform:translateY(-8px);
  box-shadow:var(--rs-shadow-lift);
  border-color:var(--rs-green-300);
  cursor:pointer;
}

/* --- il riquadro illustrato in cima alla scheda ------------------------
   Le illustrazioni sono disegnate per essere viste a 400-600 px: a 120 px
   i loro elementi minuti scendevano sotto la soglia in cui l'occhio li
   distingue, e l'insieme diventava una macchia di colore. Qui salgono a
   250 px dentro un riquadro che le incornicia, e si vedono INTERE:
   nessun ritaglio, qualunque sia la loro inquadratura. */
.rshm-serv-fig{
  display:flex;
  align-items:center;
  justify-content:center;
  height:250px;
  padding:16px;
  margin:0 0 22px;
  background:var(--rs-green-050);
  border:1px solid var(--rs-line);
  border-radius:12px;
  overflow:hidden;
}
.rshm-serv-fig figure,
.rshm-serv-fig .wp-block-image{
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  width:100%;
}
.rshm-serv-fig img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
.rshm-serv-title{
  color:var(--rs-ink);
  font-size:1.1875rem;
  font-weight:800;
  line-height:1.3;
  margin:0 0 8px !important;
}
.rshm-serv-sub{
  color:var(--rs-ink-2);
  font-size:1.0625rem;
  line-height:1.62;
  margin:0 0 18px !important;
}
.rshm-serv-list{
  list-style:none;
  margin:0 0 20px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.rshm-serv-list li{
  position:relative;
  padding-left:20px;
  color:var(--rs-ink);
  font-size:1.0625rem;
  font-weight:500;
  line-height:1.55;
}
.rshm-serv-list li::before{
  content:"";
  position:absolute;
  left:0;top:.5em;
  width:7px;height:7px;
  border-radius:50%;
  background:var(--rs-green-500);
}
.rshm-serv-more{
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid var(--rs-line);
  color:var(--rs-green-700);
  font-size:1.0625rem;
  font-weight:700;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.rshm-serv-more:hover{color:var(--rs-green-600);gap:10px;transition:gap .18s ease}
/* rende cliccabile l'intera scheda, non solo il link "Approfondisci":
   un solo <a> reale (quello sotto), un pseudo-elemento invisibile lo
   estende sopra tutta la .rshm-serv-col. Niente <a> annidati, niente
   duplicazione dei link nel DOM. */
.rshm-serv-more::after{
  content:"";
  position:absolute;
  inset:0;
}

/* ============================================================
   6. IN CHE MODO LAVORIAMO INSIEME
   Sono tre alternative, non tre passaggi: nessuna numerazione.
   ============================================================ */

.rshm-modalita{background-color:var(--rs-paper)}
.rshm-mod-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  width:100%;
}
.rshm-mod-card{
  position:relative;
  border:1px solid var(--rs-line);
  border-radius:var(--rs-radius);
  padding:26px 24px;
  background:var(--rs-paper);
  display:flex;
  flex-direction:column;
  gap:12px;
}
.rshm-mod-ico{
  width:40px;height:40px;
  border-radius:10px;
  background:var(--rs-green-100);
  display:flex;align-items:center;justify-content:center;
}
.rshm-mod-ico svg{width:21px;height:21px;stroke:var(--rs-green-700)}
.rshm-mod-title{
  color:var(--rs-ink);
  font-size:1.0625rem;
  font-weight:700;
  line-height:1.4;
  margin:0 !important;
}
.rshm-mod-text{
  color:var(--rs-ink-2);
  font-size:1.0625rem;
  line-height:1.68;
  margin:0 !important;
}

/* ============================================================
   7. ALCUNI SITI CHE HO REALIZZATO
   ============================================================ */

.rshm-lavori{background-color:var(--rs-green-050)}
.rshm-work-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  width:100%;
}
.rshm-work{
  display:block;
  background:var(--rs-paper);
  border:1px solid var(--rs-line);
  border-radius:var(--rs-radius);
  overflow:hidden;
  text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease;
}
.rshm-work:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 32px rgba(22,33,26,.13);
}
/* la classe sta sulla <figure> di WordPress: l'immagine e' dentro */
.rshm-work-shot,
.rshm-work .wp-block-image{margin:0;display:block}
.rshm-work-shot img{
  display:block;
  width:100%;
  height:210px;
  object-fit:cover;
  object-position:top center;
  background:var(--rs-green-100);
}
.rshm-work-body{padding:16px 20px 20px}
.rshm-work-name{
  color:var(--rs-ink);
  font-size:1rem;
  font-weight:700;
  margin:0 0 4px !important;
}
.rshm-work-kind{
  color:var(--rs-ink-3);
  font-size:.9375rem;
  margin:0 !important;
}

/* --- versione con i blocchi The Plus (Advanced Image) -----------------
   La pagina ha due caratteri: Mulish per i titoli (glielo assegna Blocksy
   con una regola sugli elementi h1-h6) e Montserrat per il testo corrente
   (glielo assegna .rshm-wrap, che pero' e' un antenato: l'ereditarieta'
   perde contro qualunque regola dichiarata, ed e' per questo che i titoli
   restano Mulish anche dentro le mie sezioni).
   I blocchi The Plus sono h2 e h3, quindi finivano tutti in Mulish 900,
   35 e 30 px. Qui rimetto ciascuno nel suo ruolo. Specificita' 0-3-0
   contro lo 0-0-1 delle regole di tema: vincono senza !important.
   NOTA: heading-style-8 e heading-style-2 sono i "preset di stile" del
   blocco; se li cambi nell'editor, vanno aggiornati anche qui. */

/* "Alcuni siti realizzati" e' un titolo di sezione come gli altri:
   la FAMIGLIA non si tocca (resta Mulish, come .rshm-h2), si allineano
   solo corpo, peso, interlinea e crenatura. */
.rshm-lavori .heading-style-8 .heading-title{
  font-size:clamp(1.6rem,3vw,2.25rem);
  font-weight:800;
  line-height:1.25;
  letter-spacing:-.01em;
}

/* La riga di istruzioni sotto il titolo e' testo corrente. Nelle altre
   sezioni lo stesso ruolo tocca a un <p>, che eredita Montserrat: qui e'
   un <h3>, quindi la famiglia va dichiarata a mano. */
.rshm-lavori .heading-style-8 .heading-sub-title{
  font-family:var(--rs-font);
  font-size:1.0625rem;
  font-weight:500;
  line-height:1.68;
  letter-spacing:normal;
}

/* Le didascalie con il dominio: stessa misura dei nomi dei lavori
   nella versione precedente della sezione (1rem, 700), e il verde dei
   link della pagina al posto del colore link del tema. */
.rshm-lavori .heading-style-2 .heading-sub-title,
.rshm-lavori .heading-style-2 .heading-sub-title a{
  font-family:var(--rs-font);
  font-size:1rem;
  font-weight:700;
  line-height:1.4;
  letter-spacing:normal;
  color:var(--rs-green-700);
}
.rshm-lavori .heading-style-2 .heading-sub-title a:hover,
.rshm-lavori .heading-style-2 .heading-sub-title a:focus-visible{
  color:var(--rs-green-600);
}

/* Il filetto sotto il titolo arriva dal plugin in viola (#6f14f1) con il
   punto arancione (#ff844a): due colori estranei alla tavolozza. Li porto
   sul verde. I selettori del plugin valgono 0-2-1 e 0-2-0: anteponendo
   .rshm-lavori salgo a 0-3-1 e 0-3-0 e passo davanti senza !important. */
.rshm-lavori .tpgb-heading-title span.title-sep{
  border-color:var(--rs-green-300);
}
.rshm-lavori .tpgb-heading-title .sep-dot{
  color:var(--rs-green-500);
}

/* ============================================================
   8. DAL PRIMO MESSAGGIO ALLA SOLUZIONE
   Qui la numerazione ha senso: e' una sequenza vera.
   ============================================================ */

.rshm-metodo{background-color:var(--rs-paper)}
.rshm-steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  width:100%;
}
.rshm-step{position:relative;padding-top:12px}
.rshm-step-num{
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;
  border-radius:50%;
  background:var(--rs-green-600);
  color:#fff;
  font-weight:800;
  font-size:1.0625rem;
  margin:0 0 18px;
}
.rshm-step-title{
  color:var(--rs-ink);
  font-size:1.125rem;
  font-weight:700;
  margin:0 0 8px !important;
}
.rshm-step-text{
  color:var(--rs-ink-2);
  font-size:1.0625rem;
  line-height:1.65;
  margin:0 !important;
}

/* ============================================================
   9. RICHIAMO CENTRALE
   ============================================================ */

.rshm-cta2{background-color:var(--rs-green-900)}
.rshm-cta2 .rshm-wrap{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:22px;max-width:min(620px, 100%);
}
.rshm-cta2-title{
  color:var(--rs-on-dark);
  font-size:clamp(1.5rem,2.8vw,2rem);
  font-weight:800;
  line-height:1.3;
  margin:0 !important;
}
.rshm-cta2-text{
  color:var(--rs-on-dark-2);
  font-size:1rem;
  line-height:1.68;
  margin:0 !important;
}

/* ============================================================
   10. COME RAGIONA QUESTA PAGINA
   ============================================================ */

.rshm-why{background-color:var(--rs-paper)}
.rshm-why-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  width:100%;
}
.rshm-why-card{
  border:1px solid var(--rs-line);
  border-radius:var(--rs-radius-sm);
  padding:22px;
  background:var(--rs-green-050);
}
.rshm-why-tag{
  display:inline-block;
  background:var(--rs-green-100);
  color:var(--rs-green-700);
  font-size:.8125rem;
  font-weight:700;
  letter-spacing:.03em;
  padding:4px 10px;
  border-radius:6px;
  margin:0 0 10px !important;
}
.rshm-why-text{
  color:var(--rs-ink-2);
  font-size:1.0625rem;
  line-height:1.68;
  margin:0 !important;
}
.rshm-why-more{
  display:block;
  text-align:center;
  margin-top:32px;
  color:var(--rs-green-700);
  font-size:1.0625rem;
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid var(--rs-line);
  padding-bottom:4px;
  width:fit-content;
  margin-inline:auto;
}
.rshm-why-more:hover{color:var(--rs-green-600);border-bottom-color:var(--rs-green-400)}

/* ============================================================
   11. DOMANDE FREQUENTI
   ============================================================ */

.rshm-faq{background-color:var(--rs-green-050)}
.rshm-faq .rshm-wrap{max-width:min(760px, 100%)}
.rshm-faq-item{border-bottom:1px solid var(--rs-line)}
.rshm-faq-item.rshm-first{border-top:1px solid var(--rs-line)}
.rshm-faq-q{
  width:100%;
  background:none;
  border:0;
  text-align:left;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;
  padding:20px 4px;
  cursor:pointer;
  font-family:var(--rs-font);
  color:var(--rs-ink);
  font-size:1rem;
  font-weight:600;
}
.rshm-faq-q:hover{color:var(--rs-green-700)}
.rshm-faq-q .rshm-plus{flex:none;width:20px;height:20px;position:relative}
.rshm-faq-q .rshm-plus::before,
.rshm-faq-q .rshm-plus::after{
  content:"";
  position:absolute;
  background:var(--rs-green-600);
  border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
  width:14px;height:2px;top:9px;left:3px;
}
.rshm-faq-q .rshm-plus::after{width:2px;height:14px;top:3px;left:9px}
.rshm-faq-item.rshm-open .rshm-plus::after{transform:rotate(90deg);opacity:0}
.rshm-faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease}
.rshm-faq-item.rshm-open .rshm-faq-a{max-height:320px}
.rshm-faq-a p{
  color:var(--rs-ink-2);
  font-size:1.0625rem;
  line-height:1.65;
  margin:0 0 20px 4px;
}

/* ============================================================
   12. PARLIAMONE — modulo e recapiti
   ============================================================ */

.rshm-final{background-color:var(--rs-paper);padding-bottom:100px}
.rshm-final .rshm-wrap{
  display:flex;flex-direction:column;align-items:center;
  width:min(var(--wp--style--global--wide-size,1200px), 100%);
}
.rshm-final-title{
  color:var(--rs-ink);
  font-size:clamp(1.5rem,2.8vw,2.1rem);
  font-weight:800;
  line-height:1.3;
  text-align:center;
  margin:0 0 12px !important;
}
.rshm-final-text{
  color:var(--rs-ink-2);
  font-size:1rem;
  line-height:1.68;
  text-align:center;
  max-width:520px;
  margin:0 0 44px !important;
}
.rshm-contact-grid{
  display:grid;
  grid-template-columns:1.35fr 1fr;
  gap:36px;
  width:100%;
  max-width:980px;
  align-items:start;
}
.rshm-form-box{
  background:var(--rs-green-050);
  border:1px solid var(--rs-line);
  border-radius:var(--rs-radius);
  padding:28px 28px 22px;
}
.rshm-aside-title{
  color:var(--rs-ink);
  font-size:1.0625rem;
  font-weight:800;
  margin:0 0 18px !important;
}
.rshm-contatti{
  list-style:none;
  margin:0 0 26px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.rshm-contatti li{display:flex;gap:12px;align-items:flex-start}
.rshm-contatti svg{flex:none;width:19px;height:19px;stroke:var(--rs-green-600);margin-top:2px}
.rshm-contatti b{
  display:block;
  color:var(--rs-ink-3);
  font-size:.8125rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:2px;
}
.rshm-contatti a,.rshm-contatti span.val{
  color:var(--rs-ink);
  font-size:1.0625rem;
  font-weight:600;
  text-decoration:none;
}
.rshm-contatti a:hover{color:var(--rs-green-700)}
.rshm-aside-note{
  color:var(--rs-ink-2);
  font-size:.9375rem;
  line-height:1.68;
  padding-top:20px;
  border-top:1px solid var(--rs-line);
  margin:0 !important;
}

/* --- il modulo ARForms dentro il riquadro verde nebbia -----------------
   ARForms porta con se' un proprio stile (riquadro bianco, titolo e
   pulsante magenta) pensato per stare da solo in pagina. Qui il modulo
   e' gia' dentro una sezione che ha titolo e riquadro suoi, quindi
   togliamo il doppione e riportiamo i colori nella palette del sito. */

/* via il titolo e la descrizione del modulo: la sezione ha gia' i suoi */
.rshm-form-box .arftitlecontainer{display:none !important}

/* via il riquadro bianco interno: resta solo quello verde nebbia */
.rshm-form-box .arf_fieldset,
.rshm-form-box .arf_fieldset.arf_standard_form{
  background:transparent !important;
  padding:0 !important;
  border:0 !important;
  box-shadow:none !important;
}
.rshm-form-box .arf_form_wrapper,
.rshm-form-box form{max-width:100% !important}

/* campi: bordo tenue e angoli arrotondati, coerenti con le schede */
.rshm-form-box input[type=text],
.rshm-form-box input[type=email],
.rshm-form-box input[type=tel],
.rshm-form-box input[type=number],
.rshm-form-box textarea,
.rshm-form-box select{
  background:var(--rs-paper) !important;
  border:1px solid var(--rs-line) !important;
  border-radius:var(--rs-radius-sm) !important;
  color:var(--rs-ink) !important;
  font-family:var(--rs-font) !important;
}
.rshm-form-box input[type=text]:focus,
.rshm-form-box input[type=email]:focus,
.rshm-form-box input[type=tel]:focus,
.rshm-form-box textarea:focus,
.rshm-form-box select:focus{
  border-color:var(--rs-green-500) !important;
  outline:2px solid var(--rs-green-300) !important;
  outline-offset:1px;
}

/* il pulsante di invio e' un'azione: quindi terracotta, come gli altri */
.rshm-form-box .arf_submit_btn,
.rshm-form-box button.arf_submit_btn{
  background:var(--rs-terra) !important;
  border-color:var(--rs-terra) !important;
  color:#fff !important;
  font-family:var(--rs-font) !important;
  font-weight:700 !important;
  border-radius:var(--rs-radius-sm) !important;
  padding:14px 34px !important;
  height:auto !important;
  box-shadow:0 8px 24px rgba(180,87,60,.28) !important;
  transition:background-color .18s ease, transform .18s ease;
}
.rshm-form-box .arf_submit_btn:hover{
  background:var(--rs-terra-dark) !important;
  border-color:var(--rs-terra-dark) !important;
  transform:translateY(-2px);
}

/* ============================================================
   13. ADATTAMENTO A SCHERMI PICCOLI
   ============================================================ */

@media (max-width:980px){
  .rshm-contact-grid{grid-template-columns:1fr;gap:28px}
  .rshm-serv-grid,.rshm-work-grid,.rshm-mod-grid{grid-template-columns:repeat(2,1fr)}
  .rshm-why-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:800px){
  :root{--rs-pad-y:64px}
  .rshm-pain-grid,
  .rshm-serv-grid,
  .rshm-mod-grid,
  .rshm-work-grid,
  .rshm-steps,
  .rshm-why-grid{grid-template-columns:1fr}
  .rshm-hero{padding-top:80px;padding-bottom:72px}
  .rshm-h2{margin-bottom:34px}
  .rshm-cta{width:100%;text-align:center;padding-left:20px;padding-right:20px}
  .rshm-ctarow{width:100%}
  .rshm-serv-fig{height:210px}
  /* sul telefono le risposte vanno a capo molto piu' spesso:
     320px di altezza le troncavano a meta' */
  .rshm-faq-item.rshm-open .rshm-faq-a{max-height:720px}
}

/* rispetta chi ha chiesto meno animazioni */
@media (prefers-reduced-motion:reduce){
  .rshm-cta,.rshm-work,.rshm-faq-a,.rshm-faq-q .rshm-plus::before,.rshm-faq-q .rshm-plus::after{
    transition:none !important;
  }
  .rshm-cta:hover,.rshm-work:hover{transform:none}
}

/* accessibilita' da tastiera */
.rshm-cta:focus-visible,
.rshm-work:focus-visible,
.rshm-serv-more:focus-visible,
.rshm-faq-q:focus-visible,
.rshm-why-more:focus-visible,
.rshm-link-soft:focus-visible{
  outline:3px solid var(--rs-green-400);
  outline-offset:3px;
}

/* Il footer non si tocca da qui: il suo colore e' un'impostazione
   del tema Blocksy, cambiata direttamente nelle opzioni cosi' vale
   su tutte le pagine e resta modificabile dal Personalizza. */

/* ============================================================
   15. LE ICONE, DISEGNATE IN CSS
   Prima erano blocchi SVG dentro i blocchi GreenShift. Premendo
   "Recupera" nell'editor, Gutenberg le ha cancellate: il blocco
   veniva giudicato non conforme e la riparazione automatica
   buttava via il contenuto che non sapeva ricostruire.
   Qui le icone diventano CSS puro: non stanno piu' nel contenuto
   della pagina, quindi nessuna modifica ai testi puo' toccarle,
   e si ricolorano da sole seguendo le variabili della palette.
   ============================================================ */

/* se qualche vecchia icona e' sopravvissuta dentro i blocchi,
   la nascondiamo: comandano queste */
.rshm-trust-item > svg,
.rshm-pain-icon > svg,
.rshm-mod-ico > svg,
.rshm-contatti li > svg{display:none !important}

.rshm-trust-item::before,
.rshm-pain-icon::before,
.rshm-mod-ico::before,
.rshm-contatti li::before{
  content:"";
  display:block;
  flex:none;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center;  mask-position:center;
  -webkit-mask-size:contain;     mask-size:contain;
}

/* --- barra di fiducia: spunta --- */
.rshm-trust-item::before{
  width:17px;height:17px;
  background-color:var(--rs-green-400);
  -webkit-mask-image:var(--ico-check); mask-image:var(--ico-check);
}

/* --- sezione problema: tre icone diverse, una per scheda --- */
.rshm-pain-icon::before{
  width:21px;height:21px;
  background-color:var(--rs-ochre);
}
.rshm-pain-grid > .rshm-pain-card:nth-child(1) .rshm-pain-icon::before{
  -webkit-mask-image:var(--ico-trend); mask-image:var(--ico-trend);
}
.rshm-pain-grid > .rshm-pain-card:nth-child(2) .rshm-pain-icon::before{
  -webkit-mask-image:var(--ico-clock); mask-image:var(--ico-clock);
}
.rshm-pain-grid > .rshm-pain-card:nth-child(3) .rshm-pain-icon::before{
  -webkit-mask-image:var(--ico-help); mask-image:var(--ico-help);
}

/* --- modalita' di collaborazione --- */
.rshm-mod-ico::before{
  width:22px;height:22px;
  background-color:var(--rs-green-700);
}
.rshm-mod-grid > .rshm-mod-card:nth-child(1) .rshm-mod-ico::before{
  -webkit-mask-image:var(--ico-screen); mask-image:var(--ico-screen);
}
.rshm-mod-grid > .rshm-mod-card:nth-child(2) .rshm-mod-ico::before{
  -webkit-mask-image:var(--ico-learn); mask-image:var(--ico-learn);
}
.rshm-mod-grid > .rshm-mod-card:nth-child(3) .rshm-mod-ico::before{
  -webkit-mask-image:var(--ico-wrench); mask-image:var(--ico-wrench);
}

/* --- recapiti --- */
.rshm-contatti li::before{
  width:20px;height:20px;
  margin-top:3px;
  background-color:var(--rs-green-600);
}
.rshm-contatti li:nth-child(1)::before{
  -webkit-mask-image:var(--ico-mail); mask-image:var(--ico-mail);
}
.rshm-contatti li:nth-child(2)::before{
  -webkit-mask-image:var(--ico-phone); mask-image:var(--ico-phone);
}

/* ============================================================
   16. RILIEVO DELLE SCHEDE
   Le schede che portano da qualche parte si sollevano al
   passaggio del mouse; quelle che si limitano a informare
   restano ferme, con una sola ombra tenue. Il movimento e' una
   promessa: se una scheda si alza e poi non e' cliccabile,
   la promessa e' falsa.
   ============================================================ */

/* informative: ombra tenue, nessun movimento */
.rshm-pain-card,
.rshm-why-card{
  box-shadow:var(--rs-shadow-soft);
}

/* --- le tre modalita' di collaborazione ---------------------------------
   Stessa ombra delle schede servizi, perche' hanno lo stesso peso nella
   pagina. Ma NON si sollevano e NON prendono il cursore a manina: non
   portano da nessuna parte, e un sollevamento sarebbe una promessa di
   clic che nessuno mantiene. Rispondono al passaggio del mouse in un
   modo che significa "ti ho visto", non "vieni di la'": il fondo si
   tinge appena, l'icona si accende, due angoli a mirino compaiono sulla
   scheda. Nessun movimento del bordo, nessuno spostamento del testo. */
.rshm-mod-card{
  box-shadow:var(--rs-shadow-card);
  transition:background-color .3s ease, box-shadow .3s ease;
}
.rshm-mod-card:hover{
  background:var(--rs-green-050);
  box-shadow:var(--rs-shadow-hover);
}
.rshm-mod-card .rshm-mod-ico{transition:background-color .3s ease}
.rshm-mod-card:hover .rshm-mod-ico{background:var(--rs-green-300)}
.rshm-mod-card::before,
.rshm-mod-card::after{
  content:"";
  position:absolute;
  width:16px;height:16px;
  opacity:0;
  transform:scale(.85);
  transition:opacity .3s ease, transform .3s ease;
}
.rshm-mod-card::before{
  top:10px;left:10px;
  border-top:2px solid var(--rs-green-600);
  border-left:2px solid var(--rs-green-600);
}
.rshm-mod-card::after{
  bottom:10px;right:10px;
  border-bottom:2px solid var(--rs-green-600);
  border-right:2px solid var(--rs-green-600);
}
.rshm-mod-card:hover::before,
.rshm-mod-card:hover::after{
  opacity:1;
  transform:scale(1);
}

/* portfolio: gia' cliccabile, allineato alle schede servizi */
.rshm-work{
  box-shadow:var(--rs-shadow-card);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.rshm-work:hover,
.rshm-work:focus-visible{
  transform:translateY(-8px);
  box-shadow:var(--rs-shadow-lift);
  border-color:var(--rs-green-300);
}

@media (prefers-reduced-motion:reduce){
  .rshm-serv-col,.rshm-work,.rshm-mod-card::before,.rshm-mod-card::after{transition:none !important}
  .rshm-serv-col:hover,.rshm-work:hover{transform:none}
  .rshm-mod-card:hover::before,.rshm-mod-card:hover::after{transform:none}
}