/* EUX Specialties - style-isolated under .exsp. All tokens are local so the
   module renders identically regardless of the host theme (Salient/WPBakery). */
.exsp{
  --exsp-ink:#0a0a0a;
  --exsp-white:#ffffff;
  --exsp-violet:#7038e2;
  --exsp-g-200:#e7e7ea;
  --exsp-g-400:#a1a1aa;
  --exsp-g-500:#71717a;
  --exsp-g-700:#3f3f46;
  --exsp-ease-out:cubic-bezier(.22,1,.36,1);
  --exsp-dur-fast:150ms;
  --exsp-dur-base:280ms;
  --exsp-dur-reveal:900ms;
  --exsp-sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --exsp-mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  display:block;
  background:var(--exsp-white);
  color:var(--exsp-ink);
  font-family:var(--exsp-sans);
  margin:0;
  padding:clamp(72px,9vw,140px) 7vw;
}
.exsp *,.exsp *::before,.exsp *::after{box-sizing:border-box}
.exsp h1,.exsp h2,.exsp h3,.exsp h4,.exsp p,.exsp ul,.exsp li{margin:0;padding:0}
.exsp ul{list-style:none}
.exsp a{color:inherit;text-decoration:none}

/* reveal */
.exsp-reveal{
  opacity:0;transform:translateY(22px);
  transition:opacity var(--exsp-dur-reveal) var(--exsp-ease-out),transform var(--exsp-dur-reveal) var(--exsp-ease-out);
  will-change:opacity,transform;
}
.exsp-reveal.in{opacity:1;transform:none}

/* top bar */
.exsp-top{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:56px}
.exsp-eyebrow{font-family:var(--exsp-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--exsp-violet)}
.exsp-tag{font-family:var(--exsp-mono);font-size:11.5px;color:var(--exsp-g-500);letter-spacing:.04em}

/* layout */
.exsp-grid{display:grid;grid-template-columns:1.25fr 0.75fr;gap:56px;align-items:start}

/* names column */
.exsp-names{display:grid}
.exsp-name{
  appearance:none;background:none;border:none;border-radius:0;box-shadow:none;
  text-align:left;width:100%;cursor:pointer;margin:0;
  padding:22px 0;border-top:1px solid var(--exsp-g-200);
  display:flex;align-items:baseline;gap:20px;color:var(--exsp-ink);
  transition:opacity var(--exsp-dur-base) var(--exsp-ease-out),padding-left var(--exsp-dur-base) var(--exsp-ease-out);
  text-transform:none;letter-spacing:normal;font-weight:400;line-height:1;
}
.exsp-name:hover,.exsp-name:focus{background:none;box-shadow:none;outline:none}
.exsp-name:last-child{border-bottom:1px solid var(--exsp-g-200)}
.exsp-name .exsp-nn{font-family:var(--exsp-mono);font-size:13px;color:var(--exsp-g-400);transition:color var(--exsp-dur-base)}
.exsp-name .exsp-nt{font-size:clamp(30px,5vw,60px);font-weight:400;letter-spacing:-.035em;line-height:1;font-family:var(--exsp-sans);color:inherit}
.exsp-names:hover .exsp-name{opacity:.32}
.exsp-names:hover .exsp-name:hover{opacity:1}
.exsp-name:hover{padding-left:14px}
.exsp-name:hover .exsp-nn,.exsp-name.active .exsp-nn{color:var(--exsp-violet)}
.exsp-name.active{opacity:1}

/* panel */
.exsp-panel{position:sticky;top:80px;border-left:1px solid var(--exsp-g-200);padding-left:32px;min-height:280px}
.exsp-pane{display:none}
.exsp-pane.on{display:block}

/* cascade reveal of pane contents */
.exsp-pane.on .exsp-pno,
.exsp-pane.on .exsp-lede,
.exsp-pane.on .exsp-desc,
.exsp-pane.on li,
.exsp-pane.on .exsp-go{animation:exsprise .5s var(--exsp-ease-out) both}
.exsp-pane.on .exsp-pno{animation-delay:0s}
.exsp-pane.on .exsp-lede{animation-delay:.07s}
.exsp-pane.on .exsp-desc{animation-delay:.11s}
.exsp-pane.on li:nth-child(1){animation-delay:.15s}
.exsp-pane.on li:nth-child(2){animation-delay:.23s}
.exsp-pane.on li:nth-child(3){animation-delay:.31s}
.exsp-pane.on li:nth-child(4){animation-delay:.39s}
.exsp-pane.on li:nth-child(5){animation-delay:.47s}
.exsp-pane.on .exsp-go{animation-delay:.5s}
@keyframes exsprise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.exsp-pane .exsp-pno{font-family:var(--exsp-mono);font-size:11.5px;letter-spacing:.1em;color:var(--exsp-violet)}
.exsp-pane .exsp-lede{font-size:18px;font-weight:400;letter-spacing:-.01em;line-height:1.4;margin-top:14px;color:var(--exsp-ink)}
.exsp-pane .exsp-desc{font-size:14px;line-height:1.65;color:var(--exsp-g-500);margin-top:12px}
.exsp-pane ul{margin-top:24px;display:grid;gap:0;list-style:none}
.exsp-pane li{font-size:14.5px;color:var(--exsp-g-700);padding:11px 0;border-bottom:1px solid var(--exsp-g-200);line-height:1.4}
.exsp-pane .exsp-go{
  margin-top:26px;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--exsp-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--exsp-ink);border-bottom:1px solid var(--exsp-ink);padding-bottom:4px;
  transition:gap var(--exsp-dur-fast);
}
.exsp-pane .exsp-go:hover{gap:14px;color:var(--exsp-ink)}

@media (max-width:820px){
  .exsp-grid{grid-template-columns:1fr;gap:0}
  .exsp-panel{position:relative;top:0;border-left:none;border-top:1px solid var(--exsp-g-200);padding-left:0;padding-top:24px;margin-top:8px;margin-bottom:24px;min-height:0}
  .exsp-names:hover .exsp-name{opacity:1}
}

@media (prefers-reduced-motion:reduce){
  .exsp-reveal{transition:none}
  .exsp-pane.on .exsp-pno,
  .exsp-pane.on .exsp-lede,
  .exsp-pane.on .exsp-desc,
  .exsp-pane.on li,
  .exsp-pane.on .exsp-go{animation:none}
}
