/* Designing Virtuosity — Services Experience Layer
   Scope: new Services-page sections only.
   Existing Hero, Six Design Systems, Our Process, CTA and Footer remain untouched. */

:root{
  --sx-navy:#06152f;
  --sx-navy-2:#0b2c5f;
  --sx-cyan:#13d8ee;
  --sx-blue:#199df0;
  --sx-pink:#ff1188;
  --sx-violet:#8b4cff;
  --sx-green:#73e52d;
  --sx-orange:#ff9128;
  --sx-ease:cubic-bezier(.16,1,.3,1);
}

/* -------------------------------------------------
   SELECTED CLIENT EXPERIENCE
-------------------------------------------------- */
.clients-experience{
  position:relative;
  overflow:hidden;
  padding:clamp(96px,12vw,156px) 0;
  color:#fff;
  background:
    radial-gradient(circle at 12% 18%,rgba(19,216,238,.16),transparent 28%),
    radial-gradient(circle at 88% 28%,rgba(255,17,136,.15),transparent 25%),
    linear-gradient(145deg,#041126 0%,#071b3d 54%,#06152f 100%);
}
.clients-experience::before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 90%,transparent);
}
.clients-experience::after{
  content:"";
  position:absolute;
  width:460px;height:460px;border-radius:50%;
  right:-160px;bottom:-190px;
  background:conic-gradient(from 20deg,var(--sx-cyan),var(--sx-green),var(--sx-orange),var(--sx-pink),var(--sx-violet),var(--sx-cyan));
  filter:blur(105px);opacity:.12;
  animation:sx-orbit 16s linear infinite;
}
.clients-experience .container{position:relative;z-index:2}
.clients-head{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);
  gap:clamp(40px,7vw,92px);
  align-items:end;
  margin-bottom:54px;
}
.clients-head .kicker{color:rgba(255,255,255,.58)}
.clients-head .section-title{
  color:#fff;
  max-width:780px;
  font-size:clamp(3.2rem,6.5vw,6.7rem);
}
.clients-head .lede{
  color:rgba(255,255,255,.62);
  justify-self:end;
}

.client-wall{
  position:relative;
  width:100%;
  margin-inline:auto;
}
.client-wall::before,
.client-wall::after{
  content:"";
  position:absolute;z-index:5;top:0;bottom:0;width:min(12vw,150px);
  pointer-events:none;
}
.client-wall::before{left:0;background:linear-gradient(90deg,#05142e,transparent)}
.client-wall::after{right:0;background:linear-gradient(-90deg,#06162f,transparent)}

.client-row{
  overflow:hidden;
  margin:14px 0;
  padding:3px 0;
}
.client-track{
  width:max-content;
  display:flex;
  gap:14px;
  animation:sx-marquee 42s linear infinite;
}
.client-row.reverse .client-track{animation-direction:reverse;animation-duration:47s}
.client-row:hover .client-track,
.client-row:focus-within .client-track{animation-play-state:paused}

.client-chip{
  position:relative;
  flex:0 0 auto;
  width:250px;
  height:132px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.11);
  border-radius:24px;
  background:
    radial-gradient(circle at var(--gx,80%) var(--gy,18%),rgba(255,255,255,.1),transparent 28%),
    linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.026));
  box-shadow:0 16px 45px rgba(0,0,0,.18);
  backdrop-filter:blur(14px);
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .45s var(--sx-ease),border-color .28s,background .28s,box-shadow .28s;
}
.client-chip::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(19,216,238,.08),transparent 42%,rgba(255,17,136,.08));
  opacity:0;
  transition:opacity .28s;
}
.client-chip:hover{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-7px) scale(1.02);
  border-color:rgba(255,255,255,.25);
  box-shadow:0 26px 64px rgba(0,0,0,.3),0 0 35px rgba(19,216,238,.07);
}
.client-chip:hover::before{opacity:1}

.client-chip img{
  position:relative;z-index:2;
  max-width:74%;
  max-height:54px;
  width:auto;height:auto;
  object-fit:contain;
  filter:grayscale(1) brightness(0) invert(1);
  opacity:.68;
  transition:filter .35s,opacity .35s,transform .45s var(--sx-ease);
}
.client-chip:hover img{
  filter:none;
  opacity:1;
  transform:scale(1.06);
}
.client-chip.logo-tall img{max-height:68px}
.client-chip.logo-square img{max-width:38%;max-height:72px}

