/* SERVIZI — lista viva + scheda + "Raccontami il tuo progetto" (classi sx-, per non scontrarsi con la home) */
.sx{position:relative}
.sx-l{list-style:none;margin:0;padding:0;border-top:1px solid rgba(232,225,214,.14);counter-reset:none}
.sx-i{border-bottom:1px solid rgba(232,225,214,.14);transition:opacity .5s}
.sx-h{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;padding:22px 0}
.sx-n{font:500 12px/1 var(--sans);letter-spacing:.14em;color:var(--lt);opacity:.7;transition:opacity .5s}
.sx-t{font:300 clamp(26px,6.4vw,52px)/1.08 var(--serif);color:var(--paper);transition:transform .7s cubic-bezier(.16,1,.3,1),color .5s,letter-spacing .7s}
.sx-p{width:14px;height:14px;position:relative;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.sx-p::before,.sx-p::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor}
.sx-p::after{transform:rotate(90deg);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.sx-i.open .sx-p::after{transform:rotate(0)}
/* scorrendo: quello al centro si accende, gli altri si fanno da parte */
.sx.live .sx-i{opacity:.38}
.sx.live .sx-i.on,.sx.live .sx-i.open{opacity:1}
.sx-i.on .sx-t,.sx-i.open .sx-t{transform:translateX(10px);color:var(--lt)}
.sx-i.on .sx-n{opacity:1}
/* scheda */
.sx-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s cubic-bezier(.16,1,.3,1)}
.sx-b>div{overflow:hidden}
.sx-i.open .sx-b{grid-template-rows:1fr}
.sx-in{padding:0 0 30px;display:grid;gap:22px;max-width:680px;opacity:0;transform:translateY(14px);transition:opacity .5s,transform .6s cubic-bezier(.16,1,.3,1)}
.sx-i.open .sx-in{opacity:1;transform:none;transition-delay:.12s}
.sx-c{margin:0;font:400 18px/1.55 var(--sans);opacity:.92}
.sx-ex{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline}
.sx-ex span{font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;opacity:.6;width:100%}
.sx-ex a{font:400 italic 20px/1.2 var(--serif);color:var(--lt);border-bottom:1px solid rgba(232,225,214,.25);padding-bottom:3px}
.sx-st{list-style:none;margin:0;padding:0;display:grid;gap:14px;position:relative}
.sx-st .sx-s{position:relative;padding-left:34px;font:500 15px/1.4 var(--sans);opacity:0;transform:translateX(-8px);transition:opacity .5s,transform .5s}
.sx-i.open .sx-st .sx-s{opacity:.9;transform:none;transition-delay:calc(.3s + var(--k)*.18s)}
.sx-st .sx-s i{position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;border:1px solid var(--lt)}
.sx-st .sx-s i::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--lt);transform:scale(0);transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.sx-i.open .sx-st .sx-s i::after{transform:scale(1);transition-delay:calc(.45s + var(--k)*.18s)}
.sx-st .sx-s:not(:last-child)::before{content:"";position:absolute;left:10px;top:22px;width:1px;height:calc(100% - 8px);background:rgba(232,225,214,.25);transform:scaleY(0);transform-origin:top;transition:transform .4s}
.sx-i.open .sx-st .sx-s:not(:last-child)::before{transform:scaleY(1);transition-delay:calc(.5s + var(--k)*.18s)}
.sx-go{all:unset;cursor:pointer;justify-self:start;padding:14px 22px;border-radius:99px;background:var(--paper);color:#0d0c0b;font:600 14px/1 var(--sans);letter-spacing:.03em;transition:transform .3s}
.sx-go:active{transform:scale(.97)}
.sx-brief{margin-top:9vh;display:grid;justify-items:center;text-align:center;gap:14px}
.sx-brief p{margin:0;font:300 clamp(28px,6vw,48px)/1.1 var(--serif)}
.sx-go.big{justify-self:center;padding:18px 28px;font-size:15px;box-shadow:0 0 0 0 rgba(232,225,214,.4);animation:sxPulse 2.8s ease-out infinite}
@keyframes sxPulse{0%{box-shadow:0 0 0 0 rgba(232,225,214,.35)}70%,100%{box-shadow:0 0 0 16px rgba(232,225,214,0)}}
.sx-brief small{font:500 13px/1.4 var(--sans);opacity:.65}

/* RACCONTAMI IL TUO PROGETTO */
html.sx-lock,html.sx-lock body{overflow:hidden}
.sx-ov{position:fixed;inset:0;z-index:300;background:rgba(5,6,5,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;align-items:end;opacity:0;transition:opacity .4s}
.sx-ov.in{opacity:1}
.sx-sh{position:relative;background:#121512;color:var(--paper);border-radius:22px 22px 0 0;padding:22px 22px calc(26px + env(safe-area-inset-bottom));min-height:min(78svh,640px);max-height:92svh;overflow:auto;transform:translateY(100%);transition:transform .55s cubic-bezier(.16,1,.3,1);box-shadow:0 -20px 60px rgba(0,0,0,.5)}
.sx-ov.in .sx-sh{transform:none}
@media(min-width:760px){.sx-ov{align-items:center;justify-items:center}.sx-sh{width:620px;border-radius:22px}}
.sx-x{all:unset;cursor:pointer;position:absolute;top:18px;right:18px;font:600 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:10px 13px;border-radius:99px;border:1px solid rgba(232,225,214,.25)}
.sx-bar{height:2px;background:rgba(232,225,214,.12);margin:44px 0 26px;border-radius:2px;overflow:hidden}
.sx-bar i{display:block;height:100%;width:0;background:var(--sxa);transition:width .5s cubic-bezier(.16,1,.3,1)}
.sx-body{position:relative;overflow-x:clip;display:grid}
.sx-fr{grid-area:1/1;align-self:start;display:grid;gap:18px;animation:sxIn .45s cubic-bezier(.16,1,.3,1) both}
.sx-fr.from-l{animation-name:sxInL}
.sx-fr.to-l{animation:sxOutL .38s ease forwards}.sx-fr.to-r{animation:sxOutR .38s ease forwards}
@keyframes sxIn{from{opacity:0;transform:translateX(40px)}}@keyframes sxInL{from{opacity:0;transform:translateX(-40px)}}
@keyframes sxOutL{to{opacity:0;transform:translateX(-40px)}}@keyframes sxOutR{to{opacity:0;transform:translateX(40px)}}
.sx-k{font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--sxa)}
.sx-fr h3{margin:0;font:300 clamp(30px,8vw,44px)/1.05 var(--serif)}
.sx-ch{display:flex;flex-wrap:wrap;gap:10px}
.sx-ch button{all:unset;cursor:pointer;padding:13px 17px;border-radius:99px;border:1px solid rgba(232,225,214,.28);font:500 15px/1.2 var(--sans);transition:background .25s,color .25s,border-color .25s,transform .2s}
.sx-ch button:active{transform:scale(.96)}
.sx-ch button.on{background:var(--paper);color:#0d0c0b;border-color:var(--paper)}
.sx-nav{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
.sx-nav button,.sx-mail{all:unset;cursor:pointer;font:600 14px/1 var(--sans);opacity:.8;padding:10px 0}
.sx-nx{opacity:1!important;padding:13px 20px!important;border-radius:99px;background:var(--sxa);color:var(--sxi)}
.sx-nm{all:unset;box-sizing:border-box;width:100%;padding:15px 18px;border-radius:14px;border:1px solid rgba(232,225,214,.25);font:500 16px/1 var(--sans)}
.sx-msg{margin:0;white-space:pre-wrap;font:400 14px/1.55 var(--sans);background:rgba(232,225,214,.06);border-radius:14px;padding:14px 16px;opacity:.9}
.sx-send{display:block;text-align:center;padding:17px;border-radius:99px;background:#25d366;color:#06240f;font:700 15px/1 var(--sans)}
@media (prefers-reduced-motion:reduce){.sx *{transition:none!important;animation:none!important}}
/* colori: verde salvia per Ginkgo, bordeaux per Arte Liquida */
.sx-ov{--sxa:#9fc3a8;--sxi:#0d1512}
.sx-ov.w-s .sx-sh{background:#121512}
.sx-ov.w-r{--sxa:#c9707f;--sxi:#fff}
.sx-ov.w-r .sx-sh{background:linear-gradient(180deg,#2a0f15,#160709 60%)}
.sx-ov.w-r .sx-nx{background:#8e2b3a}
.sx-ov.w-r .sx-ch button.on{background:#e8d6d6;border-color:#e8d6d6;color:#2a0f15}
.sx-svc{position:absolute;top:28px;left:22px;right:110px;font:400 italic 18px/1.2 var(--serif);color:var(--sxa);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-tx{all:unset;box-sizing:border-box;width:100%;padding:14px 16px;border-radius:14px;border:1px solid rgba(232,225,214,.25);font:500 16px/1.4 var(--sans);white-space:pre-wrap}
.sx-tx[hidden]{display:none}
/* Ginkgo: stesso trattamento del bordeaux, in verde salvia */
.sx-ov.w-s{--sxa:#8fd0b0;--sxi:#06140e}
.sx-ov.w-s .sx-sh{background:linear-gradient(180deg,#0f2a20,#07130e 60%)}
.sx-ov.w-s .sx-nx{background:#2f6b52;color:#fff}
.sx-ov.w-s .sx-ch button.on{background:#d6e8de;border-color:#d6e8de;color:#0f2a20}