/*
 * EUX Sticky Projects - all rules scoped under .eux-spj so nothing leaks
 * into (or is overridden by) Salient / WPBakery styles.
 */
.eux-spj{
  --spj-ink:#15110a;--spj-paper:#fffdf8;--spj-surf:#f3ecdd;
  --spj-line:rgba(21,17,10,.13);--spj-line2:rgba(21,17,10,.07);
  --spj-muted:rgba(21,17,10,.56);--spj-muted2:rgba(21,17,10,.4);
  --spj-accent:#7038e2;
  --spj-nav:96px;--spj-nav-m:76px;--spj-radius:22px;--spj-maxw:1080px;
  --spj-serif:"Cormorant Garamond",Georgia,serif;
  --spj-sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --spj-mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --spj-ease:cubic-bezier(.22,1,.36,1);
  font-family:var(--spj-sans);color:var(--spj-ink);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.eux-spj *,.eux-spj *::before,.eux-spj *::after{box-sizing:border-box}
.eux-spj img{display:block;max-width:100%;border-radius:0;box-shadow:none}
.eux-spj h2,.eux-spj h3,.eux-spj p{margin:0;padding:0}
.eux-spj a{color:inherit;text-decoration:none;box-shadow:none}

/* ---- optional header ---- */
.eux-spj .spj-head{max-width:var(--spj-maxw);margin:0 auto;padding:clamp(56px,7vw,90px) 30px clamp(26px,3vw,40px)}
.eux-spj .spj-head .spj-eyebrow{font-family:var(--spj-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--spj-accent);margin-bottom:16px}
.eux-spj .spj-head h2{font-family:var(--spj-serif);font-size:clamp(38px,5.4vw,62px);font-weight:600;letter-spacing:-.005em;line-height:1.02;color:var(--spj-ink)}

/* ---- sticky stack ---- */
.eux-spj .spj-stack{max-width:var(--spj-maxw);margin:0 auto;padding:0 30px}
/* tail spacer must be CONTENT (not padding) - sticky cards are only pinned
   while inside the container's content box, so a padding tail releases them */
.eux-spj .spj-stack::after{content:"";display:block;height:60vh}
.eux-spj .spj-panel{
  position:-webkit-sticky;
  position:sticky;
  top:calc(var(--spj-nav) + (var(--i) * 16px));
  border-radius:var(--spj-radius);
  background:var(--spj-paper);
  border:1px solid var(--spj-line);
  box-shadow:0 36px 72px -46px rgba(21,17,10,.55);
  margin-bottom:34px;
  display:flex;
  align-items:stretch;
  isolation:isolate;
}

/* ---- luxe frames + ribbon ---- */
/* frames sit at the bottom of the stack so floating assets pass over them */
.eux-spj .lx-frame{position:absolute;inset:13px;border:1px solid color-mix(in srgb,var(--brand) 40%,transparent);border-radius:14px;pointer-events:none;z-index:0}
.eux-spj .lx-frame2{position:absolute;inset:20px;border:1px solid color-mix(in srgb,var(--brand) 28%,transparent);border-radius:11px;pointer-events:none;z-index:0}
.eux-spj .lx-ribbon{position:absolute;top:26px;left:-1px;background:linear-gradient(100deg,var(--brand),color-mix(in srgb,var(--brand) 62%,#fff));color:var(--ribbon-ink,#fff);font:600 11px var(--spj-mono);letter-spacing:.14em;padding:7px 16px 7px 20px;border-radius:0 999px 999px 0;z-index:7}

/* ---- content half ---- */
/* z-index 2: content-side floaters overlap the image corner, so the content
   column must paint above the media column */
.eux-spj .spj-content{flex:1 1 52%;min-width:0;display:flex;position:relative;z-index:2}
/* 80px top padding keeps the logo clear of the ribbon (top:26 + ~26 tall) */
.eux-spj .spj-pad{position:relative;z-index:1;padding:80px 50px 48px;display:flex;flex-direction:column;justify-content:center;gap:18px;width:100%;max-width:560px}

.eux-spj .lx-logo{height:30px;width:auto;align-self:flex-start}
.eux-spj .lx-logo.mult{mix-blend-mode:multiply}
.eux-spj .lx-eyebrow{display:none;font:500 11px var(--spj-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--brand)}
.eux-spj .lx-head{display:flex;flex-direction:column}
.eux-spj .lx-title{font-family:var(--spj-serif);font-weight:600;font-size:clamp(22px,2.25vw,27px);line-height:1.1;letter-spacing:-.005em;color:var(--spj-ink);margin:0 0 10px}
.eux-spj .lx-text{font:400 14.5px/1.65 var(--spj-sans);color:var(--spj-muted);max-width:44ch;margin:0}

.eux-spj .lx-spec{display:flex;flex-direction:column}
.eux-spj .lx-srow{display:flex;gap:18px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--spj-line2)}
.eux-spj .lx-srow:last-child{border-bottom:1px solid var(--spj-line2)}
.eux-spj .lx-sk{flex:0 0 84px;font:500 10px var(--spj-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--spj-muted2);padding-top:5px}
.eux-spj .lx-sv{font:500 13px var(--spj-sans);color:var(--spj-ink);padding-top:3px}
.eux-spj .lx-chips{display:flex;flex-wrap:wrap;gap:6px}
.eux-spj .lx-chip{font:400 11.5px var(--spj-sans);color:var(--spj-ink);border:1px solid var(--spj-line);border-radius:999px;padding:4px 12px;white-space:nowrap}
.eux-spj .lx-plats{display:flex;flex-wrap:wrap;gap:10px}
.eux-spj .lx-plat{display:inline-flex;align-items:center;gap:8px;font:500 12px var(--spj-sans);color:var(--spj-ink);white-space:nowrap}
.eux-spj .lx-plat i{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 10.5px var(--spj-sans);font-style:normal;color:#fff;background:var(--c)}

.eux-spj .lx-btns{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:2px}
/* hard overrides: Salient anchor/button rules strip the background and recolour
   the text, leaving near-invisible buttons */
.eux-spj a.lx-btn{display:inline-flex!important;align-items:center;gap:10px;background:var(--spj-ink)!important;background-color:var(--spj-ink)!important;color:#f6f1e7!important;font:600 13.5px var(--spj-sans)!important;letter-spacing:-.01em;padding:13px 22px!important;border-radius:999px!important;border:1px solid var(--spj-ink)!important;box-shadow:none!important;text-decoration:none!important;text-transform:none!important;line-height:1!important;opacity:1!important;transition:gap .22s var(--spj-ease),transform .22s var(--spj-ease)!important}
.eux-spj a.lx-btn svg{width:15px;height:15px;stroke:#f6f1e7}
.eux-spj a.lx-btn:hover,.eux-spj a.lx-btn:focus,.eux-spj a.lx-btn:visited{gap:15px;transform:translateY(-1px);background:var(--spj-ink)!important;background-color:var(--spj-ink)!important;color:#f6f1e7!important}
.eux-spj a.lx-web{display:inline-flex!important;align-items:center;gap:9px;background:#fff!important;background-color:#fff!important;color:var(--spj-ink)!important;font:600 13.5px var(--spj-sans)!important;letter-spacing:-.01em;padding:13px 20px!important;border-radius:999px!important;border:1px solid var(--spj-line)!important;box-shadow:none!important;text-decoration:none!important;text-transform:none!important;line-height:1!important;opacity:1!important;transition:gap .22s var(--spj-ease),transform .22s var(--spj-ease)!important}
.eux-spj a.lx-web svg{width:14px;height:14px;stroke:var(--spj-ink)}
.eux-spj a.lx-web:hover,.eux-spj a.lx-web:focus,.eux-spj a.lx-web:visited{gap:13px;transform:translateY(-1px);background:#fff!important;background-color:#fff!important;color:var(--spj-ink)!important}

/* ---- media half ---- */
.eux-spj .spj-media{flex:1 1 48%;min-width:0;display:flex;padding:32px 32px 32px 0;position:relative;z-index:1}
.eux-spj .lx-shot{position:relative;flex:1;min-height:410px;border-radius:14px;overflow:hidden;background:#0c0c0e;border:1px solid var(--spj-line)}
/* hard overrides: Salient/WPBakery global img rules (width/height auto, max-width)\n   otherwise shrink the shot image and leave a gap beside it */\n.eux-spj .lx-shot video,.eux-spj .lx-shot>img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;min-width:0!important;min-height:0!important;object-fit:cover!important;margin:0!important;padding:0!important;border:0!important;opacity:1!important}

/* ---- floating brand objects ---- */
.eux-spj .lx-coin{position:absolute;width:var(--cs,120px);height:var(--cs,120px);pointer-events:none;z-index:8;
  opacity:0;transform:translateY(22px) scale(.7);will-change:transform,opacity;
  transition:opacity .55s var(--spj-ease),transform .55s var(--spj-ease);transition-delay:0s}
.eux-spj .lx-coin.glow::before{content:"";position:absolute;inset:-16%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--brand) 42%,transparent),transparent 66%);filter:blur(8px);z-index:-1}
.eux-spj .lx-coin .bob{display:block;width:100%;height:100%}
.eux-spj .lx-coin img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 18px 26px rgba(21,17,10,.3))}
.eux-spj .spj-panel.spj-in.spj-panel--active .lx-coin{opacity:1;transform:none;transition-delay:var(--fd,.5s)}

/* ---- staggered entrance ---- */
@keyframes spjRiseIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes spjScreenIn{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
.eux-spj.spj-ready .spj-reveal{opacity:0}
.eux-spj .spj-panel.spj-in .spj-reveal{animation:spjRiseIn .6s var(--spj-ease) both;animation-delay:var(--d,0s)}
.eux-spj .spj-panel.spj-in .lx-shot.spj-reveal{animation:spjScreenIn .8s var(--spj-ease) both;animation-delay:var(--d,0s)}
@media (prefers-reduced-motion:reduce){
  .eux-spj.spj-ready .spj-reveal{opacity:1}
  .eux-spj .spj-panel.spj-in .spj-reveal,.eux-spj .spj-panel.spj-in .lx-shot.spj-reveal{animation:none}
  .eux-spj .lx-coin{transform:none;transition:opacity .01s linear}
  .eux-spj .spj-panel.spj-in.spj-panel--active .lx-coin{transition-delay:0s}
}

/* Salient sets body{overflow:hidden} on small screens, which turns the body
   into a non-scrolling scroll container and kills position:sticky inside it.
   overflow:clip clips identically but does NOT create a scroll container. */
@media (max-width:1000px){
  body{overflow:clip !important}
}

/* ---- mobile: stacked card ---- */
@media (max-width:760px){
  /* break out of the WPBakery column padding so cards get real width */
  .eux-spj .spj-stack{width:100vw;margin-left:calc(50% - 50vw);padding:0 12px}
  .eux-spj .spj-panel{flex-direction:column;top:calc(var(--spj-nav-m) + (var(--i) * 10px));margin-bottom:26px;border-radius:24px}
  .eux-spj .lx-frame,.eux-spj .lx-frame2,.eux-spj .lx-ribbon{display:none}
  .eux-spj .lx-eyebrow{display:block;margin-top:2px}
  .eux-spj .spj-content{order:0}
  .eux-spj .spj-media{order:1;padding:0 26px 30px}
  .eux-spj .spj-pad{max-width:none;padding:30px 26px 8px;gap:12px;justify-content:flex-start}
  .eux-spj .lx-logo{max-height:28px;height:auto}
  .eux-spj .lx-title{font-size:24px;margin:2px 0 0}
  .eux-spj .lx-text{font-size:14px;margin-top:8px}
  .eux-spj .lx-spec{display:none}\n  .eux-spj .lx-btns a.lx-web{display:none!important}
  /* if a card has no case-study button, keep its website button on mobile */
  .eux-spj .lx-btns a.lx-web:only-child{display:inline-flex!important}
  .eux-spj .lx-btns{margin-top:6px}
  .eux-spj .lx-shot{flex:none;width:100%;aspect-ratio:1/1;min-height:0;border-radius:18px}
  .eux-spj .spj-content .lx-coin{display:none}
  .eux-spj .spj-media .lx-coin{width:calc(var(--cs,120px)*.42);height:calc(var(--cs,120px)*.42)}
  .eux-spj .spj-media .lx-coin.c1{left:8px !important;right:auto !important;top:-14px !important;bottom:auto !important}
  .eux-spj .spj-media .lx-coin.c2{right:10px !important;left:auto !important;bottom:10px !important;top:auto !important}
}