.client-name{
  position:relative;z-index:2;
  max-width:190px;
  padding:0 12px;
  color:rgba(255,255,255,.72);
  font:650 1rem/1.22 "Space Grotesk",sans-serif;
  letter-spacing:-.02em;
  text-align:center;
  transition:color .28s,transform .4s var(--sx-ease);
}
.client-chip:hover .client-name{color:#fff;transform:scale(1.035)}
.client-name.compact{font-size:.9rem}

.client-wall-note{
  margin:28px 0 0;
  color:rgba(255,255,255,.38);
  font-size:.72rem;
  line-height:1.6;
  text-align:center;
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* -------------------------------------------------
   THE DIFFERENCE
-------------------------------------------------- */
.dv-difference{
  position:relative;
  overflow:hidden;
  padding:clamp(100px,12vw,160px) 0;
  background:#f7f8fb;
}
.dv-difference::before{
  content:"";
  position:absolute;
  width:720px;height:720px;border-radius:50%;
  left:-430px;top:20%;
  background:radial-gradient(circle,rgba(19,216,238,.12),rgba(19,216,238,0) 68%);
  pointer-events:none;
}
.difference-head{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(42px,7vw,90px);
  align-items:end;
  margin-bottom:58px;
}
.difference-head .section-title{
  max-width:710px;
  font-size:clamp(3.6rem,7vw,7.2rem);
}
.difference-intro{
  margin:0;
  max-width:680px;
  justify-self:end;
  color:var(--muted);
  font-size:clamp(1.03rem,1.55vw,1.25rem);
  line-height:1.75;
}

.difference-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:minmax(250px,auto);
  gap:18px;
}
.difference-card{
  --a:var(--sx-cyan);
  --b:var(--sx-blue);
  position:relative;
  grid-column:span 6;
  min-height:330px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  padding:34px;
  border:1px solid rgba(12,43,93,.11);
  border-radius:30px;
  background:
    radial-gradient(circle at var(--gx,82%) var(--gy,16%),color-mix(in srgb,var(--a) 16%,transparent),transparent 27%),
    linear-gradient(150deg,#fff,#f5f7fb);
  box-shadow:0 24px 65px rgba(12,43,93,.08);
  transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .52s var(--sx-ease),box-shadow .3s,border-color .3s;
}
.difference-card:nth-child(2){--a:var(--sx-pink);--b:var(--sx-violet)}
.difference-card:nth-child(3){--a:var(--sx-green);--b:var(--sx-cyan)}
.difference-card:nth-child(4){--a:var(--sx-orange);--b:var(--sx-pink)}
.difference-card:nth-child(1),
.difference-card:nth-child(4){grid-column:span 7}
.difference-card:nth-child(2),
.difference-card:nth-child(3){grid-column:span 5}

.difference-card::before{
  content:"";
  position:absolute;inset:0 0 auto;height:4px;
  background:linear-gradient(90deg,var(--a),var(--b));
}
.difference-card::after{
  content:"";
  position:absolute;
  width:210px;height:210px;border-radius:50%;
  right:-85px;top:-75px;
  border:1px solid color-mix(in srgb,var(--a) 32%,transparent);
  box-shadow:0 0 0 28px color-mix(in srgb,var(--a) 3%,transparent),
             0 0 0 58px color-mix(in srgb,var(--a) 2%,transparent);
  transition:transform .6s var(--sx-ease);
}
.difference-card:hover{
  transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-10px) scale(1.01);
  border-color:color-mix(in srgb,var(--a) 34%,rgba(12,43,93,.1));
  box-shadow:0 34px 85px rgba(12,43,93,.14),0 0 42px color-mix(in srgb,var(--a) 9%,transparent);
}
.difference-card:hover::after{transform:scale(1.16) rotate(14deg)}
.difference-number{
  position:absolute;left:28px;top:22px;
  font:700 clamp(4.6rem,8vw,8rem)/.78 "Space Grotesk",sans-serif;
  letter-spacing:-.08em;
  color:var(--ink);
  opacity:.055;
}
.difference-card h3{
  position:relative;z-index:2;
  margin:0 0 16px;
  max-width:520px;
  font:650 clamp(2rem,3.6vw,3.8rem)/.95 "Space Grotesk",sans-serif;
  letter-spacing:-.05em;
}
.difference-card p{
  position:relative;z-index:2;
  margin:0;
  max-width:640px;
  color:var(--muted);
  line-height:1.72;
}
.difference-orbit{
  position:absolute;
  right:30px;bottom:28px;
  width:12px;height:12px;border-radius:50%;
  background:var(--a);
  box-shadow:0 0 0 8px color-mix(in srgb,var(--a) 8%,transparent),0 0 30px color-mix(in srgb,var(--a) 30%,transparent);
  transition:transform .5s var(--sx-ease);
}
.difference-card:hover .difference-orbit{transform:translate(-12px,-12px) scale(1.3)}

/* -------------------------------------------------
   FAQ
-------------------------------------------------- */
.dv-faq{
  position:relative;
  overflow:hidden;
  padding:clamp(100px,12vw,160px) 0;
  color:#fff;
  background:
    radial-gradient(circle at 90% 10%,rgba(139,76,255,.16),transparent 28%),
    radial-gradient(circle at 10% 82%,rgba(19,216,238,.11),transparent 27%),
    #041126;
}
.dv-faq::before{
  content:"FAQ";
  position:absolute;
  right:-.08em;top:.05em;
  font:700 clamp(12rem,28vw,28rem)/.8 "Space Grotesk",sans-serif;
  letter-spacing:-.08em;
  color:#fff;
  opacity:.02;
  pointer-events:none;
}
.faq-layout{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);
  gap:clamp(48px,8vw,110px);
  align-items:start;
}
.faq-intro{
  position:sticky;
  top:130px;
}
.faq-intro .kicker{color:rgba(255,255,255,.56)}
.faq-intro .section-title{
  color:#fff;
  font-size:clamp(3.3rem,6.5vw,6.6rem);
}
.faq-intro p{
  margin:26px 0 0;
  color:rgba(255,255,255,.55);
  line-height:1.7;
}

