/* =========================================================
   ELVIS MAGRI — style-custom-wp.css
   =========================================================
   File UNICO per tutto il sito, enqueued via functions.php
   (mai nel Personalizza di WordPress: il CSS lì è inline e
   non è cache-abile).

   Ogni volta che questo file cambia, incrementa
   ELVISMAGRI_VERSION in functions.php — altrimenti il browser
   continua a servire la versione vecchia dalla cache
   (.htaccess la tiene per 1 mese su CSS/JS).

   Indice:
   1) Base / token globali
   2) Header / navigazione (+ dropdown, forme decorative)
   3) Hero
   4) Statement scuro
   5) Componente: intestazione di sezione
   6) Servizi (3 pilastri)
   7) Risultati (statistiche)
   8) Zone servite (teaser Home)
   9) Portfolio (teaser Home)
   10) Blog (teaser Home)
   11) Chi Siamo (teaser Home)
   12) Fallback pagine generiche (page.php)
   13) Contatti (Home) + form CF7
   14) Footer
   15) Page-hero + breadcrumb (pagine interne)
   16) Servizi-detail (pagina /servizi/ e sottopagine)
   17) CTA band + form CF7
   18) Process (step)
   19) FAQ
   20) Service teaser
   21) Settori grid
   22) Firma visiva v1 (puntini, accenti, hover)
   23) Zone hub (/zone-servite/)
   24) Componenti pagine geo (geo-copy, chip-links)
   25) Chi Sono (bio, pagina dedicata)
   ========================================================= */

/* =========================================================
   1) BASE — reset + design token globali
   ========================================================= */

:root{
  --c-bg:        #fafaf7;
  --c-ink:       #141414;
  --c-ink-70:    rgba(20,20,20,.72);
  --c-ink-65:    rgba(20,20,20,.65);
  --c-ink-60:    rgba(20,20,20,.60);
  --c-ink-50:    rgba(20,20,20,.50);
  --c-ink-15:    rgba(20,20,20,.15);
  --c-ink-08:    rgba(20,20,20,.08);
  --c-paper:     #fafaf7;
  --c-paper-70:  rgba(250,250,247,.70);
  --c-paper-65:  rgba(250,250,247,.65);
  --c-paper-55:  rgba(250,250,247,.55);
  --c-paper-45:  rgba(250,250,247,.45);
  --c-paper-40:  rgba(250,250,247,.40);
  --c-paper-14:  rgba(250,250,247,.14);
  --c-paper-12:  rgba(250,250,247,.12);
  --c-yellow:    #FFD400;
  --c-teal:      #5FF0D2;
  --c-teal-hover:#7ef5dd;

  --f-display: 'Archivo', sans-serif;
  --f-body:    'Inter', sans-serif;
  --f-serif:   'Instrument Serif', serif;
  --f-mono:    ui-monospace, monospace;

  --container-pad: 5vw;
  --radius-pill:   100px;
  --radius-lg:     18px;
  --radius-md:     14px;
  --radius-sm:     8px;

  --ease: 180ms ease;
}

*, *::before, *::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--c-bg);
  color:var(--c-ink);
  font-family:var(--f-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }

img, video{ max-width:100%; display:block; }

button, input, textarea{ font-family:inherit; }

::selection{ background:var(--c-yellow); color:var(--c-ink); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--c-teal);
  outline-offset:3px;
}

.container{
  padding-left:var(--container-pad);
  padding-right:var(--container-pad);
}

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:-999px; top:0; z-index:999;
  background:var(--c-ink); color:var(--c-paper);
  padding:12px 20px; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* =========================================================
   2) HEADER / NAVIGAZIONE
   ========================================================= */

/* Regola UNICA per .site-header — non duplicarla altrove nel
   file. Niente overflow qui: su un elemento position:sticky
   causa un glitch visivo di rendering durante lo scroll
   (l'overflow, se serve, va sul contenitore delle forme
   decorative qui sotto, .site-header__deco). */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px var(--container-pad);
  background:var(--c-bg);
  border-bottom:1px solid var(--c-ink-08);
}

.site-header__brand{
  display:flex;
  align-items:center;
  gap:12px;
  position:relative;
  z-index:1;
}

.site-header__mark{
  width:36px; height:36px;
  border-radius:var(--radius-sm);
  background:var(--c-ink);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
}

.site-header__mark-text{
  color:var(--c-yellow);
  font-family:var(--f-display);
  font-weight:900;
  font-size:16px;
}

.site-header__name{
  font-family:var(--f-display);
  font-weight:900;
  font-size:16px;
  letter-spacing:.02em;
}

/* Forme decorative fluttuanti: generate lato PHP in header.php,
   posizione/colore/timing casuali a ogni caricamento pagina. */
.site-header__deco{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}

.site-header__shape{
  position:absolute;
  opacity:.4;
  animation-name:em-header-float;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
  animation-direction:alternate;
  will-change:transform;
}
.site-header__shape--square{
  border-radius:3px;
  transform:rotate(12deg);
}
.site-header__shape--circle{
  border-radius:50%;
}
.site-header__shape--triangle{
  clip-path:polygon(50% 0%, 0% 100%, 100% 100%);
}
@keyframes em-header-float{
  0%   { transform:translateY(0) rotate(0deg); }
  100% { transform:translateY(-12px) rotate(10deg); }
}

.main-nav{
  display:flex;
  align-items:center;
  gap:34px;
  position:relative;
  z-index:1;
}

.main-nav__link{
  font-size:14px;
  font-weight:500;
  color:var(--c-ink-65);
  transition:color var(--ease);
}
.main-nav__link:hover,
.main-nav__link:focus-visible{ color:var(--c-ink); }

