/* Client Experiences page — light "Thread of Voices": zig-zag gold thread, gem medallion nodes, parchment cards */
@keyframes zzSpin{to{rotate:360deg}}
@keyframes zzDrift{50%{translate:26px -22px}}
.zz{position:relative;overflow:hidden;background:radial-gradient(60% 40% at 8% 4%,rgba(243,217,139,.55),transparent 70%),radial-gradient(50% 35% at 95% 60%,rgba(224,140,120,.16),transparent 70%),linear-gradient(180deg,#fffdf7,#f7ebd0 60%,#fffaf0);padding-bottom:70px}
.zz-bg{position:absolute;inset:0;opacity:.5;pointer-events:none;background:radial-gradient(circle at 1px 1px,rgba(184,134,43,.22) 1px,transparent 1.4px) 0 0/26px 26px;-webkit-mask:radial-gradient(70% 70% at 50% 40%,#000,transparent);mask:radial-gradient(70% 70% at 50% 40%,#000,transparent)}
.zz .wrap{position:relative;z-index:1}
.zz .head{margin-bottom:3.4rem}

.zz-thread{position:relative;max-width:1080px;margin-inline:auto;padding:1rem 0 .5rem}
.zz-line{position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;border-radius:3px;background:repeating-linear-gradient(180deg,rgba(184,134,43,.45) 0 7px,transparent 7px 14px)}
.zz-fill{position:absolute;left:0;top:0;width:100%;height:calc(var(--p,0)*100%);border-radius:3px;background:linear-gradient(180deg,var(--gold2),var(--gold3));box-shadow:0 0 14px rgba(224,179,79,.7)}

.zc{position:relative;display:grid;grid-template-columns:1fr 1fr;margin-bottom:2.8rem;align-items:center}
.zc:last-child{margin-bottom:0}
.zc.l .zc-card{grid-column:1;margin-right:clamp(56px,7vw,92px)}
.zc.r .zc-card{grid-column:2;margin-left:clamp(56px,7vw,92px)}
.zc.reveal.l{transform:translateX(-60px)}.zc.reveal.r{transform:translateX(60px)}.zc.reveal.in{transform:none}

/* node on the thread */
.zc-node{position:absolute;left:50%;top:50%;width:84px;height:84px;translate:-50% -50%;z-index:3;display:grid;place-items:center}
.zc-ring{position:absolute;inset:0;border-radius:50%;border:1.5px dashed rgba(184,134,43,.75);animation:zzSpin 30s linear infinite}
.zc-ring::after{content:"";position:absolute;left:50%;top:-5px;width:9px;height:9px;margin-left:-4.5px;rotate:45deg;background:var(--gold);box-shadow:0 0 10px var(--gold)}
.zc-gem{display:grid;place-items:center;width:58px;height:58px;color:var(--gold2);font-size:1.35rem;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);background:linear-gradient(145deg,#8a2236,#3a0d14);box-shadow:inset 0 0 0 2px var(--gold)}
.zc-node::before{content:"";position:absolute;inset:11px;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);background:linear-gradient(145deg,var(--gold2),var(--gold3))}
.zc-gem{position:relative;z-index:1;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);width:54px;height:54px;box-shadow:none}
.zc-node::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 7px rgba(255,250,240,.95),0 12px 26px rgba(138,90,22,.3);z-index:-1}

/* card */
.zc-card{position:relative;padding:2.1rem 2.1rem 1.6rem;border-radius:26px;background:linear-gradient(165deg,#fff,#fff7e1);box-shadow:inset 0 0 0 1px rgba(184,134,43,.55),0 22px 46px rgba(138,90,22,.14);transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.zc-card:hover{transform:translateY(-8px);box-shadow:inset 0 0 0 1.5px var(--gold),0 34px 64px rgba(138,90,22,.24)}
.zc-card::after{content:"";position:absolute;top:50%;width:46px;height:2px;background:linear-gradient(90deg,var(--gold3),var(--gold2))}
.zc.l .zc-card::after{left:100%}.zc.r .zc-card::after{right:100%}
.zc-c{position:absolute;width:20px;height:20px;border:2px solid var(--gold);pointer-events:none}
.zc-c.tl{left:9px;top:9px;border-right:0;border-bottom:0;border-radius:10px 0 0 0}.zc-c.tr{right:9px;top:9px;border-left:0;border-bottom:0;border-radius:0 10px 0 0}
.zc-c.bl{left:9px;bottom:9px;border-right:0;border-top:0;border-radius:0 0 0 10px}.zc-c.br{right:9px;bottom:9px;border-left:0;border-top:0;border-radius:0 0 10px 0}
.zc-stars{display:block;color:var(--gold3);letter-spacing:.2em;font-size:.95rem}
.zc-qm{position:absolute;right:1.7rem;top:1.5rem;font-size:2.4rem;color:rgba(184,134,43,.22)}
.zc p{margin:.7rem 0 0;font:italic 500 1.14rem/1.75 var(--serif);color:#4a1620}
.zc footer{display:flex;align-items:center;gap:.9rem;margin-top:1.3rem;padding-top:1.1rem;border-top:1px dashed rgba(184,134,43,.5)}
.zc-av{display:block;flex:none;padding:3px;border-radius:50%;background:conic-gradient(var(--gold2),var(--gold3),var(--gold2));}
.zc-av .av,.zc-av .ini{width:58px;height:58px;font-size:1.4rem;box-shadow:0 0 0 2px #fff}
.zc footer b{display:block;font:600 1.05rem var(--sans);color:#7a1f2e}
.zc footer span:not(.zc-av){font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:#8a5a16}
.zc footer span i{margin-right:.3rem}
.zz-note{text-align:center;margin:3.4rem auto 1.4rem;max-width:640px;font-size:.92rem;color:#6a3a2a}

@media(max-width:820px){
  .zz-line{left:34px;margin-left:0}
  .zc{grid-template-columns:1fr}
  .zc.l .zc-card,.zc.r .zc-card{grid-column:1;margin:0 0 0 84px}
  .zc-node{left:34px;top:46px;width:68px;height:68px}.zc-gem{width:44px;height:44px;font-size:1.1rem}.zc-node::before{inset:10px}
  .zc-card::after{display:none}
  .zc.reveal.l,.zc.reveal.r{transform:translateX(40px)}.zc.reveal.in{transform:none}
}
@media(max-width:480px){.zc.l .zc-card,.zc.r .zc-card{margin-left:70px}.zc-card{padding:1.8rem 1.3rem 1.3rem}.zc-line{left:30px}.zc-node{left:30px}}
@media(prefers-reduced-motion:reduce){.zc-ring,.zz-bg{animation:none}.zc-card{transition:none}}