.faq-list{
  display:grid;
  gap:12px;
}
.faq-item{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(255,255,255,.072),rgba(255,255,255,.022));
  box-shadow:0 18px 54px rgba(0,0,0,.14);
  transition:border-color .28s,background .28s,transform .4s var(--sx-ease);
}
.faq-item:hover{
  transform:translateX(5px);
  border-color:rgba(255,255,255,.18);
  background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.028));
}
.faq-question{
  width:100%;
  display:grid;
  grid-template-columns:54px 1fr 36px;
  gap:18px;
  align-items:center;
  padding:24px 24px 24px 20px;
  border:0;
  color:#fff;
  background:transparent;
  text-align:left;
  cursor:pointer;
}
.faq-index{
  color:var(--sx-cyan);
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.12em;
}
.faq-question strong{
  font:600 clamp(1.03rem,1.45vw,1.22rem)/1.35 "Space Grotesk",sans-serif;
  letter-spacing:-.018em;
}
.faq-plus{
  position:relative;
  width:28px;height:28px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:50%;
  transition:transform .35s var(--sx-ease),background .25s,border-color .25s;
}
.faq-plus::before,
.faq-plus::after{
  content:"";
  position:absolute;left:50%;top:50%;
  width:10px;height:1px;
  background:#fff;
  transform:translate(-50%,-50%);
}
.faq-plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-item.open .faq-plus{
  transform:rotate(45deg);
  background:rgba(19,216,238,.12);
  border-color:rgba(19,216,238,.38);
}
.faq-answer{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  transition:grid-template-rows .48s var(--sx-ease),opacity .35s;
}
.faq-item.open .faq-answer{grid-template-rows:1fr;opacity:1}
.faq-answer-inner{overflow:hidden}
.faq-answer p{
  margin:0;
  padding:0 78px 26px 92px;
  color:rgba(255,255,255,.61);
  line-height:1.75;
}

/* Staggered reveal variants use the existing IntersectionObserver. */
.client-wall.reveal{transform:translateY(42px) scale(.985)}
.difference-card.reveal:nth-child(1){transform:translate(-60px,45px) rotate(-1.2deg)}
.difference-card.reveal:nth-child(2){transform:translate(25px,65px) rotate(1deg)}
.difference-card.reveal:nth-child(3){transform:translate(-25px,65px) rotate(-1deg)}
.difference-card.reveal:nth-child(4){transform:translate(60px,45px) rotate(1.2deg)}
.difference-card.reveal.visible{transform:none;transition-duration:.88s}

