/* ============================================================
   KROMA STUDIO — inner.css
   Template interni: page hero, entry-content, case study,
   archivi (work/blog), single post, mini hero.
   Caricato DOPO site.css. Usa SOLO le variabili di tokens.css.
   Non ridefinisce: .btn .wrap .eyebrow .mono .link .reveal
   .section .shead .statement .ph .ar
   ============================================================ */

/* ============================================================
   PAGE HERO — pagine generiche
   padding-block alto compensa la nav fissa (72px)
   ============================================================ */
.page-hero{
  padding-block:clamp(108px,11vw,140px) 0;
}
.page-hero .wrap{display:flex;flex-direction:column}
/* meno vuoto tra hero pagina e prima sezione (pagine interne; la home non usa .page-hero) */
.page-hero + .section{padding-top:clamp(20px,3vw,40px)}
.page-hero__eyebrow{margin-bottom:18px}
.page-hero__title{
  font-family:var(--disp);font-weight:800;
  font-size:clamp(2.4rem,6vw,4.4rem);
  letter-spacing:-.04em;line-height:1;
  color:var(--ink);margin:0;
  text-wrap:balance;
}
.page-hero__lead{
  color:var(--grey);
  font-size:clamp(1.08rem,1.6vw,1.3rem);
  line-height:1.55;
  max-width:60ch;
  margin:22px 0 clamp(40px,6vw,64px);
}

/* ============================================================
   ENTRY CONTENT — tipografia leggibile (post, pagine, case body)
   ============================================================ */
.entry-content{
  max-width:72ch;
  color:var(--ink);
}
.entry-content > *{margin-block:0 1.25em}
.entry-content > *:last-child{margin-bottom:0}

.entry-content h2,
.entry-content h3,
.entry-content h4{
  font-family:var(--disp);font-weight:700;
  letter-spacing:-.025em;line-height:1.12;
  color:var(--ink);
  margin-top:1.9em;margin-bottom:.5em;
  text-wrap:balance;
}
.entry-content h2{font-size:clamp(1.7rem,3.2vw,2.4rem)}
.entry-content h3{font-size:clamp(1.4rem,2.2vw,1.8rem)}
.entry-content h4{font-size:1.25rem;font-weight:600}
.entry-content h2:first-child,
.entry-content h3:first-child,
.entry-content h4:first-child{margin-top:0}

.entry-content p{
  font-size:1.0625rem;
  line-height:1.7;
  color:var(--grey-700);
}
.entry-content a{
  color:var(--ink);
  border-bottom:1px solid var(--rule-strong);
  transition:color var(--dur) var(--soft),border-color var(--dur) var(--soft);
}
.entry-content a:hover{
  color:var(--kroma);
  border-bottom-color:var(--kroma);
}

.entry-content strong{font-weight:700;color:var(--ink)}
.entry-content em{color:var(--kroma);font-style:normal}

.entry-content ul,
.entry-content ol{padding-left:1.3em}
.entry-content li{
  font-size:1.0625rem;
  line-height:1.7;
  color:var(--grey-700);
  margin-bottom:.5em;
}
.entry-content li::marker{color:var(--kroma)}
.entry-content li > ul,
.entry-content li > ol{margin-top:.5em;margin-bottom:0}

.entry-content blockquote{
  border-left:3px solid var(--kroma);
  padding-left:clamp(18px,3vw,28px);
  margin-block:1.6em;
  font-family:var(--disp);font-weight:600;
  font-size:clamp(1.2rem,2.2vw,1.55rem);
  line-height:1.3;letter-spacing:-.02em;
  color:var(--ink);
}
.entry-content blockquote p{
  font-family:inherit;font-size:inherit;
  color:inherit;line-height:inherit;
}
.entry-content blockquote cite{
  display:block;margin-top:.7em;
  font-family:var(--mono);font-style:normal;
  font-size:.72rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--grey);
}

.entry-content img,
.entry-content figure{
  border-radius:var(--r-md);
  margin-block:1.6em;
}
.entry-content figure{overflow:hidden}
.entry-content figure img{margin:0;border-radius:0;display:block}
.entry-content figcaption{
  font-family:var(--mono);
  font-size:.7rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--grey);
  margin-top:10px;
}
/* immagini/figure larghe possono uscire a piena larghezza colonna */
.entry-content .alignwide,
.entry-content figure.alignwide,
.entry-content img.full,
.entry-content figure.full{
  width:100%;max-width:none;
}

.entry-content hr{
  border:none;
  border-top:1px solid var(--rule);
  margin-block:clamp(32px,5vw,52px);
}

.entry-content table{
  width:100%;
  border-collapse:collapse;
  font-size:.95rem;
  margin-block:1.6em;
}
.entry-content th,
.entry-content td{
  text-align:left;
  padding:12px 14px;
  border-bottom:1px solid var(--rule);
}
.entry-content th{
  font-family:var(--mono);
  font-size:.7rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--grey);font-weight:700;
}
.entry-content td{color:var(--grey-700)}

.entry-content code{
  font-family:var(--mono);
  font-size:.88em;
  background:var(--off);
  padding:.15em .4em;
  border-radius:var(--r-sm);
}
.entry-content pre{
  font-family:var(--mono);
  background:var(--ink);
  color:var(--off);
  padding:clamp(18px,3vw,28px);
  border-radius:var(--r-md);
  overflow-x:auto;
  font-size:.85rem;line-height:1.6;
}
.entry-content pre code{background:none;padding:0;font-size:inherit}

/* ============================================================
   CASE STUDY — single-portfolio-item
   ============================================================ */
.cs-hero{
  /* clearance del nav fisso (~106px) + respiro minimo tra header ed elementi pagina. */
  padding-block:clamp(112px,7vw,120px) clamp(20px,3vw,36px);
  background:var(--kroma);
  color:#fff;
}
.cs-hero .wrap{max-width:1180px}
.cs-hero__eyebrow{color:#fff}
.cs-hero__code{
  font-family:var(--mono);
  text-transform:uppercase;letter-spacing:.1em;
  font-size:.74rem;color:#fff;
  display:block;margin-bottom:18px;
}
.cs-hero__title{
  font-family:var(--disp);font-weight:800;
  font-size:clamp(3.2rem,8vw,7.2rem);
  letter-spacing:-.04em;line-height:1;
  color:#fff;margin:0;
  text-wrap:balance;
}
.cs-hero__sub{
  color:rgba(255,255,255,.88);
  font-size:clamp(1rem,1.5vw,1.2rem);
  margin:18px 0 0;
}

/* cover 16/8 — featured o placeholder */
.cs-cover{
  aspect-ratio:16/9;
  border-radius:18px;
  margin-top:clamp(24px,4vw,56px);
  margin-bottom:clamp(34px,5vw,62px);
  box-shadow:0 28px 70px rgba(20,20,20,.13);
}

/* layout meta + body */
.cs-layout{
  display:grid;
  grid-template-columns:1fr 2.4fr;
  gap:clamp(28px,5vw,64px);
  padding-bottom:clamp(48px,7vw,96px);
}
.cs-meta{
  display:flex;flex-direction:column;
  gap:clamp(20px,2.4vw,30px);
  align-self:start;
  position:sticky;top:96px;
}
.cs-meta__row{display:flex;flex-direction:column;gap:6px}
.cs-meta__row .label,
.cs-meta__label{
  font-family:var(--mono);
  font-size:.66rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--grey);
}
.cs-meta__row .value,
.cs-meta__value{
  font-size:1rem;line-height:1.45;
  color:var(--ink);
}
.cs-body{min-width:0;max-width:820px;margin-inline:auto}
.cs-body.entry-content{max-width:820px}

/* prev / next */
.cs-nav{
  display:flex;justify-content:space-between;
  align-items:center;gap:20px;flex-wrap:wrap;
  padding-block:clamp(20px,3vw,32px) clamp(36px,5vw,64px);
}
.cs-nav a{
  font-family:var(--mono);
  font-size:.72rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--grey);
  transition:color var(--dur) var(--soft);
}
.cs-nav a:hover{color:var(--kroma)}

@media(max-width:860px){
  .cs-layout{grid-template-columns:1fr;gap:clamp(28px,5vw,40px)}
  .cs-meta{position:static;top:auto}
}

/* ===== Case study (single-portfolio-item) — resa Home-level, dati reali ===== */
.cs-cover img{width:100%;height:100%;object-fit:cover;display:block}
.cs-hero__eyebrow{display:inline-block;margin-bottom:6px}
/* chips servizi/aree dalle categorie reali del progetto */
.cs-tags{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.cs-tag{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink);background:var(--off);border:1px solid var(--rule-strong);border-radius:999px;padding:7px 14px}
.cs-hero .cs-tag{color:#fff;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.34)}
/* strip dati progetto: mostrata SOLO se i meta sono compilati (niente box vuoto) */
.cs-facts{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,52px);max-width:820px;margin:0 auto clamp(28px,4vw,40px);padding-bottom:clamp(16px,2.4vw,24px)}
.cs-fact{display:flex;flex-direction:column;gap:5px}
.cs-fact__label{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--grey)}
.cs-fact__value{font-size:1.05rem;color:var(--ink);font-weight:600}
/* CTA finale (riusa .cta della Home per coerenza) + freccia Kroma decorativa */
.cs-cta{position:relative;overflow:hidden}
.cs-cta .wrap{position:relative;z-index:1}
.cs-cta__lead{color:rgba(255,255,255,.8);max-width:46ch;margin:0 auto clamp(24px,3vw,32px);font-size:clamp(1.02rem,1.4vw,1.18rem);line-height:1.55}
.cs-cta__alt{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.7);display:inline-flex;align-items:center;gap:8px;transition:color .3s var(--soft),gap .3s var(--soft)}
.cs-cta__alt:hover{color:#fff;gap:12px}
.cs-cta__arrow{position:absolute;right:-2%;top:50%;transform:translateY(-50%);width:clamp(170px,22vw,340px);height:auto;opacity:.42;pointer-events:none;z-index:0}
@media(max-width:680px){.cs-cta__arrow{display:none}}

/* gruppi di immagini mockup (social/telefono): CAROUSEL una-alla-volta, slide tutte della
   stessa dimensione, auto-scroll (JS, pausa su hover), zoom al passaggio del cursore.
   Niente scrollbar/linee. Raggruppate lato server; le landscape restano full-width. */
.cs-gallery{
  display:flex;gap:0;align-items:stretch;
  margin-block:clamp(20px,2.6vw,30px);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;border-radius:14px;
  scrollbar-width:none;
}
.cs-gallery::-webkit-scrollbar{display:none}
.cs-gallery ul{display:contents;margin:0;padding:0;list-style:none}
.cs-gallery > figure,.cs-gallery > p,.cs-gallery li{
  flex:0 0 100%;margin:0;padding:0;list-style:none;
  scroll-snap-align:center;
  height:clamp(440px,66vh,680px);
  display:flex;align-items:center;justify-content:center;
  background:transparent;overflow:hidden;
}
.cs-gallery a,.cs-gallery a:hover{display:flex;align-items:center;justify-content:center;width:100%;height:100%;line-height:0;border:0}
.cs-gallery img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;transition:transform .55s var(--soft)}
.cs-gallery > figure:hover img,.cs-gallery > p:hover img,.cs-gallery li:hover img{transform:scale(1.05)}
@media(max-width:560px){.cs-gallery > figure,.cs-gallery > p,.cs-gallery li{height:clamp(380px,64vh,540px)}}
/* puntini di navigazione del carousel */
.cs-dots{display:flex;justify-content:center;gap:9px;margin-top:clamp(10px,1.4vw,16px)}
.cs-dot{width:9px;height:9px;border-radius:50%;border:0;padding:0;cursor:pointer;background:var(--rule-strong);transition:background .25s var(--soft),transform .25s var(--soft)}
.cs-dot:hover{background:var(--grey)}
.cs-dot.is-active{background:var(--kroma);transform:scale(1.25)}

/* ============================================================
   ARCHIVE — archive-portfolio-item (.work-grid + a.wcard)
   ============================================================ */
.work-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));
  gap:clamp(20px,3vw,34px);
  padding-block:clamp(40px,6vw,72px);
}
.wcard{display:flex;flex-direction:column;min-width:0}
.wcard__media{
  aspect-ratio:4/3;
  border-radius:var(--r-md);
}
.wcard__media{position:relative;overflow:hidden}
.wcard__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-slow) var(--expo)}
/* CTA "Guarda il progetto" SEMPRE percepibile (pill in basso) + rinforzo all'hover.
   .wcard non e' presente in Home: nessun impatto sulla Home. */
.wcard__cta{
  position:absolute;left:12px;bottom:12px;z-index:2;
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 13px;border-radius:999px;
  font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink);background:rgba(255,255,255,.92);backdrop-filter:saturate(1.1) blur(2px);
  box-shadow:0 4px 14px rgba(20,20,20,.14);
  transition:background var(--dur) var(--soft),color var(--dur) var(--soft),transform var(--dur) var(--soft);
}
.wcard__cta .ar{transition:transform var(--dur) var(--soft)}
.wcard:hover .wcard__cta,.wcard:focus-visible .wcard__cta{background:var(--kroma);color:#fff}
.wcard:hover .wcard__cta .ar{transform:translateX(3px)}
.wcard__bar{
  display:flex;justify-content:space-between;
  align-items:baseline;gap:14px;
  margin-top:14px;
}
.wcard__name{
  font-family:var(--disp);font-weight:700;
  font-size:1.35rem;letter-spacing:-.02em;
  line-height:1.1;color:var(--ink);
  transition:color var(--dur) var(--soft);
}
.wcard__code{
  font-family:var(--mono);
  font-size:.7rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--kroma);
  white-space:nowrap;
}
.wcard__meta{
  font-family:var(--mono);
  font-size:.68rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--grey3);
  margin-top:6px;
}
.wcard:hover .wcard__media img{transform:scale(.987)}
.wcard:hover .wcard__name{color:var(--kroma)}
/* chip categorie reali (servizi/aree del progetto) */
.wcard__cats{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:11px 0 0;padding:0}
.wcard__chip{font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.04em;color:var(--grey);background:var(--off);border:1px solid var(--rule);border-radius:999px;padding:5px 10px;line-height:1}
.wcard.is-hidden{display:none}

/* ---- barra filtri portfolio (no plugin: solo data-attr + JS) ---- */
.work-portfolio{padding-block:clamp(40px,6vw,72px)}
.work-portfolio .work-grid{padding-block:clamp(24px,3vw,36px) 0}
.work-filter{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.work-filter__btn{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink);background:transparent;border:1px solid var(--rule-strong);border-radius:999px;
  padding:9px 16px;transition:background var(--dur) var(--soft),color var(--dur) var(--soft),border-color var(--dur) var(--soft);
}
.work-filter__btn:hover,.work-filter__btn:focus-visible{border-color:var(--kroma);color:var(--kroma);background:rgba(228,100,14,.08)}
.work-filter__btn.is-active,.work-filter__btn.is-active:hover,.work-filter__btn.is-active:focus-visible{background:var(--kroma);border-color:var(--kroma);color:#fff}
.work-filter__n{font-size:.86em;opacity:.7}
.work-filter__btn.is-active .work-filter__n{opacity:.85}

/* ---- frecce laterali navigazione case study (solo desktop) ---- */
.cs-side{
  position:fixed;top:50%;transform:translateY(-50%);z-index:40;
  display:none;align-items:center;gap:12px;
}
.cs-side--prev{left:clamp(10px,2.2vw,28px)}
.cs-side--next{right:clamp(10px,2.2vw,28px);flex-direction:row-reverse}
.cs-side__arrow{
  flex:0 0 auto;width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;font-size:1.7rem;line-height:1;
  color:var(--ink);background:#fff;border:1px solid var(--rule-strong);
  box-shadow:0 8px 22px rgba(20,20,20,.12);
  transition:background var(--dur) var(--soft),color var(--dur) var(--soft),border-color var(--dur) var(--soft);
}
.cs-side:hover .cs-side__arrow{background:var(--kroma);color:#fff;border-color:var(--kroma)}
.cs-side__label{
  max-width:0;overflow:hidden;white-space:nowrap;opacity:0;
  font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink);
  transition:max-width .4s var(--soft),opacity .3s var(--soft);
}
.cs-side:hover .cs-side__label,.cs-side:focus-visible .cs-side__label{max-width:190px;opacity:1}
@media(min-width:1180px){.cs-side{display:flex}}

/* ============================================================
   BLOG INDEX — index.php / archivi post (.post-list + a.pcard)
   ============================================================ */
.post-list{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3vw,34px);
  padding-block:clamp(40px,6vw,72px);
}
@media(max-width:980px){.post-list{grid-template-columns:repeat(2,1fr)}}
.pcard{display:flex;flex-direction:column}
.pcard__media{
  aspect-ratio:16/10;
  border-radius:var(--r-md);
  margin-bottom:16px;
}
.pcard__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-slow) var(--expo)}
.pcard__date{
  font-family:var(--mono);
  font-size:.68rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--grey3);
}
.pcard__title{
  font-family:var(--disp);font-weight:700;
  font-size:1.3rem;letter-spacing:-.02em;
  line-height:1.18;color:var(--ink);
  margin:8px 0 0;
  transition:color var(--dur) var(--soft);
}
.pcard__ex{
  color:var(--grey);
  font-size:.95rem;line-height:1.55;
  margin:10px 0 0;
}
.pcard:hover .pcard__media img{transform:scale(.987)}
.pcard:hover .pcard__title{color:var(--kroma)}

