/* ============================================================
   KROMA STUDIO — site.css
   Sistema visivo globale (porting da home-final, TRIMMED).
   Tagliati: cursore custom, work-cover, hero drift, parallax.
   Le variabili stanno in tokens.css (alias compatti inclusi).
   ============================================================ */
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;overflow-x:clip}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
::selection{background:var(--kroma);color:#fff}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;font-size:.76rem}
.eyebrow{font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;color:var(--kroma)}
em{font-style:normal;color:var(--kroma)}
.ar{display:inline-block;transition:transform .3s var(--soft)}
.magnetic:hover .ar,.link:hover .ar{transform:translateX(5px)}

/* ---- image placeholder (quiet) + real images ---- */
.ph{position:relative;background:var(--off2);overflow:hidden}
.ph[data-label]::after{content:attr(data-label);position:absolute;left:16px;bottom:13px;font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--grey3);z-index:1}
.ph--dark{background:#1a1a1a}
.ph--dark[data-label]::after{color:#6f6f6f}
.ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0}

/* ---- NAV ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;background:transparent;transition:background .3s var(--soft),box-shadow .3s var(--soft)}
/* logo grande a sinistra · social + burger a destra (menu a tendina) */
.nav__main{display:flex;align-items:center;justify-content:space-between;min-height:106px;padding-block:12px;transition:min-height .3s var(--soft),padding-block .3s var(--soft)}
.nav__logo{display:grid;place-items:center}
.nav__logo img{grid-area:1/1;height:86px;width:auto;display:block;transition:height .3s var(--soft),opacity .24s var(--soft)}
.nav__logo-img--white{opacity:0}
body.home .nav:not(.scrolled) .nav__logo-img--orange{opacity:0}
body.home .nav:not(.scrolled) .nav__logo-img--white{opacity:1}
/* allo scroll (TUTTE le pagine): sfondo chiaro + header rimpicciolito */
.nav.scrolled{background:#fff;box-shadow:0 1px 0 var(--rule),0 6px 20px rgba(20,20,20,.06)}
.nav.scrolled .nav__main{min-height:72px;padding-block:8px}
.nav.scrolled .nav__logo img{height:56px}
.nav__right{display:flex;align-items:center;gap:clamp(18px,2.4vw,32px)}
.nav__social{display:flex;align-items:center;gap:14px}
.nav__social a{color:var(--ink);display:inline-flex;transition:color .25s var(--soft),transform .25s var(--soft)}
.nav__social a svg{width:24px;height:24px}
.nav__social a:hover{color:var(--kroma);transform:translateY(-2px)}
.nav__burger{display:flex;flex-direction:column;gap:7px;background:none;border:none;cursor:pointer;padding:8px}
.nav__burger span{width:36px;height:2.5px;background:var(--ink);transition:background .25s var(--soft)}
.nav__burger:hover span,.nav__burger:focus span{background:var(--kroma)}
.mmenu__cta{align-self:flex-start;margin-top:clamp(28px,4vw,44px)}
@media(max-width:860px){.nav__main{min-height:76px}.nav__logo img{height:60px}.nav__social{gap:10px}.nav__social a svg{width:20px;height:20px}.nav__burger span{width:30px}.nav.scrolled .nav__main{min-height:58px}.nav.scrolled .nav__logo img{height:46px}}
@media(max-width:460px){.nav__social{display:none}}

/* ---- BUTTONS ---- */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--body);font-weight:600;font-size:.95rem;line-height:1;padding:13px 22px;border-radius:5px;background:var(--kroma);color:#fff;border:none;cursor:pointer;white-space:nowrap;transition:background .3s var(--soft),transform .2s var(--soft)}
.btn .ar{flex:0 0 auto}
.btn:hover,.btn:focus{background:var(--kroma2);color:#fff}
.btn--accent{background:var(--kroma)}
.btn--accent:hover{background:var(--kroma2)}
.btn--lg{font-size:1.05rem;padding:17px 30px}
.link{font-family:var(--body);font-weight:600;border-bottom:2px solid var(--kroma);padding-bottom:3px;display:inline-flex;align-items:center;gap:.4em}

/* ---- reveal (mask-up + fade) ----
   GATE su html.js + :not(.in): senza JS i contenuti restano VISIBILI (no-JS safe),
   e :not(.in) evita che il gate (specificità più alta) batta lo stato .in. */
.reveal{transition:opacity .7s var(--expo),transform .7s var(--expo)}
html.js .reveal:not(.in){opacity:0;transform:translateY(22px)}
.hero__title .line{display:block;overflow:hidden}
.hero__title .line>span{display:block;transition:transform .9s var(--expo)}
html.js .hero__title:not(.in) .line>span{transform:translateY(105%)}
.hero__title.in .line:nth-child(1)>span{transition-delay:.05s}
.hero__title.in .line:nth-child(2)>span{transition-delay:.15s}
.hero__title.in .line:nth-child(3)>span{transition-delay:.25s}
@media (prefers-reduced-motion:reduce){
  .reveal,.hero__title .line>span{opacity:1!important;transform:none!important;transition:none!important}
}

/* ---- HERO ---- */
/* 100dvh dopo 100vh: su mobile 100vh include la barra del browser, quindi
   quando si ritrae durante lo scroll la hero cambia altezza e la pagina
   salta. I browser che non conoscono dvh ignorano la seconda riga. */
.hero{position:relative;min-height:100vh;min-height:100dvh;display:flex;align-items:flex-end;overflow:hidden;background:var(--kroma)}
.hero__media{position:absolute;inset:0}
/* overlay scuro rimosso: il video si vede pieno. Ombra leggera sul testo per leggibilità. */
.hero__in{position:relative;z-index:2;width:100%;padding-bottom:clamp(36px,5vw,64px);padding-top:120px;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.hero__top{margin-bottom:auto}
.hero .eyebrow{color:#fff;opacity:.78}
.hero__title{font-family:var(--disp);font-weight:800;font-size:clamp(2.8rem,9.5vw,8.4rem);line-height:.95;letter-spacing:-.04em;color:#fff;margin:22px 0 0}
.hero__title em{color:var(--kroma)}
.hero__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-top:30px}
.hero__lead{color:rgba(255,255,255,.82);font-size:clamp(1.05rem,1.5vw,1.3rem);max-width:42ch;margin:0}
.hero__meta{display:flex;flex-direction:column;gap:5px;color:rgba(255,255,255,.6);text-align:right}
/* ---- SECTIONS ---- */
.section{padding-block:clamp(64px,9vw,120px)}
/* sezioni alternate per colore (niente righe divisorie) */
.section:not([data-theme="dark"]){background:var(--white)}
.section:nth-of-type(even):not([data-theme="dark"]):not(.press){background:var(--off)}
/* accento ARANCIONE: Parlano di noi */
.section.press{background:var(--kroma)}
.press .shead h2,.press .sec-lead,.press .eyebrow{color:#fff}
.press .eyebrow{display:inline-block;opacity:.85;margin-bottom:6px}
.press .pcard-ext{background:#fff;border-color:transparent}
.press .pcard-ext:hover,.press .pcard-ext:focus-visible{border-color:#fff;box-shadow:0 16px 34px rgba(0,0,0,.18);background:#fff}
.press .btn--secondary{border-color:#fff;color:#fff}
.press .btn--secondary:hover{background:#fff;color:var(--ink)}
/* accento ARANCIONE (Metodo/CTA via data-theme=dark): contrasti interni */
[data-theme="dark"] .sec-lead{color:rgba(255,255,255,.86)}
[data-theme="dark"] .serp__lbl,[data-theme="dark"] .serp__node.is-active .serp__lbl{color:#fff}
[data-theme="dark"] .more{color:rgba(255,255,255,.82)}
[data-theme="dark"]{background:var(--kroma);color:#fff;border-color:rgba(255,255,255,.24)}
.shead{display:flex;align-items:baseline;gap:16px;margin-bottom:clamp(14px,2vw,22px);flex-wrap:wrap}
.shead .num{color:var(--kroma)}
.shead h2{font-family:var(--disp);font-weight:800;font-size:clamp(1.9rem,4vw,3rem);letter-spacing:-.03em;margin:0;line-height:1}
.shead .more{margin-left:auto;color:var(--grey);border-bottom:1px solid currentColor;padding-bottom:3px}
[data-theme="dark"] .shead h2{color:#fff}
@media (max-width:980px){
  body.home .section.metodo .shead,
  body.home .section.work .shead{display:grid;grid-template-columns:1fr;gap:12px;align-items:start}
  body.home .section.metodo .shead .more,
  body.home .section.work .shead .more{margin-left:0;justify-self:start;white-space:nowrap}
}

.statement{font-family:var(--disp);font-weight:700;font-size:clamp(1.9rem,4.2vw,3.2rem);line-height:1.08;letter-spacing:-.03em;max-width:22ch;margin:0}
.statement--dark{color:#fff;margin-bottom:clamp(40px,5vw,64px)}

/* ---- STUDIO ---- */
.studio__grid{display:grid;grid-template-columns:0.95fr 1.05fr;gap:clamp(28px,5vw,72px);align-items:center}
.studio__media{aspect-ratio:4/5;border-radius:6px}
.studio__txt{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.studio__p{color:var(--grey);max-width:46ch;margin:0;font-size:1.08rem;line-height:1.6}
@media(max-width:760px){.studio__grid{grid-template-columns:1fr}.studio__media{aspect-ratio:16/10}}

/* ---- WORK (index) ---- */
.worklist{border-top:1px solid var(--rule)}
.worklist.dimmed .workrow:not(:hover){opacity:.4}
.workrow{display:grid;grid-template-columns:90px 1fr auto;align-items:center;gap:20px;padding:clamp(16px,2.4vw,30px) 0;border-bottom:1px solid var(--rule);transition:opacity .3s var(--soft),padding-left .35s var(--expo)}
.workrow:hover{padding-left:14px}
.workrow__code{color:var(--kroma);font-size:.72rem}
.workrow__name{font-family:var(--disp);font-weight:700;font-size:clamp(1.5rem,3.2vw,2.7rem);letter-spacing:-.03em;line-height:1.04;color:var(--ink);transition:color .3s var(--soft)}
.workrow:hover .workrow__name{color:var(--kroma)}
.workrow__meta{color:var(--grey3);text-align:right;font-size:.68rem}
@media(max-width:680px){.workrow{grid-template-columns:64px 1fr}.workrow__meta{grid-column:2;text-align:left}}

.client-marquee{position:relative;overflow:hidden;border-block:0;padding-block:clamp(24px,3.4vw,44px);margin-top:clamp(24px,4vw,44px);background:var(--kroma)}
.client-marquee::before,.client-marquee::after{content:"";position:absolute;top:0;bottom:0;width:min(14vw,160px);z-index:2;pointer-events:none}
.client-marquee::before{left:0;background:linear-gradient(90deg,var(--kroma),rgba(228,100,14,0))}
.client-marquee::after{right:0;background:linear-gradient(270deg,var(--kroma),rgba(228,100,14,0))}
.client-marquee__track{display:flex;gap:clamp(14px,2vw,22px);width:max-content;animation:kroma-client-marquee 34s linear infinite}
.client-marquee:hover .client-marquee__track,.client-marquee:focus-within .client-marquee__track{animation-play-state:paused}
.client-logo{width:clamp(220px,22vw,300px);min-height:clamp(190px,17vw,240px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:clamp(18px,2.2vw,28px);border:1px solid rgba(20,20,20,.1);border-radius:8px;background:#fff;color:var(--ink);box-shadow:0 14px 34px rgba(20,20,20,.12);transition:transform .35s var(--expo),border-color .25s var(--soft),box-shadow .25s var(--soft)}
.client-logo:hover,.client-logo:focus-visible{transform:translateY(-5px);border-color:rgba(255,255,255,.8);box-shadow:0 22px 48px rgba(20,20,20,.18)}
.client-logo__code{color:var(--kroma);font-size:.72rem}
.client-logo__mark{width:min(260px,90%);height:clamp(125px,11vw,165px);display:flex;align-items:center;justify-content:center}
.client-logo__mark img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;filter:none;transition:filter .25s var(--soft),transform .25s var(--soft)}
.client-logo:hover .client-logo__mark img,.client-logo:focus-visible .client-logo__mark img{filter:none;transform:scale(1.035)}
.client-logo strong{font-family:var(--disp);font-size:clamp(1.35rem,2.1vw,1.9rem);line-height:1;letter-spacing:-.03em;text-align:center;text-wrap:balance}
.client-logo__meta{color:var(--grey3);font-size:.82rem;line-height:1.35;text-align:center;max-width:24ch}
@keyframes kroma-client-marquee{from{transform:translateX(0)}to{transform:translateX(calc(-50% - clamp(7px,1vw,11px)))}}
@media (prefers-reduced-motion:reduce){.client-marquee__track{animation:none;flex-wrap:wrap;width:auto}.client-marquee::before,.client-marquee::after{display:none}}
@media(max-width:680px){.client-marquee{margin-inline:calc(-1*var(--gut));padding-inline:var(--gut);overflow:hidden;touch-action:pan-y}.client-marquee::before,.client-marquee::after{display:none}.client-marquee__track{animation:kroma-client-marquee 34s linear infinite}.client-logo{width:68vw}}

/* ---- SERVICES ---- */
.srv{padding-block:clamp(30px,4vw,56px);border-top:1px solid var(--rule)}
.srv:first-of-type{border-top:none}
.srv__head{display:grid;grid-template-columns:1fr auto;gap:8px 24px;align-items:baseline;margin-bottom:26px}
.srv__head h3{font-family:var(--disp);font-weight:700;font-size:clamp(1.5rem,3vw,2.3rem);letter-spacing:-.025em;margin:0}
.srv__head p{grid-column:1;color:var(--grey);max-width:48ch;margin:0}
.srv__tag{grid-row:1;grid-column:2;color:var(--grey3);align-self:start}
.srv__row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.srv__thumb{aspect-ratio:4/3;border-radius:5px}
@media(max-width:760px){.srv__head{grid-template-columns:1fr}.srv__tag{grid-row:auto;grid-column:1}.srv__row{grid-auto-flow:column;grid-auto-columns:62%;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1*var(--gut));padding-inline:var(--gut)}.srv__thumb{scroll-snap-align:start}}

/* ---- METHOD ---- */
.method__steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px)}
.mstep{border-top:1px solid rgba(255,255,255,.28);padding-top:18px}
.mstep__n{color:#fff;font-size:.72rem;opacity:.82}
.mstep h4{font-family:var(--disp);font-weight:700;font-size:1.15rem;margin:12px 0 6px;color:#fff}
.mstep p{margin:0;font-size:.92rem;color:rgba(255,255,255,.82);line-height:1.5}
.method__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:clamp(40px,5vw,64px);padding-top:clamp(30px,4vw,48px);border-top:1px solid rgba(255,255,255,.28)}
.stat{display:flex;flex-direction:column;gap:8px}
.stat__n{font-family:var(--disp);font-weight:800;font-size:clamp(2.4rem,4.5vw,3.6rem);letter-spacing:-.03em;line-height:1;color:#fff}
.stat__l{color:rgba(255,255,255,.82)}
@media(max-width:820px){.method__steps,.method__stats{grid-template-columns:1fr 1fr;gap:30px 24px}}

/* ---- QUOTE ---- */
.quote{background:var(--off)}
.quote blockquote{font-family:var(--disp);font-weight:700;font-size:clamp(1.7rem,3.8vw,2.9rem);line-height:1.18;letter-spacing:-.025em;max-width:24ch;margin:0}
.quote__by{color:var(--grey);margin-top:24px}

/* ---- CONTACT ---- */
.contact__mail{display:block;font-family:var(--disp);font-weight:800;font-size:clamp(2.2rem,8vw,6rem);letter-spacing:-.04em;line-height:1;margin:18px 0 clamp(32px,5vw,56px);transition:color .3s;word-break:break-word}
.contact__mail:hover{color:var(--kroma)}
.contact__row{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.contact__info{display:flex;gap:48px;flex-wrap:wrap}
.contact__info div{display:flex;flex-direction:column;gap:6px}
.contact__info .k{color:var(--grey3)}
.contact__info .v{font-family:var(--disp);font-weight:600;font-size:1.15rem;letter-spacing:-.01em}

/* ---- FOOTER ---- */
.footer{background:var(--kroma);color:#fff;padding-block:clamp(48px,6vw,80px) 36px}
.footer__top{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:clamp(30px,5vw,72px)}
.footer__logo{height:64px;width:auto}
.footer__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.6vw,40px)}
@media(max-width:760px){.footer__top{grid-template-columns:1fr}.footer__cols{grid-template-columns:1fr 1fr;gap:clamp(22px,5vw,32px)}}
.footer__col{display:flex;flex-direction:column;gap:9px}
.footer__col .mono{color:rgba(255,255,255,.68);margin-bottom:5px}
.footer__col a{color:rgba(255,255,255,.84);font-size:.95rem}
.footer__col a span{display:block}
.footer__col a:hover{color:#fff}
.footer__big{font-family:var(--disp);font-weight:900;font-size:clamp(4rem,18vw,15rem);letter-spacing:-.05em;line-height:.8;margin:clamp(30px,5vw,60px) 0 24px;display:flex;align-items:flex-end}
.footer__big span{color:#fff;font-size:.4em;margin-bottom:.35em}
.footer__col .footer__meta{color:rgba(255,255,255,.84);font-size:.95rem}
.footer__fesr{display:flex;align-items:center;gap:clamp(18px,3vw,34px);flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.28);padding-top:clamp(24px,3vw,34px);margin-top:clamp(36px,5vw,56px)}
.footer__fesr-logo{height:54px;width:auto;background:#fff;padding:8px 12px;border-radius:6px;flex:0 0 auto}
.footer__fesr-text{color:rgba(255,255,255,.76);font-size:.82rem;line-height:1.5;flex:1;min-width:0;max-width:none}
.footer__fesr-text p{margin:0 0 6px}
.footer__fesr-text strong{color:#fff}
.footer__fesr-text em{color:#fff}/* niente arancione nel footer: la data resta visibile (bianca) */
.footer__legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:rgba(255,255,255,.76);border-top:1px solid rgba(255,255,255,.28);padding-top:22px;margin-top:24px}

/* ---- JOURNAL (home blog) ---- */
.journal__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,34px)}
.jcard{display:flex;flex-direction:column;gap:12px;padding-top:20px;border-top:2px solid var(--kroma);transition:border-color .3s var(--soft)}
.jcard:hover{border-color:var(--kroma)}
.jcard__date{color:var(--grey3)}
.jcard__title{font-family:var(--disp);font-weight:700;font-size:1.3rem;letter-spacing:-.02em;line-height:1.18;margin:0;transition:color .3s var(--soft)}
.jcard:hover .jcard__title{color:var(--kroma)}
.jcard__ex{color:var(--grey);font-size:.95rem;margin:0;flex:1}
/* variante con cover immagine (home blog, più peso visivo) */
.jcard--cover{border-top:none;padding-top:0;gap:0}
.jcard--cover:hover{border-color:transparent}
.jcard__media{display:block;aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:var(--rule);margin-bottom:16px}
.jcard__img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--soft)}
.jcard--cover:hover .jcard__img{transform:scale(1.03)}
.jcard__media--ph{background:linear-gradient(135deg,var(--off),var(--rule))}
.jcard__body{display:flex;flex-direction:column;gap:10px;flex:1;border-top:2px solid var(--kroma);padding-top:14px;transition:border-color .3s var(--soft)}
.jcard--cover:hover .jcard__body{border-color:var(--kroma)}
.jcard__meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.jcard__cat{color:var(--kroma);font-size:.62rem;text-transform:uppercase;letter-spacing:.06em}
.jcard__cat::after{content:"·";margin-left:10px;color:var(--grey-300)}
@media(max-width:820px){.journal__grid{grid-template-columns:1fr;gap:0}.jcard{padding-block:22px;border-top-width:1px}.jcard--cover{padding-block:0;border-top:none}.journal__grid:has(.jcard--cover){gap:clamp(20px,5vw,34px)}}

/* altri articoli — lista link testuale leggera sotto le 3 card */
.journal__more{list-style:none;margin:clamp(26px,3.5vw,42px) 0 0;padding:0}
.journal__more li{border-top:1px solid var(--rule)}
.journal__more li:last-child{border-bottom:1px solid var(--rule)}
.journal__more a{display:grid;grid-template-columns:230px 1fr auto;align-items:baseline;gap:clamp(14px,2.2vw,30px);padding:15px 0;text-decoration:none;color:inherit;transition:padding-left .3s var(--soft)}
.journal__more a:hover{padding-left:10px}
.jmore__meta{display:flex;gap:10px;align-items:baseline;font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.05em;color:var(--grey-300);white-space:nowrap}
.jmore__cat{color:var(--kroma)}
.jmore__title{font-family:var(--disp);font-weight:600;font-size:clamp(1rem,1.4vw,1.16rem);letter-spacing:-.01em;color:var(--ink);line-height:1.25;transition:color .3s var(--soft)}
.journal__more a:hover .jmore__title{color:var(--kroma)}
.journal__more .ar{color:var(--grey-300);transition:transform .3s var(--expo),color .3s var(--soft)}
.journal__more a:hover .ar{color:var(--kroma);transform:translateX(5px)}
@media(max-width:640px){
  .journal__more a{grid-template-columns:1fr auto;gap:4px 14px}
  .jmore__meta{grid-column:1/-1;order:-1}
}

/* ---- mobile menu ---- */
.mmenu{position:fixed;inset:0;z-index:300;background:var(--off);color:var(--ink);display:flex;flex-direction:column;justify-content:center;padding:var(--gut)}
.mmenu[hidden]{display:none}
.mmenu__logo{position:absolute;top:clamp(18px,3.5vh,34px);left:var(--gut);z-index:2;display:inline-flex}
.mmenu__logo img{height:clamp(48px,6vh,64px);width:auto;display:block}
.mmenu__close{position:absolute;top:clamp(20px,4vh,40px);right:var(--gut);left:auto;z-index:2;padding:0;background:none;border:none;color:var(--ink);font-size:1.8rem;cursor:pointer;line-height:1}
.mmenu__close:hover{color:var(--kroma);transform:rotate(90deg)}
.mmenu__links{display:flex;flex-direction:column;gap:10px;list-style:none;margin:0;padding:0}
.mmenu__links li{list-style:none;margin:0}
.mmenu__links li::marker{content:""}
.mmenu__links a{font-family:var(--disp);font-weight:800;font-size:2.4rem;letter-spacing:-.03em}
/* la voce corrente (es. Home) non deve restare "selezionata": resta come le altre */
.mmenu__links a[aria-current],.mmenu__links .current-menu-item>a,.mmenu__links .current_page_item>a{background:none;color:var(--kroma)}
.mmenu__links a:hover,.mmenu__links a[aria-current]:hover{color:var(--kroma);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.12em}
.mmenu__links,.mmenu__cta{position:relative;z-index:1}
.mmenu__arrow{position:absolute;right:0;top:50%;transform:translateY(-50%);width:clamp(300px,34vw,540px);height:auto;pointer-events:none;z-index:0}
@media(max-width:900px){.mmenu__arrow{display:none}}
/* ---- animazione apertura menu: voci in stagger + freccia che entra da destra ---- */
.mmenu__logo,.mmenu__links li,.mmenu__cta{opacity:0;transform:translateY(22px);transition:opacity .5s var(--soft),transform .5s var(--soft)}
.mmenu__arrow{opacity:0;transform:translateY(-50%) translateX(80px);transition:opacity .6s var(--soft),transform .6s var(--soft)}
.mmenu.is-open .mmenu__logo,.mmenu.is-open .mmenu__links li,.mmenu.is-open .mmenu__cta{opacity:1;transform:none}
.mmenu.is-open .mmenu__arrow{opacity:1;transform:translateY(-50%) translateX(0)}
.mmenu.is-open .mmenu__logo{transition-delay:.05s}
.mmenu.is-open .mmenu__arrow{transition-delay:.1s}
.mmenu.is-open .mmenu__links li:nth-child(1){transition-delay:.12s}
.mmenu.is-open .mmenu__links li:nth-child(2){transition-delay:.18s}
.mmenu.is-open .mmenu__links li:nth-child(3){transition-delay:.24s}
.mmenu.is-open .mmenu__links li:nth-child(4){transition-delay:.30s}
.mmenu.is-open .mmenu__links li:nth-child(5){transition-delay:.36s}
.mmenu.is-open .mmenu__links li:nth-child(6){transition-delay:.42s}
.mmenu.is-open .mmenu__links li:nth-child(7){transition-delay:.48s}
.mmenu.is-open .mmenu__cta{transition-delay:.54s}
@media(prefers-reduced-motion:reduce){.mmenu__logo,.mmenu__links li,.mmenu__cta{opacity:1;transform:none;transition:none}.mmenu__arrow{opacity:1;transform:translateY(-50%);transition:none}}

/* ---- skip link / a11y ---- */
.kroma-skip{position:absolute;left:8px;top:8px;transform:translateY(-140%);background:var(--kroma);color:#fff;padding:10px 16px;z-index:9999;transition:transform .2s var(--soft)}
.kroma-skip:focus{transform:none}

/* ============================================================
   HOME CONTENT-FIRST — sezioni costruite sui contenuti reali
   ============================================================ */
/* bottoni extra */
.btn--secondary{background:transparent;color:var(--ink);border:1.5px solid var(--rule-strong)}
.btn--secondary:hover{background:var(--kroma);color:#fff;border-color:var(--kroma)}
.btn--ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.45)}
.btn--ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}

/* intro di sezione (lead sotto lo shead) */
.sec-lead{color:var(--grey);max-width:54ch;font-size:1.08rem;margin:0 0 clamp(28px,4vw,44px)}

/* --- leggibilità: a capo più naturali in italiano (no parole orfane) --- */
.shead h2,.page-hero__title,.hero__title,.intro__title,.cta__title,.statement,
.scard__q,.whycard__t,.pcard-ext__t,.faq__q,.jcard__title,.workrow__name{text-wrap:balance}
.sec-lead,.page-hero__lead,.hero__lead,.intro__lead,.faq__a,.whycard__d,
.qcard__text,.vcard__quote,.tslide__quote,.jcard__ex,.scard__svc{text-wrap:pretty}

/* NUMERI (light) */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px)}
.kpi{border-top:1px solid var(--rule);padding-top:18px}
/* Numeri home: card chiare con angolo tagliato (richiamo geometrico/logo) + numero arancione */
/* Numeri: niente card, numeri molto grandi, in colonna, entrano da destra con rimbalzo + pulsano */
.numbers{position:relative;overflow:hidden}
.numbers__arrow{position:absolute;right:0;top:50%;transform:translateY(-50%);width:clamp(220px,26vw,440px);height:auto;pointer-events:none;z-index:0}
.numbers .kpis{position:relative;z-index:1}
@media(max-width:900px){.numbers__arrow{display:none}}
.numbers .kpis{display:flex;flex-direction:column;gap:clamp(16px,2.6vw,38px)}
.numbers .kpi{display:flex;align-items:baseline;gap:clamp(12px,2vw,28px);flex-wrap:wrap;border:none;background:none;padding:0}
.numbers .kpi__n{font-family:var(--disp);font-weight:800;font-size:clamp(3.4rem,13vw,9.5rem);line-height:.86;letter-spacing:-.04em;color:var(--kroma)}
.numbers .kpi__l{font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;font-size:clamp(.7rem,1.1vw,.95rem);color:var(--grey);margin-top:0}
/* entrata sequenziale da destra con piccolo rimbalzo */
@keyframes kpiSlideIn{
  0%{opacity:0;transform:translateX(72vw)}
  62%{opacity:1}
  82%{opacity:1;transform:translateX(-16px)}
  100%{opacity:1;transform:translateX(0)}
}
@keyframes kpiPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
html.js .numbers .kpi{opacity:0}
.numbers.is-in .kpi{animation:kpiSlideIn .9s cubic-bezier(.22,1,.3,1) both}
.numbers.is-in .kpi:nth-child(1){animation-delay:0s}
.numbers.is-in .kpi:nth-child(2){animation-delay:.3s}
.numbers.is-in .kpi:nth-child(3){animation-delay:.6s}
.numbers.is-in .kpi:nth-child(4){animation-delay:.9s}
.numbers.is-in .kpi__n{animation:kpiPulse 2.6s ease-in-out infinite}
.numbers.is-in .kpi:nth-child(1) .kpi__n{animation-delay:1.1s}
.numbers.is-in .kpi:nth-child(2) .kpi__n{animation-delay:1.5s}
.numbers.is-in .kpi:nth-child(3) .kpi__n{animation-delay:1.9s}
.numbers.is-in .kpi:nth-child(4) .kpi__n{animation-delay:2.3s}
@media(prefers-reduced-motion:reduce){
  html.js .numbers .kpi{opacity:1}
  .numbers.is-in .kpi,.numbers.is-in .kpi__n{animation:none}
}
.kpi__n{font-family:var(--disp);font-weight:800;font-size:clamp(2.4rem,5vw,4rem);letter-spacing:-.03em;line-height:1;color:var(--ink)}
.kpi__l{font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;font-size:.66rem;color:var(--grey);margin-top:10px}
@media(max-width:820px){.kpis{grid-template-columns:1fr 1fr;gap:30px 24px}}

/* LISTA SERVIZI (editoriale, numerata) */
.svc-list{border-top:1px solid var(--rule)}
.svc-row{display:grid;grid-template-columns:64px 1fr auto;align-items:baseline;gap:18px;padding:clamp(16px,2vw,26px) 0;border-bottom:1px solid var(--rule);transition:padding-left .35s var(--expo)}
.svc-row:hover{padding-left:12px}
.svc-row__n{font-family:var(--mono);font-size:.72rem;color:var(--grey3)}
.svc-row__name{font-family:var(--disp);font-weight:700;font-size:clamp(1.3rem,3vw,2rem);letter-spacing:-.02em;color:var(--ink);transition:color .3s var(--soft)}
.svc-row:hover .svc-row__name{color:var(--kroma)}
.svc-row__meta{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:var(--grey3);text-align:right}
@media(max-width:640px){.svc-row{grid-template-columns:40px 1fr}.svc-row__meta{display:none}}

/* TESTIMONIANZE (griglia hairline) */
.tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.tcard{background:var(--white);padding:clamp(18px,2.4vw,28px);display:flex;flex-direction:column;gap:6px;min-height:130px;justify-content:flex-end;transition:background .3s var(--soft)}
.tcard:hover{background:var(--off)}
.tcard__name{font-family:var(--disp);font-weight:700;font-size:1.05rem;letter-spacing:-.01em;color:var(--ink)}
.tcard__role{font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.06em;color:var(--grey)}
@media(max-width:820px){.tgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.tgrid{grid-template-columns:1fr}}

/* CTA DI CHIUSURA (dark) */
.cta__title{font-family:var(--disp);font-weight:800;font-size:clamp(2.4rem,7vw,5.5rem);letter-spacing:-.04em;line-height:1;color:#fff;margin:0 0 28px;text-wrap:balance}
.cta__title em{color:var(--kroma)}
.cta .wrap{text-align:center}
.cta__title{margin-left:auto;margin-right:auto}
@media(max-width:380px){body.home .cta__title{font-size:clamp(1.72rem,8vw,1.95rem);letter-spacing:-.025em;line-height:1.08;white-space:nowrap}}
.cta__row{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap}
.cta__mail{font-family:var(--mono);font-size:.8rem;color:rgba(255,255,255,.78)}


/* ---- HERO VIDEO (showreel recuperato) ---- */
.hero__media video,.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* immagine hero: base sempre presente (mobile) sotto il video */
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* video showreel SOLO desktop: su mobile resta l'immagine (niente download) */
.hero__video{display:none;z-index:0}
@media(min-width:768px){.hero__video{display:block}}
/* hero solo-video: niente testo dentro, solo il reel a tutto schermo */
.hero--reel{align-items:flex-end}
.hero--reel::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(228,100,14,.34),rgba(228,100,14,.16) 48%,rgba(228,100,14,.3))}
@media(max-width:767px){
  .home .nav:not(.scrolled) .nav__burger span{background:#fff}
  .hero--reel::after{content:"Ti aiutiamo ad acquisire visibilità e nuovi clienti online";position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(230px,34vh,320px);z-index:2;max-width:12ch;font-family:var(--disp);font-weight:800;font-size:clamp(2.25rem,12vw,4.2rem);line-height:.95;letter-spacing:-.03em;color:#fff;text-shadow:0 10px 28px rgba(0,0,0,.35)}
}

/* ---- INTRO sotto hero (brief 2026): titolo + lead + CTA + Forbes ---- */
.intro__title{font-family:var(--disp);font-weight:800;font-size:clamp(2.1rem,5.2vw,4.5rem);line-height:1.04;letter-spacing:-.03em;color:var(--ink);max-width:20ch;text-wrap:balance;margin:clamp(16px,2.5vw,28px) 0 clamp(28px,4vw,46px)}
.intro__title em{color:var(--kroma)}
@media(max-width:380px){.intro__title{font-size:clamp(1.78rem,8.8vw,2rem);line-height:1.08;max-width:24ch}}
.intro__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);align-items:stretch}
.intro__col{display:flex;flex-direction:column}
.intro__lead{color:var(--grey);font-size:clamp(1.08rem,1.5vw,1.3rem);line-height:1.55;max-width:60ch;margin:0}
.intro__cta{margin-top:auto;padding-top:clamp(24px,3vw,40px)}
.intro__side{display:flex;flex-direction:column}
.intro__side .statement{max-width:24ch;margin:0;font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.2}
.intro__side .eyebrow{display:inline-block;margin-top:auto;padding-top:clamp(20px,2.5vw,32px)}
@media(max-width:820px){
  .intro__grid{grid-template-columns:1fr;gap:clamp(22px,5vw,34px)}
  .intro__cta,.intro__side .eyebrow{margin-top:0}
}

/* ---- METODO — serpentina/percorso (recupero home vecchia, moderna) ---- */
.metodo__path{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px)}
.metodo__path::before{content:"";position:absolute;top:23px;left:8%;right:8%;height:2px;background:linear-gradient(90deg,var(--rule),var(--kroma) 50%,var(--rule));z-index:0}
.mnode{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.mnode__dot{width:48px;height:48px;border-radius:50%;background:var(--white);border:2px solid var(--kroma);color:var(--kroma);font-family:var(--mono);font-weight:700;font-size:.85rem;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.mnode__title{font-family:var(--disp);font-weight:700;font-size:clamp(1.05rem,1.7vw,1.35rem);letter-spacing:-.02em;margin:0;line-height:1.12}
.mnode__desc{color:var(--grey);font-size:.95rem;line-height:1.55;margin:0}
@media(max-width:860px){
  .metodo__path{grid-template-columns:1fr;gap:0}
  .metodo__path::before{display:none}
  .mnode{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:18px;row-gap:8px;padding:18px 0;border-top:1px solid var(--rule)}
  .mnode:first-child{border-top:none}
  .mnode__title{flex:1;min-width:0}
  .mnode__desc{flex:0 0 100%}
}

/* ---- SERPENTINA metodo — 7 fasi, percorso che si costruisce allo scroll ---- */
.serp{position:relative;height:288px;margin-top:clamp(34px,5vw,64px)}
.serp__wave{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.serp__track{stroke:var(--grey-100)}
.serp__path{stroke:var(--kroma);stroke-dasharray:1;stroke-dashoffset:0}
html.js .serp__path{stroke-dashoffset:1;transition:stroke-dashoffset .12s linear}
.serp__nodes{position:absolute;inset:0;list-style:none;margin:0;padding:0;z-index:1}
.serp__node{position:absolute;left:var(--x);width:56px;height:56px;transform:translate(-50%,-50%)}
.serp__node.is-high{top:22.7%}
.serp__node.is-low{top:68.2%}
.serp__num{width:56px;height:56px;border-radius:50%;background:#fff;border:2px solid var(--kroma);color:var(--kroma);font-family:var(--disp);font-weight:800;font-size:1.2rem;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(228,93,14,.20);position:relative;z-index:1;transition:transform .45s var(--soft),background .35s var(--soft),color .35s var(--soft),border-color .35s var(--soft),box-shadow .35s var(--soft)}
.serp__lbl{position:absolute;left:50%;transform:translateX(-50%);width:142px;text-align:center;font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);line-height:1.35;transition:color .35s var(--soft),opacity .35s var(--soft)}
.serp__node.is-low .serp__lbl{top:calc(100% + 14px)}
.serp__node.is-high .serp__lbl{bottom:calc(100% + 14px)}
/* stato iniziale "spento" SOLO con JS attivo (no-JS = tutto attivo e visibile) */
html.js .serp__node:not(.is-active) .serp__num{background:#fff;border-color:var(--grey-100);color:var(--grey-300);box-shadow:none;transform:scale(.96)}
/* le etichette restano sempre leggibili (cambia solo il nodo all'attivazione) */
/* stato attivo */
.serp__node.is-active .serp__num{background:var(--kroma);border-color:var(--kroma);color:#fff;transform:scale(1.09);box-shadow:0 10px 26px rgba(228,93,14,.26)}
.serp__node.is-active .serp__lbl{color:var(--ink);opacity:1}

@media(max-width:860px){
  .serp{height:auto;padding-left:8px}
  .serp__wave{display:none}
  /* timeline verticale: traccia grigia + progresso arancio che cresce */
  .serp::before,.serp::after{content:"";position:absolute;left:31px;width:2px;z-index:0}
  .serp::before{top:40px;bottom:40px;background:var(--grey-100)}
  .serp::after{top:40px;height:calc(100% - 80px);background:var(--kroma)}
  html.js .serp::after{height:calc((100% - 80px) * var(--p,0));transition:height .2s linear}
  .serp__nodes{position:static}
  .serp__node{position:static;width:auto;height:auto;transform:none;display:flex;flex-wrap:wrap;align-items:center;column-gap:18px;text-align:left;padding:18px 0}
  html.js .serp__node:not(.is-active) .serp__num{transform:none}
  .serp__num{width:48px;height:48px;font-size:1.05rem;flex:0 0 auto}
  .serp__node.is-active .serp__num{transform:scale(1.04)}
  .serp__lbl{position:static;transform:none;width:auto;flex:1;min-width:0;text-align:left;font-size:.78rem;letter-spacing:.03em}
}
@media(prefers-reduced-motion:reduce){
  html.js .serp__path{stroke-dashoffset:0}
  .serp__path,.serp__num,.serp__lbl,.serp::after{transition:none!important}
}

/* ---- video teaser testimonianze in home (4 card click-to-play) ---- */
.vgrid--teaser{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.vgrid--teaser{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.vgrid--teaser{grid-template-columns:1fr 1fr}}

/* ---- Carousel testimonianze home (scroll-snap, no-JS-safe) ---- */
.tcarousel{position:relative;margin-top:clamp(20px,3vw,32px);padding-inline:clamp(40px,5vw,62px)}
.tcarousel:focus-visible{outline:3px solid var(--kroma);outline-offset:6px;border-radius:6px}
/* padding-inline + scroll-padding: fa sbirciare un pezzetto del video prec./succ. ai lati */
.tcarousel__viewport{overflow:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:auto;scrollbar-width:none;touch-action:pan-y;padding-bottom:4px;padding-inline:clamp(18px,2.4vw,32px);scroll-padding-inline:clamp(18px,2.4vw,32px)}
.tcarousel .vcard__video{pointer-events:none}
.tcarousel__viewport::-webkit-scrollbar{display:none}
.tcarousel__track{display:flex;gap:clamp(16px,2.2vw,26px);margin:0;padding:0;list-style:none}
.tslide{flex:0 0 calc((100% - 2 * clamp(16px,2.2vw,26px)) / 3);scroll-snap-align:start;display:flex;flex-direction:column;gap:14px}
.tslide .vcard__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tslide__quote{margin:0;color:var(--ink);font-size:.95rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:4;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.tslide__quote::before{content:"\201C";color:var(--kroma);font-family:var(--disp);font-weight:800;margin-right:1px}
@media(max-width:900px){.tslide{flex-basis:calc((100% - clamp(16px,2.2vw,26px)) / 2)}}
@media(max-width:560px){.tslide{flex-basis:86%}}
/* nav: solo con JS (senza JS resta lo scroll orizzontale nativo) */
.tcarousel__nav{display:none}
html.js .tcarousel__nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:clamp(18px,2.5vw,28px)}
.tcarousel__arrow{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--kroma);background:#fff;color:var(--kroma);font-size:1.05rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .3s var(--soft),color .3s var(--soft),background .3s var(--soft)}
.tcarousel__arrow:hover{border-color:var(--kroma);color:#fff;background:var(--kroma)}
.tcarousel__arrow:disabled{opacity:.34;cursor:default;border-color:var(--rule);color:var(--grey-300);background:#fff}
.tcarousel__arrow:focus-visible{outline:3px solid var(--kroma);outline-offset:2px}
/* frecce ai lati dei video (centrate sul video), non sotto */
.tcarousel__arrow{position:absolute;top:37%;transform:translateY(-50%);z-index:6;box-shadow:0 8px 22px rgba(20,20,20,.18)}
.tcarousel__arrow--prev{left:0}
.tcarousel__arrow--next{right:0}
@media(max-width:560px){.tcarousel__arrow{width:40px;height:40px}}
/* Freccia carousel: MAI grigio scuro (GeneratePress annerisce i button su :hover/:focus).
   Resta sempre cerchio bianco + freccia arancione; hover = feedback morbido, niente scuro. */
.tcarousel__arrow,
.tcarousel__arrow:hover,
.tcarousel__arrow:focus,
.tcarousel__arrow:focus-visible,
.tcarousel__arrow:active{background:#fff!important;color:var(--kroma)!important}
.tcarousel__arrow:hover{color:var(--kroma-deep)!important;box-shadow:0 12px 28px rgba(20,20,20,.26)}
/* evita lo sfondo scuro di default GeneratePress sui button al hover */
.nav__burger:hover,.nav__burger:focus,.mmenu__close:hover,.mmenu__close:focus{background:none}
.btn--secondary:hover,.btn--secondary:focus{background:var(--kroma);color:#fff;border-color:var(--kroma)}
.tcarousel__dots{display:flex;align-items:center;gap:8px}
.tcarousel__dot{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:var(--rule-strong);cursor:pointer;transition:background .3s var(--soft),transform .3s var(--soft)}
.tcarousel__dot.is-active{background:var(--kroma);transform:scale(1.3)}
.tcarousel__dot:focus-visible{outline:2px solid var(--kroma);outline-offset:2px}

/* ---- Perché scegliere Kroma Studio (4 punti) ---- */
.why .shead{margin-bottom:clamp(10px,1.4vw,16px)}
.why .sec-lead{margin-top:0}
.why__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,20px);margin-top:clamp(24px,3vw,40px)}
.whycard{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:var(--off) center/cover no-repeat;padding:clamp(20px,2vw,30px);text-decoration:none;color:inherit;transition:transform .4s var(--soft),box-shadow .4s var(--soft)}
.whycard::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(228,93,14,.42) 0%,rgba(228,93,14,.66) 100%);z-index:0;transition:opacity .4s var(--soft)}
.whycard:hover,.whycard:focus-visible{transform:translateY(-5px);box-shadow:0 18px 40px rgba(228,93,14,.28);outline:none}
.whycard:hover::before,.whycard:focus-visible::before{opacity:.78}
.whycard__t{position:relative;z-index:1;font-family:var(--disp);font-weight:800;font-size:clamp(1.2rem,1.7vw,1.55rem);letter-spacing:-.01em;line-height:1.12;color:#fff;margin:0;text-wrap:balance;text-shadow:0 1px 10px rgba(20,20,20,.35)}
.whycard__d{position:relative;z-index:1;margin:10px 0 0;color:#fff;font-size:.9rem;line-height:1.45;text-wrap:pretty;text-shadow:0 1px 8px rgba(20,20,20,.4)}
.whycard:nth-child(1){background-image:url(../img/why-1.jpg)}
.whycard:nth-child(2){background-image:url(../img/why-2.jpg)}
.whycard:nth-child(3){background-image:url(../img/why-3.jpg)}
.whycard:nth-child(4){background-image:url(../img/why-4.jpg)}
@media(max-width:900px){.why__grid{grid-template-columns:1fr 1fr;gap:14px}}
@media(max-width:520px){.why__grid{grid-template-columns:1fr}.whycard{aspect-ratio:16/9}}

/* ---- Parlano di noi (rassegna stampa, link esterni) ---- */
.press__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding-top:clamp(20px,2.6vw,30px)}
.pcard-ext{display:flex;flex-direction:column;gap:12px;padding:clamp(20px,2vw,26px);border:1px solid var(--rule);border-radius:16px;background:linear-gradient(165deg,#fff 0%,var(--off) 100%);text-decoration:none;color:inherit;min-height:158px;transition:border-color .35s var(--soft),transform .35s var(--soft),box-shadow .35s var(--soft),background .35s var(--soft)}
.pcard-ext:hover,.pcard-ext:focus-visible{border-color:var(--kroma);transform:translateY(-4px);box-shadow:0 16px 34px rgba(228,93,14,.14);background:linear-gradient(165deg,#fff 0%,#FBEFE6 100%);outline:none}
.pcard-ext__logo{display:flex;align-items:center;justify-content:flex-start;min-height:34px;margin-bottom:2px}
.pcard-ext__logo img{display:block;width:auto;max-width:150px;max-height:34px;object-fit:contain}
.pcard-ext__src{align-self:flex-start;background:var(--kroma);color:#fff;font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.07em;padding:4px 10px;border-radius:999px}
.pcard-ext__t{font-family:var(--disp);font-weight:700;font-size:clamp(1.02rem,1.4vw,1.18rem);line-height:1.22;letter-spacing:-.01em;color:var(--ink)}
.pcard-ext__go{margin-top:auto;font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.05em;color:var(--grey);display:inline-flex;align-items:center;gap:7px}
.pcard-ext:hover .pcard-ext__go{color:var(--kroma)}
.pcard-ext--extra{display:none}
.press.is-open .pcard-ext--extra{display:flex}
.press__toggle{display:flex;justify-content:center;margin-top:clamp(22px,3vw,32px)}
.press.is-open .press__toggle{display:none}
@media(max-width:900px){.press__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.press__grid{grid-template-columns:1fr}.pcard-ext{min-height:0}}
/* card slogan che riempie il gap della griglia stampa: adattiva (JS), sparisce se la griglia è piena */
.press-slogan{display:none;align-items:center;justify-content:center;text-align:center;padding:clamp(22px,3vw,34px);border:1.5px solid rgba(255,255,255,.45);border-radius:16px;min-height:158px}
.press-slogan.is-visible{display:flex}
.press-slogan p{font-family:var(--disp);font-weight:800;font-size:clamp(1.4rem,2.2vw,1.95rem);line-height:1.14;letter-spacing:-.02em;color:#fff;margin:0;text-wrap:balance}
.press-slogan em{color:var(--ink);font-style:normal}
@media(max-width:560px){.press-slogan{min-height:0}}

/* anteprima foto al passaggio sulle righe "Diventa il prossimo" (worklist) */
.workpeek{position:fixed;top:0;left:0;width:auto;height:auto;border-radius:12px;overflow:hidden;box-shadow:0 18px 44px rgba(20,20,20,.28);opacity:0;transform:translate(-50%,-50%) scale(.94);transition:opacity .22s var(--soft),transform .22s var(--soft);pointer-events:none;z-index:80;background:var(--off)}
.workpeek.is-on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.workpeek img{display:block;width:auto;height:auto;max-width:380px;max-height:340px;object-fit:contain}
@media(hover:none){.workpeek{display:none}}

/* ---- FAQ (accordion nativo <details>, no-JS-safe) ---- */
.faq__list{border-top:1px solid var(--rule);margin-top:clamp(20px,2.6vw,30px)}
.faq__item{border-bottom:1px solid var(--rule)}
.faq__q{cursor:pointer;list-style:none;padding:clamp(16px,2vw,22px) 46px clamp(16px,2vw,22px) 0;position:relative;font-family:var(--disp);font-weight:600;font-size:clamp(1.02rem,1.5vw,1.22rem);letter-spacing:-.01em;color:var(--ink);transition:color .3s var(--soft)}
.faq__q::-webkit-details-marker{display:none}
.faq__q::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-family:var(--disp);font-weight:400;font-size:1.7rem;line-height:1;color:var(--kroma);transition:transform .35s var(--soft)}
.faq__item[open] .faq__q::after{content:"\2013"}
.faq__item[open] .faq__q,.faq__q:hover{color:var(--kroma)}
.faq__a{margin:0;padding:0 46px clamp(18px,2.2vw,24px) 0;color:var(--grey);font-size:1rem;line-height:1.62;max-width:80ch}
.faq__q:focus-visible{outline:3px solid var(--kroma);outline-offset:3px;border-radius:4px}
/* FAQ: mostra le prime 3, le altre si aprono col bottone */
.faq__item--extra{display:none}
.faq__list.is-open .faq__item--extra{display:block}
.faq__more{display:flex;justify-content:center;margin-top:clamp(20px,2.6vw,30px)}
.faq__list.is-open + .faq__more{display:none}

/* meno spazio chiaro tra Blog e Parlano di noi */
.journal{padding-bottom:clamp(40px,5vw,72px)}
.press{padding-top:clamp(40px,5vw,72px)}
.tquotes{margin-top:clamp(26px,3.5vw,40px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,40px)}
.tquotes p{font-family:var(--disp);font-weight:600;font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.4;letter-spacing:-.01em;color:var(--ink);margin:0;border-left:3px solid var(--kroma);padding-left:18px}
.tquotes p span{display:block;margin-top:8px;font-family:var(--mono);font-weight:400;font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;color:var(--grey)}
@media(max-width:680px){.tquotes{grid-template-columns:1fr;gap:18px}}

/* ---- CTA sotto sezioni work/blog in home ---- */
.work__cta{margin-top:clamp(28px,4vw,46px)}

/* ---- Servizi home: visual a sinistra + griglia card problema->servizio ---- */
.services__split{display:grid;grid-template-columns:0.72fr 1.28fr;gap:clamp(28px,4.5vw,64px);align-items:stretch}
.services__visual{position:relative;margin:0;border-radius:14px;overflow:hidden;background:var(--off)}
.services__visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.services__col .shead{margin-bottom:clamp(18px,2.4vw,26px)}
/* griglia 6 card cliccabili (problema -> servizio collegato) */
.svc-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;border-top:1px solid var(--rule);padding-top:clamp(20px,2.6vw,30px)}
.scard{display:flex;flex-direction:column;gap:12px;padding:clamp(18px,2vw,24px);border:1px solid var(--rule);border-radius:14px;background:#fff;text-decoration:none;color:inherit;min-height:172px;transition:border-color .35s var(--soft),background .35s var(--soft),transform .35s var(--soft),box-shadow .35s var(--soft)}
.scard:hover,.scard:focus-visible{border-color:var(--kroma);background:var(--off);transform:translateY(-3px);box-shadow:0 14px 30px rgba(20,20,20,.07);outline:none}
.scard__code{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-300)}
.scard__q{font-family:var(--disp);font-weight:700;font-size:clamp(1.04rem,1.5vw,1.32rem);line-height:1.18;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.scard__desc{margin:0;color:var(--grey);font-size:.9rem;line-height:1.45;text-wrap:pretty}
.scard__svc{margin-top:auto;font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:var(--grey);display:inline-flex;align-items:center;gap:8px;transition:color .3s var(--soft)}
.scard:hover .scard__svc,.scard:focus-visible .scard__svc{color:var(--kroma)}
.scard__svc .ar{transition:transform .35s var(--expo)}
.scard:hover .scard__svc .ar,.scard:focus-visible .scard__svc .ar{transform:translateX(5px)}
.services__cta{margin-top:clamp(22px,3vw,34px)}
/* pagina Servizi: 11ª card nascosta finché non si apre col CTA (rettangolo pulito) */
.svc-cards .scard--extra{display:none}
.svc-cards.is-open .scard--extra{display:flex}
.svc-more{display:flex;justify-content:center;margin-top:clamp(20px,2.6vw,32px)}
.svc-cards.is-open + .svc-more{display:none}
@media(max-width:900px){
  .services__split{grid-template-columns:1fr;gap:clamp(24px,5vw,34px)}
  .services__visual{position:relative;max-width:560px;aspect-ratio:4/3}
}
@media(max-width:620px){.svc-cards{grid-template-columns:1fr}.scard{min-height:0}}

/* ---- Pop-up consulenza: TOAST in basso a destra (non invasivo, solo Home) ---- */
.kpop{position:fixed;right:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);left:auto;top:auto;z-index:1000;width:min(94vw,410px)}
.kpop[hidden]{display:none}
.kpop__overlay{display:none}
.kpop__card{position:relative;width:100%;background:var(--white);color:var(--ink);border:6px solid var(--ink);border-radius:18px;padding:clamp(24px,2.8vw,32px);padding-top:clamp(26px,3vw,34px);text-align:left;box-shadow:0 30px 90px rgba(20,20,20,.42),0 0 0 6px rgba(228,100,14,.95);overflow:hidden;transform:translateY(24px);opacity:0;transition:transform .42s var(--soft),opacity .42s var(--soft)}
.kpop__card::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:var(--ink)}
.kpop.is-open .kpop__card{transform:none;opacity:1}
.kpop__close{position:absolute;top:12px;right:12px;width:30px;height:30px;border:1px solid var(--rule);background:var(--off);color:var(--ink);border-radius:50%;font-size:1.1rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .25s var(--soft),color .25s var(--soft),transform .25s var(--soft)}
.kpop__close:hover{background:var(--ink);color:#fff;transform:rotate(90deg)}
.kpop__eyebrow{color:var(--kroma);font-size:.64rem;text-transform:uppercase;letter-spacing:.12em;margin:0 0 9px}
.kpop__title{font-family:var(--disp);font-weight:800;font-size:clamp(1.25rem,1.9vw,1.55rem);line-height:1.12;letter-spacing:-.025em;margin:0 0 10px;color:var(--ink);text-wrap:balance}
.kpop__title em{color:var(--kroma);font-style:normal}
.kpop__lead{margin:0 0 18px;color:var(--grey);font-size:.92rem;line-height:1.5;text-wrap:pretty}
.kpop__card .btn{width:100%;justify-content:center;white-space:normal;font-size:.83rem;padding:13px 16px;gap:.4em}
.kpop__no{display:block;width:100%;margin:10px 0 0;padding:6px;background:transparent;border:0;color:var(--grey);font-size:.78rem;cursor:pointer;transition:color .25s var(--soft)}
.kpop__no:hover{color:var(--ink);background:transparent}
@media(max-width:480px){.kpop{left:clamp(12px,4vw,16px);right:clamp(12px,4vw,16px);width:auto}.kpop__card .btn{font-size:.8rem}}

/* ---- Balance cromatico post-feedback: arancio dominante, non uniforme ---- */
.section.metodo[data-theme="dark"]{
  background:var(--off);
  color:var(--ink);
}
.section.metodo[data-theme="dark"] .shead h2,
.section.metodo[data-theme="dark"] .statement,
.section.metodo[data-theme="dark"] .serp__lbl,
.section.metodo[data-theme="dark"] .serp__node.is-active .serp__lbl{
  color:var(--ink);
}
.section.metodo[data-theme="dark"] .sec-lead,
.section.metodo[data-theme="dark"] .more{
  color:var(--grey);
}
.section.metodo[data-theme="dark"] .serp__track{
  stroke:rgba(20,20,20,.14);
  stroke-width:4;
}
.section.metodo[data-theme="dark"] .serp__path{
  stroke:var(--kroma-deep);
  stroke-width:5;
}
.section.metodo[data-theme="dark"] .serp__num{
  background:#fff;
  border-color:var(--kroma);
  color:var(--kroma);
}
.section.metodo[data-theme="dark"] .serp__node.is-active .serp__num{
  background:var(--kroma);
  border-color:var(--kroma);
  color:#fff;
}
.section.metodo[data-theme="dark"] .mstep{
  border-top-color:var(--rule);
}
.section.metodo[data-theme="dark"] .mstep__n{
  color:var(--kroma);
  opacity:1;
}
.section.metodo[data-theme="dark"] .mstep h4{
  color:var(--ink);
}
.section.metodo[data-theme="dark"] .mstep p,
.section.metodo[data-theme="dark"] .stat__l{
  color:var(--grey);
}
.section.metodo[data-theme="dark"] .stat__n{
  color:var(--kroma);
}

.section.forbes[data-theme="dark"]{
  background:var(--ink);
  color:#fff;
}
.section.forbes[data-theme="dark"] .shead h2,
.section.forbes[data-theme="dark"] .statement,
.section.forbes[data-theme="dark"] .forbes__quote{
  color:#fff;
}
.section.forbes[data-theme="dark"] .sec-lead{
  color:rgba(255,255,255,.82);
}

.section.cta[data-theme="dark"]{
  background:var(--ink);
  color:#fff;
}
.section.cta[data-theme="dark"] .cta__mail,
.section.cta[data-theme="dark"] .sec-lead{
  color:var(--grey-dark);
}

/* ============================================================
   HOME — sezioni a fondo arancione Kroma ("Dicono di noi",
   "I nostri servizi") + carousel clienti "Diventa il prossimo"
   reso wide e integrato nello sfondo (niente blocco arancione).
   ============================================================ */

/* Modificatore riusabile: sezione a fondo arancione, testo bianco */
.section--kroma{background:var(--kroma)!important}
.section--kroma .eyebrow,
.section--kroma .shead h2{color:#fff}
.section--kroma .sec-lead{color:rgba(255,255,255,.92)}
.section--kroma .more{color:rgba(255,255,255,.85)}
.section--kroma .more:hover,.section--kroma .more:focus-visible{color:#fff}
/* bottone accento su arancio: invertito per restare leggibile */
.section--kroma .btn--accent{background:#fff;color:var(--kroma)}
.section--kroma .btn--accent:hover,.section--kroma .btn--accent:focus{background:var(--off);color:var(--kroma-deep)}

/* "Dicono di noi": carousel testimonianze su arancio */
.section--kroma .tslide__quote{color:#fff}
.section--kroma .tslide__quote::before{color:#fff}
.section--kroma .tcarousel__arrow{border-color:#fff}
.section--kroma .tcarousel__dot{background:rgba(255,255,255,.5)}
.section--kroma .tcarousel__dot.is-active{background:#fff}

/* "I nostri servizi": le card .scard restano bianche (contrasto su arancio) */
.section--kroma .scard:hover,.section--kroma .scard:focus-visible{border-color:#fff;background:#fff}

/* ---- "Diventa il prossimo": carousel loghi WIDE, integrato nello sfondo ---- */
.section.work .client-marquee{
  background:transparent;
  width:100vw;
  margin-inline:calc(50% - 50vw);
  padding-block:clamp(18px,2.6vw,38px);
  margin-top:clamp(20px,3vw,40px);
}
/* sfumature laterali: dissolvono nel bianco della sezione, non più nell'arancio */
.section.work .client-marquee::before{background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
.section.work .client-marquee::after{background:linear-gradient(270deg,#fff,rgba(255,255,255,0))}
/* card senza riquadro: conta solo il logo */
.section.work .client-logo{
  width:clamp(220px,22vw,300px);
  min-height:clamp(260px,22vw,310px);
  background:#fff;
  border:0;
  box-shadow:0 14px 34px rgba(20,20,20,.08);
  padding:clamp(16px,2vw,24px);
  gap:18px;
  justify-content:flex-start;
  border-radius:8px;
}
.section.work .client-logo:hover,
.section.work .client-logo:focus-visible{
  transform:translateY(-4px);
  border:0;
  box-shadow:0 20px 44px rgba(20,20,20,.12);
}
/* logo protagonista: più grande */
.section.work .client-logo__mark{
  width:100%;
  height:clamp(158px,14vw,190px);
  background:#fff;
  border-radius:6px;
  overflow:hidden;
  flex:0 0 auto;
  position:relative;
}
.section.work .client-logo__mark::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.28));pointer-events:none}
.section.work .client-logo__mark img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;padding:10px}
.section.work .client-logo__name{position:absolute;inset:auto 12px 12px;z-index:1;display:block;padding:8px 10px;border-radius:5px;background:rgba(255,255,255,.94);box-shadow:0 10px 24px rgba(20,20,20,.12);font-family:var(--disp);font-weight:800;font-size:clamp(.98rem,1.25vw,1.18rem);line-height:1.02;letter-spacing:-.02em;text-align:center;color:var(--ink);opacity:0;transform:translateY(8px);transition:opacity .25s var(--soft),transform .25s var(--soft)}
.section.work .client-logo:hover .client-logo__name,.section.work .client-logo:focus-visible .client-logo__name{opacity:1;transform:none}
.section.work .client-logo__meta{color:var(--grey)}
/* Titolo sezione "Diventa il prossimo" in arancione kroma (richiesta cliente) */
.section.work .shead h2{color:var(--kroma)}

/* ============================================================
   Regole della home estratte da inner.css — 17/08/2026
   inner.css non e' piu' caricato sulla front page (functions.php).
   Queste 36 regole erano le uniche di quel file che corrispondono a
   elementi della home: sezione Forbes, card video testimonianza,
   sezione Journal. Restano ANCHE in inner.css, con valori identici,
   cosi' le pagine interne non cambiano di una virgola.
   Aggiunte in coda per riprodurre l'ordine di cascata precedente,
   in cui inner.css era caricato dopo site.css.
   ============================================================ */
.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__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__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)}
.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}
.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}
.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)}
.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)}
@media(max-width:820px){
  .forbes__media{aspect-ratio:4/3;max-height:420px}
  .forbes__grid{grid-template-columns:1fr}
}