/* Accessibility and motion */
@keyframes sx-marquee{to{transform:translateX(calc(-50% - 7px))}}
@keyframes sx-orbit{to{transform:rotate(360deg)}}

@media(max-width:980px){
  .clients-head,.difference-head,.faq-layout{grid-template-columns:1fr}
  .clients-head .lede,.difference-intro{justify-self:start}
  .difference-card,
  .difference-card:nth-child(1),
  .difference-card:nth-child(2),
  .difference-card:nth-child(3),
  .difference-card:nth-child(4){grid-column:span 12}
  .faq-intro{position:relative;top:auto}
  .client-chip{width:220px;height:120px}
}
@media(max-width:680px){
  .clients-head .section-title,.difference-head .section-title,.faq-intro .section-title{font-size:clamp(3rem,13vw,5.1rem)}
  .client-chip{width:190px;height:108px;border-radius:20px}
  .client-chip img{max-width:72%;max-height:46px}
  .client-name{font-size:.9rem}
  .difference-card{min-height:300px;padding:26px}
  .faq-question{grid-template-columns:38px 1fr 32px;padding:20px 18px}
  .faq-answer p{padding:0 50px 22px 56px}
}
@media(prefers-reduced-motion:reduce){
  .client-track{animation:none!important}
  .clients-experience::after{animation:none!important}
  .client-chip,.difference-card,.faq-item{transition:none!important}
}