/* ---- BLOG: chips filtro per argomento (categorie reali) + spaziatura compatta ---- */
.blog-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:clamp(20px,3vw,30px)}
.blog-filter{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.blog-search{display:flex;align-items:center;gap:0;border:1px solid var(--rule-strong);border-radius:999px;overflow:hidden;background:#fff;flex:0 1 280px;min-width:200px;transition:border-color var(--dur) var(--soft)}
.blog-search:focus-within{border-color:var(--kroma)}
.blog-search input{flex:1;border:0;outline:0;background:transparent;padding:9px 6px 9px 16px;font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;color:var(--ink);min-width:0}
.blog-search input::placeholder{color:var(--grey3);text-transform:none}
.blog-search button{flex:0 0 auto;cursor:pointer;border:0;background:transparent;color:var(--kroma);padding:8px 14px;font-size:1rem;line-height:1;transition:color var(--dur) var(--soft)}
.blog-search button:hover,.blog-search button:focus-visible{color:var(--kroma2);background:transparent}
@media(max-width:560px){.blog-toolbar{flex-direction:column;align-items:stretch}.blog-search{flex-basis:auto}}
.blog-filter__btn{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink);background:transparent;border:1px solid var(--rule-strong);border-radius:999px;
  padding:9px 16px;transition:background var(--dur) var(--soft),color var(--dur) var(--soft),border-color var(--dur) var(--soft);
}
.blog-filter__btn:hover,.blog-filter__btn:focus-visible{border-color:var(--kroma);color:var(--kroma);background:rgba(228,100,14,.08)}
.blog-filter__btn.is-active,.blog-filter__btn.is-active:hover,.blog-filter__btn.is-active:focus-visible{background:var(--kroma);border-color:var(--kroma);color:#fff}
.blog-filter__n{font-size:.86em;opacity:.7}
.blog-filter__btn.is-active .blog-filter__n{opacity:.85}
/* spaziatura blog: titolo→toolbar compatto; più respiro tra ricerca/chips e la sezione sotto.
   margin-top = stacco "bianco" prima della sezione card; padding-top = aria interna alla sezione. */
.blog-list{margin-top:clamp(28px,5vw,60px);padding-top:clamp(22px,3.5vw,40px)}
.blog-list .post-list{padding-block:0}
/* paginazione: staccata dalle card + accenti arancioni */
.blog-list .pagination,.blog-list .nav-links{margin-top:clamp(40px,6vw,72px)}
.blog-list .nav-links{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}
.blog-list .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--rule-strong);font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;color:var(--ink);text-decoration:none;transition:background .25s var(--soft),color .25s var(--soft),border-color .25s var(--soft)}
.blog-list a.page-numbers:hover{border-color:var(--kroma);color:var(--kroma)}
.blog-list .page-numbers.current{background:var(--kroma);border-color:var(--kroma);color:#fff}
.blog-list .page-numbers.dots{border:0;min-width:auto;padding:0 4px}
.blog-list .page-numbers.next,.blog-list .page-numbers.prev{text-transform:uppercase}

/* ============================================================
   SINGLE POST — single.php
   ============================================================ */
/* ===== Articolo singolo: layout a SEZIONI con sfondi alternati ===== */
.single{padding:0}
/* hero off-white (clearance nav fisso ~106px) */
.single-hero{background:var(--off);padding-block:clamp(104px,9vw,132px) clamp(18px,2.6vw,30px)}
/* hero usa il .wrap standard (1280) come il corpo → titolo allineato al testo sotto */
.single-hero .wrap{max-width:920px}
.single__eyebrow{display:inline-block;margin-bottom:14px;color:var(--kroma)}
a.single__eyebrow{transition:color var(--dur) var(--soft)}
a.single__eyebrow:hover{color:var(--kroma2)}
.single__title{font-family:var(--disp);font-weight:800;font-size:clamp(2.4rem,6.4vw,5.2rem);letter-spacing:-.04em;line-height:.98;color:var(--ink);margin:0;text-wrap:balance}
.single__meta{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:16px}
.single__date{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--grey)}
/* cover GRANDE a cavallo tra hero (off) e corpo (bianco) */
/* sezione immagine: TUTTO arancione; immagine ~1000px allineata a SINISTRA come il testo
   (il .wrap resta quello standard 1280 → stesso bordo sinistro del corpo) */
.single-cover-wrap{background:var(--kroma);padding-block:clamp(18px,2.6vw,38px)}
.single__cover{aspect-ratio:16/9;border-radius:16px;overflow:hidden;margin:0 auto;max-width:1120px;background:transparent;box-shadow:0 22px 54px rgba(20,20,20,.16)}
.single__cover img{width:100%;height:100%;object-fit:cover;display:block}
/* corpo: bianco. 2 colonne — articolo a sinistra, "Altri articoli" a destra */
.single-body-sec{background:var(--white);padding-block:clamp(34px,5vw,58px)}
.single__wrap{max-width:760px}
/* layout: colonna di lettura UNICA e centrata + sommario (TOC) sticky nel margine sinistro */
.single__shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,680px) minmax(0,1fr);gap:clamp(24px,3vw,44px);align-items:start}
.single__col{grid-column:2;min-width:0}
.single__toc{display:none;grid-column:1;justify-self:end;position:sticky;top:clamp(96px,10vw,124px);width:min(232px,100%);max-height:calc(100vh - 150px);overflow-y:auto;padding-right:4px}
.single__toc.is-ready{display:block}
.single__toc-h{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.09em;color:var(--grey);margin:0 0 12px}
.single__toc-nav{display:flex;flex-direction:column;border-left:2px solid var(--rule)}
.single__toc-nav a{font-size:.84rem;line-height:1.32;color:var(--grey);padding:6px 0 6px 14px;margin-left:-2px;border-left:2px solid transparent;transition:color .2s var(--soft),border-color .2s var(--soft)}
.single__toc-nav a:hover{color:var(--ink)}
.single__toc-nav a.is-current{color:var(--kroma);border-left-color:var(--kroma);font-weight:600}
.single__toc-nav a.lvl-3{padding-left:26px;font-size:.78rem}
@media(max-width:1180px){.single__toc.is-ready{display:none}.single__shell{grid-template-columns:minmax(0,680px);justify-content:center}.single__col{grid-column:1}}
/* riga tag (in fondo all'articolo, in linea) */
.single__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(26px,3.5vw,42px);padding-top:clamp(18px,2.5vw,26px);border-top:1px solid var(--rule)}
.single__tags-h{flex:0 0 100%;font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--grey);margin:0 0 2px}
/* chips colorate: arancio come accento principale, nero solo testo */
.single__tags .single__tag{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);background:var(--off);border:1px solid var(--rule);border-radius:999px;padding:6px 12px;text-decoration:none;transition:border-color .25s var(--soft),color .25s var(--soft)}
.single__tags .single__tag:hover{border-color:var(--kroma);color:var(--kroma)}
/* condividi sui social */
.single__share{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:clamp(18px,2.4vw,28px)}
.single__share-h{flex:0 0 100%;font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--grey);margin-right:0;margin-bottom:2px}
.single__share .single__share-btn{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.04em;color:#fff;background:var(--kroma);border-radius:999px;padding:7px 14px;text-decoration:none;transition:transform .2s var(--soft),filter .2s var(--soft)}
.single__share .single__share-btn:nth-of-type(1){background:#1877f2} /* Facebook */
.single__share .single__share-btn:nth-of-type(2){background:var(--kroma-deep)} /* X */
.single__share .single__share-btn:nth-of-type(3){background:#0a66c2} /* LinkedIn */
.single__share .single__share-btn:nth-of-type(4){background:#25d366} /* WhatsApp */
.single__share .single__share-btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.single .entry-content{margin-top:0}
/* corpo: lettura comoda, spacing generoso, gerarchia chiara */
.single__body{font-size:clamp(1.06rem,1.2vw,1.17rem);line-height:1.82}
.single__body p{margin:0 0 clamp(20px,2.4vw,30px)}
.single__body img{border-radius:10px}
.single__body figure{margin-block:clamp(26px,3.4vw,40px)}
.single__body figcaption{font-family:var(--mono);font-size:.7rem;color:var(--grey);text-transform:uppercase;letter-spacing:.04em;margin-top:8px}
.single__body h2{font-size:clamp(1.5rem,2.7vw,2.05rem);line-height:1.16;letter-spacing:-.02em;margin:clamp(42px,5.2vw,66px) 0 14px;scroll-margin-top:100px}
.single__body h3{font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.22;letter-spacing:-.01em;margin:clamp(32px,4vw,46px) 0 10px;scroll-margin-top:100px}
.single__body h4{font-size:clamp(1.05rem,1.5vw,1.2rem);margin:clamp(24px,3vw,34px) 0 8px}
.single__body ul,.single__body ol{margin:0 0 clamp(20px,2.4vw,30px);padding-left:1.3em}
.single__body li{margin:0 0 8px;line-height:1.7}
.single__body blockquote{margin:clamp(26px,3.4vw,40px) 0;padding:6px 0 6px 22px;border-left:3px solid var(--kroma);font-size:1.1em;line-height:1.5}
.single__body a{color:var(--kroma);text-decoration:underline;text-underline-offset:2px}
.single__body h2 a,.single__body h3 a{text-decoration:none}
/* CTA: banda scura del design system (.section.cta[data-theme=dark]) */
.single-cta__lead{color:rgba(255,255,255,.82);font-size:1.02rem;line-height:1.55;margin:12px 0 0;max-width:52ch}
/* nav su banda off-white */
.single-nav-sec{background:var(--off);padding-block:clamp(28px,4vw,46px)}
/* Altri articoli (in fondo): 3 card cover come il blog */
.single-related{background:var(--white);padding-block:clamp(42px,5.5vw,76px)}
.single-related .shead{margin-bottom:clamp(18px,2.5vw,30px)}
.single-related__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,32px)}
/* allinea il link "Leggi →" (righetta arancione) alla stessa altezza in tutte le card */
.single-related__grid .jcard__body .link{margin-top:auto}
@media(max-width:820px){.single-related__grid{grid-template-columns:1fr}}
.single__nav{display:flex;flex-direction:column;gap:clamp(16px,2.4vw,24px)}
.single__back{align-self:flex-start;font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--grey);transition:color var(--dur) var(--soft)}
.single__back:hover{color:var(--kroma)}
.single__nav-rel{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,22px)}
.single__rel{display:flex;flex-direction:column;gap:6px;padding:15px 18px;border:1px solid var(--rule);border-radius:12px;background:var(--white);transition:border-color var(--dur) var(--soft)}
.single__rel:hover{border-color:var(--kroma)}
.single__rel--next{text-align:right;align-items:flex-end}
.single__rel-k{font-size:.64rem;text-transform:uppercase;letter-spacing:.06em;color:var(--kroma)}
.single__rel-t{font-family:var(--disp);font-weight:600;font-size:.98rem;line-height:1.2;color:var(--ink)}
@media(max-width:560px){
  .single__nav-rel{grid-template-columns:1fr}
  .single__rel--next{text-align:left;align-items:flex-start}
}

/* ============================================================
   MINI HERO — 404, ricerca vuota
   ============================================================ */
.minihero{
  text-align:center;
  padding-block:clamp(140px,20vw,220px);
}
.minihero .wrap{
  display:flex;flex-direction:column;
  align-items:center;
}
.minihero__title,
.minihero h1{
  font-family:var(--disp);font-weight:800;
  font-size:clamp(2.6rem,8vw,5.5rem);
  letter-spacing:-.04em;line-height:1;
  color:var(--ink);margin:0;
  text-wrap:balance;
}
.minihero__lead,
.minihero p{
  color:var(--grey);
  font-size:clamp(1.08rem,1.6vw,1.3rem);
  line-height:1.55;
  max-width:50ch;
  margin:22px auto clamp(28px,4vw,40px);
}

/* ============================================================
   RESPONSIVE — breakpoint 860 / 680 / 520
   ============================================================ */
@media(max-width:680px){
  .work-grid{grid-template-columns:minmax(0,1fr)}
  .work-portfolio .work-grid{width:100%;max-width:100%;overflow:hidden}
  .work-portfolio .wcard{min-width:0;max-width:100%}
  .post-list{grid-template-columns:1fr}
  .cs-cover{aspect-ratio:16/10}
  .single .ph{aspect-ratio:16/10}
  body.single-post{overflow-x:hidden}
  body.single-post .single-hero .wrap,
  body.single-post .single-cover-wrap .wrap,
  body.single-post .single-body-sec .wrap,
  body.single-post .single-related .wrap,
  body.single-post .single-nav-sec .wrap{width:100%;max-width:100%;box-sizing:border-box}
  .single__shell{display:block;width:100%;max-width:100%;overflow:hidden}
  .single__col{width:100%;max-width:100%}
  .single__title{font-size:clamp(1.86rem,8.6vw,2.18rem);line-height:1.06;letter-spacing:-.02em;text-wrap:auto;overflow-wrap:break-word;hyphens:auto}
  .single__body{font-size:1.02rem;line-height:1.68;max-width:100%;overflow-wrap:break-word}
  .single__body h1{font-size:clamp(1.35rem,6.5vw,1.75rem);line-height:1.12;letter-spacing:-.015em;overflow-wrap:break-word;hyphens:auto}
}
@media(max-width:520px){
  .page-hero{padding-block:clamp(104px,26vw,140px) 0}
  .cs-hero{padding-block:clamp(92px,22vw,108px) 12px}
  .single{padding:0}
  .wcard__bar{flex-wrap:wrap;gap:4px}
}


/* ============================================================
   CHI SIAMO / pagine "persone" (template Canvas)
   ============================================================ */
.people{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px)}
.person{display:flex;flex-direction:column;gap:14px}
.person__media{aspect-ratio:4/5;border-radius:6px}
.person__role{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;color:var(--kroma)}
.person__name{font-family:var(--disp);font-weight:800;font-size:clamp(1.4rem,2.6vw,2rem);letter-spacing:-.02em;margin:0}
.person__sub{font-family:var(--mono);font-size:.7rem;color:var(--grey);text-transform:uppercase;letter-spacing:.05em}
.person__bio{color:var(--grey);font-size:1rem;line-height:1.62;margin:0;max-width:48ch}
/* "Approfondisci" — accordion nativo coerente con la FAQ (no-JS-safe) */
.person__more{margin-top:2px}
.person__more>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--kroma);transition:gap .3s var(--soft)}
.person__more>summary::-webkit-details-marker{display:none}
.person__more>summary::after{content:"+";font-family:var(--disp);font-weight:400;font-size:1.2rem;line-height:1;color:var(--kroma)}
.person__more[open]>summary::after{content:"\2013"}
.person__more>summary:hover{gap:12px}
.person__more>summary:focus-visible{outline:3px solid var(--kroma);outline-offset:3px;border-radius:4px}
.person__more p{color:var(--grey);font-size:.97rem;line-height:1.62;margin:12px 0 0;max-width:52ch}
@media(max-width:760px){.people{grid-template-columns:1fr;gap:40px}}
.vals{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.vals span{font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.05em;color:var(--grey);border:1px solid var(--rule-strong);border-radius:3px;padding:5px 10px}


/* ============================================================
   FEAT-LIST — servizi/step con descrizione (numerati)
   ============================================================ */
.feat-list{border-top:1px solid var(--rule)}
.feat-item{display:grid;grid-template-columns:1fr 1.3fr;gap:10px 32px;align-items:baseline;padding:clamp(22px,3vw,38px) 0;border-bottom:1px solid var(--rule)}
.feat-item__n{display:none} /* numeri per-item rimossi: resta solo la numerazione di sezione */
.feat-item__name{font-family:var(--disp);font-weight:700;font-size:clamp(1.3rem,2.4vw,1.9rem);letter-spacing:-.02em;margin:0}
.feat-item__desc{color:var(--grey);font-size:1.02rem;line-height:1.6;margin:0}
@media(max-width:560px){.feat-item{grid-template-columns:1fr;gap:8px}}

/* ============================================================
   PAGINE SINGOLO SERVIZIO (figlie di /servizi/, body.parent-pageid-14)
   ============================================================ */
/* hero: bottone più in alto (meno spazio sopra) + più spazio sotto, prima della sezione */
body.parent-pageid-14 .page-hero{padding-bottom:clamp(48px,7vw,84px)}
body.parent-pageid-14 .page-hero__lead{margin-bottom:clamp(16px,2.4vw,26px)}
body.parent-pageid-14 .page-hero .hero__cta{margin-top:0}
/* sezione "Cosa include" (feat-list) su fondo ARANCIONE, testo bianco — riempie lo spazio */
body.parent-pageid-14 .section:has(.feat-list){background:var(--kroma)}
body.parent-pageid-14 .section:has(.feat-list) .shead h2,
body.parent-pageid-14 .section:has(.feat-list) .shead .num,
body.parent-pageid-14 .section:has(.feat-list) .feat-item__name{color:#fff}
body.parent-pageid-14 .section:has(.feat-list) .feat-item__n{color:rgba(255,255,255,.7)}
body.parent-pageid-14 .section:has(.feat-list) .feat-item__desc{color:rgba(255,255,255,.88)}
body.parent-pageid-14 .section:has(.feat-list) .feat-list{border-top-color:rgba(255,255,255,.32)}
body.parent-pageid-14 .section:has(.feat-list) .feat-item{border-bottom-color:rgba(255,255,255,.32)}
/* sezioni testuali (Il problema / Come lavoriamo / Per chi è): più compatte; il contenuto
   resta allineato a sinistra (il padding simmetrico lo centra verticalmente). */
body.parent-pageid-14 .section:has(.sec-lead):not(:has(.feat-list)){padding-block:clamp(40px,5.5vw,72px)}

/* ============================================================
   QCARD — card citazione (testimonianze con testo reale)
   ============================================================ */
.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,32px)}
.qcard{border:1px solid var(--rule);border-radius:8px;padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;gap:18px;background:var(--white);transition:border-color .3s var(--soft)}
.qcard:hover{border-color:var(--rule-strong)}
.qcard__text{font-family:var(--disp);font-weight:600;font-size:clamp(1.02rem,1.5vw,1.22rem);line-height:1.42;letter-spacing:-.01em;margin:0;color:var(--ink)}
.qcard__by{margin-top:auto;display:flex;flex-direction:column;gap:3px}
.qcard__name{font-family:var(--disp);font-weight:700;font-size:1rem;color:var(--ink)}
.qcard__role{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.05em;color:var(--kroma)}
@media(max-width:760px){.qgrid{grid-template-columns:1fr}}