.main-nav__cta{
  font-size:14px;
  font-weight:700;
  background:var(--c-ink);
  color:var(--c-paper);
  padding:12px 22px;
  border-radius:var(--radius-pill);
  transition:background var(--ease);
}
.main-nav__cta:hover,
.main-nav__cta:focus-visible{ background:#2b2b2b; }

.nav-dropdown{
  position:relative;
}

.nav-dropdown__trigger{
  font-size:14px;
  font-weight:500;
  color:var(--c-ink-65);
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px;
  background:none;
  border:none;
  padding:0;
  transition:color var(--ease);
}
.nav-dropdown__trigger:hover,
.nav-dropdown:focus-within .nav-dropdown__trigger{ color:var(--c-ink); }

.nav-dropdown__chevron{
  transition:transform var(--ease);
}
.nav-dropdown[data-open="true"] .nav-dropdown__chevron,
.nav-dropdown:focus-within .nav-dropdown__chevron{ transform:rotate(180deg); }

.nav-dropdown__panel{
  position:absolute;
  top:32px;
  left:50%;
  transform:translateX(-50%);
  background:var(--c-ink);
  color:var(--c-paper);
  border-radius:var(--radius-md);
  padding:22px 26px;
  box-shadow:0 20px 40px rgba(0,0,0,.2);
  width:640px;
  opacity:0;
  visibility:hidden;
  translate:0 6px;
  transition:opacity var(--ease), translate var(--ease), visibility var(--ease);
}

.nav-dropdown:hover .nav-dropdown__panel,
.nav-dropdown:focus-within .nav-dropdown__panel,
.nav-dropdown[data-open="true"] .nav-dropdown__panel{
  opacity:1;
  visibility:visible;
  translate:0 0;
}

.nav-dropdown__panel--narrow{
  width:220px;
}
.nav-dropdown__panel--narrow .nav-dropdown__cols{
  gap:0;
}

.nav-dropdown__panel-top{
  display:block;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.03em;
  color:var(--c-teal);
  padding-bottom:14px;
  margin-bottom:14px;
  border-bottom:1px solid var(--c-paper-12);
}
.nav-dropdown__panel-top:hover{ color:var(--c-teal-hover); }

.nav-dropdown__cols{
  display:flex;
  gap:26px;
}

.nav-dropdown__col{
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
  min-width:0;
}

.nav-dropdown__heading{
  font-size:14px;
  font-weight:700;
}
.nav-dropdown__heading--yellow{ color:var(--c-yellow); }
.nav-dropdown__heading--teal{ color:var(--c-teal); }

.nav-dropdown__sub{
  font-size:13px;
  color:var(--c-paper-65);
  transition:color var(--ease);
}
.nav-dropdown__sub:hover,
.nav-dropdown__sub:focus-visible{ color:var(--c-paper); }

.nav-dropdown__divider{
  height:1px;
  background:var(--c-paper-12);
  margin:6px 0;
}

.nav-toggle{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  padding:8px;
  position:relative;
  z-index:1;
}
.nav-toggle__bar{
  display:block;
  width:22px;
  height:2px;
  background:var(--c-ink);
  margin:5px 0;
  transition:transform var(--ease), opacity var(--ease);
}

@media (max-width: 900px){
  .site-header__deco{ display:none; }

  .main-nav{
    position:fixed;
    inset:73px 0 0 0;
    background:var(--c-bg);
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:12px var(--container-pad) 32px;
    transform:translateY(-8px);
    opacity:0;
    visibility:hidden;
    transition:opacity var(--ease), transform var(--ease), visibility var(--ease);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .main-nav[data-open="true"]{
    opacity:1; visibility:visible; transform:translateY(0);
  }
  .main-nav__link, .nav-dropdown{ width:100%; padding:14px 0; border-bottom:1px solid var(--c-ink-08); }
  .nav-dropdown__trigger{ width:100%; justify-content:space-between; }
  .nav-dropdown__panel{
    position:static; transform:none; width:100%;
    box-shadow:none; padding:14px 0 4px; background:transparent; color:var(--c-ink);
    opacity:1; visibility:visible; translate:none;
    display:none;
  }
  .nav-dropdown[data-open="true"] .nav-dropdown__panel{ display:block; }
  .nav-dropdown__panel-top{ color:var(--c-ink-65); border-bottom-color:var(--c-ink-08); }
  .nav-dropdown__cols{ flex-direction:column; gap:18px; }
  .nav-dropdown__heading{ color:var(--c-ink); }
  .nav-dropdown__heading--yellow{ color:#b8860b; }
  .nav-dropdown__heading--teal{ color:#1a9c82; }
  .nav-dropdown__sub{ color:var(--c-ink-60); }
  .nav-dropdown__sub:hover, .nav-dropdown__sub:focus-visible{ color:var(--c-ink); }
  .main-nav__cta{ margin-top:16px; text-align:center; }
  .nav-toggle{ display:block; }
}
















.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:15px;
  font-weight:700;
  border-radius:var(--radius-pill);
  transition:background var(--ease), color var(--ease);
}
.btn--primary{
  background:var(--c-ink);
  color:var(--c-paper);
  padding:16px 30px;
}
.btn--primary:hover, .btn--primary:focus-visible{ background:#2b2b2b; }

.btn--text{
  font-size:14px;
  font-weight:600;
  color:var(--c-ink);
  border-bottom:2px solid var(--c-ink);
  padding-bottom:2px;
  border-radius:0;
}


/* =========================================================
   4) DARK STATEMENT
   ========================================================= */

.statement{
  background:var(--c-ink);
  color:var(--c-paper);
  padding:120px var(--container-pad);
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:60px;
  position:relative;
  overflow:hidden;
}

.statement__deco-ring{
  position:absolute;
  right:-60px; top:-60px;
  opacity:.9;
  pointer-events:none;
}

.statement__deco-dots{
  position:absolute;
  left:0; top:0;
  width:220px; height:220px;
  background-image:radial-gradient(circle, rgba(255,212,0,.5) 1.6px, transparent 1.7px);
  background-size:16px 16px;
  opacity:.6;
  pointer-events:none;
}

.statement__title{
  margin:0;
  font-family:var(--f-display);
  font-weight:900;
  font-size:clamp(34px, 3.6vw, 56px);
  line-height:1.05;
  position:relative;
  padding-left:24px;
}
.statement__title::before{
  content:"";
  position:absolute;
  left:0;
  top:.4em;
  width:11px;
  height:11px;
  background:var(--c-teal);
  border-radius:2px;
  transform:rotate(15deg);
}
.statement__title-accent{ color:var(--c-teal); }

.statement__body{
  display:flex;
  flex-direction:column;
  gap:22px;
}

.statement__text{
  margin:0;
  font-size:18px;
  line-height:1.65;
  color:var(--c-paper-70);
}
.statement__text strong{ color:var(--c-paper); }

@media (max-width: 900px){
  .statement{ grid-template-columns:1fr; padding:80px var(--container-pad); gap:32px; }
}

/* =========================================================
   5) COMPONENTE: intestazione di sezione
   ========================================================= */

.section-heading{
  margin-bottom:56px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:20px;
}

.section-heading__eyebrow{
  font-size:13px;
  font-weight:600;
  letter-spacing:.16em;
  color:var(--c-ink-50);
  margin-bottom:14px;
}
.section-heading--on-dark .section-heading__eyebrow{ color:var(--c-teal); }
.section-heading--on-yellow .section-heading__eyebrow{ color:rgba(20,20,20,.55); }

.section-heading__title{
  margin:0;
  font-family:var(--f-display);
  font-weight:900;
  font-size:clamp(30px, 3vw, 48px);
  max-width:720px;
  line-height:1.08;
  position:relative;
  padding-left:24px;
}
.section-heading__title::before{
  content:"";
  position:absolute;
  left:0;
  top:.4em;
  width:11px;
  height:11px;
  background:var(--c-yellow);
  border-radius:2px;
  transform:rotate(15deg);
}

/* =========================================================
   6) SERVIZI (3 pilastri, Home)
   ========================================================= */

.servizi{
  padding:100px var(--container-pad);
  background:var(--c-bg);
  position:relative;
  overflow:hidden;
}

.servizi__deco-ring{ position:absolute; left:-80px; bottom:-80px; pointer-events:none; }
.servizi__deco-square{
  position:absolute; right:8vw; top:60px;
  width:20px; height:20px;
  background:var(--c-teal);
  border-radius:4px;
  transform:rotate(20deg);
  pointer-events:none;
}

.servizi__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}

.servizi__card{
  display:flex;
  flex-direction:column;
  gap:22px;
  padding:36px 30px;
  border-radius:var(--radius-lg);
  min-height:320px;
  transition:transform var(--ease);
}
.servizi__card:hover{ transform:translateY(-4px); }

.servizi__card--dark{ background:var(--c-ink); color:var(--c-paper); }
.servizi__card--teal{ background:var(--c-teal); color:var(--c-ink); }

.servizi__icon{ flex:none; }

.servizi__card-title{
  font-family:var(--f-display);
  font-weight:900;
  font-size:23px;
  line-height:1.15;
}

.servizi__card-desc{
  font-size:15px;
  line-height:1.6;
  opacity:.72;
}

.servizi__subs{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:auto;
  padding-top:10px;
  border-top:1px solid rgba(127,127,127,.25);
}

.servizi__sub{
  font-size:13px;
  font-weight:600;
  opacity:.65;
  display:flex;
  align-items:center;
  gap:8px;
}

.servizi__sub-dot{
  width:5px; height:5px;
  border-radius:50%;
  flex:none;
  background:currentColor;
}
.servizi__card--dark .servizi__sub-dot{ background:var(--c-yellow); }
.servizi__card--teal .servizi__sub-dot{ background:var(--c-ink); }

@media (max-width: 900px){
  .servizi__grid{ grid-template-columns:1fr; }
}

/* =========================================================
   7) RISULTATI (statistiche, Home + riusato in Chi Sono)
   ========================================================= */

.risultati{
  padding:100px var(--container-pad);
  background:var(--c-bg);
}
.risultati__title{
  position:relative;
  padding-left:24px;
}
.risultati__title::before{
  content:"";
  position:absolute;
  left:0;
  top:.4em;
  width:11px;
  height:11px;
  background:var(--c-yellow);
  border-radius:2px;
  transform:rotate(15deg);
}

.risultati__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  margin-bottom:56px;
  flex-wrap:wrap;
}

.risultati__title{
  margin:0;
  font-family:var(--f-display);
  font-weight:900;
  font-size:clamp(28px, 2.6vw, 40px);
}

.risultati__subtitle{
  font-size:14px;
  font-weight:600;
  color:var(--c-ink-50);
}

.risultati__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:40px;
}

.risultato{
  display:flex;
  flex-direction:column;
  gap:10px;
  border-top:2px solid var(--c-ink);
  padding-top:20px;
}

.risultato__icon{ flex:none; }

.risultato__value{
  font-family:var(--f-display);
  font-weight:900;
  font-size:56px;
  line-height:1;
}

.risultato__label{
  font-size:15px;
  line-height:1.5;
  color:var(--c-ink-60);
  max-width:280px;
}

@media (max-width: 780px){
  .risultati__grid{ grid-template-columns:1fr; gap:28px; }
}

/* =========================================================
   8) ZONE SERVITE (teaser Home)
   ========================================================= */

.zone{
  padding:100px var(--container-pad);
  background:var(--c-ink);
  color:var(--c-paper);
  position:relative;
  overflow:hidden;
}

.zone__top-stripe{ position:absolute; top:0; left:0; width:100%; pointer-events:none; }

.zone__deco-pattern{ position:absolute; left:-50px; top:30px; opacity:.85; pointer-events:none; }

.zone__deco-square{
  position:absolute; right:6vw; bottom:40px;
  width:34px; height:34px;
  background:var(--c-yellow);
  border-radius:8px;
  transform:rotate(15deg);
  pointer-events:none;
}

.zone__deco-bar{
  position:absolute; right:2vw; bottom:20px;
  width:150px; height:10px;
  background:var(--c-teal);
  border-radius:5px;
  opacity:.5;
  pointer-events:none;
}

.zone__intro{ margin-bottom:50px; }

.zone__eyebrow{
  font-size:13px; font-weight:600; letter-spacing:.16em;
  color:var(--c-teal); margin-bottom:14px;
}

.zone__title{
  margin:0 0 16px;
  font-family:var(--f-display);
  font-weight:900;
  font-size:clamp(30px, 3vw, 48px);
  max-width:720px;
  line-height:1.08;
}

.zone__lead{
  margin:0;
  font-size:16px;
  line-height:1.6;
  color:var(--c-paper-70);
  max-width:560px;
}

.zone__grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:1px;
  background:var(--c-paper-14);
}