/* -------------------------------------------------
   SERVICES PAGE — restored chromatic section rhythm
   Keeps the CMS content architecture intact while restoring
   visual separation between service systems and process.
-------------------------------------------------- */
.services-page .services-systems{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 8% 14%,rgba(19,216,238,.14),transparent 27%),
    radial-gradient(circle at 92% 84%,rgba(255,17,136,.10),transparent 26%),
    linear-gradient(180deg,#f9fbff 0%,#f3f7fc 100%);
  border-block:1px solid rgba(12,43,93,.07);
}
.services-page .services-systems::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  background:linear-gradient(90deg,var(--sx-cyan),var(--sx-green),var(--sx-orange),var(--sx-pink),var(--sx-violet));
  opacity:.72;
}
.services-page .service-stack{position:relative;z-index:2}
.services-page .service-panel{
  --svc-a:var(--sx-cyan);
  --svc-b:var(--sx-blue);
  position:relative;
  border-color:color-mix(in srgb,var(--svc-a) 14%,rgba(12,43,93,.11));
  background:
    radial-gradient(circle at 94% 16%,color-mix(in srgb,var(--svc-a) 8%,transparent),transparent 24%),
    linear-gradient(145deg,rgba(255,255,255,.99),rgba(248,250,254,.97));
  box-shadow:0 14px 42px rgba(12,43,93,.055);
  transition:border-color .3s,box-shadow .35s,transform .35s var(--sx-ease),background .35s;
}
.services-page .service-panel:nth-child(2){--svc-a:var(--sx-blue);--svc-b:var(--sx-violet)}
.services-page .service-panel:nth-child(3){--svc-a:var(--sx-violet);--svc-b:var(--sx-pink)}
.services-page .service-panel:nth-child(4){--svc-a:var(--sx-orange);--svc-b:var(--sx-pink)}
.services-page .service-panel:nth-child(5){--svc-a:var(--sx-pink);--svc-b:var(--sx-violet)}
.services-page .service-panel:nth-child(6){--svc-a:var(--sx-green);--svc-b:var(--sx-cyan)}
.services-page .service-panel::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:4px;
  background:linear-gradient(180deg,var(--svc-a),var(--svc-b));
  opacity:.76;
  transition:width .3s var(--sx-ease),opacity .3s;
}
.services-page .service-panel:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--svc-a) 28%,rgba(12,43,93,.12));
  box-shadow:0 22px 55px rgba(12,43,93,.09),0 0 34px color-mix(in srgb,var(--svc-a) 5%,transparent);
}
.services-page .service-panel.open{
  border-color:color-mix(in srgb,var(--svc-a) 34%,rgba(12,43,93,.12));
  background:
    radial-gradient(circle at 92% 12%,color-mix(in srgb,var(--svc-a) 13%,transparent),transparent 28%),
    linear-gradient(145deg,#fff,#f7f9fd);
  box-shadow:0 24px 62px rgba(12,43,93,.10),0 0 42px color-mix(in srgb,var(--svc-a) 7%,transparent);
}
.services-page .service-panel.open::before{width:6px;opacity:1}
.services-page .service-button .num{color:var(--svc-a)}
.services-page .service-toggle{
  width:38px;height:38px;
  display:grid;place-items:center;
  border:1px solid color-mix(in srgb,var(--svc-a) 28%,rgba(12,43,93,.10));
  border-radius:50%;
  color:color-mix(in srgb,var(--svc-a) 74%,var(--sx-navy));
  background:color-mix(in srgb,var(--svc-a) 5%,#fff);
}
.services-page .service-panel.open .service-toggle{
  background:color-mix(in srgb,var(--svc-a) 10%,#fff);
}
.services-page .service-list li{
  border-color:color-mix(in srgb,var(--svc-a) 16%,rgba(12,43,93,.11));
}

/* Process gets its own visual field instead of blending into the service list. */
.services-page .services-process{
  position:relative;
  overflow:hidden;
  padding-top:clamp(84px,9vw,118px);
  background:
    radial-gradient(circle at 86% 16%,rgba(139,76,255,.10),transparent 26%),
    radial-gradient(circle at 8% 90%,rgba(115,229,45,.08),transparent 24%),
    linear-gradient(180deg,#ffffff 0%,#f7f9fd 100%);
  border-bottom:1px solid rgba(12,43,93,.08);
}
.services-page .services-process::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--sx-cyan),var(--sx-violet),var(--sx-pink),transparent);
  opacity:.55;
}
.services-page .services-process .container{position:relative;z-index:2}
.services-page .services-process .kicker{color:var(--sx-violet)}
.services-page .process-card{
  --pc-a:var(--sx-cyan);
  --pc-b:var(--sx-blue);
  position:relative;
  overflow:hidden;
  border-color:color-mix(in srgb,var(--pc-a) 14%,rgba(12,43,93,.11));
  background:
    radial-gradient(circle at 88% 12%,color-mix(in srgb,var(--pc-a) 10%,transparent),transparent 28%),
    linear-gradient(145deg,#fff,#f8faff);
  box-shadow:0 16px 44px rgba(12,43,93,.06);
  transition:transform .38s var(--sx-ease),box-shadow .3s,border-color .3s;
}
.services-page .process-card:nth-child(2){--pc-a:var(--sx-violet);--pc-b:var(--sx-pink)}
.services-page .process-card:nth-child(3){--pc-a:var(--sx-green);--pc-b:var(--sx-cyan)}
.services-page .process-card:nth-child(4){--pc-a:var(--sx-orange);--pc-b:var(--sx-pink)}
.services-page .process-card::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:4px;
  background:linear-gradient(90deg,var(--pc-a),var(--pc-b));
}
.services-page .process-card:hover{
  transform:translateY(-6px);
  border-color:color-mix(in srgb,var(--pc-a) 30%,rgba(12,43,93,.11));
  box-shadow:0 26px 62px rgba(12,43,93,.11),0 0 34px color-mix(in srgb,var(--pc-a) 6%,transparent);
}
.services-page .process-card span{color:var(--pc-a)}
.services-page .process-card h3{color:var(--sx-navy)}

/* Increase chromatic definition in the light "Difference" section. */
.services-page .dv-difference::after{
  content:"";
  position:absolute;
  width:620px;height:620px;border-radius:50%;
  right:-390px;top:-120px;
  background:radial-gradient(circle,rgba(255,17,136,.09),rgba(255,17,136,0) 68%);
  pointer-events:none;
}
.services-page .difference-head,
.services-page .difference-grid{position:relative;z-index:2}
.services-page .difference-card{
  background:
    radial-gradient(circle at var(--gx,82%) var(--gy,16%),color-mix(in srgb,var(--a) 21%,transparent),transparent 30%),
    linear-gradient(150deg,#fff,#f5f7fb);
}

/* Keep FAQ-to-CTA handoff tight; no unstyled gap between sections. */
.services-page .dv-faq{margin-bottom:0}
.services-page .cta-band{margin-top:0}

@media(max-width:680px){
  .services-page .services-process{padding-top:78px}
  .services-page .service-panel::before{width:3px}
  .services-page .service-panel.open::before{width:4px}
  .services-page .service-toggle{width:34px;height:34px}
}