/* ---- pagine interne testimonianze (.tsec): ritmo coerente con Home ---- */
.tsec .eyebrow{display:inline-block;margin-bottom:12px}
/* griglia citazioni: rettangolo allineato (12 card = righe piene), altezze uniformi per riga */
.tsec .qgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,32px);align-items:stretch}
.tsec .qcard{margin:0}
.tsec .qcard:hover{border-color:var(--kroma);box-shadow:0 14px 30px rgba(228,93,14,.12)}
@media(max-width:760px){.tsec .qgrid{grid-template-columns:1fr}}
/* play leggermente piu in basso (non al centro): sulle card brandizzate il nome resta leggibile */
.vgrid .vcard__ico{transform:translateY(150%)}
.vgrid .vcard__btn:hover .vcard__ico{transform:translateY(150%) scale(1.08)}
.vgrid .vcard--noposter .vcard__media::before{transform:translateY(-12%)}
/* freccia Kroma grande, colore pieno, attaccata al bordo destro del desktop (sezione video) */
.section.tsec--plain{position:relative;overflow-x:clip}
.tsec--plain::after{content:"";position:absolute;right:0;bottom:clamp(300px,34vw,520px);width:clamp(280px,32vw,500px);aspect-ratio:440/300;background:url(../img/freccia-kroma.png) right center/contain no-repeat;pointer-events:none;z-index:2}
@media(max-width:900px){.tsec--plain::after{display:none}}
/* hero Testimonianze: piu' aria pretitolo->titolo, meno spazio sottotitolo->video */
/* spaziatura hero UNIFORME su tutte le pagine interne (page-hero NON e' in Home) */
.page-hero .eyebrow{display:inline-block;margin-bottom:20px}
.tpagehero .page-hero__lead{margin-bottom:clamp(12px,2vw,22px)}
.section.tsec--plain{padding-top:clamp(10px,2vw,24px)}
/* sezione "Cosa scrivono di noi" arancione (come "Parlano di noi" della Home) */
.section.tsec--accent{background:var(--kroma)!important}
.tsec--accent .eyebrow,.tsec--accent .shead h2,.tsec--accent .sec-lead{color:#fff}
.tsec--accent .eyebrow{opacity:.9}
.tsec--accent .qcard{background:#fff;border-color:transparent}
.tsec--accent .qcard:hover{border-color:transparent;box-shadow:0 18px 36px rgba(0,0,0,.20)}
/* alternanza sfondi intenzionale: video su bianco, testo su off (rispetta nth-of-type Home) */
.section.tsec--plain{background:#fff!important}
.section.tsec--off{background:var(--off)!important}
/* link al caso studio collegato (cliente -> testimonianza -> caso studio -> contatto) */
.tsec .vcard__cs,.tsec .qcard__cs{display:inline-flex;align-items:center;gap:7px;margin-top:10px;font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;color:var(--kroma);transition:gap .3s var(--soft),color .3s var(--soft)}
.tsec .qcard__cs{margin-top:14px}
.tsec .vcard__cs:hover,.tsec .qcard__cs:hover{color:var(--kroma2);gap:11px}

/* ---- video-testimonianze (poster + click-to-play, lazy) ---- */
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,26px)}
.vcard{margin:0;display:flex;flex-direction:column;gap:12px}
.vcard__media{position:relative;aspect-ratio:9/16;border-radius:10px;overflow:hidden;background:#101010 center/cover no-repeat;border:1px solid var(--rule)}
.vcard--noposter .vcard__media{background:linear-gradient(155deg,#1b1b1b 0%,#2a2017 62%,var(--kroma) 140%)}
/* card video senza poster: nome cliente grande, brandizzato e intenzionale */
.vcard--noposter .vcard__media::before{content:attr(data-name);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 18px;font-family:var(--disp);font-weight:800;font-size:clamp(1.3rem,2.4vw,1.75rem);letter-spacing:-.02em;line-height:1.12;color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.4);text-wrap:balance}
.vcard--noposter .vcard__media::after{content:"";position:absolute;left:18px;top:16px;width:26px;height:2px;background:var(--kroma);box-shadow:0 5px 0 var(--kroma)}
.vcard__btn{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;background:rgba(0,0,0,.20);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .3s var(--soft)}
.vcard__btn:hover{background:rgba(0,0,0,.32)}
.vcard__btn:focus-visible{outline:3px solid var(--kroma);outline-offset:-3px}
.vcard__ico{width:62px;height:62px;border-radius:50%;background:var(--kroma);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 22px rgba(0,0,0,.35);transition:transform .3s var(--soft)}
.vcard__btn:hover .vcard__ico{transform:scale(1.09)}
.vcard__ico::after{content:"";border-style:solid;border-width:10px 0 10px 17px;border-color:transparent transparent transparent #fff;margin-left:4px}
.vcard__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.vcard__cap{display:flex;flex-direction:column;gap:3px}
.vcard__name{font-family:var(--disp);font-weight:700;font-size:1rem;color:var(--ink)}
.vcard__role{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.05em;color:var(--kroma)}
.vcard__quote{margin:10px 0 0;color:var(--grey);font-size:.92rem;line-height:1.5}
.vcard__quote::before{content:"\201C";color:var(--kroma);font-family:var(--disp);font-weight:800;margin-right:1px}
@media(max-width:900px){.vgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.vgrid{grid-template-columns:1fr;max-width:420px;margin-inline:auto}}

/* hero immagine articolo singolo (aspetto/margine gestiti nel blocco .single a sezioni) */

/* banda immagine full-width dentro .wrap */
.media-band{aspect-ratio:16/7;border-radius:8px;overflow:hidden}
.media-band img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:680px){.media-band{aspect-ratio:4/3}}

/* ---- method gallery (foto del processo, Come lavoriamo) ---- */
.mgallery{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.6vw,18px)}
.mgallery figure{margin:0;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:var(--rule)}
.mgallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--soft)}
.mgallery figure:hover img{transform:scale(1.04)}
@media(max-width:820px){.mgallery{grid-template-columns:repeat(2,1fr)}}

/* ---- founder gallery (Chi siamo: foto founder a eventi) ---- */
.fgallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.8vw,20px);margin-top:clamp(24px,3.5vw,44px)}
.fgallery figure{margin:0;aspect-ratio:3/2;border-radius:10px;overflow:hidden;background:var(--rule)}
.fgallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--soft)}
.fgallery figure:hover img{transform:scale(1.04)}
@media(max-width:720px){.fgallery{grid-template-columns:1fr 1fr}.fgallery figure:nth-child(3){grid-column:1/-1;aspect-ratio:2/1}}

/* ---- partner block (Kroma Agency, Servizi) ---- */
.partner{display:flex;gap:clamp(20px,4vw,56px);align-items:center;flex-wrap:wrap;border:1px solid var(--rule);border-radius:12px;padding:clamp(24px,3.5vw,44px);background:var(--white)}
.partner__body{flex:1 1 320px}
.partner__kicker{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--kroma);display:block;margin-bottom:10px}
.partner__title{font-family:var(--disp);font-weight:700;font-size:clamp(1.4rem,2.6vw,2rem);letter-spacing:-.02em;margin:0 0 12px}
.partner__text{color:var(--grey);line-height:1.6;margin:0 0 20px}

/* ---- Contatti: hero immagine + testo bianco + CTA ---- */
/* hero PIÙ BASSA (altezza contenuta, cover) + testo/bottoni centrati verticalmente a sinistra,
   così cliccando una CTA il form sotto è subito visibile. Full-width (body overflow-x:clip). */