.zone__card{
  background:var(--c-ink);
  padding:30px 20px;
  display:flex;
  flex-direction:column;
  gap:16px;
  min-height:200px;
  transition:background var(--ease);
}
.zone__card:hover{ background:#1d1d1d; }

.zone__card-bar{ width:34px; height:6px; border-radius:3px; }

.zone__card-name{
  font-family:var(--f-display);
  font-weight:700;
  font-size:18px;
  line-height:1.2;
}

.zone__card-note{
  font-size:13px;
  line-height:1.5;
  color:var(--c-paper-55);
  margin-top:auto;
}

@media (max-width: 900px){
  .zone__grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 520px){
  .zone__grid{ grid-template-columns:1fr; }
}

/* =========================================================
   9) PORTFOLIO (teaser Home)
   ========================================================= */

.portfolio{
  padding:100px var(--container-pad);
  background:var(--c-bg);
  position:relative;
  overflow:hidden;
}

.portfolio__deco{ position:absolute; left:6vw; top:40px; pointer-events:none; }

.portfolio__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}

.portfolio__card{
  display:flex;
  flex-direction:column;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--c-ink);
  transition:transform var(--ease);
}
.portfolio__card:hover{ transform:translateY(-4px); }

.portfolio__card-media{
  height:220px;
  position:relative;
  background:var(--c-ink);
}
.portfolio__card-media img{
  width:100%; height:100%; object-fit:cover;
}

.portfolio__card-body{
  padding:22px 22px 26px;
  background:var(--c-ink);
  color:var(--c-paper);
  flex:1;
}

.portfolio__card-tag{
  font-size:12px;
  font-weight:600;
  letter-spacing:.1em;
  color:var(--c-paper-55);
  margin-bottom:8px;
}

.portfolio__card-title{
  font-family:var(--f-display);
  font-weight:700;
  font-size:19px;
}

@media (max-width: 900px){
  .portfolio__grid{ grid-template-columns:1fr; }
}

/* =========================================================
   10) BLOG (teaser Home)
   ========================================================= */

.home-blog-teaser{
  padding:100px var(--container-pad);
  background:var(--c-yellow);
  position:relative;
  overflow:hidden;
}

.blog__deco{ position:absolute; pointer-events:none; }

.blog__intro{ margin-bottom:44px; }

.blog__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}

.blog__card{
  background:var(--c-ink);
  color:var(--c-paper);
  border-radius:var(--radius-md);
  padding:26px 22px;
  display:flex;
  flex-direction:column;
  gap:14px;
  min-height:150px;
  transition:transform var(--ease);
}
.blog__card:hover{ transform:translateY(-4px); }

.blog__card-icon{ width:30px; height:30px; border-radius:var(--radius-sm); }

.blog__card-title{
  font-family:var(--f-display);
  font-weight:700;
  font-size:16px;
  line-height:1.25;
}

@media (max-width: 900px){
  .blog__grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 520px){
  .blog__grid{ grid-template-columns:1fr; }
}

/* Testo descrittivo nei box categoria (aggiunto per indicizzazione:
   prima c'era solo icona + titolo, niente testo da leggere/indicizzare) */
.blog__card-text{
  margin:0;
  font-size:13px;
  line-height:1.5;
  color:var(--c-paper-65);
}

/* Ultimi articoli — teaser Home. Track a scorrimento orizzontale con
   scroll-snap: con 4 articoli si vede tutto su desktop senza dover
   scrollare; quando gli articoli superano 4, diventa naturalmente un
   mini-carosello a scorrimento (utile finché non serve un vero
   carosello con frecce via JS). */
.blog-latest{
  margin-top:56px;
}
.blog-latest__heading{
  margin:0 0 20px;
  font-family:var(--f-display);
  font-weight:800;
  font-size:15px;
  color:rgba(20,20,20,.7);
}
.blog-latest__track{
  display:flex;
  gap:18px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:6px;
  -webkit-overflow-scrolling:touch;
}
.blog-latest-card{
  flex:0 0 260px;
  scroll-snap-align:start;
  background:#fff;
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid rgba(20,20,20,.1);
}
.blog-latest-card__media{
  display:block;
  aspect-ratio:16/10;
  overflow:hidden;
}
.blog-latest-card__media img,
.blog-latest-card__media svg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.blog-latest-card__body{
  padding:16px 18px 18px;
}
.blog-latest-card__title{
  margin:0 0 6px;
  font-family:var(--f-display);
  font-weight:700;
  font-size:15px;
  line-height:1.3;
}
.blog-latest-card__title a{
  color:var(--c-ink);
  text-decoration:none;
}
.blog-latest-card__meta{
  margin:0;
  font-size:12px;
  color:rgba(20,20,20,.5);
}
@media (max-width: 640px){
  .blog-latest-card{ flex-basis:220px; }
}

/* Zone servite — link interni aggiuntivi in fondo alla sezione blog
   della Home. Riusa il componente .chip-links già esistente (sezione
   24), stessa identica resa visiva delle chip nelle pagine geo. */
.blog-zones{
  margin-top:48px;
}
.blog-zones__label{
  margin:0 0 10px;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(20,20,20,.55);
}

/* =========================================================
   11) CHI SIAMO (teaser Home)
   ========================================================= */

.chi-siamo{
  padding:100px var(--container-pad);
  background:var(--c-bg);
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:60px;
  align-items:center;
  position:relative;
  overflow:hidden;
}

.chi-siamo__deco-dots{
  position:absolute; left:-40px; top:0;
  width:200px; height:200px;
  background-image:radial-gradient(circle, rgba(20,20,20,.18) 1.5px, transparent 1.6px);
  background-size:14px 14px;
  pointer-events:none;
}

.chi-siamo__media{ position:relative; }

.chi-siamo__media-bg{
  position:absolute; left:26px; bottom:-26px;
  width:70%; height:60px;
  background:var(--c-yellow);
  border-radius:var(--radius-sm);
  z-index:0;
}

.chi-siamo__photo{
  position:relative;
  height:380px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--c-teal);
  z-index:1;
}
.chi-siamo__photo img{ width:100%; height:100%; object-fit:cover; }

.chi-siamo__content{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.chi-siamo__eyebrow{
  font-size:13px; font-weight:600; letter-spacing:.16em; color:var(--c-ink-50);
}

.chi-siamo__title{
  margin:0;
  font-family:var(--f-display);
  font-weight:900;
  font-size:clamp(28px, 3vw, 44px);
  line-height:1.1;
  position:relative;
  padding-left:24px;
}
.chi-siamo__title::before{
  content:"";
  position:absolute;
  left:0;
  top:.4em;
  width:11px;
  height:11px;
  background:var(--c-yellow);
  border-radius:2px;
  transform:rotate(15deg);
}

.chi-siamo__text{
  margin:0;
  font-size:17px;
  line-height:1.65;
  color:var(--c-ink-65);
  max-width:520px;
}

@media (max-width: 900px){
  .chi-siamo{ grid-template-columns:1fr; }
}

/* =========================================================
   12) FALLBACK: pagine generiche senza template dedicato
   ========================================================= */

.page-content{
  padding:140px var(--container-pad) 100px;
  max-width:820px;
  margin:0 auto;
}

.page-content__title{
  font-family:var(--f-display);
  font-weight:900;
  font-size:clamp(32px, 4vw, 52px);
  margin:0 0 28px;
  position:relative;
}
.page-content__title::before{
  content:"";
  display:block;
  width:64px;
  height:6px;
  border-radius:3px;
  background:var(--c-yellow);
  margin-bottom:24px;
}

.page-content__body{
  font-size:17px;
  line-height:1.7;
  color:var(--c-ink-70);
}
.page-content__body p{ margin:0 0 20px; }
.page-content__body h2{
  font-family:var(--f-display);
  font-weight:700;
  margin:40px 0 16px;
  position:relative;
  padding-left:24px;
}
.page-content__body h2::before{
  content:"";
  position:absolute;
  left:0;
  top:.4em;
  width:11px;
  height:11px;
  background:var(--c-teal);
  border-radius:2px;
  transform:rotate(15deg);
}
.page-content__body a{
  text-decoration:none;
  border-bottom:2px solid var(--c-yellow);
  transition:border-color var(--ease), background var(--ease);
}
.page-content__body a:hover{
  background:rgba(255,212,0,.15);
}

/* =========================================================
   13) CONTATTI (Home) + form CF7
   ========================================================= */

.contatti{
  padding:120px var(--container-pad);
  background:var(--c-yellow);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:start;
  position:relative;
  overflow:hidden;
}

.contatti__deco-square{ position:absolute; left:4vw; top:24px; pointer-events:none; }
.contatti__deco-dot{
  position:absolute; right:6vw; bottom:60px;
  width:40px; height:40px;
  background:var(--c-teal);
  border-radius:50%;
  pointer-events:none;
}

.contatti__title{
  margin:0 0 20px;
  font-family:var(--f-display);
  font-weight:900;
  font-size:clamp(34px, 4vw, 64px);
  line-height:1.02;
}

.contatti__lead{
  font-size:17px;
  line-height:1.6;
  max-width:420px;
  color:rgba(20,20,20,.75);
  margin:0 0 28px;
}

.contatti__meta{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:15px;
  font-weight:600;
}
.contatti__meta a:hover{ text-decoration:underline; }
.contatti__meta-piva{ color:rgba(20,20,20,.6); font-weight:500; }

/* Box scuro che contiene il form CF7 */
.contact-form{
  background:var(--c-ink);
  padding:44px;
  border-radius:var(--radius-lg);
}

/* Stile del form CF7 dentro il box scuro. CF7 genera le proprie
   classi (.wpcf7-form-control ecc.) — queste regole puntano a
   quelle vere, non a classi custom inesistenti. */
.contact-form .wpcf7-form p{
  margin:0 0 16px;
}
.contact-form .wpcf7-form label{
  font-size:13px;
  font-weight:600;
  color:var(--c-paper-65);
  display:block;
  margin-bottom:6px;
}
.contact-form .wpcf7-form input[type="text"],
.contact-form .wpcf7-form input[type="email"],
.contact-form .wpcf7-form input[type="tel"],
.contact-form .wpcf7-form textarea{
  width:100%;
  border:none;
  border-bottom:1px solid rgba(250,250,247,.25);
  background:transparent;
  padding:10px 0;
  font-size:16px;
  font-family:var(--f-body);
  color:var(--c-paper);
  outline:none;
  transition:border-color var(--ease);
}
.contact-form .wpcf7-form input:focus,
.contact-form .wpcf7-form textarea:focus{
  border-bottom-color:var(--c-teal);
}
.contact-form .wpcf7-form textarea{
  resize:none;
}
.contact-form .wpcf7-form input[type="submit"]{
  margin-top:8px;
  background:var(--c-teal);
  color:var(--c-ink);
  border:none;
  padding:16px 24px;
  border-radius:var(--radius-pill);
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:background var(--ease);
}
.contact-form .wpcf7-form input[type="submit"]:hover{
  background:var(--c-teal-hover);
}
.contact-form .wpcf7-not-valid-tip{
  color:#ff9d9d;
  font-size:12.5px;
  margin-top:4px;
}
.contact-form .wpcf7-response-output{
  color:var(--c-paper-70);
  border-color:rgba(250,250,247,.25) !important;
  font-size:13.5px;
  margin-top:16px;
}

@media (max-width: 900px){
  .contatti{ grid-template-columns:1fr; padding:80px var(--container-pad); }
}

/* =========================================================
   14) FOOTER
   ========================================================= */

.site-footer{
  background:var(--c-ink);
  color:var(--c-paper);
  padding:70px var(--container-pad) 32px;
  display:flex;
  flex-direction:column;
  gap:50px;
  position:relative;
  overflow:hidden;
  background-image: radial-gradient(var(--c-paper-12) 1px, transparent 1px);
  background-size: 20px 20px;
}

.site-footer__deco-circle{
  position:absolute;
  top:-90px;
  right:-90px;
  width:300px;
  height:300px;
  border-radius:50%;
  background:var(--c-teal);
  opacity:.10;
  pointer-events:none;
}

.site-footer__deco-square{
  position:absolute;
  left:42%;
  bottom:60px;
  width:70px;
  height:70px;
  border-radius:16px;
  background:var(--c-yellow);
  opacity:.07;
  transform:rotate(18deg);
  pointer-events:none;
}

.site-footer__grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:40px;
  align-items:start;
}

