/* Pagina Clienti (.page-template-clienti, su /portfolio/ e traduzioni): globo dei paesi nell'apertura,
 * nomi dei clienti, galleria con i filtri, settori, paesi per zona.
 * Il movimento sta in clienti.js; senza JS la pagina è completa e ferma (filtri nascosti, tutti i progetti visibili).
 * Si anima solo transform, translate e opacity. Con «riduci movimento» il globo è fermo e le zone sono tutte scritte. */

/* Apertura: il globo a destra del titolo. Senza WebGL restano gli anelli e l'etichetta della sede. */
.cl-visual{min-height:480px}
.cl-visual>.cl-gl{position:absolute;inset:-6% -4%;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.4s ease;background:radial-gradient(circle at 50% 50%,#5f87ff1c 0,transparent 44%)}
.cl-visual>.cl-gl.on{opacity:1}
.cl-visual>.cl-gl canvas{display:block;width:100%;height:100%}
.cl-visual.cl-gl-on>.orbit-ring{opacity:0;transition:opacity 1s ease}
.cl-visual>.chip-f{z-index:2}
/* La zona accesa, sotto il globo. */
.cl-zones{position:absolute;left:0;right:0;bottom:-8px;z-index:2;height:44px;display:none}
.cl-gl-on .cl-zones{display:block}
.cl-zone{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 10px;width:max-content;max-width:calc(100% - 16px);margin:0 auto;padding:9px 16px;border:1px solid var(--line2);border-radius:100px;background:rgba(12,12,19,.88);font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#cdcdda;white-space:nowrap;opacity:0;translate:0 10px;transition:opacity .6s ease,translate .7s var(--ease)}
.cl-zone.on{opacity:1;translate:0 0}
.cl-zone i{width:7px;height:7px;border-radius:50%;background:var(--org);box-shadow:0 0 10px var(--org)}
.cl-zone span{color:var(--faint);font-weight:500}
.cl-still .cl-zones{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;height:auto}
.cl-still .cl-zone{position:static;opacity:1;translate:none}
/* I numeri sotto il testo. */
.cl-stats{display:flex;flex-wrap:wrap;gap:18px 44px;margin:36px 0 0;padding:28px 0 0;border-top:1px solid var(--line2);list-style:none}
.cl-stats b{display:block;font-size:32px;font-weight:600;letter-spacing:-.02em;color:var(--txt)}
.cl-stats li>span{color:var(--faint);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}

/* Titoli lettera per lettera, quando il tema mostra il blocco (.rv.in). */
.page-template-clienti .cl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.page-template-clienti .cl-w{display:inline-block;font-style:normal;white-space:nowrap}
.page-template-clienti .cl-ch{display:inline-block;font-style:normal;transform-origin:50% 100%;transition:transform .95s cubic-bezier(.16,1,.3,1),opacity .6s ease;transition-delay:calc(.15s + var(--c,0)*28ms)}
.page-template-clienti .rv:not(.in) .cl-ch{opacity:0;transform:perspective(500px) translateY(.6em) rotateX(-80deg)}

/* Hanno lavorato con noi: loghi in bianco in una griglia di celle; dove manca il logo resta il nome. */
.cl-names{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0;padding:0;list-style:none;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.cl-names li{position:relative;display:grid;place-items:center;min-height:118px;padding:20px 14px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-size:clamp(17px,1.9vw,25px);font-weight:600;letter-spacing:-.03em;color:var(--mut);text-align:center;overflow-wrap:anywhere}
.cl-names li::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(closest-side,#5f87ff1f,transparent);opacity:0;transition:opacity .5s ease}
.cl-names img{display:block;max-width:100%;height:auto;filter:brightness(0) invert(1);opacity:.62;transition:opacity .4s ease}
.cl-names li:hover{color:var(--txt)}
.cl-names li:hover img{opacity:1}
.cl-names li:hover::before{opacity:1}

/* Galleria: filtri; le schede escono sfumando (.cl-out) e poi si nascondono. */
.cl-filter{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 34px}
.cl-filter[hidden]{display:none}
.cl-filter button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid var(--line2);border-radius:100px;background:transparent;color:var(--mut);font:inherit;font-size:13.5px;cursor:pointer;transition:color .3s,border-color .3s,background-color .3s}
.cl-filter button span{color:var(--faint);font-size:12px;font-variant-numeric:tabular-nums}
.cl-filter button:hover{color:var(--txt);border-color:#ffffff4d}
.cl-filter button[aria-pressed="true"]{color:#fff;border-color:var(--vio);background:#101a3a}
.cl-filter button[aria-pressed="true"] span{color:#9fb6ff}
.cl-filter button:focus-visible{outline:2px solid #c3d5ff;outline-offset:3px}
.cl-work .gcard{transition:opacity .3s ease,transform .5s var(--ease),border-color .4s,background .4s}
.cl-work .gcard.cl-out{opacity:0;transform:scale(.96)}
.cl-work .gcard[hidden]{display:none}

/* Settori: le schede .case del tema, quattro per riga. */
.cl-sectors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.cl-sectors .case{padding:28px 24px}

/* Dove abbiamo lavorato: una colonna per zona, poi la nota sui progetti riservati. */
.cl-where{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:16px}
.cl-where>div{padding:28px 24px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.cl-where h3{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 20px;font-size:17px}
.cl-where h3 span{flex:none;color:var(--org);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.cl-where ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.cl-where li{display:flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--line2);border-radius:100px;color:var(--mut);font-size:13px}
.cl-where li i{width:5px;height:5px;border-radius:50%;background:var(--org)}
.cl-where li.hq{color:var(--txt);border-color:#5f87ff66}
.cl-where li.hq i{background:var(--vio);box-shadow:0 0 8px var(--vio)}
.cl-private{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 30px;margin-top:16px;padding:24px 28px;border:1px dashed var(--line2);border-radius:var(--r)}
.cl-private p{margin:0;max-width:66ch;color:var(--mut)}

@media(max-width:1000px){
 .cl-sectors{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cl-where{grid-template-columns:1fr}
}
@media(max-width:920px){
 .cl-visual{min-height:360px}
}
@media(max-width:760px){
 .cl-names{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cl-names li{min-height:84px}
 .cl-stats{gap:18px 32px}
 .cl-stats b{font-size:28px}
}
@media(max-width:560px){
 .cl-sectors{grid-template-columns:1fr}
 .cl-zone{font-size:11px;letter-spacing:.05em}
}
@media(prefers-reduced-motion:reduce){
 .cl-zone,.cl-names li::before,.cl-names img,.cl-work .gcard,.cl-filter button{transition:none!important}
}