.contact-hero{position:relative;width:100%;margin:0;background:var(--kroma);overflow:hidden;line-height:0}
.contact-hero__bg{display:block;width:100%;height:clamp(300px,44vh,440px);object-fit:cover;object-position:center 38%;margin:0;border:0}
.contact-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(20,20,20,.74) 0%,rgba(20,20,20,.4) 42%,rgba(20,20,20,.05) 78%)}
.contact-hero__inner{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;line-height:1.5}
@media(max-width:560px){
  .contact-hero__bg{height:clamp(280px,52vh,380px)}
  .contact-hero::after{background:linear-gradient(180deg,rgba(20,20,20,.4) 0%,rgba(20,20,20,.2) 40%,rgba(20,20,20,.75) 100%)}
}
.contact-hero__title{font-family:var(--disp);font-weight:800;font-size:clamp(2.6rem,7vw,5rem);letter-spacing:-.04em;line-height:1;color:#fff;margin:0;text-wrap:balance}
.contact-hero__lead{color:rgba(255,255,255,.92);font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.5;margin:14px 0 0;max-width:42ch}
.contact-hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(22px,3vw,32px)}
/* secondaria leggibile su QUALSIASI foto: fondo scuro translucido + bordo bianco + testo bianco */
.contact-hero__cta .btn--ghost,
.contact-hero__cta .btn--ghost:active{background:rgba(228,100,14,.38);color:#fff;border-color:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.contact-hero__cta .btn--ghost:hover,.contact-hero__cta .btn--ghost:focus{background:#fff;color:var(--ink);border-color:#fff}
/* la primaria resta SEMPRE arancione, anche al focus/click (override del grigio di GeneratePress su <button>) */
.contact-hero__cta .btn--accent,
.contact-hero__cta .btn--accent:hover,
.contact-hero__cta .btn--accent:focus,
.contact-hero__cta .btn--accent:active{background:var(--kroma);color:#fff;border:none}
.contact-hero__cta .btn--accent:hover{background:var(--kroma2)}
@media(max-width:560px){.contact-hero__cta .btn{flex:1 1 100%;justify-content:center}}

/* ---- Contatti: i form compaiono SOLO dopo aver cliccato una CTA ---- */
#contatti-form{scroll-margin-top:120px}
#contatti-form.is-collapsed{display:none}
.contact-panel{max-width:680px}
.contact-forms.is-enhanced .contact-panel{display:none}
.contact-forms.is-enhanced .contact-panel.is-active{display:block}
.contact-hero__cta .btn--ghost.is-current{background:#fff;color:var(--ink);border-color:#fff}

/* ---- form contatti (CF7) ---- */
.contact__form{margin-top:clamp(28px,4vw,48px);max-width:680px}
.contact__form-title{font-family:var(--disp);font-weight:700;font-size:clamp(1.2rem,2vw,1.5rem);margin:0 0 22px}
/* Contatti — layout 2 colonne: contatti cliccabili a sinistra, form (card) a destra, mappa sotto */
.contact__grid{display:grid;grid-template-columns:minmax(240px,330px) 1fr;gap:clamp(28px,4vw,56px);align-items:start}
.contact__grid .contact-card{max-width:none;margin:0}
.contact__aside .eyebrow{display:inline-block;margin-bottom:clamp(14px,2vw,20px)}
.contact__list{list-style:none;margin:0 0 clamp(20px,3vw,28px);padding:0}
.contact__item{display:flex;flex-direction:column;gap:3px;padding:13px 0;border-bottom:1px solid var(--rule);transition:padding-left .3s var(--soft)}
.contact__item:hover,.contact__item:focus-visible{padding-left:8px}
.contact__k{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:var(--grey)}
.contact__v{font-family:var(--disp);font-weight:600;font-size:1.06rem;color:var(--ink);transition:color .25s var(--soft);word-break:break-word}
.contact__item:hover .contact__v{color:var(--kroma)}
.contact__social{display:flex;flex-wrap:wrap;gap:8px}
.contact__social a{font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink);border:1px solid var(--rule-strong);border-radius:999px;padding:7px 13px;transition:border-color .25s var(--soft),color .25s var(--soft)}
.contact__social a:hover{border-color:var(--kroma);color:var(--kroma)}
.contact__map{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--rule);line-height:0;margin-top:clamp(14px,2vw,22px)}
.contact__map iframe{width:100%;height:clamp(320px,44vh,460px);border:0;display:block}
/* mappa a larghezza intera (Contatti, sotto la sezione arancione) */
.contact-map-sec{line-height:0}
.contact-map-sec .contact__map{margin:0;border:0;border-radius:0}
.contact-map-sec .contact__map iframe{width:100%;height:clamp(360px,50vh,540px);display:block}
@media(max-width:820px){.contact__grid{grid-template-columns:1fr}}
/* sezione contatti su sfondo chiaro (override di eventuali sfondi arancioni ereditati) */
/* sezione contatti: sfondo ARANCIONE; contatti a sinistra in bianco; card form resta bianca */
body.page-id-8 #contatti-form{background:var(--kroma)}
body.page-id-8 #contatti-form .contact__aside{background:transparent;color:#fff}
body.page-id-8 #contatti-form .contact__aside .eyebrow{color:#fff;opacity:.92}
body.page-id-8 #contatti-form .contact__k{color:rgba(255,255,255,.72)}
body.page-id-8 #contatti-form .contact__v{color:#fff}
body.page-id-8 #contatti-form .contact__item{border-bottom-color:rgba(255,255,255,.3)}
body.page-id-8 #contatti-form .contact__item:hover .contact__v{color:var(--ink)}
body.page-id-8 #contatti-form .contact__social a{color:#fff;border-color:rgba(255,255,255,.55)}
body.page-id-8 #contatti-form .contact__social a:hover{color:var(--ink);border-color:#fff;background:#fff}

/* ============================================================
   HOME — sezione Forbes Under 30 (riconoscimento founder)
   ============================================================ */
.forbes__grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:clamp(28px,5vw,64px);align-items:center}
.forbes__media{margin:0;border-radius:var(--r-md);overflow:hidden;aspect-ratio:3/4;max-height:560px;background:var(--ink-soft)}
.forbes__media img{width:100%;height:100%;object-fit:cover;object-position:center 12%;display:block}
@media(max-width:820px){.forbes__media{aspect-ratio:4/3;max-height:420px}}
.forbes .eyebrow{display:inline-block;color:var(--kroma);margin-bottom:14px}
.forbes__logo{display:block;width:min(210px,52vw);height:auto;margin:0 0 18px}
.forbes h2{font-family:var(--disp);font-weight:800;font-size:clamp(1.9rem,4vw,3rem);letter-spacing:-.03em;line-height:1.05;color:#fff;margin:0 0 18px;text-wrap:balance}
.forbes__lead{color:rgba(255,255,255,.82);font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.6;margin:0 0 16px;max-width:54ch}
.forbes__lead strong{color:#fff}
.forbes__quote{margin:22px 0 0;border-left:3px solid var(--kroma);padding-left:20px;font-family:var(--disp);font-weight:600;font-size:clamp(1.1rem,1.6vw,1.35rem);line-height:1.32;color:#fff}
.forbes__quote cite{display:block;margin-top:12px;font-family:var(--mono);font-style:normal;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.6)}
.forbes__clients{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.forbes__clients span{font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:7px 14px}
@media(max-width:820px){.forbes__grid{grid-template-columns:1fr}}

/* La sezione Forbes usa il nero come superficie di prestigio e contrasto. */
.section.forbes[data-theme="dark"]{background:var(--ink);color:#fff}
.section.forbes[data-theme="dark"] h2,
.section.forbes[data-theme="dark"] .forbes__quote{color:#fff}
.section.forbes[data-theme="dark"] .forbes__lead{color:rgba(255,255,255,.82)}
.section.forbes[data-theme="dark"] .forbes__lead strong{color:#fff}
.section.forbes[data-theme="dark"] .forbes__quote cite,
.section.forbes[data-theme="dark"] .forbes__clients span{color:rgba(255,255,255,.72)}
.section.forbes[data-theme="dark"] .forbes__clients span{border-color:rgba(255,255,255,.28)}
.wpcf7-form p{margin:0 0 16px}
.wpcf7-form input[type=text],.wpcf7-form input[type=email],.wpcf7-form input[type=tel],.wpcf7-form textarea,.wpcf7-form input[type=file]{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--white);border:1px solid var(--rule);border-radius:8px;padding:14px 16px;transition:border-color .25s var(--soft)}
.wpcf7-form textarea{min-height:140px;resize:vertical}
.wpcf7-form input:focus,.wpcf7-form textarea:focus{outline:none;border-color:var(--kroma)}
.wpcf7-form .form-consent{font-size:.85rem;color:var(--grey);display:flex;gap:8px;align-items:flex-start;line-height:1.45}
.wpcf7-form .form-consent a{color:var(--kroma)}
.wpcf7-form .form-file-label{font-size:.9rem;margin-bottom:6px}
.wpcf7-form input[type=submit]{font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;background:var(--kroma);color:#fff;border:0;border-radius:999px;padding:14px 30px;cursor:pointer;transition:transform .25s var(--soft),background .25s}
.wpcf7-form input[type=submit]:hover{transform:translateY(-2px)}
.wpcf7-spinner{margin:4px 0 0 10px}
.wpcf7 .wpcf7-response-output{border-radius:8px;margin:18px 0 0;padding:12px 16px;font-size:.9rem}
.wpcf7-not-valid-tip{color:var(--kroma);font-size:.8rem;margin-top:4px}

/* ============================================================
   Rifiniture richieste cliente (Come lavoriamo / Servizi)
   ============================================================ */
/* media-band a immagine intera (no crop) — es. infografica metodo Come lavoriamo */
.media-band--full{aspect-ratio:auto;background:transparent}
.media-band--full img{position:static;height:auto;object-fit:contain}

/* teaser "Dicono di noi" con elementi centrati */
.tease-center .wrap{text-align:center}
.tease-center .shead{flex-direction:column;align-items:center;gap:8px}
.tease-center .shead .more{margin-left:0}
.tease-center .sec-lead{margin-left:auto;margin-right:auto}
.tease-center .work__cta{display:flex;justify-content:center}

/* Servizi — hero a due colonne (copy a sinistra, illustrazione a destra) */
.section.svc-hero-band{background:var(--kroma)!important;padding-block:clamp(88px,11vw,150px) clamp(58px,8vw,100px);overflow:hidden}
.svc-hero-band .svc-hero{position:relative}
.svc-hero-band .svc-hero::after{display:none}
.svc-hero-band .svc-hero__text,.svc-hero-band .svc-hero__media{position:relative;z-index:1}
.svc-hero-band .eyebrow,.svc-hero-band .page-hero__title,.svc-hero-band .page-hero__lead{color:#fff}
.svc-hero-band .page-hero__lead{color:rgba(255,255,255,.9)}
.svc-hero-band .svc-hero__media{box-shadow:0 26px 70px rgba(20,20,20,.18);border:1px solid rgba(255,255,255,.36)}
.svc-hero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.svc-hero__media{margin:0;border-radius:16px;overflow:hidden;aspect-ratio:4/3;background:var(--off)}
.svc-hero__media img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:820px){.svc-hero{grid-template-columns:1fr;gap:clamp(24px,5vw,36px)}.svc-hero__media{max-width:560px;aspect-ratio:16/10}.svc-hero-band .svc-hero::after{inset:auto -20vw -12vw 24vw;height:34%;transform:none}}

/* Servizi — sezione "Parti dal problema" arancione, card bianche (stile Parlano di noi) */
.section.svc-problem{background:var(--kroma)!important}
.svc-problem .eyebrow,.svc-problem .shead h2,.svc-problem .sec-lead{color:#fff}
.svc-problem .eyebrow{display:inline-block;margin-bottom:12px;opacity:.9}
.svc-problem .shead .more{color:#fff;border-bottom-color:rgba(255,255,255,.55)}
.svc-problem .svc-cards{border-top:none;padding-top:clamp(20px,2.6vw,30px)}
.svc-problem .svc-cards{align-items:stretch}
.svc-problem .scard{position:relative;background:#fff;border-color:transparent;overflow:hidden}
.svc-problem .scard::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--kroma);opacity:.9}
.svc-problem .scard:nth-child(4n+2){background:var(--kroma-tint)}
.svc-problem .scard:nth-child(4n+3)::before{background:var(--blue)}
.svc-problem .scard:nth-child(4n+4){background:var(--off)}
.svc-problem .scard:hover,.svc-problem .scard:focus-visible{background:#fff;border-color:#fff;transform:translateY(-4px);box-shadow:0 16px 34px rgba(0,0,0,.18)}
.svc-problem .scard__svc{color:var(--kroma)}
/* card slogan (riempie la cella vuota della griglia): arancione, coerente con il brand */
.svc-problem .scard.scard--slogan,
.svc-problem .scard.scard--slogan:hover,
.svc-problem .scard.scard--slogan:focus-visible{background:var(--kroma-deep);border-color:var(--kroma-deep);box-shadow:none;justify-content:center;gap:18px}
.svc-problem .scard.scard--slogan:hover{transform:translateY(-4px)}
.scard__slogan{font-family:var(--disp);font-weight:800;font-size:clamp(1.45rem,2.4vw,2.05rem);line-height:1.12;letter-spacing:-.02em;color:#fff;text-wrap:balance}
.scard__slogan em{color:#fff;font-style:normal}
.scard--slogan .scard__cta{color:#fff}
.scard--slogan:hover .scard__cta{color:var(--kroma)}
.svc-problem .btn--secondary{border-color:#fff;color:#fff}
.svc-problem .btn--secondary:hover,.svc-problem .btn--secondary:focus{background:#fff;color:var(--kroma);border-color:#fff}

/* hero a fondo arancione (pagine interne) — header reso leggibile in modo scoped (Home intatta) */
.page-hero--accent{background:var(--kroma)}
.page-hero--accent .eyebrow{color:#fff;opacity:.92}
.page-hero--accent .page-hero__title{color:#fff}
.page-hero--accent .page-hero__lead{color:rgba(255,255,255,.92)}
/* I nostri clienti (page-id 12): logo+icone bianchi sopra l'hero arancione; nav bianca allo scroll */
body.page-id-12 .nav.scrolled{background:#fff;box-shadow:0 1px 0 var(--rule)}
body.page-id-12 .nav:not(.scrolled) .nav__logo img{filter:brightness(0) invert(1)}
body.page-id-12 .nav:not(.scrolled) .nav__social a{color:#fff}
body.page-id-12 .nav:not(.scrolled) .nav__burger span{background:#fff}

/* Chi siamo — galleria founder/eventi: 3 immagini alla STESSA altezza, allineate.
   object-position alto-centro per non tagliare i volti. (scoped a Chi siamo: .fgallery e' solo qui) */
body.page-id-6 .fgallery{align-items:stretch}
body.page-id-6 .fgallery figure{aspect-ratio:3/2;background:var(--rule)}
body.page-id-6 .fgallery img{width:100%;height:100%;object-fit:cover;object-position:center 32%}

/* Chi siamo — sezione "Trasformiamo" a fondo arancione */
.section.studio--accent{background:var(--kroma)!important}
.studio--accent .statement,.studio--accent .statement em{color:#fff}
.studio--accent .studio__p{color:rgba(255,255,255,.92)}
.studio--accent .vals span{border-color:rgba(255,255,255,.55);color:#fff}

/* Chi siamo — "Il team": stesso feeling della sezione Numeri della Home (numeri grandi
   arancioni, entrata animata da destra, freccia Kroma) ma MANTENENDO la griglia (no lista verticale).
   Tutto scoped a .team-stats: la Home (.numbers) non viene toccata. */
.team-stats{position:relative;overflow:hidden}
.team-stats .wrap{position:relative;z-index:1}
/* griglia ordinata: 3 col desktop, 2 tablet, 1 mobile */
.team-stats .kpis{grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px) clamp(24px,3vw,40px)}
/* card numerica: numero grande arancione + ruolo, allineati a baseline (feel "2 — Ruolo") */
.team-stats .kpi{display:flex;align-items:baseline;gap:clamp(10px,1.2vw,18px);flex-wrap:wrap;border:none;background:none;padding:0}
.team-stats .kpi__n{font-family:var(--disp);font-weight:800;color:var(--kroma);font-size:clamp(3rem,6vw,5.2rem);line-height:.9;letter-spacing:-.04em;margin:0}
.team-stats .kpi__l{font-family:var(--mono);text-transform:uppercase;letter-spacing:.07em;font-size:clamp(.7rem,1vw,.9rem);color:var(--grey);margin:0}
/* freccia Kroma laterale integrata (come la Home) */
.team-stats::after{content:"";position:absolute;right:-1%;bottom:clamp(10px,4vw,56px);width:clamp(180px,22vw,360px);aspect-ratio:440/300;background:url(../img/freccia-kroma.png) right center/contain no-repeat;opacity:.5;pointer-events:none;z-index:0}
/* entrata animata da destra (riusa il keyframe della Home), guidata da .is-in via JS */
html.js .team-stats .kpi{opacity:0}
.team-stats.is-in .kpi{animation:kpiSlideIn .9s cubic-bezier(.22,1,.3,1) both}
.team-stats.is-in .kpi:nth-child(1){animation-delay:0s}
.team-stats.is-in .kpi:nth-child(2){animation-delay:.08s}
.team-stats.is-in .kpi:nth-child(3){animation-delay:.16s}
.team-stats.is-in .kpi:nth-child(4){animation-delay:.24s}
.team-stats.is-in .kpi:nth-child(5){animation-delay:.32s}
.team-stats.is-in .kpi:nth-child(6){animation-delay:.40s}
.team-stats.is-in .kpi:nth-child(7){animation-delay:.48s}
.team-stats.is-in .kpi:nth-child(8){animation-delay:.56s}
.team-stats.is-in .kpi:nth-child(9){animation-delay:.64s}
.team-stats.is-in .kpi__n{animation:kpiPulse 2.8s ease-in-out infinite;animation-delay:1s}
@media(prefers-reduced-motion:reduce){
  html.js .team-stats .kpi{opacity:1}
  .team-stats.is-in .kpi,.team-stats.is-in .kpi__n{animation:none}
}
@media(max-width:820px){.team-stats .kpis{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.team-stats::after{display:none}}
@media(max-width:520px){.team-stats .kpis{grid-template-columns:1fr}}

/* Servizi — mostra tutti i 14 servizi (niente bottone "Mostra tutti") */
.svc-problem .svc-cards .scard--extra{display:flex}
.svc-problem .svc-more{display:none}

/* Come lavoriamo — infografica metodo come feature su fondo arancione (card bianca) */
.section.cl-infographic{background:var(--kroma)!important}
.cl-infographic .media-band--full{background:transparent}

/* Come lavoriamo — Metodo a card con foto (una per fase) */
.method-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,38px)}
.method-card{display:flex;flex-direction:column}
.method-card__media{aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:var(--off);margin-bottom:18px}
.method-card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--soft)}
.method-card:hover .method-card__media img{transform:scale(1.04)}
.method-card__n{font-family:var(--mono);font-size:.72rem;color:var(--kroma);letter-spacing:.06em}
.method-card__name{font-family:var(--disp);font-weight:700;font-size:clamp(1.3rem,2.2vw,1.7rem);letter-spacing:-.02em;margin:8px 0 10px}
.method-card__desc{color:var(--grey);font-size:1rem;line-height:1.6;margin:0}
@media(max-width:760px){.method-grid{grid-template-columns:1fr;gap:clamp(28px,6vw,40px)}}

/* Come lavoriamo V2 */
.process-hero{min-height:clamp(520px,72vh,760px);display:flex;align-items:flex-end;background:var(--kroma);color:#fff;overflow:hidden}
.process-hero .wrap{position:relative;z-index:1;padding-bottom:clamp(56px,8vw,92px)}
.process-hero::after{content:"";position:absolute;right:-8vw;bottom:-12vw;width:min(52vw,720px);aspect-ratio:1;border:2px solid rgba(255,255,255,.34);border-radius:50%}
.process-hero .eyebrow,.process-hero .page-hero__lead{color:rgba(255,255,255,.9)}
.process-hero .page-hero__title{color:#fff;max-width:10ch}
.process-hero .page-hero__lead{max-width:54ch}
.process-split{display:grid;grid-template-columns:minmax(0,.92fr) minmax(340px,1.08fr);gap:clamp(32px,6vw,86px);align-items:center}
.process-copy__kicker{color:var(--kroma);margin-bottom:16px}
.process-copy h2,.process-band__title{font-family:var(--disp);font-size:clamp(2.4rem,6vw,5.4rem);line-height:.92;letter-spacing:-.04em;margin:0;text-wrap:balance}
.process-copy p{color:var(--grey);font-size:clamp(1.04rem,1.35vw,1.22rem);line-height:1.65;max-width:50ch}
.process-media{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/5;background:var(--off)}
.process-media img{width:100%;height:100%;object-fit:cover;display:block}
.process-media::after{content:"";position:absolute;inset:auto 20px 20px auto;width:96px;height:96px;border-radius:50%;background:var(--kroma);mix-blend-mode:multiply}
.process-band{background:var(--kroma);color:#fff;overflow:hidden}
.process-band__head{display:grid;grid-template-columns:minmax(0,.85fr) minmax(280px,.55fr);gap:clamp(28px,5vw,70px);align-items:end;margin-bottom:clamp(34px,6vw,76px)}
.process-band__title{color:#fff}
.process-band__lead{color:rgba(255,255,255,.86);font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.6;margin:0}
.process-steps{display:grid;gap:clamp(24px,4vw,46px)}
.process-step{display:grid;grid-template-columns:minmax(280px,.82fr) minmax(0,1fr);gap:clamp(24px,5vw,76px);align-items:center;padding-block:clamp(22px,4vw,50px);border-top:1px solid rgba(255,255,255,.28)}
.process-step:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(280px,.82fr)}
.process-step:nth-child(even) .process-step__media{order:2}
.process-step__media{aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:var(--kroma-deep)}
.process-step__media img{width:100%;height:100%;object-fit:cover;display:block}
.process-step__num{display:inline-block;color:#fff;margin-bottom:18px;opacity:.82}
.process-step__title{font-family:var(--disp);font-size:clamp(2rem,4.3vw,4.2rem);line-height:.94;letter-spacing:-.04em;margin:0 0 20px;color:#fff;text-wrap:balance}
.process-step__text{color:rgba(255,255,255,.86);font-size:clamp(1rem,1.25vw,1.16rem);line-height:1.65;max-width:48ch;margin:0}
.process-outcomes{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.process-outcome{background:#fff;padding:clamp(22px,3vw,36px)}
.process-outcome b{display:block;font-family:var(--disp);font-size:clamp(1.3rem,2vw,1.9rem);line-height:1.05;margin-bottom:12px}
.process-outcome span{color:var(--grey);line-height:1.55}
@media(max-width:880px){.process-split,.process-band__head,.process-step,.process-step:nth-child(even){grid-template-columns:1fr}.process-step:nth-child(even) .process-step__media{order:0}.process-outcomes{grid-template-columns:1fr}.process-hero{min-height:clamp(460px,70vh,640px)}}

/* Come lavoriamo — "Parlano di noi": meno spazio sottotitolo -> card (scoped, Home intatta) */
body.page-id-13 .press .sec-lead{margin-bottom:clamp(6px,1.2vw,12px)}

/* HERO a immagine full-bleed (Servizi, Come lavoriamo): immagine a tutta larghezza desktop */
.hero-cover{position:relative;width:100%;line-height:0;background:var(--kroma)}
.hero-cover img{display:block;width:100%;height:clamp(360px,54vh,640px);object-fit:cover}
.hero-cover::before{content:"";position:absolute;top:0;left:0;right:0;height:140px;background:linear-gradient(180deg,rgba(20,20,20,.5),rgba(20,20,20,0));z-index:1;pointer-events:none}
/* testo subito sotto un hero-immagine: meno padding-top (la nav non lo sovrasta) */
.page-hero--compact{padding-block:clamp(40px,6vw,72px) 0}
/* eyebrow ben spaziato quando titolo/eyebrow stanno nella colonna testo della two-col */
.svc-hero__text .eyebrow{display:inline-block;margin-bottom:18px}
/* header leggibile sopra gli hero-immagine (pagine 13/14): logo/icone bianchi finche' nav trasparente, nav bianca allo scroll */
body.page-id-13 .nav.scrolled,body.page-id-14 .nav.scrolled,body.page-id-8 .nav.scrolled{background:#fff;box-shadow:0 1px 0 var(--rule)}
body.page-id-13 .nav:not(.scrolled) .nav__logo img,body.page-id-14 .nav:not(.scrolled) .nav__logo img,body.page-id-8 .nav:not(.scrolled) .nav__logo img{filter:brightness(0) invert(1)}
body.page-id-13 .nav:not(.scrolled) .nav__social a,body.page-id-14 .nav:not(.scrolled) .nav__social a,body.page-id-8 .nav:not(.scrolled) .nav__social a{color:#fff}
body.page-id-13 .nav:not(.scrolled) .nav__burger span,body.page-id-14 .nav:not(.scrolled) .nav__burger span,body.page-id-8 .nav:not(.scrolled) .nav__burger span{background:#fff}

/* I nostri clienti (page-id 12) — meno spazio tra hero e sezione, e tra sottotitolo e immagini */
body.page-id-12 .page-hero__lead{margin-bottom:clamp(10px,2vw,22px)}
body.page-id-12 .section{padding-top:clamp(28px,4vw,50px)}
body.page-id-12 .sec-lead{margin-bottom:clamp(8px,1.4vw,14px)}
body.page-id-12 .work-grid{padding-top:clamp(6px,1.2vw,16px)}

/* Servizi (page-id 14) — hero alla stessa altezza di Come lavoriamo (immagine "tagliata a metà",
   non full-screen): usa l'altezza di default di .hero-cover. */

/* Come lavoriamo — motion/contrasto V2 cliente */
body.page-id-13 .process-hero .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);text-align:left}
body.page-id-13 .process-hero{min-height:clamp(380px,54vh,560px)}
body.page-id-13 .process-hero::after{right:0;width:min(42vw,620px)}
body.page-id-13{overflow-x:clip}
body.page-id-13 .process-hero .page-hero__title,
body.page-id-13 .process-hero .page-hero__lead{margin-left:0;margin-right:auto}
/* hero: NESSUN bounce, solo un fade morbido in entrata su tutto (richiesta cliente) */
body.page-id-13 .process-hero .eyebrow,
body.page-id-13 .process-hero .page-hero__title,
body.page-id-13 .process-hero .page-hero__lead{animation:kromaHeroTitleFade .8s var(--soft) both}
body.page-id-13 .process-hero .eyebrow{animation-delay:.02s}
body.page-id-13 .process-hero .page-hero__title{animation-delay:.08s}
body.page-id-13 .process-hero .page-hero__lead{animation-delay:.14s}
@keyframes kromaHeroTitleFade{from{opacity:0}to{opacity:1}}
body.page-id-13 .process-copy__kicker{color:var(--kroma);font-size:clamp(.82rem,1.1vw,1rem);font-weight:800}
body.page-id-13 .process-copy h2{color:var(--kroma);line-height:1.02;letter-spacing:-.025em;max-width:11ch}
/* titolo "Prima capiamo. Poi facciamo crescere." su due colori (richiesta cliente) */
body.page-id-13 .process-copy h2 .t-ink{color:var(--ink)}
body.page-id-13 .process-copy h2 .t-kroma{color:var(--kroma)}
body.page-id-13 .process-copy p{font-size:clamp(1.08rem,1.45vw,1.28rem);line-height:1.78}
body.page-id-13 .process-intro .process-split{
  grid-template-columns:minmax(0,.82fr) minmax(360px,.72fr);
  grid-template-areas:
    "kicker kicker"
    "title title"
    "text media"
    "text2 media";
  align-items:start;
  column-gap:clamp(42px,7vw,112px);
  row-gap:clamp(14px,2.4vw,30px);
}
body.page-id-13 .process-intro .process-copy{display:contents}
body.page-id-13 .process-intro .process-copy__kicker{grid-area:kicker;margin:0}
body.page-id-13 .process-intro .process-copy h2{
  grid-area:title;
  max-width:17ch;
  font-size:clamp(3.6rem,5.9vw,6.05rem);
  line-height:.9;
}
body.page-id-13 .process-intro .process-copy p:not(.process-copy__kicker){grid-column:1;max-width:56ch;margin:0}
body.page-id-13 .process-intro .process-copy p:nth-of-type(2){grid-area:text}
body.page-id-13 .process-intro .process-copy p:nth-of-type(3){grid-area:text2;margin-top:clamp(-72px,-5vw,-36px)}
body.page-id-13 .process-intro .process-media{
  grid-area:media;
  align-self:start;
  aspect-ratio:4/3;
  min-height:0;
}
body.page-id-13 .process-band{background:var(--kroma);color:#fff}
body.page-id-13 .process-band .process-steps{overflow:hidden}
body.page-id-13 .process-band .process-step{overflow:hidden}
body.page-id-13 .process-band__title{color:#fff;text-shadow:none}
body.page-id-13 .process-band__lead{color:rgba(255,255,255,.88);font-weight:600}
body.page-id-13 .process-step{border-top-color:rgba(255,255,255,.28)}
body.page-id-13 .process-step__num{color:#fff;font-weight:800;opacity:.82}
body.page-id-13 .process-step__title{color:#fff;font-size:clamp(2.6rem,5.2vw,5.2rem);text-shadow:0 12px 34px rgba(20,20,20,.18)}
body.page-id-13 .process-step__text{color:rgba(255,255,255,.92);font-size:clamp(1.05rem,1.35vw,1.22rem)}
body.page-id-13 .process-step__media{box-shadow:0 22px 54px rgba(20,20,20,.22);transition:transform .5s var(--expo),box-shadow .5s var(--soft)}
body.page-id-13 .process-step:hover .process-step__media{transform:rotate(-1.5deg) scale(1.035);box-shadow:0 30px 70px rgba(20,20,20,.28)}
body.page-id-13 .process-step:nth-child(even):hover .process-step__media{transform:rotate(1.5deg) scale(1.035)}
body.page-id-13 .process-step .process-step__media,
body.page-id-13 .process-step .process-step__body{transition:opacity .9s var(--expo),transform .9s var(--expo),box-shadow .5s var(--soft)}
html.js body.page-id-13 .process-step.reveal:not(.in) .process-step__media{opacity:0;transform:translateX(-48px)}
html.js body.page-id-13 .process-step.reveal:not(.in) .process-step__body{opacity:0;transform:translateX(48px)}
html.js body.page-id-13 .process-step:nth-child(even).reveal:not(.in) .process-step__media{transform:translateX(48px)}
html.js body.page-id-13 .process-step:nth-child(even).reveal:not(.in) .process-step__body{transform:translateX(-48px)}
body.page-id-13 .process-step.in .process-step__media{transition-delay:.04s}
body.page-id-13 .process-step.in .process-step__body{transition-delay:.12s}
body.page-id-13 .process-outcomes{counter-reset:kroma-outcome;display:block;position:relative;background:transparent;border:0;border-top:1px solid var(--rule);padding:0;overflow:visible}
body.page-id-13 .process-outcomes::before{content:none}
body.page-id-13 .process-outcome{counter-increment:kroma-outcome;display:grid;grid-template-columns:90px minmax(0,.9fr) minmax(280px,.75fr);align-items:center;gap:clamp(18px,3vw,42px);background:transparent;color:#141414;border:0;border-bottom:1px solid var(--rule);border-radius:0;padding:clamp(22px,3vw,38px) 0;box-shadow:none;text-align:left;transition:padding-left .35s var(--expo),opacity .3s var(--soft)}
body.page-id-13 .process-outcome::before{content:counter(kroma-outcome,decimal-leading-zero);font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--kroma)}
body.page-id-13 .process-outcome:hover{padding-left:14px;transform:none;background:transparent;color:#141414;box-shadow:none}
body.page-id-13 .process-outcome:nth-child(even):hover{transform:none}
body.page-id-13 .process-outcome b{font-size:clamp(1.8rem,4vw,3.8rem);line-height:.96;letter-spacing:-.04em;color:inherit;text-wrap:balance}
body.page-id-13 .process-outcome:hover b{color:var(--kroma)}
body.page-id-13 .process-outcome span{color:var(--grey);font-size:clamp(1rem,1.28vw,1.18rem);line-height:1.58;max-width:34ch}
body.page-id-13 .process-outcome:hover span{color:var(--grey)}
body.page-id-13 .tease-center{background:var(--kroma)!important;color:#fff;overflow:hidden;overflow-x:clip}
body.page-id-13 .tease-center .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-areas:"title more" "title body" "title cta";align-items:center;column-gap:clamp(42px,8vw,126px);row-gap:clamp(22px,3vw,36px);text-align:left}
body.page-id-13 .tease-center .shead{display:contents}
body.page-id-13 .tease-center .shead h2{grid-area:title;color:#fff;font-size:clamp(3rem,4.5vw,4.2rem);line-height:.94;max-width:16ch;margin:0}
body.page-id-13 .tease-center .more{grid-area:more;display:inline-flex;width:max-content;margin:0;color:var(--ink);font-weight:900;border-bottom-color:var(--ink)}
body.page-id-13 .tease-center .sec-lead{grid-area:body;color:var(--ink);font-weight:600;font-size:clamp(1.18rem,1.8vw,1.55rem);line-height:1.55;max-width:35ch;margin:0}
body.page-id-13 .tease-center .work__cta{grid-area:cta;margin:0;justify-content:flex-start}
body.page-id-13 .tease-center .btn{background:var(--ink);color:#fff;animation:kromaCtaPulse 2.8s ease-in-out infinite;box-shadow:0 18px 42px rgba(20,20,20,.22)}
body.page-id-13 .tease-center .btn:hover{transform:scale(1.08);background:#fff;color:var(--ink)}
@keyframes kromaCtaPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.045)}
}
html.js body.page-id-13 .tease-center .shead h2.reveal:not(.in){opacity:0;transform:translateX(-40px)}
html.js body.page-id-13 .tease-center .more.reveal:not(.in){opacity:0;transform:translateX(40px)}
@media(prefers-reduced-motion:reduce){
  body.page-id-13 .process-hero .eyebrow,
  body.page-id-13 .process-hero .page-hero__title,
  body.page-id-13 .process-hero .page-hero__lead,
  body.page-id-13 .tease-center .btn{animation:none}
  html.js body.page-id-13 .process-step.reveal:not(.in) .process-step__media,
  html.js body.page-id-13 .process-step.reveal:not(.in) .process-step__body{opacity:1;transform:none}
}
@media(max-width:880px){
  body.page-id-13 .process-intro .process-split{grid-template-columns:1fr;grid-template-areas:none}
  body.page-id-13 .process-intro .process-copy{display:block}
  body.page-id-13 .process-intro .process-copy__kicker,
  body.page-id-13 .process-intro .process-copy h2,
  body.page-id-13 .process-intro .process-copy p:not(.process-copy__kicker),
  body.page-id-13 .process-intro .process-media{grid-area:auto;grid-column:auto}
  body.page-id-13 .process-copy h2{max-width:14ch}
  body.page-id-13 .process-intro .process-copy p:not(.process-copy__kicker){margin-top:18px}
  body.page-id-13 .process-intro .process-copy p:nth-of-type(3){margin-top:18px}
  body.page-id-13 .process-intro .process-media{aspect-ratio:4/5}
  body.page-id-13 .process-outcome{grid-template-columns:56px minmax(0,1fr);gap:14px;padding-block:24px}
  body.page-id-13 .process-outcome span{grid-column:2;max-width:none}
  body.page-id-13 .tease-center .wrap{grid-template-columns:1fr;grid-template-areas:"title" "more" "body" "cta";align-items:start}
  body.page-id-13 .tease-center .shead h2{position:relative;left:6px;padding-left:0}
}
@media(max-width:430px){
  body.page-id-13 .tease-center .shead h2{font-size:clamp(2.12rem,10vw,2.7rem);line-height:1}
}
@media(max-width:340px){
  body.page-id-13 .tease-center .shead h2{font-size:1.95rem}
}
@media(max-width:680px){
  html.js body.page-id-13 .tease-center .shead h2.reveal:not(.in),
  html.js body.page-id-13 .tease-center .more.reveal:not(.in){transform:none}
}

/* ============================================================
   Case Study modulare (campi backend) — single-portfolio-item
   ============================================================ */
/* logo cliente nell'hero: chip pulito su sfondo chiaro */
.cs-hero__logo{display:inline-block;max-height:54px;max-width:200px;width:auto;height:auto;margin:0 0 20px;padding:5px;object-fit:contain;background:#fff;border:1px solid var(--rule-strong);border-radius:12px;box-shadow:0 6px 18px -12px rgba(0,0,0,.25)}
/* facts: banda con accento superiore (vale anche per le pagine narrative) */
.cs--modular .cs-facts{border-top:2px solid var(--kroma);padding-top:clamp(18px,2.4vw,24px)}
/* colonna modulare: testo stretto, media più ariosi */
.cs-modular{max-width:760px;margin:clamp(24px,4vw,44px) auto 0}
.cs-lead{position:relative;font-size:clamp(1.22rem,2.4vw,1.58rem);line-height:1.42;font-weight:500;color:var(--ink);margin:0 0 clamp(30px,4.5vw,46px);padding-left:20px;text-wrap:pretty}
.cs-lead::before{content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:4px;border-radius:4px;background:var(--kroma)}
.cs-block{margin:0 0 clamp(20px,3vw,34px)}
.cs-block__h{display:flex;align-items:center;gap:10px;font-size:clamp(1.12rem,2vw,1.42rem);margin:0 0 14px;letter-spacing:-.015em}
.cs-block__h::before{content:"";flex:0 0 auto;width:22px;height:3px;border-radius:3px;background:var(--kroma)}
.cs-block p{margin:0;line-height:1.72;color:var(--ink-soft);text-wrap:pretty}
.cs-activity-list{margin:0;padding-left:1.1em;color:var(--ink-soft)}
.cs-activity-list li{padding-left:.35em;line-height:1.72}
.cs-activity-list li::marker{color:var(--kroma)}
/* risultati: griglia metriche con accento e hover */
.cs-results__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(14px,2vw,20px)}
.cs-result{position:relative;background:var(--off);border:1px solid var(--rule-strong);border-radius:16px;padding:clamp(20px,2.6vw,26px);display:flex;flex-direction:column;gap:7px;overflow:hidden;transition:transform .3s var(--soft),box-shadow .3s var(--soft)}
.cs-result::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--kroma);opacity:.85}
.cs-result:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(0,0,0,.35)}
.cs-result__num{font-size:clamp(1.8rem,4vw,2.55rem);font-weight:800;color:var(--kroma);line-height:1;letter-spacing:-.03em;font-family:var(--disp,inherit)}
.cs-result__desc{font-weight:600;color:var(--ink);font-size:.98rem;line-height:1.4}
.cs-result__note{font-size:.82rem;color:var(--grey)}
/* gallery materiali: immagini INTERE (niente crop), grandi e ordinate.
   one/two = griglia ad altezza naturale; multi = colonne tipo masonry. */
.cs-mgallery{margin-top:12px}
.cs-mgallery figure{margin:0;border-radius:14px;overflow:hidden;background:var(--off)}
.cs-mgallery img{width:100%;height:auto;display:block;object-fit:contain;transition:transform .5s var(--soft)}
.cs-mgallery figure:hover img{transform:scale(1.03)}
.cs-mgallery--one,.cs-mgallery--two{display:grid;gap:clamp(12px,1.6vw,20px);align-items:start}
.cs-mgallery--two{grid-template-columns:repeat(2,1fr)}
.cs-mgallery--multi{column-count:3;column-gap:clamp(12px,1.6vw,20px)}
.cs-mgallery--multi figure{break-inside:avoid;margin:0 0 clamp(12px,1.6vw,20px)}
@media(max-width:900px){.cs-mgallery--multi{column-count:2}}
@media(max-width:600px){.cs-mgallery--multi{column-count:1}.cs-mgallery--two{grid-template-columns:1fr}}

/* ===== SHOWCASE media casi studio: una SEZIONE INTERA per media, bande di colore alternate, media GRANDI ===== */
.cs-showcase{margin-top:clamp(18px,2.6vw,30px)}
.cs-showcase__h{margin-bottom:0}
.cs-show{padding-block:clamp(44px,7vw,110px)}
.cs-show--off{background:var(--off)}
.cs-show--accent{background:var(--kroma)}
.cs-show--dark{background:var(--kroma-deep)}
.cs-show__inner{display:flex;justify-content:center}
/* media dentro card arrotondate (come prima) */
.cs-show__media{margin:0;width:100%;max-width:min(1120px,86vw)}
.cs-show__media img{width:100%;max-height:min(78vh,760px);height:auto;object-fit:contain;display:block;border-radius:16px;box-shadow:0 24px 70px rgba(20,20,20,.16)}
.cs-show__media--video{max-width:clamp(300px,40vw,440px)}
.cs-show__media--video video{width:100%;aspect-ratio:9/16;object-fit:cover;display:block;border-radius:16px;background:#000}

/* ===== Case study standard V2 — singoli lavori in stile editoriale ===== */
.single-portfolio-item .site-main{background:var(--off)}
.cs--standard .cs-hero{position:relative;overflow:hidden;padding-block:clamp(112px,7vw,120px) clamp(28px,4vw,48px);background:var(--kroma);isolation:isolate}
.cs--standard .cs-hero::after{content:"";position:absolute;right:-12vw;bottom:-34vw;width:clamp(420px,62vw,980px);aspect-ratio:1;border:2px solid rgba(255,255,255,.22);border-radius:50%;z-index:-1}
.cs--standard .cs-hero .wrap{display:grid;grid-template-columns:minmax(0,1fr);align-items:end}
.cs--standard .cs-hero__logo{max-height:132px;max-width:360px;padding:5px;margin-bottom:clamp(22px,3vw,34px);border-radius:12px;box-shadow:0 26px 64px rgba(20,20,20,.24)}
.cs--standard .cs-hero__title{max-width:10.6ch;font-size:clamp(4.4rem,11vw,10rem);line-height:.86;letter-spacing:-.055em}
.cs--standard .cs-hero__sub{max-width:72ch;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;font-size:clamp(.72rem,.9vw,.84rem)}
.cs--standard .cs-tags{max-width:860px;gap:clamp(20px,2.8vw,38px)}
.cs--standard .cs-tag{border-radius:5px;color:#fff;background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.28)}
.cs--standard > .wrap{max-width:min(1260px,86vw)}
.cs--standard .cs-cover{aspect-ratio:16/8.6;margin-top:clamp(-40px,-3vw,-18px);margin-bottom:clamp(30px,4vw,56px);border-radius:8px;box-shadow:0 34px 80px rgba(20,20,20,.18);overflow:hidden;position:relative;z-index:2}
.cs--standard .cs-cover img{transition:transform .8s var(--soft),filter .8s var(--soft)}
.cs--standard .cs-cover:hover img{transform:scale(1.025);filter:saturate(1.06)}
.cs--standard .cs-facts{max-width:none;margin:0 0 clamp(28px,4vw,52px);padding:clamp(18px,2.5vw,26px) 0;border-top:1px solid rgba(20,20,20,.16);border-bottom:1px solid rgba(20,20,20,.16);justify-content:space-between}
.cs--standard .cs-fact__label{color:var(--kroma)}
.cs--standard .cs-fact__value{font-size:clamp(1rem,1.4vw,1.22rem)}
.cs--standard .cs-modular{max-width:none;margin:0;display:grid;gap:clamp(16px,2.2vw,30px)}
/* Overview allineata alla gerarchia delle sezioni testuali successive. */
.cs-intro{display:grid;grid-template-columns:minmax(150px,.32fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start;border-top:1px solid rgba(20,20,20,.16);padding-top:clamp(20px,3vw,30px)}
.cs-intro__label{font-family:var(--disp);font-size:clamp(1.6rem,3.2vw,3.2rem);font-weight:800;line-height:1;letter-spacing:-.04em;text-transform:none;margin:0;color:var(--kroma);max-width:14ch}
.cs--standard .cs-lead{font-size:clamp(1.02rem,1.35vw,1.2rem);line-height:1.7;font-weight:400;letter-spacing:0;margin:0;padding:0;max-width:72ch;color:var(--ink)}
.cs--standard .cs-lead::before{display:none}
.cs-services{position:relative;background:var(--kroma);color:#fff;border-radius:8px;padding:clamp(28px,4vw,54px);overflow:hidden;isolation:isolate}
.cs-services::after{content:none}
.cs-services .cs-block__h{color:#fff;margin-bottom:clamp(20px,3vw,30px)}
.cs-services .cs-block__h::before{background:#fff}
.cs-services__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:clamp(14px,1.6vw,20px)}
.cs-services__list li{display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;line-height:1.3;border:1px solid rgba(255,255,255,.42);border-radius:999px;padding:12px 18px;background:rgba(255,255,255,.12);transition:transform .32s var(--soft),background .32s var(--soft)}
.cs-services__list li:hover{transform:translateY(-3px);background:rgba(255,255,255,.24)}
.cs-story-block{display:grid;grid-template-columns:minmax(150px,.32fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start;border-top:1px solid rgba(20,20,20,.16);padding-top:clamp(20px,3vw,30px)}
.cs-story-block .cs-block__h{font-size:clamp(1.6rem,3.2vw,3.2rem);line-height:1;letter-spacing:-.04em;display:block;margin:0;color:var(--kroma);max-width:14ch}
.cs-story-block .cs-block__h::before{display:none}
.cs-story-block p,.cs-richtext{font-size:clamp(1.02rem,1.35vw,1.2rem);line-height:1.7;color:var(--ink)}
.cs-story-block p{max-width:72ch}
.cs-story-block--wide .cs-block__h{color:var(--ink)}
.cs-richtext > *:first-child{margin-top:0}
.cs-richtext img,.cs-richtext figure,.cs-richtext video{display:none !important}
.cs-richtext p:has(img),.cs-richtext p:has(video),.cs-richtext figure:has(img){display:none !important}
.cs-richtext p{margin-bottom:1.05em}
.cs--standard .cs-results{background:var(--kroma);color:#fff;border-radius:8px;padding:clamp(30px,5vw,64px);overflow:hidden}
.cs--standard .cs-results .cs-block__h{display:block;color:#fff;font-size:clamp(2.8rem,8vw,8rem);line-height:.86;letter-spacing:-.06em;margin-bottom:clamp(28px,4vw,46px)}
.cs--standard .cs-results .cs-block__h::before{display:none}
.cs--standard .cs-results__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:620px){.cs--standard .cs-results__grid{grid-template-columns:1fr}}
.cs--standard .cs-result{background:#fff;color:var(--ink);border:0;border-radius:8px;box-shadow:0 20px 58px rgba(112,51,0,.2);min-height:170px}
.cs--standard .cs-result::before{height:100%;width:7px;background:var(--ink)}
.cs--standard .cs-result:hover{transform:translateY(-8px) scale(1.015);box-shadow:0 30px 70px rgba(112,51,0,.28)}
.cs--standard .cs-result__num{color:var(--kroma);font-size:clamp(1.7rem,3vw,2.6rem);overflow-wrap:break-word;word-break:normal;hyphens:auto}
.cs--standard .cs-clientlinks{border-top:1px solid rgba(20,20,20,.16);padding-top:clamp(24px,4vw,40px)}
/* "Materiali e contenuti": titolo vicino al contenuto sopra, centrato e parte
   della stessa sezione del carousel sotto (richiesta cliente) */
.cs--standard .cs-showcase{margin-top:clamp(28px,4vw,52px)}
.cs--standard .cs-showcase > .wrap{max-width:var(--maxw)}
.cs--standard .cs-showcase__h{text-align:center;font-size:clamp(1.9rem,4vw,3rem);line-height:1;letter-spacing:-.03em;display:block;margin-bottom:clamp(20px,3vw,34px);color:var(--ink)}
.cs--standard .cs-showcase__h::before{display:none}

/* "Materiali e contenuti": carousel WIDE a scorrimento automatico CONTINUO (marquee).
   Non si ferma in hover (richiesta cliente). Classe dedicata per non collidere col
   carousel mockup .cs-gallery. */
.cs-marquee{overflow:hidden;padding-block:clamp(6px,1.2vw,16px) clamp(18px,2.6vw,34px)}
.cs-marquee__track{display:flex;gap:clamp(18px,2.4vw,34px);width:max-content;margin:0 auto;padding:0;list-style:none}
.cs-marquee--auto .cs-marquee__track{margin:0;animation:cs-marquee-scroll 55s linear infinite}
@keyframes cs-marquee-scroll{from{transform:translateX(0)}to{transform:translateX(calc(-50% - clamp(9px,1.2vw,17px)))}}
.cs-marquee__item{flex:0 0 auto;margin:0}
.cs-marquee__item--image img{display:block;height:min(64vh,600px);width:auto;max-width:none;object-fit:contain;border-radius:10px;box-shadow:0 26px 70px rgba(20,20,20,.18)}
.cs-marquee__item--video video{display:block;height:min(64vh,600px);width:auto;aspect-ratio:9/16;object-fit:cover;border-radius:10px;box-shadow:0 26px 70px rgba(20,20,20,.18);background:#000}
@media(prefers-reduced-motion:reduce){
  .cs-marquee{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .cs-marquee::-webkit-scrollbar{display:none}
  .cs-marquee--auto .cs-marquee__track{animation:none}
}
@media(max-width:680px){
  .cs-marquee{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--gut);
    touch-action:pan-x pan-y;
    margin-inline:calc(-1 * var(--gut));
    padding-inline:var(--gut);
  }
  .cs-marquee::-webkit-scrollbar{display:none}
  .cs-marquee--auto .cs-marquee__track{
    animation:none !important;
    transform:none !important;
    margin:0;
  }
  .cs-marquee__item{scroll-snap-align:start}
  .cs-marquee__item--image img{height:auto;width:auto;max-height:68vh;max-width:84vw}
  .cs-marquee__item--video video{height:auto;width:84vw;max-width:340px}
}
.cs-reveal{animation:csFadeUp .75s var(--soft) both;animation-timeline:view();animation-range:entry 0% cover 28%}
@keyframes csFadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@media(max-width:900px){
  .cs--standard .cs-hero__title{font-size:clamp(3.4rem,16vw,6.5rem)}
  .cs-intro,.cs-story-block{grid-template-columns:1fr}
  .cs--standard .cs-lead{max-width:100%;font-size:clamp(1.02rem,1.35vw,1.16rem);line-height:1.7}
  .cs-story-block .cs-block__h{max-width:10ch}
}
@media(max-width:640px){
  .cs--standard > .wrap{max-width:min(100% - 32px,1260px)}
  .cs--standard .cs-cover{aspect-ratio:4/3;margin-top:22px}
  .cs--standard .cs-facts{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .cs-services__list{grid-template-columns:1fr}
  .cs--standard .cs-show__media{max-width:calc(100vw - 32px)}
}

/* CTA articolo: contenuto centrato e allineato */
.single-cta{text-align:center}
.single-cta .cta__title{margin-inline:auto}
.single-cta__lead{margin-inline:auto}
.single-cta .cta__row{justify-content:center;margin-top:clamp(26px,4vw,46px)}
/* embed video responsive 16:9 */
.cs-embeds{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:8px}
.cs-embed{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000}
.cs-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* link materiali */
.cs-matlinks{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.cs-matlink{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:1px solid var(--rule-strong);border-radius:999px;font-size:.9rem;font-weight:600;color:var(--ink);background:var(--white);transition:background .25s,color .25s,border-color .25s}
.cs-matlink:hover{background:var(--kroma);border-color:var(--kroma);color:var(--white)}
.cs-matlink .ar{transition:transform .25s}
.cs-matlink:hover .ar{transform:translateX(3px)}
/* testimonianza nel caso studio */
.cs-tst{background:var(--kroma-tint);border-radius:20px;padding:clamp(24px,3.6vw,40px);position:relative}
.cs-tst::before{content:"\201C";position:absolute;top:.05em;left:.2em;font-size:5rem;line-height:1;color:var(--kroma);opacity:.18;font-family:Georgia,serif}
.cs-tst .cs-embed{margin-bottom:20px}
.cs-tst__quote{position:relative;font-size:clamp(1.18rem,2.4vw,1.5rem);line-height:1.46;font-weight:500;color:var(--ink);margin:0;border:0;padding:0;font-style:normal;text-wrap:pretty}
.cs-tst__by{margin:16px 0 0;color:var(--ink-soft);font-size:.96rem}
.cs-tst__link{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-weight:600;color:var(--kroma-deep)}
.cs-tst__link:hover{color:var(--kroma)}
/* link cliente */
.cs-clientlinks{display:flex;flex-wrap:wrap;gap:18px;margin:clamp(22px,3vw,34px) 0 0;padding-top:clamp(18px,2.4vw,24px);border-top:1px solid var(--rule-strong)}
.cs-clientlinks a{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--kroma-deep)}
.cs-clientlinks a:hover{color:var(--kroma)}
.cs-clientlinks .cs-clientlinks__social{background:var(--kroma);color:#fff;border-radius:999px;padding:13px 20px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;box-shadow:0 12px 26px rgba(235,94,0,.2)}
.cs-clientlinks .cs-clientlinks__social:hover{background:var(--ink);color:#fff;transform:translateY(-1px)}

/* ===== Portfolio card arricchita (logo/settore/sintesi) + filtri per settore ===== */
.wcard__logo{position:absolute;top:12px;left:12px;z-index:2;background:#fff;border-radius:10px;padding:6px 9px;box-shadow:0 4px 14px -8px rgba(0,0,0,.4);display:flex;align-items:center}
.wcard__logo img{max-height:30px;max-width:90px;width:auto;height:auto;object-fit:contain;display:block}
.wcard__sector{font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;color:var(--kroma);font-weight:600;white-space:nowrap}
.wcard__bar{align-items:baseline;gap:10px;justify-content:space-between}
.wcard__synth{margin:8px 0 0;font-size:.92rem;line-height:1.45;color:var(--grey);text-wrap:pretty}
/* barre filtri: due righe (settore + servizio) */
.work-filter{margin-bottom:12px}
.work-filter--sector{margin-bottom:8px}
.work-filter__lbl{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:var(--grey);margin-right:4px}

/* Fix visivi mirati richiesti dal cliente */
.wcard__logo{display:none!important}
.postid-139 .cs-cover{background:#25341f}
.postid-139 .cs-cover img{object-fit:contain;object-position:center;background:#25341f}
body.page-id-1230 .page-hero .hero__cta,
body.page-id-1231 .page-hero .hero__cta,
body.page-id-1232 .page-hero .hero__cta,
body.page-id-1233 .page-hero .hero__cta,
body.page-id-1234 .page-hero .hero__cta{
  padding-bottom:clamp(24px,3.6vw,48px);
}

/* ============================================================
   TESTIMONIANZE — CPT modulare [kroma_testimonianze]
   ============================================================ */
.tmwrap{margin-top:clamp(8px,1.4vw,16px)}
.tmgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:clamp(16px,2vw,24px);margin-top:clamp(16px,2vw,24px)}
.tmgrid--featured{grid-template-columns:repeat(auto-fit,minmax(380px,1fr));margin-bottom:clamp(20px,3vw,32px)}
.tmcard{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--rule-strong);border-radius:18px;overflow:hidden;transition:transform .3s var(--soft),box-shadow .3s var(--soft),border-color .3s var(--soft)}
.tmcard:hover{transform:translateY(-3px);box-shadow:0 18px 44px -26px rgba(0,0,0,.4)}
.tmcard--feat{border-color:var(--kroma);background:var(--kroma-tint)}
.tmcard.is-hidden{display:none}
/* paginazione "carica 6 alla volta" sui video (richiesta cliente) */
.tmgrid--video .tmcard.tm-paged{display:none}
.tmmore{display:none!important}
.tmload-sentinel{height:1px;margin:clamp(18px,3vw,34px) 0 0}
.tmcard__video{position:relative;aspect-ratio:9/16;background:transparent}
.tmcard__video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.tmcard__video--youtube{overflow:hidden}
.tmcard__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tmcard__ytbtn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:62px;height:62px;border:0!important;border-radius:50%;background:transparent!important;color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:none!important;outline:0!important;padding:0;transition:transform .24s var(--soft)}
.tmcard__ytbtn:hover,.tmcard__ytbtn:focus-visible{transform:translate(-50%,-50%) scale(1.06);background:transparent!important;outline:0!important}
.tmcard__ytbtn .vcard__ico{display:grid;place-items:center;line-height:0}
.tmcard__ytbtn .vcard__ico::after{display:block;margin:0 0 0 4px}
.tmcard__video--youtube.is-playing .tmcard__poster,
.tmcard__video--youtube.is-playing .tmcard__ytbtn{display:none}
.tmcard__video--youtube.is-playing iframe{z-index:2}
.tmcard__photo{aspect-ratio:16/10;overflow:hidden;background:var(--off)}
.tmcard__photo img{width:100%;height:100%;object-fit:cover;display:block}
.tmcard__body{display:flex;flex-direction:column;gap:10px;padding:clamp(18px,2.2vw,26px);flex:1}
.tmcard__quote{margin:0;border:0;padding:0;font-size:clamp(1rem,1.4vw,1.12rem);line-height:1.5;color:var(--ink);font-style:normal;text-wrap:pretty}
.tmcard__quote::before{content:"\201C";color:var(--kroma);font-weight:700;margin-right:2px}
.tmcard__quote::after{content:"\201D";color:var(--kroma);font-weight:700;margin-left:1px}
.tmcard__by{margin:2px 0 0;color:var(--ink);font-size:.96rem}
.tmcard__role{color:var(--grey);font-weight:400}
.tmcard__source{margin:0;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--grey)}
.tmcard__source a{color:var(--kroma-deep);text-decoration:underline}
.tmcard__svc{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0;padding:0}
.tmcard__svc li{font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.04em;color:var(--grey);background:var(--off);border:1px solid var(--rule);border-radius:999px;padding:4px 9px;line-height:1}
.tmcard--feat .tmcard__svc li{background:#fff}
.tmcard__cs{margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:.9rem;color:var(--kroma-deep)}
.tmcard__cs:hover{color:var(--kroma)}
.tmcard__cs .ar{transition:transform .25s var(--soft)}
.tmcard__cs:hover .ar{transform:translateX(3px)}
@media(max-width:560px){.tmgrid,.tmgrid--featured{grid-template-columns:1fr}}

/* ===== Testimonianze — bottone "Filtri" + pannello a colonna, sezione compatta ===== */
.tmwrap{margin-top:clamp(10px,1.6vw,18px)}
.tmfilters{position:relative;margin:0 0 clamp(16px,2.2vw,24px)}
.tmfilters__toggle{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:1px solid var(--rule-strong);border-radius:999px;background:#fff;font-weight:600;font-size:.9rem;color:var(--ink);cursor:pointer;line-height:1;transition:border-color .25s var(--soft),color .25s var(--soft),background .25s var(--soft)}
.tmfilters__toggle:hover,.tmfilters__toggle[aria-expanded="true"],.tmfilters__toggle.is-active{border-color:var(--kroma);color:var(--kroma);background:#fff}
.tmfilters__count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--kroma);color:#fff;font-size:.7rem;font-weight:700}
.tmfilters__panel{position:absolute;top:calc(100% + 8px);left:0;z-index:40;width:min(92vw,360px);background:#fff;border:1px solid var(--rule-strong);border-radius:16px;box-shadow:0 24px 60px -22px rgba(0,0,0,.4);padding:clamp(16px,2vw,22px)}
.tmfilters__panel[hidden]{display:none}
.tmfilters__group{margin:0 0 16px}
.tmfilters__label{display:block;font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.08em;color:var(--grey);margin:0 0 9px}
.tmfilters__opts{display:flex;flex-wrap:wrap;gap:7px}
.tmfilters__opt{padding:7px 13px;border:1px solid var(--rule-strong);border-radius:999px;background:#fff;font-size:.82rem;color:var(--ink);cursor:pointer;line-height:1;transition:border-color .2s var(--soft),background .2s var(--soft),color .2s var(--soft)}
.tmfilters__opt:hover{border-color:var(--kroma);background:#fff;color:var(--kroma)}
.tmfilters__opt.is-sel{background:var(--kroma);border-color:var(--kroma);color:#fff}
.tmfilters__opt.is-sel:hover{color:#fff}
.tmfilters__actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px;padding-top:14px;border-top:1px solid var(--rule)}
.tmfilters__reset{background:transparent;border:0;color:var(--grey);font-size:.84rem;cursor:pointer;padding:6px 2px;transition:color .2s var(--soft)}
.tmfilters__reset:hover{color:var(--ink);background:transparent}
.tmfilters__apply{font-size:.84rem;padding:9px 18px}
.tmempty{margin:8px 0 0;color:var(--grey);font-size:.95rem}
/* griglia unica: in evidenza accentate ma stessa dimensione (niente card full-width vuota) */
.tmgrid--featured{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));margin-bottom:0}

/* CTA esplicita sulle card servizio (pagina Servizi) */
.scard__cta{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:12px;font-weight:600;font-size:.86rem;color:var(--kroma-deep)}
.scard:hover .scard__cta{color:var(--kroma)}
.scard__cta .ar{transition:transform .25s var(--soft)}
.scard:hover .scard__cta .ar{transform:translateX(3px)}

/* Media nel corpo del caso studio centrati (le gallery .cs-gallery/.cs-mgallery centrano già) */
/* i video del corpo sono spesso reel verticali (width="70%" dalla migrazione): li centriamo e
   limitiamo a una dimensione portrait sensata, mostrando il video INTERO (niente taglio). */
.cs-body video{display:block;width:auto !important;height:auto;max-width:min(100%,360px);max-height:78vh;margin-inline:auto;border-radius:14px;background:#000}
.cs-body > figure{margin-inline:auto;text-align:center}
.cs-body > figure > img{display:inline-block}
.cs-body > p:has(img){text-align:center}
.cs-body > p > img{display:inline-block;margin-inline:auto}

/* Testimonianza: video locale verticale (reel) — box 9:16, riempie esatto (niente bordi neri, niente taglio) */
.tmcard__video--local{aspect-ratio:9/16}
.tmcard__video--local video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:transparent;display:block}
/* gruppo VIDEO: YouTube 9:16 = locali, video a filo card. Le card ABBRACCIANO il contenuto
   (niente stretch) e il testo è clampato con ellissi → niente card con grandi vuoti. */
.tmgrid--video{grid-auto-rows:1fr}
.tmwrap .tmgrid--video{max-width:1180px;margin-inline:auto}
.tmgrid--video .tmcard{height:100%}
.tmgrid--video .tmcard__video{max-height:none}/* niente cap: box esattamente 9:16 → il video riempie, nessuna barra/linea laterale */
.tmgrid--video .tmcard__quote{display:-webkit-box;-webkit-line-clamp:5;line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
/* card video testimonianze uniformi: tutte in tinta Kroma chiara */
.tmgrid--video .tmcard{background:var(--kroma-tint);border-color:var(--kroma)}
.tmgrid--video .tmcard__svc li{background:#fff}
/* due gruppi testimonianze: titoli sezione */
.tmgroup{font-family:var(--disp);font-weight:800;font-size:clamp(1.2rem,2.2vw,1.6rem);letter-spacing:-.02em;margin:clamp(20px,3vw,32px) 0 clamp(14px,1.8vw,18px)}
.tmgroup:first-child{margin-top:clamp(6px,1vw,12px)}
/* gruppo scritte: card più compatte/uniformi */
.tmgrid--text .tmcard__quote{font-size:.98rem}

/* Casi studio modulari: i video stanno in CARD ARANCIONI che occupano tutta la larghezza della sezione,
   col reel verticale centrato dentro. Più video = card impilate full-width. */
.cs-vidgrid{display:grid;grid-template-columns:1fr;gap:clamp(14px,2vw,22px);margin-top:clamp(12px,1.6vw,18px)}
.cs-vid{width:100%;background:var(--kroma);border-radius:18px;padding:clamp(16px,3vw,36px);display:flex;justify-content:center;align-items:center}
.cs-vid video{width:auto;max-width:min(100%,360px);aspect-ratio:9/16;max-height:78vh;object-fit:cover;display:block;border-radius:12px;background:#000}
.cs-reels__viewport{margin-top:clamp(18px,2.4vw,28px)}
.cs-reels__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,28px);align-items:start}
/* L'altezza NON puo' essere un numero fisso: la card va da 241px a 512px di
   larghezza a seconda del viewport, e quel che c'e' dentro l'embed scala con la
   larghezza. Con height:620px le card piu' strette restavano piene a meta' e
   sotto al video compariva la fascia vuota, bianca su Instagram e nera su
   TikTok. Un rapporto invece vale a qualunque larghezza.
   1:1.82 e' il rapporto del video verticale dopo l'ingrandimento che gli fa
   riempire la larghezza della card: vedi le due regole scale() qui sotto. */
.cs-reel{position:relative;background:var(--kroma);border:1px solid var(--rule-strong);border-radius:14px;overflow:hidden;height:auto;aspect-ratio:1/1.82;display:flex;align-items:flex-start;justify-content:center}
.cs-reel iframe{width:100%;min-height:720px;border:0;display:block}
.cs-reel--instagram{background:#050505}
/* Instagram infila il reel verticale dentro un riquadro largo quanto l'embed ma
   alto solo ~1.17 volte: il video 9:16 ci sta dentro in altezza e ai lati
   restano due bande nere. scale() lo ingrandisce fino a fargli riempire la
   larghezza; quel che esce dalla card lo taglia overflow:hidden. Il fattore e'
   indipendente dalla larghezza (il riquadro e' proporzionale), quindi 1.552
   vale a ogni breakpoint. Lo scostamento e' -78px x 1.552, cioe' l'altezza
   dell'intestazione dell'embed una volta ingrandita anche lei. */
.cs-reel--instagram iframe{min-height:780px;transform:translateY(-121px) scale(1.552);transform-origin:top center}
/* Nessun override di height: l'altezza della card e' definita una volta sola
   in .cs-reel. Prima qui c'era height:760px contro i 620px di .cs-reel, quindi
   in un progetto con reel Instagram e TikTok insieme le card risultavano di due
   altezze diverse. */
.cs-reel--tiktok{background:#050505;align-items:flex-start;padding-inline:0}
.cs-reel--tiktok .cs-reel__fallback{background:#050505}
/* Il blockquote di TikTok arriva con padding:20px e un bordo sinistro di 5px:
   45px che stringevano l'iframe a 312px contro i 357px di Instagram. */
.cs-reel--tiktok .tiktok-embed{width:100%!important;max-width:100%!important;min-width:0!important;background:#050505!important;padding:0!important;border:0!important;margin:0!important}
/* min-height a 0: l'altezza la decide lo script di TikTok in base alla larghezza,
   quindi non va forzata o cambia a ogni breakpoint.
   Stesso principio della regola Instagram: TikTok lascia due strisce chiare ai
   lati del video, scale(1.268) le manda fuori dalla card. Il fattore e' piu'
   basso perche' TikTok gia' quasi riempiva la larghezza, ma il suo video e'
   piu' schiacciato (1:1.52), quindi qui l'ingrandimento serve soprattutto a
   coprire l'altezza della card e i lati vengono ritagliati.
   Scostamento -42px x 1.268. */
.cs-reel--tiktok iframe{width:100%;min-height:0;transform:translateY(-53px) scale(1.268);transform-origin:top center}
/* TikTok copre la propria anteprima con una patina nera finche' il video non
   parte. E' UI sua, dentro un iframe di terze parti: verificato aprendo lo
   stesso embed su tiktok.com, dove la patina c'e' identica. Da fuori non si
   rimuove, ma brightness() e' l'inverso esatto di una patina nera: 1.43
   annulla un nero al 30%. Il filtro va tolto appena il video parte, altrimenti
   sbianca la riproduzione: ci pensa is-avviato, messa da site.js al primo
   click sulla card. Instagram non scurisce nulla, quindi qui non c'entra. */
.cs-reel--tiktok iframe{filter:brightness(1.43)}
.cs-reel--tiktok.is-avviato iframe{filter:none}
.cs-reel .instagram-media,.cs-reel .tiktok-embed{width:100%;margin:0 auto!important}
.cs-reel__fallback{position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;font-weight:800;color:#fff;background:var(--kroma)}
.cs-reel > .instagram-media,.cs-reel > .tiktok-embed,.cs-reel > .cs-reel__link{position:relative;z-index:1}
.cs-reel__link{display:flex;width:100%;height:100%;min-height:180px;align-items:center;justify-content:center;padding:24px;text-align:center;font-weight:700;color:var(--kroma-deep)}
.cs-reel__link:hover{color:var(--kroma)}
@media(max-width:980px){.cs-reels__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){
  .cs-reels__grid{grid-template-columns:1fr}
  /* Niente height fissa nemmeno qui: vale l'aspect-ratio di .cs-reel. */
  .cs-reel iframe{min-height:680px}
  .cs-reel--instagram iframe{min-height:820px}
  .cs-reel--tiktok{padding-inline:0}
  .cs-reel--tiktok .tiktok-embed{max-width:100%!important}
  .cs-reel--tiktok iframe{min-height:0}
}

/* Contatti: card con tab (Consulenza / Lavora con noi), form sempre visibili */
.contact-card{background:var(--white);border:1px solid var(--rule-strong);border-radius:20px;padding:clamp(22px,3vw,40px);max-width:960px;box-shadow:0 26px 64px -36px rgba(0,0,0,.32)}
.contact-tabs{display:flex;gap:6px;margin:0 0 clamp(18px,2.4vw,28px);border-bottom:1px solid var(--rule)}
.contact-tab{appearance:none;background:transparent;border:0;border-bottom:2px solid transparent;padding:8px 10px 14px;margin-bottom:-1px;font-family:var(--disp);font-weight:700;font-size:clamp(1rem,1.6vw,1.18rem);color:var(--grey);cursor:pointer;transition:color .25s var(--soft),border-color .25s var(--soft)}
/* niente bg grigio di GeneratePress su hover/focus/active dei tab */
.contact-tab:hover,.contact-tab:focus,.contact-tab:focus-visible,.contact-tab:active{color:var(--ink);background:transparent;box-shadow:none;outline:none}
.contact-tab.is-active{color:var(--kroma);border-bottom-color:var(--kroma)}
.contact-card .contact-panel{max-width:none}
.contact-card .contact__form{margin-top:clamp(14px,1.8vw,22px);max-width:none}
.contact-card .contact__form-title{margin:0 0 14px}
/* form orizzontale: griglia 2 colonne; messaggio/consenso/invio a tutta larghezza */
.contact-card .cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;align-items:start}
.contact-card .cf-field{margin:0;min-width:0}
.contact-card .cf-field>p{margin:0}
.contact-card .cf-field--full{grid-column:1 / -1}
.contact-card .cf-field--submit{margin-top:4px}
.contact-card .cf-field.form-consent{font-size:.85rem;color:var(--grey)}
@media(max-width:560px){.contact-card .cf-grid{grid-template-columns:1fr}}

/* Home blog: i 3 articoli (cover) come CARD distinte, che abbracciano il contenuto */
.section.journal{background:var(--white) !important}
.jcard--cover{background:var(--white);border:1px solid var(--rule);border-radius:16px;overflow:hidden;box-shadow:0 12px 32px -22px rgba(0,0,0,.28);transition:transform .35s var(--soft),box-shadow .35s var(--soft)}
.jcard--cover:hover{transform:translateY(-5px);box-shadow:0 26px 54px -26px rgba(0,0,0,.36)}
.jcard--cover .jcard__media{border-radius:0;margin-bottom:0;aspect-ratio:16/10}
.jcard--cover .jcard__body{border-top:none !important;padding:clamp(16px,2vw,24px)}

/* Servizi — Kroma Agency / "Campagne nazionali": SEZIONE nera full-bleed (data-theme=dark sulla section,
   sempre edge-to-edge senza il trucco 100vw) + freccia Kroma arancione attaccata al BORDO DESTRO del desktop. */
.svc-agency{position:relative;overflow:hidden;background:var(--blue)!important}
.svc-agency::after{content:"";position:absolute;top:8%;bottom:0;right:0;width:clamp(160px,26vw,460px);
  background:url(../img/freccia-kroma.png) right bottom/contain no-repeat;opacity:.78;pointer-events:none}
.svc-agency .partner{position:relative;z-index:1;display:block;background:transparent;border:0;border-radius:0;box-shadow:none;color:#fff;padding:0;max-width:60ch}
.svc-agency .partner::after{display:none} /* niente freccia duplicata sulla card */
.partner__kicker{color:#fff}
.partner__title{color:#fff;font-size:clamp(1.6rem,3vw,2.4rem)}
.partner__text{color:rgba(255,255,255,.82);max-width:60ch}
.partner .hero__cta{display:flex;gap:12px;flex-wrap:wrap}
.partner .btn--ghost{color:#fff;border-color:rgba(255,255,255,.45);background:transparent}
.partner .btn--ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
/* agency band: testo + bottoni un po' più grandi (richiesta cliente) */
.svc-agency .partner__kicker{font-size:.82rem}
.svc-agency .partner__title{font-size:clamp(2rem,3.8vw,3rem)}
.svc-agency .partner__text{font-size:clamp(1.05rem,1.35vw,1.22rem);line-height:1.65}
.svc-agency .partner .hero__cta{gap:14px}
.svc-agency .partner .btn{font-size:1.05rem;padding:16px 28px}
@media(max-width:720px){.svc-agency::after{opacity:.32;width:clamp(120px,42vw,200px)}}

/* Testimonianze scritte: banda full-width arancione (come il vecchio "Cosa scrivono di noi") */
.tmtext-band{background:var(--kroma);width:100vw;margin-left:calc(50% - 50vw);margin-top:clamp(36px,6vw,72px);padding-block:clamp(40px,6vw,80px)}
.tmtext-band__inner{max-width:1180px;margin-inline:auto;padding-inline:clamp(20px,5vw,48px)}
.tmgroup--onaccent{color:#fff;margin-top:0}
.tmtext-band .tmgrid--text{margin-top:clamp(14px,2vw,22px)}

/* Testimonianze: Trustpilot e' un collector, non una lista recensioni */
.trustpilot-reviews{padding-block:clamp(34px,4.6vw,58px);background:var(--off)!important;color:var(--ink)}
.trustpilot-reviews .wrap{max-width:1120px;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(18px,4vw,54px);row-gap:clamp(8px,1.4vw,14px);align-items:center}
.trustpilot-reviews .eyebrow,.trustpilot-reviews .sec-title,.trustpilot-reviews .sec-lead{grid-column:1;margin-bottom:0;color:var(--ink)}
.trustpilot-reviews .eyebrow{color:var(--kroma);margin:0 0 8px!important}
.trustpilot-reviews .eyebrow + .sec-title{margin-top:0!important;margin-bottom:0}
.trustpilot-reviews .sec-title{max-width:22ch;font-size:clamp(2rem,3.6vw,3.05rem)}
.trustpilot-reviews .sec-lead{max-width:58ch;margin-top:clamp(14px,2vw,20px);color:var(--grey)}
.trustpilot-reviews .trustpilot-widget{grid-column:2;grid-row:1 / span 3;justify-self:end;display:flex;align-items:center;justify-content:center;min-height:0;min-width:min(100%,360px);padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.trustpilot-reviews .trustpilot-widget a{display:inline-flex;align-items:center;justify-content:center;gap:.5em;width:auto;min-width:0;padding:13px 22px;border:0;border-radius:5px;background:#00b67a;color:#fff!important;font-family:var(--body);font-size:.95rem;font-weight:600;text-decoration:none;line-height:1;box-shadow:0 18px 40px rgba(0,182,122,.18);transition:transform .25s var(--soft),box-shadow .25s var(--soft),background .25s var(--soft)}
.trustpilot-reviews .trustpilot-widget a:hover,.trustpilot-reviews .trustpilot-widget a:focus-visible{background:#00a66f;transform:translateY(-2px);box-shadow:0 24px 48px rgba(0,182,122,.24)}
.trustpilot-button{grid-column:2;grid-row:1 / span 3;justify-self:end;display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:13px 22px;border:0;border-radius:5px;background:#00b67a;color:#fff!important;font-family:var(--body);font-size:.95rem;font-weight:600;text-decoration:none;line-height:1;box-shadow:0 18px 40px rgba(0,182,122,.18);transition:transform .25s var(--soft),box-shadow .25s var(--soft),background .25s var(--soft)}
.trustpilot-button:hover,.trustpilot-button:focus-visible{background:#00a66f;color:#fff!important;transform:translateY(-2px);box-shadow:0 24px 48px rgba(0,182,122,.24)}
@media(max-width:760px){.trustpilot-reviews .wrap{grid-template-columns:1fr}.trustpilot-reviews .trustpilot-widget,.trustpilot-button{grid-column:auto;grid-row:auto;justify-self:start;min-width:0}.trustpilot-reviews .sec-title{max-width:none}}

/* Contatti: meno spazio vuoto sopra/intorno al form */
#contatti-form{padding-block:clamp(26px,3.5vw,44px) clamp(32px,4.5vw,60px);background:var(--kroma)}
#contatti-form .contact-card{margin-top:0}

/* Singoli servizi: layout editoriale compatto, senza separatori ridondanti */
body.parent-pageid-14 .page-hero{
  padding-block:clamp(94px,9vw,124px) clamp(28px,4vw,46px);
}
body.parent-pageid-14 .page-hero .wrap{
  max-width:1120px;
}
body.parent-pageid-14 .page-hero__title{
  max-width:min(100%,900px);
}
body.parent-pageid-14 .page-hero__lead{
  max-width:48ch;
}
body.parent-pageid-14 .section:not(.faq):not(.cta):has(.wrap > .shead + .sec-lead){
  padding-block:clamp(30px,4vw,54px);
}
body.parent-pageid-14 .section:not(.faq):not(.cta):has(.wrap > .shead + .sec-lead) .wrap{
  display:grid;
  grid-template-columns:minmax(220px,.78fr) minmax(0,1fr);
  gap:clamp(18px,3.6vw,54px);
  align-items:center;
  max-width:1120px;
  border-top:0;
  padding-top:0;
}
body.parent-pageid-14 .section:not(.faq):not(.cta):has(.wrap > .shead + .sec-lead) .shead{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:12px 16px;
  align-items:baseline;
  margin:0;
}
body.parent-pageid-14 .section:not(.faq):not(.cta):has(.wrap > .shead + .sec-lead) .shead h2{
  font-size:clamp(2rem,4.1vw,3.7rem);
  line-height:.94;
  max-width:9ch;
}
body.parent-pageid-14 .section:not(.faq):not(.cta):has(.wrap > .shead + .sec-lead) .shead .num{
  font-size:.68rem;
}
body.parent-pageid-14 .section:not(.faq):not(.cta):has(.wrap > .shead + .sec-lead) .sec-lead{
  max-width:56ch;
  margin:0;
  font-family:var(--body);
  font-size:clamp(1.02rem,1.2vw,1.14rem);
  font-weight:400;
  line-height:1.62;
  letter-spacing:0;
}
body.parent-pageid-14 .section:not(.faq):not(.cta):has(.wrap > .shead + .sec-lead):not([data-theme="dark"]):nth-of-type(odd){
  background:var(--kroma);
}
body.parent-pageid-14 .section:not(.faq):not(.cta):has(.wrap > .shead + .sec-lead):nth-of-type(odd) .shead h2,
body.parent-pageid-14 .section:not(.faq):not(.cta):has(.wrap > .shead + .sec-lead):nth-of-type(odd) .shead .num{
  color:#fff;
}
body.parent-pageid-14 .section:not(.faq):not(.cta):has(.wrap > .shead + .sec-lead):nth-of-type(odd) .sec-lead{
  color:rgba(255,255,255,.9);
}
body.parent-pageid-14 .section:has(.feat-list){
  padding-block:clamp(34px,4.8vw,62px);
  background:var(--kroma);
}
body.parent-pageid-14 .section:has(.feat-list) .wrap{
  display:grid;
  grid-template-columns:minmax(220px,.78fr) minmax(0,1fr);
  gap:clamp(18px,3.6vw,54px);
  align-items:center;
  max-width:1120px;
}
body.parent-pageid-14 .section:has(.feat-list) .shead{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:12px 16px;
  align-items:baseline;
  margin:0;
}
body.parent-pageid-14 .section:has(.feat-list) .shead h2{
  max-width:9ch;
  font-size:clamp(2rem,4.1vw,3.7rem);
  line-height:.94;
  color:#fff;
}
body.parent-pageid-14 .section:has(.feat-list) .shead .num{
  font-size:.68rem;
  color:#fff;
}
body.parent-pageid-14 .section:has(.feat-list) .feat-list{
  border:0;
  margin:0;
}
body.parent-pageid-14 .section:has(.feat-list) .feat-item{
  display:block;
  padding:0;
  border:0;
}
body.parent-pageid-14 .section:has(.feat-list) .feat-item__name{
  max-width:56ch;
  margin:0;
  font-family:var(--body);
  font-size:clamp(1.02rem,1.2vw,1.14rem);
  font-weight:600;
  line-height:1.62;
  letter-spacing:0;
  color:rgba(255,255,255,.92);
}
body.parent-pageid-14 .section.faq{
  padding-block:clamp(38px,5vw,66px);
}
body.parent-pageid-14 .section.faq .wrap,
body.parent-pageid-14 .section.cta .wrap{
  max-width:1120px;
}
body.parent-pageid-14 .section.cta{
  padding-block:clamp(42px,5.5vw,76px);
}
@media(max-width:760px){
  body.parent-pageid-14 .page-hero{
    padding-block:clamp(86px,22vw,108px) clamp(24px,7vw,36px);
  }
  body.parent-pageid-14 .page-hero__title{
    max-width:none;
  }
  body.parent-pageid-14 .section:not(.faq):not(.cta):has(.wrap > .shead + .sec-lead){
    padding-block:clamp(28px,8vw,42px);
  }
  body.parent-pageid-14 .section:not(.faq):not(.cta):has(.wrap > .shead + .sec-lead) .wrap{
    grid-template-columns:1fr;
    gap:14px;
  }
  body.parent-pageid-14 .section:not(.faq):not(.cta):has(.wrap > .shead + .sec-lead) .shead{
    gap:8px 12px;
  }
  body.parent-pageid-14 .section:not(.faq):not(.cta):has(.wrap > .shead + .sec-lead) .shead h2{
    max-width:none;
  }
  body.parent-pageid-14 .section:has(.feat-list){
    padding-block:clamp(30px,8vw,46px);
  }
  body.parent-pageid-14 .section:has(.feat-list) .wrap{
    grid-template-columns:1fr;
    gap:16px;
  }
  body.parent-pageid-14 .section:has(.feat-list) .shead{
    gap:8px 12px;
  }
  body.parent-pageid-14 .section:has(.feat-list) .shead h2{
    max-width:none;
  }
}

/* Alternanza globale post-feedback: sezioni consecutive non devono fondersi sullo stesso fondo. */
body.page-id-14 .section.svc-problem{
  background:var(--off)!important;
  color:var(--ink);
}
body.page-id-14 .svc-problem .eyebrow,
body.page-id-14 .svc-problem .shead h2,
body.page-id-14 .svc-problem .sec-lead{
  color:var(--ink);
}
body.page-id-14 .svc-problem .eyebrow,
body.page-id-14 .svc-problem .shead .more{
  color:var(--kroma);
}
body.page-id-14 .svc-problem .shead .more{
  border-bottom-color:var(--kroma);
}
body.page-id-14 .svc-problem .btn--secondary{
  background:var(--kroma);
  border-color:var(--kroma);
  color:#fff;
}
body.page-id-14 .svc-problem .btn--secondary:hover,
body.page-id-14 .svc-problem .btn--secondary:focus{
  background:var(--ink);
  border-color:var(--ink);
  color:#fff;
}

body.page-id-8 #contatti-form{
  background:var(--off);
  color:var(--ink);
}
body.page-id-8 #contatti-form .contact__aside{
  color:var(--ink);
}
body.page-id-8 #contatti-form .contact__aside .eyebrow{
  color:var(--kroma);
  opacity:1;
}
body.page-id-8 #contatti-form .contact__k{
  color:var(--grey);
}
body.page-id-8 #contatti-form .contact__v{
  color:var(--ink);
}
body.page-id-8 #contatti-form .contact__item{
  border-bottom-color:var(--rule);
}
body.page-id-8 #contatti-form .contact__item:hover .contact__v{
  color:var(--kroma);
}
body.page-id-8 #contatti-form .contact__social a{
  color:var(--ink);
  border-color:var(--rule-strong);
}
body.page-id-8 #contatti-form .contact__social a:hover{
  color:#fff;
  border-color:var(--kroma);
  background:var(--kroma);
}

/* ---- Formazione, corsi ed eventi (Chi siamo) ---- */
.courses__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(18px,2.4vw,30px);margin-top:clamp(18px,2.5vw,32px)}
.ccard{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--rule);border-radius:14px;overflow:hidden;transition:transform .3s var(--soft),box-shadow .3s var(--soft),border-color .3s var(--soft)}
.ccard:hover{transform:translateY(-4px);border-color:rgba(228,100,14,.34);box-shadow:0 18px 44px rgba(20,20,20,.09)}
.ccard__media{overflow:hidden;background:var(--off2);position:relative;line-height:0;border-radius:14px 14px 0 0;aspect-ratio:4/3}
.ccard__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(228,100,14,.18));pointer-events:none}
/* immagini intere, al loro rapporto naturale (niente crop) */
.ccard__media img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .45s var(--soft)}
.ccard:hover .ccard__media img{transform:scale(1.025)}
.ccard__media--fallback{aspect-ratio:4/3;display:flex;align-items:flex-end;justify-content:space-between;padding:clamp(18px,2.5vw,28px);background:linear-gradient(135deg,var(--kroma),#ff8a34);color:#fff}
.ccard__mark{font-family:var(--disp);font-weight:800;font-size:clamp(2.8rem,6vw,5rem);line-height:.85;letter-spacing:-.06em}
.ccard__line{width:38%;height:2px;background:rgba(255,255,255,.7);margin-bottom:12px}
.ccard__body{padding:clamp(16px,2vw,22px);display:flex;flex-direction:column;gap:8px}
.ccard__title{font-family:var(--disp);font-weight:700;font-size:clamp(1.1rem,1.6vw,1.3rem);letter-spacing:-.01em;margin:0;line-height:1.2}
.ccard__meta{color:var(--kroma);margin:0}
.ccard__desc{color:var(--grey);line-height:1.55;margin:0;font-size:.98rem}
@media(max-width:680px){
  body.page-id-6 .courses .ccard__media img[src*="tony-robbins-colonia"],
  body.page-id-6 .courses .ccard__media img[src*="emanuele-sacchi-confindustria"]{
    object-position:center top;
  }
}

/* Come lavoriamo — capitoli metodo piu' visuali, ispirati alla reference We Are Social */
body.page-id-13 .process-band{
  background:var(--kroma);
  color:#fff;
  padding-block:clamp(74px,8.5vw,128px) 0;
  overflow:hidden;
}
body.page-id-13 .process-band .wrap{
  max-width:none;
  padding-inline:0;
}
body.page-id-13 .process-band__head{
  max-width:var(--maxw);
  margin:0 auto clamp(42px,5.5vw,78px);
  padding-inline:var(--gut);
  grid-template-columns:minmax(0,.9fr) minmax(300px,.52fr);
  align-items:end;
}
body.page-id-13 .process-band__title{
  color:#fff;
  font-size:clamp(3.6rem,8vw,8.5rem);
  line-height:.86;
  max-width:9.5ch;
}
body.page-id-13 .process-band__lead{
  color:rgba(255,255,255,.9);
  font-size:clamp(1.08rem,1.55vw,1.34rem);
  line-height:1.55;
  max-width:38ch;
}
body.page-id-13 .process-band .process-steps{
  display:block;
  overflow:visible;
}
body.page-id-13 .process-band .process-step{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(340px,.76fr);
  gap:clamp(34px,6vw,96px);
  align-items:center;
  min-height:clamp(560px,72vh,760px);
  margin:0;
  padding:clamp(54px,7vw,112px) max(var(--gut),calc((100vw - var(--maxw))/2 + var(--gut)));
  border-top:1px solid rgba(20,20,20,.12);
  overflow:hidden;
}
body.page-id-13 .process-band .process-step:nth-child(odd){
  background:var(--off);
  color:var(--ink);
}
body.page-id-13 .process-band .process-step:nth-child(even){
  grid-template-columns:minmax(340px,.76fr) minmax(0,.92fr);
  background:var(--kroma);
  color:#fff;
  border-top-color:rgba(255,255,255,.28);
}
body.page-id-13 .process-band .process-step:nth-child(even) .process-step__media{order:0}
body.page-id-13 .process-band .process-step:nth-child(even) .process-step__body{order:2}
body.page-id-13 .process-band .process-step::after{
  content:"";
  position:absolute;
  right:-10vw;
  bottom:-15vw;
  width:clamp(250px,34vw,560px);
  aspect-ratio:1;
  border:2px solid currentColor;
  border-radius:50%;
  opacity:.12;
  pointer-events:none;
}
body.page-id-13 .process-band .process-step__media{
  aspect-ratio:4/5;
  max-height:min(72vh,680px);
  border-radius:0;
  box-shadow:none;
  transform:rotate(-1.4deg);
}
body.page-id-13 .process-band .process-step:nth-child(even) .process-step__media{transform:rotate(1.4deg)}
body.page-id-13 .process-band .process-step__media img{filter:saturate(1.05) contrast(1.03)}
body.page-id-13 .process-band .process-step__body{position:relative;z-index:1;max-width:640px}
body.page-id-13 .process-band .process-step__num{
  color:currentColor;
  opacity:.72;
  font-size:clamp(.78rem,1vw,.96rem);
  letter-spacing:.14em;
  margin-bottom:clamp(18px,2.4vw,30px);
}
body.page-id-13 .process-band .process-step:nth-child(odd) .process-step__num{
  color:var(--kroma);
  opacity:1;
}
body.page-id-13 .process-band .process-step__title{
  color:currentColor;
  font-size:clamp(3rem,7vw,7.9rem);
  line-height:.86;
  max-width:8.6ch;
  margin-bottom:clamp(20px,3vw,34px);
  text-shadow:none;
}
body.page-id-13 .process-band .process-step__text{
  color:currentColor;
  opacity:.86;
  font-size:clamp(1.08rem,1.5vw,1.34rem);
  line-height:1.56;
  max-width:39ch;
}
body.page-id-13 .process-band .process-step:nth-child(odd) .process-step__text{
  color:var(--grey);
  opacity:1;
}
body.page-id-13 .process-band .process-step:hover .process-step__media,
body.page-id-13 .process-band .process-step:nth-child(even):hover .process-step__media{
  transform:rotate(0deg) scale(1.025);
}
html.js body.page-id-13 .process-band .process-step.reveal:not(.in) .process-step__media{
  opacity:0;
  transform:translateX(-74px) rotate(-2deg);
}
html.js body.page-id-13 .process-band .process-step.reveal:not(.in) .process-step__body{
  opacity:0;
  transform:translateX(74px);
}
html.js body.page-id-13 .process-band .process-step:nth-child(even).reveal:not(.in) .process-step__media{
  transform:translateX(74px) rotate(2deg);
}
html.js body.page-id-13 .process-band .process-step:nth-child(even).reveal:not(.in) .process-step__body{
  transform:translateX(-74px);
}
@media(max-width:880px){
  body.page-id-13 .process-band{padding-block:clamp(54px,12vw,82px) 0}
  body.page-id-13 .process-band__head{
    grid-template-columns:1fr;
    gap:20px;
  }
  body.page-id-13 .process-band .process-step,
  body.page-id-13 .process-band .process-step:nth-child(even){
    grid-template-columns:1fr;
    min-height:auto;
    padding:clamp(48px,12vw,76px) var(--gut);
  }
  body.page-id-13 .process-band .process-step:nth-child(even) .process-step__media,
  body.page-id-13 .process-band .process-step:nth-child(even) .process-step__body{order:initial}
  body.page-id-13 .process-band .process-step__media{
    aspect-ratio:16/10;
    max-height:none;
    transform:none;
  }
  body.page-id-13 .process-band .process-step__title{
    font-size:clamp(2.8rem,14vw,5.1rem);
    max-width:10ch;
  }
}

/* Servizi — meno muro di testo, piu' orientamento visivo e movimento */
body.page-id-14 .svc-hero__media{
  border-radius:22px;
  box-shadow:0 34px 90px rgba(20,20,20,.24);
  transform:none;
}
body.page-id-14 .svc-hero__media img{
  content:url("https://kromastudio.sviluppo.host/wp-content/uploads/2025/10/problemi-soluzioni-gestione-social-1300x650.jpg");
  object-position:center center;
  filter:saturate(1.08) contrast(1.04);
}
body.page-id-14 .svc-hero-band .svc-hero::after{
  display:none;
}
/* Hero Servizi: illustrazione come SFONDO della hero (non più card a destra),
   copy leggibile a sinistra grazie allo scrim arancione che sfuma verso destra. */
body.page-id-14 .section.svc-hero-band{
  background:
    linear-gradient(90deg, var(--kroma) 0%, var(--kroma) 32%, rgba(228,100,14,.74) 54%, rgba(228,100,14,.20) 100%),
    url("https://kromastudio.sviluppo.host/wp-content/uploads/2025/10/problemi-soluzioni-gestione-social-1300x650.jpg") center right / cover no-repeat,
    var(--kroma) !important;
  min-height:clamp(360px,40vw,500px);
}
body.page-id-14 .svc-hero{grid-template-columns:1fr;min-height:inherit}
body.page-id-14 .svc-hero__text{max-width:600px}
body.page-id-14 .svc-hero__media{display:none}
@media(max-width:820px){
  body.page-id-14 .section.svc-hero-band{
    background:
      linear-gradient(180deg, var(--kroma) 0%, var(--kroma) 48%, rgba(228,100,14,.78) 76%, rgba(228,100,14,.40) 100%),
      url("https://kromastudio.sviluppo.host/wp-content/uploads/2025/10/problemi-soluzioni-gestione-social-1300x650.jpg") center bottom / cover no-repeat,
      var(--kroma) !important;
    min-height:auto;
  }
  body.page-id-14 .svc-hero__text{max-width:none}
}
body.page-id-14 .svc-problem .svc-cards{
  counter-reset:kroma-services;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.4vw,32px);
  perspective:1400px;
  align-items:stretch;
}
body.page-id-14 .svc-problem .scard{
  counter-increment:kroma-services;
  isolation:isolate;
  min-height:clamp(250px,24vw,330px);
  padding:clamp(24px,2.7vw,34px);
  border:1px solid rgba(228,100,14,.2);
  border-radius:18px;
  background:#fff;
  box-shadow:0 18px 54px rgba(20,20,20,.08);
  transform-style:preserve-3d;
  transition:
    transform .55s var(--expo),
    box-shadow .55s var(--soft),
    border-color .35s var(--soft),
    background .35s var(--soft);
}
body.page-id-14 .svc-problem .scard:nth-child(4n+2),
body.page-id-14 .svc-problem .scard:nth-child(4n+4){
  background:#fff;
}
body.page-id-14 .svc-problem .scard::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:5px;
  background:var(--kroma);
  opacity:1;
  z-index:auto;
  transition:background .35s var(--soft);
}
body.page-id-14 .svc-problem .scard::after{
  content:counter(kroma-services,decimal-leading-zero);
  position:absolute;
  right:18px;
  bottom:12px;
  font-family:var(--disp);
  font-size:clamp(4rem,8vw,7.5rem);
  font-weight:800;
  line-height:.8;
  letter-spacing:-.07em;
  color:rgba(228,100,14,.09);
  pointer-events:none;
  transition:transform .55s var(--expo),color .35s var(--soft);
}
body.page-id-14 .svc-problem .scard:nth-child(3n+2),
body.page-id-14 .svc-problem .scard:nth-child(3n+3){
  transform:none; /* card dritte e allineate (richiesta cliente) */
}
body.page-id-14 .svc-problem .scard:hover,
body.page-id-14 .svc-problem .scard:focus-visible{
  border-color:rgba(228,100,14,.5);
  /* in hover NON si muove/ingrandisce nulla: solo la riga arancione si allunga */
}
body.page-id-14 .svc-problem .scard:nth-child(3n+2):hover,
body.page-id-14 .svc-problem .scard:nth-child(3n+2):focus-visible{
  transform:none;
}
body.page-id-14 .svc-problem .scard:hover::before,
body.page-id-14 .svc-problem .scard:focus-visible::before{
  opacity:1;
}
/* COLORI DECISI alternati (niente sfumato) — slogan escluso */
body.page-id-14 .svc-problem .scard:nth-child(3n+1):not(.scard--slogan){background:#fff}
body.page-id-14 .svc-problem .scard:nth-child(3n+2):not(.scard--slogan){background:var(--off)}
body.page-id-14 .svc-problem .scard:nth-child(3n+3):not(.scard--slogan){background:var(--kroma-tint)}
body.page-id-14 .svc-problem .scard:nth-child(3n+2):not(.scard--slogan)::before{background:var(--ink)}
body.page-id-14 .svc-problem .scard:nth-child(3n+3):not(.scard--slogan)::before{background:var(--blue)}
/* "Hai un problema diverso?" occupa l'intera riga, staccata dalle card sopra */
body.page-id-14 .svc-problem .scard--slogan{grid-column:1 / -1;min-height:clamp(150px,16vw,210px);margin-top:clamp(20px,3.2vw,44px)}
body.page-id-14 .svc-problem .scard:hover::after,
body.page-id-14 .svc-problem .scard:focus-visible::after{
  transform:none;
}
body.page-id-14 .svc-problem .scard__code{
  position:relative;
  width:max-content;
  padding:8px 11px;
  border:1px solid rgba(228,100,14,.22);
  border-radius:999px;
  color:var(--kroma);
  background:rgba(228,100,14,.08);
}
body.page-id-14 .svc-problem .scard__q{
  position:relative;
  font-size:clamp(1.22rem,1.72vw,1.58rem);
  line-height:1.08;
  max-width:22ch;
  text-wrap:balance;
}
body.page-id-14 .svc-problem .scard__desc{
  position:relative;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-size:clamp(.94rem,1vw,1.02rem);
  line-height:1.52;
}
body.page-id-14 .svc-problem .scard:hover .scard__desc,
body.page-id-14 .svc-problem .scard:focus-visible .scard__desc{
  -webkit-line-clamp:3;
}
body.page-id-14 .svc-problem .scard__svc,
body.page-id-14 .svc-problem .scard__cta{
  position:relative;
  width:max-content;
  margin-top:auto;
  padding-top:0;
  color:var(--kroma);
  font-weight:800;
}
body.page-id-14 .svc-problem .scard__svc::after,
body.page-id-14 .svc-problem .scard__cta::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-6px;
  height:2px;
  background:currentColor;
  transform-origin:left;
  transform:scaleX(.35);
  transition:transform .35s var(--expo);
}
body.page-id-14 .svc-problem .scard:hover .scard__svc::after,
body.page-id-14 .svc-problem .scard:hover .scard__cta::after{
  transform:scaleX(1);
}
body.page-id-14 .svc-problem .scard.scard--slogan,
body.page-id-14 .svc-problem .scard.scard--slogan:hover,
body.page-id-14 .svc-problem .scard.scard--slogan:focus-visible{
  background:var(--kroma);
  border-color:var(--kroma);
  color:#fff;
}
body.page-id-14 .svc-problem .scard.scard--slogan::before{
  display:none;
}
body.page-id-14 .svc-problem .scard.scard--slogan::after{
  color:rgba(255,255,255,.16);
}
body.page-id-14 .svc-problem .scard--slogan .scard__cta{color:#fff}
body.page-id-14 .svc-problem .scard.scard--slogan:hover{
  transform:none;
}
@media(prefers-reduced-motion:reduce){
  body.page-id-14 .svc-hero__media,
  body.page-id-14 .svc-problem .scard,
  body.page-id-14 .svc-problem .scard:nth-child(3n+2),
  body.page-id-14 .svc-problem .scard:nth-child(3n+3),
  body.page-id-14 .svc-problem .scard:hover,
  body.page-id-14 .svc-problem .scard:focus-visible{
    transform:none;
  }
}
@media(max-width:980px){
  body.page-id-14 .svc-problem .svc-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
  body.page-id-14 .svc-hero__media{transform:none}
  body.page-id-14 .svc-problem .svc-cards{grid-template-columns:1fr}
  body.page-id-14 .svc-problem .scard,
  body.page-id-14 .svc-problem .scard:nth-child(3n+2),
  body.page-id-14 .svc-problem .scard:nth-child(3n+3){
    min-height:0;
    transform:none;
  }
}

/* Servizi — KSA: identita blu dedicata + CTA coerenti con la home */
body.page-id-14 .svc-agency{
  --ksa-blue:#051BF9; /* blu kroma (richiesta cliente) */
  position:relative;
  isolation:isolate;
  padding-block:clamp(72px,8vw,110px);
  background:
    radial-gradient(circle at 82% 28%, rgba(255,255,255,.18), transparent 30%),
    linear-gradient(135deg, var(--ksa-blue) 0%, #0412c4 100%)!important;
  color:#fff;
}
body.page-id-14 .svc-agency::before{
  content:none;
}
body.page-id-14 .svc-agency::after{
  z-index:0;
  opacity:.2;
  filter:brightness(0) invert(1);
  mix-blend-mode:soft-light;
}
body.page-id-14 .svc-agency .wrap,
body.page-id-14 .svc-agency .partner{
  position:relative;
  z-index:1;
}
body.page-id-14 .svc-agency .partner{
  max-width:none;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  backdrop-filter:none;
}
/* 2 colonne: pretitolo+titolo a sinistra, testo+CTA a destra */
body.page-id-14 .svc-agency .partner__body{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  column-gap:clamp(32px,5vw,80px);
  row-gap:clamp(18px,2.4vw,28px);
}
body.page-id-14 .svc-agency .partner__kicker{
  color:rgba(255,255,255,.84);
  letter-spacing:.14em;
}
body.page-id-14 .svc-agency .partner__title{
  max-width:none;
  margin-top:.12em;
  color:#fff;
  font-size:clamp(2.8rem,6vw,5.8rem);
  line-height:.9;
  letter-spacing:-.055em;
}
body.page-id-14 .svc-agency .partner__text{
  max-width:50ch;
  color:rgba(255,255,255,.9);
}
body.page-id-14 .svc-agency .partner .hero__cta{
  margin-top:clamp(22px,3vw,34px);
}
body.page-id-14 .svc-agency .partner .btn,
body.page-id-14 .svc-agency .partner .btn--ghost,
body.page-id-14 .svc-agency .partner .btn--secondary,
body.page-id-14 .svc-agency .partner .btn--accent{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family:var(--body);
  font-weight:600;
  font-size:1.05rem;
  line-height:1;
  padding:17px 30px;
  border:0;
  border-radius:5px;
  background:#fff;
  color:#051BF9; /* bottoni bianchi con scritta blu (richiesta cliente) */
  box-shadow:none;
  transition:background .3s var(--soft),transform .2s var(--soft),box-shadow .3s var(--soft);
}
body.page-id-14 .svc-agency .partner .btn:hover,
body.page-id-14 .svc-agency .partner .btn:focus{
  background:#fff;
  color:#051BF9;
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(0,0,0,.20);
}
body.page-id-14 .svc-agency .partner .btn .ar{
  transition:transform .3s var(--soft);
}
body.page-id-14 .svc-agency .partner .btn:hover .ar{
  transform:translateX(5px);
}
@media(max-width:820px){
  body.page-id-14 .svc-agency .partner__body{
    grid-template-columns:1fr;
    row-gap:clamp(16px,4vw,24px);
  }
}

.postid-139 .cs-cover:hover img{transform:none;filter:none}

/* Le cover dei singoli portfolio usano spesso grafiche quadrate/logo:
   mostriamo l'immagine intera invece di tagliarla nel box panoramico. */
.single-portfolio-item .cs-cover{background:var(--off)}
.single-portfolio-item .cs-cover img{
  object-fit:contain;
  object-position:center;
  background:var(--off);
}
.single-portfolio-item .cs-cover:hover img{
  transform:none;
  filter:none;
}

/* Card di riempimento: completano le griglie senza alterare i contenuti CMS. */
.scard--filler{
  background:var(--ink)!important;
  color:#fff;
  border-color:var(--ink)!important;
}
.scard--filler .scard__q,
.scard--filler .scard__desc,
.scard--filler .scard__svc,
.scard--filler .scard__cta{color:#fff}
.scard--filler .scard__desc{color:rgba(255,255,255,.78)}
.scard--filler .scard__svc{border-color:var(--kroma);color:var(--kroma)}
.scard--filler::after{color:rgba(255,255,255,.08)}

.wcard--filler .wcard__filler{
  aspect-ratio:4/3;
  box-sizing:border-box;
  overflow:hidden;
  border-radius:var(--r-md);
  background:var(--ink);
  color:#fff;
  padding:clamp(20px,2.4vw,34px);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:clamp(8px,1vw,12px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.wcard__filler-k,
.wcard__filler-cta{
  font-family:var(--mono);
  font-size:.66rem;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.wcard__filler-k{color:var(--kroma)}
.wcard__filler-title{font-family:var(--disp);font-size:clamp(1.55rem,2.1vw,2.18rem);font-weight:800;line-height:1;letter-spacing:-.03em;overflow-wrap:anywhere}
.wcard__filler-text{max-width:32ch;color:rgba(255,255,255,.78);line-height:1.45}
.wcard__filler-cta{color:#fff;margin-top:4px}
.wcard--filler:hover .wcard__filler{background:var(--kroma)}
.wcard--filler:hover .wcard__filler-k{color:#fff}
.wcard--filler:hover .wcard__name{color:var(--kroma)}

/* Singoli progetti: la cover abbraccia l'immagine invece di creare bande vuote laterali. */
.single-portfolio-item .cs-cover{
  width:fit-content;
  max-width:100%;
  aspect-ratio:auto;
  margin-left:auto;
  margin-right:auto;
  background:transparent;
}
.single-portfolio-item .cs-cover img{
  position:static;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:72vh;
  object-fit:contain;
  display:block;
  background:transparent;
}