.site-footer__col{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.site-footer__col:not(:first-child){
  padding-left:32px;
  border-left:1px solid var(--c-paper-12);
}

.site-footer__brand{
  font-family:var(--f-display);
  font-weight:900;
  font-size:16px;
  margin-bottom:2px;
}

.site-footer__desc{
  font-size:13px;
  line-height:1.6;
  color:var(--c-paper-55);
  max-width:260px;
}

.site-footer__heading{
  font-size:12px;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--c-paper-40);
  margin-bottom:6px;
  position:relative;
  display:inline-block;
  padding-top:16px;
}
.site-footer__heading::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:28px;
  height:3px;
  border-radius:2px;
  background:var(--c-yellow);
}
.site-footer__col:nth-child(3) .site-footer__heading::before{
  background:var(--c-teal);
}
.site-footer__col:nth-child(4) .site-footer__heading::before{
  background:var(--c-yellow);
}

.site-footer__link{
  font-size:13.5px;
  color:var(--c-paper-70);
  transition:color var(--ease);
}
.site-footer__link:hover,
.site-footer__link:focus-visible{ color:var(--c-paper); }

.site-footer__contact{
  margin-top:18px;
}
.site-footer__contact-link{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13.5px;
  font-weight:600;
  color:var(--c-paper-70);
  transition:color var(--ease);
  margin-bottom:12px;
}
.site-footer__contact-link:last-child{
  margin-bottom:0;
}
.site-footer__contact-link:hover,
.site-footer__contact-link:focus-visible{
  color:var(--c-teal);
}
.site-footer__contact-link--static{
  cursor:default;
}
.site-footer__contact-link--static:hover{
  color:var(--c-paper-70);
}
.site-footer__contact-icon{
  flex:none;
  color:var(--c-yellow);
}

.site-footer__reviews{
  margin-top:32px;
  padding-top:28px;
  border-top:1px solid var(--c-paper-12);
}
.site-footer__reviews-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--c-ink);
  background:var(--c-yellow);
  padding:6px 14px;
  border-radius:var(--radius-pill);
  margin-bottom:18px;
}
.site-footer__reviews-eyebrow::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--c-ink);
  flex:none;
}
.site-footer__reviews .trustindex-widget,
.site-footer__reviews [class*="ti-"]{
  color-scheme: dark;
}

.site-footer__bottom{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--c-paper-12);
  padding-top:24px;
  flex-wrap:wrap;
  gap:12px;
}

.site-footer__legal{
  font-size:12.5px;
  color:rgba(250,250,247,.45);
}

@media (max-width: 780px){
  .site-footer__grid{ grid-template-columns:1fr 1fr; }
  .site-footer__col:not(:first-child){
    padding-left:0;
    border-left:none;
    padding-top:24px;
    border-top:1px solid var(--c-paper-12);
  }
  .site-footer__deco-circle,
  .site-footer__deco-square{
    display:none;
  }
}
@media (max-width: 480px){
  .site-footer__grid{ grid-template-columns:1fr; }
}

/* =========================================================
   15) PAGE-HERO + BREADCRUMB (pagine interne)
   ========================================================= */

.page-hero{
  padding:160px var(--container-pad) 90px;
  background:var(--c-bg);
  position:relative;
  overflow:hidden;
  background-image: radial-gradient(var(--c-ink-08) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: -10px -10px;
}

.page-hero::after{
  content:"";
  position:absolute;
  top:-130px;
  right:-90px;
  width:320px;
  height:320px;
  background:var(--c-yellow);
  border-radius:50%;
  opacity:.30;
  pointer-events:none;
  z-index:0;
}
.page-hero::before{
  content:"";
  position:absolute;
  left:5vw;
  bottom:-64px;
  width:110px;
  height:110px;
  background:var(--c-teal);
  border-radius:24px;
  transform:rotate(18deg);
  opacity:.45;
  pointer-events:none;
  z-index:0;
}

.breadcrumb,
.page-hero__eyebrow,
.page-hero__title,
.page-hero__lead{
  position:relative;
  z-index:1;
}

.breadcrumb{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:13px;
  font-weight:600;
  color:var(--c-ink-50);
  margin-bottom:28px;
}
.breadcrumb__link{ color:var(--c-ink-50); transition:color var(--ease); }
.breadcrumb__link:hover, .breadcrumb__link:focus-visible{ color:var(--c-ink); }
.breadcrumb__sep{ color:var(--c-ink-15); }
.breadcrumb__current{
  color:var(--c-ink);
  position:relative;
  padding-left:14px;
}
.breadcrumb__current::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--c-teal);
  transform:translateY(-50%);
}

.page-hero__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.16em;
  background:var(--c-ink);
  color:var(--c-yellow);
  padding:7px 16px 7px 12px;
  border-radius:var(--radius-pill);
  margin-bottom:14px;
}
.page-hero__eyebrow::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--c-teal);
  flex:none;
}

.page-hero__title{
  margin:0 0 20px;
  font-family:var(--f-display);
  font-weight:900;
  font-size:clamp(36px, 4.6vw, 68px);
  line-height:1.02;
  max-width:900px;
}

.page-hero__lead{
  margin:0;
  font-size:17px;
  line-height:1.65;
  color:var(--c-ink-65);
  max-width:620px;
}

/* =========================================================
   16) SERVIZI-DETAIL (pagina /servizi/ e sottopagine)
   ========================================================= */

.servizi-detail{
  padding:20px var(--container-pad) 100px;
  display:flex;
  flex-direction:column;
  gap:80px;
}

.servizi-detail__block{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:56px;
  padding-top:48px;
  border-top:1px solid var(--c-ink-08);
  position:relative;
}
.servizi-detail__block::before{
  content:"";
  position:absolute;
  top:-1px;
  left:0;
  width:64px;
  height:3px;
  background:var(--c-ink);
}
.servizi-detail__block:nth-of-type(3n+2)::before{ background:var(--c-yellow); }
.servizi-detail__block:nth-of-type(3n)::before{ background:var(--c-teal); }

