/* Xivo — Services, dark index with corner light (v3.17.0). Prefix: xvx-
   All text is white. Light position: change top/right on .xvx-light. */

.xvx{
  --xvx-blue:#3C7ABC;
  --xvx-sky:#8FBEEE;
  --xvx-gold:#D4A24C;
  --xvx-ivory:#FBF8F3;
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(80px,9vw,128px) clamp(20px,5.5vw,84px);
  background:radial-gradient(70% 60% at 100% 0%,rgba(60,122,188,.40),transparent 65%),#0E1929;
  color:#fff;
  font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
.xvx *,.xvx *:before,.xvx *:after{box-sizing:border-box}
.xvx-bg{
  position:absolute;inset:0;z-index:-3;background-size:cover;background-position:center right;background-repeat:no-repeat;opacity:.22;
  -webkit-mask-image:linear-gradient(90deg,transparent 12%,#000 85%);mask-image:linear-gradient(90deg,transparent 12%,#000 85%);
}

/* corner light ------------------------------------------------------------------ */
.xvx-light{position:absolute;top:0;right:0;width:0;height:0;z-index:-2;pointer-events:none}
.xvx-glow{
  position:absolute;top:-360px;right:-360px;width:820px;height:820px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,236,190,.45) 0,rgba(212,162,76,.18) 18%,rgba(60,122,188,.10) 45%,transparent 68%);
  animation:none;opacity:.8;
}
.xvx-beam{
  position:absolute;top:0;right:0;width:1500px;height:1200px;transform-origin:100% 0;
  background:conic-gradient(from 195deg at 100% 0,transparent 0deg,rgba(255,236,190,.20) 14deg,rgba(143,190,238,.06) 36deg,transparent 54deg);
  filter:blur(10px);animation:xvxBeam 6s ease-in-out infinite;
}
.xvx-bulb{
  position:absolute;top:38px;right:44px;width:16px;height:16px;border-radius:50%;background:#fff;
  box-shadow:0 0 28px 12px rgba(255,236,190,.95),0 0 90px 40px rgba(212,162,76,.55);
  animation:xvxBulb 6s ease-in-out infinite;
}
@keyframes xvxGlow{0%,100%{opacity:.82;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
@keyframes xvxBeam{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes xvxBulb{0%,100%{opacity:.9}50%{opacity:1}}

/* layout ------------------------------------------------------------------------- */
.xvx-wrap{position:relative;max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(40px,6vw,90px);align-items:end}
.xvx-eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#fff}
.xvx-eyebrow i{width:28px;height:1px;background:var(--xvx-gold)}
.xvx h2#xvx-title{
  margin:18px 0 0;font-family:'DM Serif Display',Georgia,serif;font-weight:400;
  font-size:clamp(20px,1.7vw,24px);line-height:1.35;color:#fff;
}
.xvx h2#xvx-title em{font-style:italic;color:#fff}

/* team avatar row (under the heading, like the reference banner) --------------------- */
.xvx-avatars{display:flex;align-items:center;margin:22px 0 0}
.xvx-avatar{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;margin-right:-12px;
  font-family:'DM Sans',system-ui,sans-serif;font-size:15px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--xvx-blue),var(--xvx-sky));
  border:2px solid #0E1929;box-shadow:0 6px 16px rgba(0,0,0,.35);
}
.xvx-avatar:nth-child(2){background:linear-gradient(135deg,var(--xvx-gold),#e8c98a)}
.xvx-avatar:nth-child(3){background:linear-gradient(135deg,var(--xvx-sky),var(--xvx-blue))}
.xvx-avatar:nth-child(4){background:linear-gradient(135deg,#e8c98a,var(--xvx-gold))}
.xvx-avatars-label{margin-left:22px;font-size:12px;font-weight:600;letter-spacing:.03em;color:rgba(255,255,255,.6)}

/* left: names (all white) ---------------------------------------------------------- */
.xvx-index{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0}
.xvx-item{position:relative;margin:0;padding:0}
.xvx-item a{
  position:relative;display:inline-block;padding:6px 0;
  font-family:'DM Serif Display',Georgia,serif;font-size:clamp(30px,3.5vw,48px);line-height:1.14;letter-spacing:-.02em;
  color:#fff;text-decoration:none;transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.xvx-item a:before{                  /* gold marker on the active name */
  content:"";position:absolute;left:-52px;top:50%;width:34px;height:1px;background:var(--xvx-gold);
  transform:scaleX(0);transform-origin:right;transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.xvx-item.is-active a{transform:translateX(6px)}
.xvx-item.is-active a:before{transform:scaleX(1)}
.xvx-mdesc{display:none}
.xvx a:focus-visible{outline:2px solid var(--xvx-sky);outline-offset:4px}

/* right: detail ------------------------------------------------------------------------ */
.xvx-panel{padding:6px 0 10px clamp(28px,3.4vw,46px);border-left:1px solid rgba(255,255,255,.22)}
.xvx-pane{display:none}
.xvx-pane.is-active{display:block;animation:xvxIn .45s cubic-bezier(.2,.7,.2,1)}
@keyframes xvxIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.xvx-kicker{margin:0;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.xvx-desc{margin:18px 0 0;max-width:420px;font-size:clamp(16px,1.25vw,18px);line-height:1.7;color:#fff}
.xvx-more{
  display:inline-flex;align-items:center;gap:14px;min-height:52px;margin-top:32px;padding:0 8px 0 24px;border-radius:14px;
  background:var(--xvx-ivory);color:#0E1F3A;font-size:15px;font-weight:700;text-decoration:none;transition:background .25s;
}
.xvx-more:hover{background:var(--xvx-sky)}
.xvx-go{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#15202F;color:#fff}
.xvx-go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.xvx-talk{
  display:inline-flex;align-items:center;gap:10px;min-height:50px;margin-top:16px;padding:0 24px;border-radius:12px;
  border:1px solid rgba(255,255,255,.4);color:#fff;font-size:15px;font-weight:600;text-decoration:none;transition:background .25s,border-color .25s;
}
.xvx-talk:hover{background:rgba(255,255,255,.1);border-color:#fff}
.xvx-panel{display:flex;flex-direction:column;align-items:flex-start}
.xvx-panel .xvx-talk{align-self:flex-start}

/* tablet / mobile: no side panel, every name shows its own line ------------------------- */
@media(max-width:900px){
  .xvx-wrap{grid-template-columns:1fr;gap:36px}
  .xvx-panel{display:none}
  .xvx-item{padding:22px 0;border-top:1px solid rgba(255,255,255,.2)}
  .xvx-item:last-child{border-bottom:1px solid rgba(255,255,255,.2)}
  .xvx-item a{padding:0;font-size:clamp(28px,7vw,38px)}
  .xvx-item.is-active a{transform:none}
  .xvx-item a:before{display:none}
  .xvx-mdesc{display:block;margin:8px 0 0;font-size:15px;line-height:1.6;color:#fff;max-width:520px}
  .xvx-index{margin-top:32px}
  .xvx-avatars{margin-top:18px}
  .xvx-avatars-label{margin-left:16px;font-size:11px}
  .xvx-glow{width:600px;height:600px;top:-270px;right:-270px}
  .xvx-bulb{top:30px;right:24px}
}
@media(max-width:640px){.xvx{padding:68px 20px 72px}}
@media(prefers-reduced-motion:reduce){
  .xvx *,.xvx *:before{transition:none!important;animation:none!important}
}