.servizi-detail__intro{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.servizi-detail__badge{
  width:52px; height:52px;
  border-radius:var(--radius-md);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  background:var(--c-ink);
  color:var(--c-yellow);
}
.servizi-detail__block:nth-of-type(3n+2) .servizi-detail__badge{
  background:var(--c-yellow);
  color:var(--c-ink);
}
.servizi-detail__block:nth-of-type(3n) .servizi-detail__badge{
  background:var(--c-teal);
  color:var(--c-ink);
}
.servizi-detail__badge svg,
.servizi-detail__badge img{
  width:24px;
  height:24px;
}

.servizi-detail__title{
  margin:0;
  font-family:var(--f-display);
  font-weight:900;
  font-size:clamp(24px, 2.4vw, 34px);
  line-height:1.1;
  position:relative;
  padding-left:24px;
}
.servizi-detail__title::before{
  content:"";
  position:absolute;
  left:0;
  top:.4em;
  width:11px;
  height:11px;
  background:var(--c-yellow);
  border-radius:2px;
  transform:rotate(15deg);
}

.servizi-detail__text{
  margin:0;
  font-size:15.5px;
  line-height:1.65;
  color:var(--c-ink-65);
  max-width:420px;
}

.servizi-detail__cta{
  font-size:14px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-bottom:2px solid var(--c-ink);
  padding-bottom:2px;
  width:fit-content;
  transition:border-color var(--ease), color var(--ease);
}
.servizi-detail__cta:hover{
  border-color:var(--c-teal);
}

.servizi-detail__subgrid{
  display:flex;
  flex-direction:column;
  gap:28px;
}

.servizi-detail__sub{
  padding:24px 26px;
  border-radius:var(--radius-md);
  background:var(--c-bg);
  border:1px solid var(--c-ink-08);
  display:flex;
  flex-direction:column;
  gap:8px;
  transition:border-color var(--ease), background var(--ease);
  position:relative;
  overflow:hidden;
}
.servizi-detail__sub:hover{ border-color:var(--c-ink-15); background:#f3f3ee; }
.servizi-detail__sub::after{
  content:"";
  position:absolute;
  top:0; left:0;
  width:100%;
  height:3px;
  background:var(--c-yellow);
  transform:scaleX(.16);
  transform-origin:left;
  transition:transform .25s ease;
}
.servizi-detail__sub:nth-child(3n+2)::after{ background:var(--c-yellow); }
.servizi-detail__sub:nth-child(3n)::after{ background:var(--c-teal); }
.servizi-detail__sub:hover::after{ transform:scaleX(1); }

.servizi-detail__sub-title{
  margin:0;
  font-family:var(--f-display);
  font-weight:700;
  font-size:17px;
}
.servizi-detail__sub-title a{ text-decoration:none; }
.servizi-detail__sub-title a:hover{ text-decoration:underline; }

.servizi-detail__sub-text{
  margin:0;
  font-size:14.5px;
  line-height:1.6;
  color:var(--c-ink-60);
}

.servizi-detail__sub-meta{
  margin:4px 0 0;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--c-ink-50);
}

@media (max-width: 900px){
  .servizi-detail__block{ grid-template-columns:1fr; gap:28px; }
}

/* =========================================================
   17) CTA BAND (banda finale con form CF7)
   ========================================================= */

.cta-band{
  padding:100px var(--container-pad);
  background:var(--c-ink);
  color:var(--c-paper);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:start;
  background-image: radial-gradient(var(--c-paper-12) 1px, transparent 1px);
  background-size: 20px 20px;
}

.cta-band__title{
  margin:0 0 16px;
  font-family:var(--f-display);
  font-weight:900;
  font-size:clamp(28px, 3.2vw, 46px);
  line-height:1.08;
  position:relative;
  padding-left:24px;
}
.cta-band__title::before{
  content:"";
  position:absolute;
  left:0;
  top:.4em;
  width:11px;
  height:11px;
  background:var(--c-teal);
  border-radius:2px;
  transform:rotate(15deg);
}

.cta-band__text{
  margin:0;
  font-size:16px;
  line-height:1.6;
  color:var(--c-paper-70);
  max-width:440px;
}

.cta-band__form-wrap{
  background:var(--c-paper);
  color:var(--c-ink);
  border-radius:var(--radius-lg);
  padding:36px;
}
.cta-band__form-wrap .wpcf7-form p{ margin:0 0 16px; }
.cta-band__form-wrap .wpcf7-form label{ font-size:13px; font-weight:600; color:var(--c-ink-65); display:block; margin-bottom:6px; }
.cta-band__form-wrap .wpcf7-form input[type="text"],
.cta-band__form-wrap .wpcf7-form input[type="email"],
.cta-band__form-wrap .wpcf7-form input[type="tel"],
.cta-band__form-wrap .wpcf7-form textarea{
  width:100%;
  border:none;
  border-bottom:1px solid var(--c-ink-15);
  background:transparent;
  padding:10px 0;
  font-size:16px;
  font-family:var(--f-body);
  color:var(--c-ink);
  outline:none;
}
.cta-band__form-wrap .wpcf7-form input:focus,
.cta-band__form-wrap .wpcf7-form textarea:focus{ border-bottom-color:var(--c-teal); }
.cta-band__form-wrap .wpcf7-form input[type="submit"]{
  background:var(--c-ink);
  color:var(--c-paper);
  border:none;
  padding:14px 26px;
  border-radius:var(--radius-pill);
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  transition:background var(--ease);
}
.cta-band__form-wrap .wpcf7-form input[type="submit"]:hover{ background:#2b2b2b; }

@media (max-width: 900px){
  .cta-band{ grid-template-columns:1fr; padding:70px var(--container-pad); }
}

/* =========================================================
   18) PROCESS (step, usato da pagine servizio + Chi Sono)
   ========================================================= */

.process{
  padding:20px var(--container-pad) 90px;
}

.process__title{
  margin:0 0 40px;
  font-family:var(--f-display);
  font-weight:900;
  font-size:clamp(26px, 2.6vw, 40px);
  max-width:640px;
  position:relative;
  padding-left:24px;
}
.process__title::before{
  content:"";
  position:absolute;
  left:0;
  top:.4em;
  width:11px;
  height:11px;
  background:var(--c-yellow);
  border-radius:2px;
  transform:rotate(15deg);
}

.process__list{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
}

.process-step{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding-top:20px;
  border-top:2px solid var(--c-ink);
  transition:transform var(--ease);
}
.process-step:hover{
  transform:translateY(-3px);
}

.process-step__num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  border-radius:var(--radius-md);
  font-family:var(--f-display);
  font-weight:900;
  font-size:20px;
  line-height:1;
  background:var(--c-ink);
  color:var(--c-yellow);
}
.process-step:nth-child(3n+2) .process-step__num{
  background:var(--c-yellow);
  color:var(--c-ink);
}
.process-step:nth-child(3n) .process-step__num{
  background:var(--c-teal);
  color:var(--c-ink);
}

.process-step__title{
  margin:0;
  font-family:var(--f-display);
  font-weight:700;
  font-size:17px;
}

.process-step__text{
  margin:0;
  font-size:14px;
  line-height:1.6;
  color:var(--c-ink-60);
}

@media (max-width: 900px){
  .process__list{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px){
  .process__list{ grid-template-columns:1fr; }
}

/* =========================================================
   19) FAQ (con schema.org FAQPage in JSON-LD lato PHP)
   ========================================================= */

.faq{
  padding:20px var(--container-pad) 100px;
  max-width:820px;
}

.faq__title{
  margin:0 0 32px;
  font-family:var(--f-display);
  font-weight:900;
  font-size:clamp(26px, 2.6vw, 40px);
  position:relative;
  padding-left:24px;
}
.faq__title::before{
  content:"";
  position:absolute;
  left:0;
  top:.4em;
  width:11px;
  height:11px;
  background:var(--c-yellow);
  border-radius:2px;
  transform:rotate(15deg);
}

.faq__list{
  display:flex;
  flex-direction:column;
}

.faq-item{
  padding:22px 0;
  border-top:1px solid var(--c-ink-08);
  border-left:3px solid transparent;
  padding-left:16px;
  margin-left:-16px;
  transition:border-color .2s ease, background .2s ease;
}
.faq-item:last-child{ border-bottom:1px solid var(--c-ink-08); }
.faq-item:hover{
  border-left-color:var(--c-teal);
  background:rgba(95,240,210,.06);
}

.faq-item__q{
  margin:0 0 10px;
  font-family:var(--f-display);
  font-weight:700;
  font-size:17px;
  display:flex;
  align-items:center;
  gap:12px;
}
.faq-item__q::before{
  content:"Q";
  display:inline-flex;
  flex:none;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--c-ink);
  color:var(--c-yellow);
  font-family:var(--f-display);
  font-weight:900;
  font-size:13px;
}
.faq-item:nth-child(3n+2) .faq-item__q::before{
  background:var(--c-yellow);
  color:var(--c-ink);
}
.faq-item:nth-child(3n) .faq-item__q::before{
  background:var(--c-teal);
  color:var(--c-ink);
}

.faq-item__a{
  margin:0;
  font-size:15px;
  line-height:1.65;
  color:var(--c-ink-65);
}

/* =========================================================
   20) SERVICE TEASER (rimando interno, es. e-commerce)
   ========================================================= */

.service-teaser{
  margin:0 var(--container-pad) 90px;
  padding:36px 40px;
  border-radius:var(--radius-lg);
  background:var(--c-teal);
  display:flex;
  flex-direction:column;
  gap:14px;
  max-width:640px;
}

.service-teaser__title{
  margin:0;
  font-family:var(--f-display);
  font-weight:900;
  font-size:22px;
  color:var(--c-ink);
}

.service-teaser__text{
  margin:0;
  font-size:15px;
  line-height:1.6;
  color:rgba(20,20,20,.75);
}

.service-teaser__meta{
  margin:0;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.04em;
  color:rgba(20,20,20,.6);
}

.service-teaser__cta{
  font-size:14px;
  font-weight:700;
  color:var(--c-ink);
  border-bottom:2px solid var(--c-ink);
  padding-bottom:2px;
  width:fit-content;
}

/* =========================================================
   21) SETTORI GRID (hub settori + riusato in Varese/Chi Sono)
   ========================================================= */

.settori-grid{
  padding:20px var(--container-pad) 100px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}

.settore-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:28px 24px;
  border-radius:var(--radius-md);
  background:var(--c-bg);
  border:1px solid var(--c-ink-08);
  transition:border-color var(--ease), background var(--ease), transform var(--ease);
  position:relative;
  overflow:hidden;
}
.settore-card:hover{ border-color:var(--c-ink-15); background:#f3f3ee; transform:translateY(-2px); }
.settore-card::after{
  content:"";
  position:absolute;
  top:0; left:0;
  width:100%;
  height:3px;
  background:var(--c-yellow);
  transform:scaleX(.16);
  transform-origin:left;
  transition:transform .25s ease;
}
.settore-card:nth-child(3n+2)::after{ background:var(--c-yellow); }
.settore-card:nth-child(3n)::after{ background:var(--c-teal); }
.settore-card:hover::after{ transform:scaleX(1); }

.settore-card__icon{
  flex:none;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-sm);
  background:var(--c-ink);
  color:var(--c-yellow);
}
.settore-card:nth-child(3n+2) .settore-card__icon{
  background:var(--c-yellow);
  color:var(--c-ink);
}
.settore-card:nth-child(3n) .settore-card__icon{
  background:var(--c-teal);
  color:var(--c-ink);
}
.settore-card__icon svg,
.settore-card__icon img{
  width:22px;
  height:22px;
}

.settore-card__title{
  margin:0;
  font-family:var(--f-display);
  font-weight:700;
  font-size:17px;
}
.settore-card__title a{ text-decoration:none; }
.settore-card__title a:hover{ text-decoration:underline; }

.settore-card__text{
  margin:0;
  font-size:13.5px;
  line-height:1.55;
  color:var(--c-ink-60);
}

@media (max-width: 900px){
  .settori-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px){
  .settori-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   22) FIRMA VISIVA v1 — utility trasversali
   ========================================================= */

.mark{
  background:var(--c-yellow);
  color:var(--c-ink);
  padding:0 6px;
  border-radius:3px;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

/* =========================================================
   23) ZONE HUB (/zone-servite/)
   ========================================================= */

.zone-hub-intro{
  padding:20px var(--container-pad) 60px;
  max-width:760px;
}
.zone-hub-intro__text{
  margin:12px 0 0;
  font-size:16px;
  line-height:1.65;
  color:var(--c-ink-65);
}

.zone-hub{
  padding:20px var(--container-pad) 100px;
}

.zone-hub-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}

.zone-hub-card{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:30px 26px;
  border-radius:var(--radius-lg);
  background:var(--c-bg);
  border:1px solid var(--c-ink-08);
}
.zone-hub-card::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:100%;
  height:4px;
  background:var(--c-ink);
}
.zone-hub-card:nth-child(3n+2)::before{ background:var(--c-yellow); }
.zone-hub-card:nth-child(3n)::before{ background:var(--c-teal); }

.zone-hub-card__title{
  margin:6px 0 0;
  font-family:var(--f-display);
  font-weight:900;
  font-size:22px;
}

.zone-hub-card__text{
  margin:0;
  font-size:14.5px;
  line-height:1.6;
  color:var(--c-ink-65);
}

.zone-hub-card__sub{
  margin:6px 0 0;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--c-ink);
  padding-top:12px;
  border-top:1px solid var(--c-ink-08);
}
.zone-hub-card:nth-child(3n+2) .zone-hub-card__sub{ color:#b8860b; }
.zone-hub-card:nth-child(3n) .zone-hub-card__sub{ color:#1a9c82; }

.zone-hub-card__links{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:auto;
  padding-top:14px;
}
.zone-hub-card__links a{
  font-size:12.5px;
  font-weight:600;
  padding:7px 13px;
  border-radius:var(--radius-pill);
  border:1px solid var(--c-ink-15);
  color:var(--c-ink-70);
  transition:border-color var(--ease), background var(--ease), color var(--ease);
}
.zone-hub-card__links a:hover,
.zone-hub-card__links a:focus-visible{
  border-color:var(--c-ink);
  background:var(--c-ink);
  color:var(--c-paper);
}
.zone-hub-card__links a:first-child{
  border-color:var(--c-ink);
  background:var(--c-ink);
  color:var(--c-paper);
}
.zone-hub-card__links a:first-child:hover{
  background:#2b2b2b;
}

@media (max-width: 900px){
  .zone-hub-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px){
  .zone-hub-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   24) COMPONENTI PAGINE GEO — .geo-copy, .chip-links
   ========================================================= */

.geo-copy{
  padding:20px var(--container-pad) 60px;
  max-width:760px;
}
.geo-copy__text{
  margin:12px 0 0;
  font-size:16px;
  line-height:1.65;
  color:var(--c-ink-65);
}

.chip-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:8px;
}
.chip-links a{
  font-size:13.5px;
  font-weight:600;
  padding:9px 18px;
  border-radius:var(--radius-pill);
  border:1px solid var(--c-ink-15);
  color:var(--c-ink-70);
  transition:border-color var(--ease), background var(--ease), color var(--ease);
}
.chip-links a:hover,
.chip-links a:focus-visible{
  border-color:var(--c-ink);
  background:var(--c-ink);
  color:var(--c-paper);
}
.chip-links a:first-child{
  border-color:var(--c-ink);
  background:var(--c-ink);
  color:var(--c-paper);
}
.chip-links a:first-child:hover{
  background:#2b2b2b;
}

/* =========================================================
   25) CHI SONO — blocco testo biografico
   ========================================================= */

.chi-siamo-bio{
  padding:20px var(--container-pad) 70px;
  max-width:720px;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.chi-siamo-bio__text{
  margin:0;
  font-size:17px;
  line-height:1.7;
  color:var(--c-ink-70);
}


/* ============================================
   CHI SIAMO — FOTO PROFILO
   Da aggiungere in style-custom-wp.css, subito dopo
   la sezione esistente per .chi-siamo-bio (cercare
   ".chi-siamo-bio__text" nell'indice per trovare il punto giusto)
   ============================================ */

.chi-siamo-bio {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: 48px;
  align-items: start;
}

.chi-siamo-bio__photo img {
  width: 100%;
  height: auto;
  border-radius: 18px; /* coerente col radius card (14-18px) del design system */
  display: block;
}

.chi-siamo-bio__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Mobile: foto sopra il testo, non affiancata */
@media (max-width: 768px) {
  .chi-siamo-bio {
    grid-template-columns: 1fr;
  }
  .chi-siamo-bio__photo {
    max-width: 260px;
    margin: 0 auto;
  }
}


/* ============================================
   LEAD POPUP — "Hai un progetto in mente?"
   Aggiungere in fondo a style-custom-wp.css.
   Usa le variabili già definite in :root (--c-yellow, --c-ink,
   --c-teal, --c-ink-50, --c-ink-65, --f-display, --radius-pill).
   ============================================ */

.lead-popup__trigger {
  position: fixed;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--c-yellow);
  color: var(--c-ink);
  border: none;
  border-radius: var(--radius-pill);
  padding: 15px 18px 15px 20px;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 10px 30px rgba(20, 20, 20, .22);
  cursor: pointer;
  opacity: 0;
  transform: translateY(16px) scale(.96);
  pointer-events: none;
  transition: opacity .4s ease, transform .4s ease, box-shadow .2s ease;
}
.lead-popup__trigger.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.lead-popup__trigger:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(20, 20, 20, .28);
}

/* Coda del fumetto: piccolo triangolo sotto la bolla, come se il
   messaggio "parlasse" dal basso a destra */
.lead-popup__trigger::after {
  content: "";
  position: absolute;
  right: 22px;
  bottom: -8px;
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 0 solid transparent;
  border-top: 10px solid var(--c-yellow);
  transform: rotate(-8deg);
}

.lead-popup__trigger-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--c-ink);
  color: var(--c-yellow);
  flex-shrink: 0;
}

/* Anello che pulsa attorno all'icona, per farla notare subito
   (soprattutto su mobile, dove lo spazio intorno è meno affollato) */
.lead-popup__trigger-icon::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--c-teal);
  opacity: .6;
  animation: lp-pulse 2.4s ease-out infinite;
}
@keyframes lp-pulse {
  0%   { transform: scale(1);   opacity: .6; }
  100% { transform: scale(2.1); opacity: 0;  }
}
@media (prefers-reduced-motion: reduce) {
  .lead-popup__trigger-icon::before { animation: none; }
}

.lead-popup__overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 20, .55);
  z-index: 950;
  opacity: 0;
  transition: opacity .25s ease;
}
.lead-popup__overlay.is-visible {
  opacity: 1;
}

.lead-popup__modal {
  position: fixed;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 960;
  width: min(420px, calc(100vw - 32px));
  max-height: min(600px, calc(100vh - 48px));
  overflow-y: auto;
  background: var(--c-bg);
  border-radius: 18px;
  padding: 32px 28px;
  box-shadow: 0 20px 60px rgba(20, 20, 20, .25);
  opacity: 0;
  transform: translateY(24px) scale(.98);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.lead-popup__modal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.lead-popup__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(20, 20, 20, .06);
  color: var(--c-ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.lead-popup__close:hover {
  background: rgba(20, 20, 20, .12);
}

.lead-popup__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--c-ink-50);
  margin: 0 0 8px 0;
}
.lead-popup__title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 24px;
  margin: 0 0 8px 0;
}
.lead-popup__lead {
  font-size: 14px;
  color: var(--c-ink-65);
  margin: 0 0 22px 0;
}

/* ---------- Form CF7 dentro il popup ----------
   Targettizza le classi VERE generate da Contact Form 7
   (.wpcf7-form-control, .wpcf7-form-control-wrap, .wpcf7-submit,
   ecc.), non classi inventate — coerente con la regola del
   progetto di puntare sempre alle classi reali di CF7. */

.lead-popup__form .wpcf7-form-control-wrap {
  display: block;
  margin-bottom: 14px;
}

.lead-popup__form input.wpcf7-form-control,
.lead-popup__form textarea.wpcf7-form-control {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 16px;
  border: 1.5px solid rgba(20, 20, 20, .14);
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  color: var(--c-ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.lead-popup__form input.wpcf7-form-control::placeholder,
.lead-popup__form textarea.wpcf7-form-control::placeholder {
  color: var(--c-ink-50);
}
.lead-popup__form input.wpcf7-form-control:focus,
.lead-popup__form textarea.wpcf7-form-control:focus {
  outline: none;
  border-color: var(--c-ink);
  box-shadow: 0 0 0 3px rgba(95, 240, 210, .35); /* alone teal soft al focus */
}
.lead-popup__form textarea.wpcf7-form-control {
  min-height: 110px;
  resize: vertical;
}

.lead-popup__form input[type="submit"].wpcf7-submit {
  width: 100%;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--c-ink);
  color: var(--c-yellow);
  font-weight: 700;
  font-size: 15px;
  padding: 15px 24px;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease;
}
.lead-popup__form input[type="submit"].wpcf7-submit:hover {
  transform: translateY(-1px);
  background: #000;
}

.lead-popup__form .wpcf7-spinner {
  margin-left: 10px;
  vertical-align: middle;
}
.lead-popup__form .wpcf7-not-valid-tip {
  display: block;
  color: #c0392b;
  font-size: 12px;
  margin-top: 5px;
}
.lead-popup__form .wpcf7-response-output {
  border-radius: 10px;
  font-size: 13px;
  margin: 16px 0 0 0;
  padding: 12px 14px;
}

/* Su schermi stretti: bolla un po' più compatta ma il testo
   resta SEMPRE visibile (niente più icona sola su mobile) */
@media (max-width: 560px) {
  .lead-popup__trigger {
    font-size: 13.5px;
    padding: 13px 16px 13px 18px;
    right: 16px;
  }
  .lead-popup__modal {
    right: 16px;
    left: 16px;
    bottom: 16px;
    width: auto;
  }
}







/* =========================================================
   3) HERO
   ========================================================= */
.hero{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:stretch;
  min-height:88vh;
  background-color:#f3ede6;   /* NUOVO: sfondo uniforme richiesto */
}
.hero__content{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:48px var(--container-pad);
  gap:22px;
}
.hero__eyebrow{
  font-size:13px;
  font-weight:600;
  letter-spacing:.16em;
  color:var(--c-ink-50);
}
.hero__title{
  margin:0;
  font-family:var(--f-display);
  font-weight:900;
  font-size:clamp(44px, 5.6vw, 86px);
  line-height:.98;
  letter-spacing:-.02em;
}
.hero__title-highlight{
  font-family:var(--f-serif);
  font-style:italic;
  font-weight:400;
  background:var(--c-yellow);
  padding:0 10px;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
.hero__title-dot{
  font-family:var(--f-serif);
  font-style:italic;
}
.hero__lead{
  max-width:440px;
  font-size:17px;
  line-height:1.55;
  color:var(--c-ink-65);
  margin:0;
}
.hero__actions{
  display:flex;
  align-items:center;
  gap:28px;
  margin-top:4px;
  flex-wrap:wrap;
}
.hero__media{
  position:relative;
  background-color:#f3ede6;   /* MODIFICATO: era var(--c-ink) (nero) */
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;   /* MODIFICATO: era center — il video va appoggiato a destra, non fluttuante in mezzo */
  min-height:360px;
}
.hero__video{
  position:absolute;
  top:50%;
  right:0;                    /* MODIFICATO: ancorato al bordo destro (era left:50% + transform centrato) */
  transform:translateY(-50%); /* MODIFICATO: solo centratura verticale, non più orizzontale */
  width:78%;                  /* MODIFICATO: allargato per toccare il bordo, non "volante" in mezzo */
  height:92%;
  object-fit:cover;
  object-position:center center;
}
@media (max-width: 980px){
  .hero__video{ right:50%; transform:translate(50%, -50%); width:88%; } /* su mobile torna centrato: niente bordo destro da ancorare */
}
/* RIMOSSA: .hero__media-overlay — era il gradiente scuro che creava
   l'effetto ombra ai lati. Il div corrispondente non esiste più nel
   markup, quindi questa regola era già morta; ora è tolta anche qui. */
.hero__deco{
  position:absolute;
  pointer-events:none;
}
.hero__deco--ring{ top:-90px; right:-90px; }
.hero__deco--square{ left:40px; top:60px; }
.hero__deco--dot{
  left:60px; bottom:60px;
  width:64px; height:64px;
  background:var(--c-teal);
  border-radius:50%;
}
.hero__badge{
  position:absolute;
  top:28px; right:28px;
  font-family:var(--f-display);
  font-weight:900;
  font-size:13px;
  letter-spacing:.1em;
  writing-mode:vertical-rl;
  color:var(--c-yellow);
}
.hero__scroll-hint{
  position:absolute;
  bottom:24px; left:32px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--c-ink);
  background:rgba(255,212,0,.9);
  padding:6px 12px;
  border-radius:var(--radius-pill);
}
@media (max-width: 980px){
  .hero{ grid-template-columns:1fr; min-height:auto; }
  .hero__content{ padding-top:56px; padding-bottom:40px; order:1; }
  .hero__media{ order:0; min-height:52vh; }
}

/* Box "Realizzazione siti web / Agenzia di grafica" sotto le CTA
   dell'hero — mancava del tutto il CSS, per questo appariva come
   testo semplice senza card, senza spaziature. */
.hero__panel{
  margin-top:8px;
  padding:22px 24px;
  border-radius:var(--radius-md);
  background:#fff;
  border:1px solid var(--c-ink-08);
  display:flex;
  flex-direction:column;
  gap:16px;
  max-width:420px;
}
.hero__panel-title{
  margin:0 0 4px;
  font-family:var(--f-display);
  font-weight:700;
  font-size:15px;
}
.hero__panel-title--yellow{ color:#b8860b; }
.hero__panel-title--teal{ color:#1a9c82; }
.hero__panel-desc{
  margin:0;
  font-size:13.5px;
  color:var(--c-ink-60);
}
.hero__panel-link{
  display:block;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--c-ink-50);
  padding-top:14px;
  border-top:1px solid var(--c-ink-08);
  transition:color var(--ease);
}
.hero__panel-link:hover{ color:var(--c-ink); }

/* ============================================================
   BLOG — home.php (elenco) + single.php (articolo + sidebar)
   Aggiungere come nuova sezione in fondo a style-custom-wp.css.
   Usa le variabili già in :root (--c-bg, --c-ink, --c-yellow,
   --c-teal, --c-ink-50, --c-ink-65, --c-ink-15, --f-display,
   --radius-pill, --container-pad).
   ============================================================ */

/* ---------- HERO BLOG (margini ridotti rispetto al page-hero) ---------- */
.blog-hero {
  position: relative;
  padding: 32px var(--container-pad) 40px;
}
.blog-hero__eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--c-ink-50);
  margin: 20px 0 10px;
}
.blog-hero__title {
  margin: 0 0 12px 0;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1;
  letter-spacing: -.02em;
}
.blog-hero__lead {
  max-width: 600px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--c-ink-65);
  margin: 0;
}

/* Decorazioni colorate, ben visibili (non discrete come altrove) */
.blog-hero__deco {
  position: absolute;
  pointer-events: none;
}
.blog-hero__deco--ring {
  top: -50px;
  right: 40px;
  opacity: .9;
}
.blog-hero__deco--square {
  top: 30px;
  right: 260px;
  opacity: .9;
}
.blog-hero__deco--dot-teal {
  top: 100px;
  right: 180px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c-teal);
}
.blog-hero__deco--dot-yellow {
  top: 20px;
  right: 340px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c-yellow);
}
@media (max-width: 780px) {
  .blog-hero__deco { display: none; } /* troppo affollato su mobile stretto */
}

/* ---------- FILTRO CATEGORIE ---------- */
.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 var(--container-pad) 32px;
}
.blog-filters__item {
  display: inline-block;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--c-ink-15);
  font-size: 14px;
  font-weight: 600;
  color: var(--c-ink);
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.blog-filters__item:hover {
  border-color: var(--c-ink);
}
.blog-filters__item.is-active {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-yellow);
}

/* ---------- GRIGLIA ARTICOLI ---------- */
.blog-grid-section {
  padding: 0 var(--container-pad) 60px;
}
.blog-grid-section__empty {
  color: var(--c-ink-65);
  padding: 40px 0;
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 980px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; }
}

.blog-card {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--c-ink-15);
  transition: transform .2s ease, box-shadow .2s ease;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(20, 20, 20, .1);
}
.blog-card__media {
  display: block;
  aspect-ratio: 16 / 10.4;
  overflow: hidden;
}
.blog-card__media img,
.blog-card__media svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.blog-card__body {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.blog-card__cat {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-ink-50);
  text-decoration: none;
}
.blog-card__cat:hover {
  color: var(--c-ink);
}
.blog-card__title {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.25;
}
.blog-card__title a {
  color: var(--c-ink);
  text-decoration: none;
}
.blog-card__excerpt {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-ink-65);
}
.blog-card__meta {
  margin-top: 4px;
  font-size: 12px;
  color: var(--c-ink-50);
}

/* ---------- PAGINAZIONE ---------- */
.blog-pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 48px;
}
.blog-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--c-ink-15);
  color: var(--c-ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.blog-pagination .page-numbers.current {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-yellow);
}
.blog-pagination .page-numbers.dots {
  border: none;
}

/* ============================================================
   SINGLE POST (single.php)
   ============================================================ */

.single-post__header {
  position: relative;
  padding: 32px var(--container-pad) 0;
  max-width: 1400px;
  margin: 0 auto;
  box-sizing: border-box;
}
.single-post__cat {
  display: inline-block;
  margin: 18px 0 14px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--c-yellow);
  color: var(--c-ink);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .04em;
}
.single-post__title {
  margin: 0 0 16px 0;
  max-width: 900px;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.08;
  letter-spacing: -.01em;
}
.single-post__meta {
  font-size: 14px;
  color: var(--c-ink-50);
}
.single-post__meta-sep {
  margin: 0 8px;
}

/* Decorazioni colorate in apertura — assolute DIRETTE sull'header
   (position:relative), nessun contenitore intermedio: zero rischio
   che occupino spazio nel flusso normale del documento */
.single-post__deco-ring {
  position: absolute;
  top: 4px;
  right: var(--container-pad);
  opacity: .9;
  pointer-events: none;
}
.single-post__deco-square {
  position: absolute;
  top: 60px;
  right: calc(var(--container-pad) + 130px);
  opacity: .9;
  pointer-events: none;
}
.single-post__deco-dot {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.single-post__deco-dot--teal {
  top: 130px;
  right: calc(var(--container-pad) + 40px);
  width: 16px;
  height: 16px;
  background: var(--c-teal);
}
.single-post__deco-dot--yellow {
  top: 30px;
  right: calc(var(--container-pad) + 190px);
  width: 11px;
  height: 11px;
  background: var(--c-yellow);
}
@media (max-width: 780px) {
  .single-post__deco-ring,
  .single-post__deco-square,
  .single-post__deco-dot { display: none; }
}

.single-post__featured-image {
  margin: 32px auto 0;
  max-width: 1400px;
  padding: 0 var(--container-pad);
  box-sizing: border-box;
}
.single-post__featured-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
}

.single-post__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 56px;
  padding: 40px var(--container-pad) 60px;
  max-width: 1400px;
  margin: 0 auto;
  box-sizing: border-box;
}
@media (max-width: 960px) {
  .single-post__layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* Tipografia del corpo articolo (the_content) */
.single-post__content {
  max-width: 720px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--c-ink);
}
.single-post__content h2 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 26px;
  margin: 44px 0 16px;
}
.single-post__content h3 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 21px;
  margin: 36px 0 14px;
}
.single-post__content h4 {
  font-weight: 700;
  font-size: 17px;
  margin: 28px 0 10px;
}
.single-post__content p {
  margin: 0 0 20px;
}
.single-post__content ul,
.single-post__content ol {
  margin: 0 0 20px;
  padding-left: 22px;
}
.single-post__content li {
  margin-bottom: 8px;
}
.single-post__content a {
  color: var(--c-ink);
  text-decoration: underline;
  text-decoration-color: var(--c-yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.single-post__content strong {
  font-weight: 700;
}
.single-post__content blockquote {
  margin: 28px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--c-teal);
  font-style: italic;
  color: var(--c-ink-65);
}
.single-post__content img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  margin: 24px 0;
}

/* ---------- SIDEBAR ---------- */
.single-post__sidebar {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.sidebar-block__title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 16px;
  line-height: 1.3;
  margin: 0 0 16px;
  /* reset esplicito: gli h6 hanno stili di default del browser
     molto diversi (piccoli, grigi) — li sovrascriviamo qui */
  color: var(--c-ink);
}
.sidebar-block__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sidebar-related {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--c-ink);
}
.sidebar-related__media {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
}
.sidebar-related__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sidebar-related__placeholder {
  display: block;
  width: 100%;
  height: 100%;
}
.sidebar-related__title {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
}

.sidebar-block__cats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sidebar-block__cats a {
  display: block;
  padding: 9px 0;
  border-bottom: 1px solid var(--c-ink-15);
  color: var(--c-ink-65);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.sidebar-block__cats a:hover,
.sidebar-block__cats a.is-current {
  color: var(--c-ink);
}

.sidebar-block--cta {
  background: var(--c-ink);
  color: #fff;
  border-radius: 18px;
  padding: 28px 24px;
}
.sidebar-block__cta-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--c-yellow);
  margin: 0 0 8px;
}
.sidebar-block__cta-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.3;
  margin: 0 0 8px;
  color: #fff;
}
.sidebar-block__cta-text {
  font-size: 13.5px;
  color: rgba(255,255,255,.7);
  margin: 0 0 18px;
}
.sidebar-block__cta-btn {
  width: 100%;
  text-align: center;
  justify-content: center;
}

/* ---------- STRISCIA DI CHIUSURA (fondo articolo) ---------- */
.single-post__deco-bottom {
  max-width: 1400px;
  margin: 20px auto 0;
  padding: 0 var(--container-pad) 48px;
  box-sizing: border-box;
}
.single-post__deco-bottom-stripe {
  display: block;
  border-radius: 3px;
  overflow: hidden;
}


/* ============================================
   FOOTER — link legali (Privacy/Cookie/Gestisci cookie)
   Aggiungere in fondo a style-custom-wp.css.
   ============================================ */
.site-footer__legal-links{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}
.site-footer__legal-link{
  font-size:12.5px;
  color:rgba(250,250,247,.45);
  transition:color var(--ease);
}
.site-footer__legal-link:hover,
.site-footer__legal-link:focus-visible{
  color:var(--c-paper);
}

/* ============================================
   CONSENSO PRIVACY NEI FORM (checkbox CF7)
   Aggiungere in fondo a style-custom-wp.css.
   Un solo form CF7 riusato in 3 contesti con sfondi diversi:
   .contact-form (Home, scuro) e .cta-band__form-wrap /
   .lead-popup__form (chiari) — quindi due varianti di colore.
   ============================================ */
.contact-form .wpcf7-acceptance,
.cta-band__form-wrap .wpcf7-acceptance,
.lead-popup__form .wpcf7-acceptance{
  display:block;
  margin:4px 0 16px;
}
.contact-form .wpcf7-list-item,
.cta-band__form-wrap .wpcf7-list-item,
.lead-popup__form .wpcf7-list-item{
  margin:0;
}
.contact-form .wpcf7-list-item label,
.cta-band__form-wrap .wpcf7-list-item label,
.lead-popup__form .wpcf7-list-item label{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:12.5px;
  line-height:1.5;
  cursor:pointer;
}
.contact-form .wpcf7-list-item input[type="checkbox"],
.cta-band__form-wrap .wpcf7-list-item input[type="checkbox"],
.lead-popup__form .wpcf7-list-item input[type="checkbox"]{
  margin-top:2px;
  flex:none;
  accent-color: var(--c-teal);
}

/* Variante su sfondo SCURO — .contact-form (box nero nella Home) */
.contact-form .wpcf7-list-item label{
  color: var(--c-paper-70);
}
.contact-form .wpcf7-list-item label a{
  color: var(--c-teal);
  text-decoration: underline;
}

/* Variante su sfondo CHIARO — .cta-band__form-wrap e .lead-popup__form */
.cta-band__form-wrap .wpcf7-list-item label,
.lead-popup__form .wpcf7-list-item label{
  color: var(--c-ink-65);
}
.cta-band__form-wrap .wpcf7-list-item label a,
.lead-popup__form .wpcf7-list-item label a{
  color: var(--c-ink);
  text-decoration: underline;
  text-decoration-color: var(--c-yellow);
}