/* ============================================================
   GRAPE — Solutions page, desktop "sticky split showcase".
   Desktop only (>=1024px). Below that the file does nothing and
   the existing mobile accordion in services.html is untouched.

   The showcase DOM is built by grape-solutions-showcase.js from
   the accordion's own content, so there is one source of truth.
   NOTE: the four-column .acc grid rules in grape-desktop.css are
   superseded here — .svc-list is removed on desktop.
   ============================================================ */
.svcx{display:none}

@media (min-width:1024px){
  .svcx{display:block;padding:24px 0 clamp(60px,8vh,110px)}
  .svc-list{display:none!important}
  .snav{display:none!important}

  .svcx__inner{max-width:var(--container-max,1280px);margin-inline:auto;padding:0 var(--gutter,64px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,5vw,88px);align-items:start}

  /* ---- left: one sticky frame that crossfades ---- */
  .svcx__sticky{position:sticky;top:128px;align-self:start;display:flex;flex-direction:column;gap:26px}
  .svcx__frame{position:relative;aspect-ratio:4 / 3;border-radius:22px;overflow:hidden;background:#231F20;border:1px solid rgba(255,255,255,.12)}
  .svcx__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s cubic-bezier(.4,0,.2,1)}
  .svcx__img.is-on{opacity:1}
  .svcx__frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 44%,rgba(17,16,16,.62) 100%)}
  .svcx__ghost{position:absolute;left:26px;bottom:8px;z-index:2;font-family:var(--font-grotesk);font-weight:700;font-size:118px;line-height:.82;letter-spacing:-.05em;color:rgba(255,255,255,.14);pointer-events:none;transition:opacity .5s ease}

  /* ---- the rail doubles as navigation ---- */
  .svcx__rail{display:flex;flex-direction:column}
  .svcx__railitem{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px;width:100%;padding:13px 2px;background:none;border:0;border-top:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.48);text-align:left;cursor:pointer;font-family:var(--font-grotesk);transition:color .3s ease}
  .svcx__railitem:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
  .svcx__railitem::after{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--grad-warm-x);transition:width .5s cubic-bezier(.4,0,.2,1)}
  .svcx__railitem:hover{color:rgba(255,255,255,.82)}
  .svcx__railitem.is-on{color:#fff}
  .svcx__railitem.is-on::after{width:100%}
  .svcx__railnum{font-size:11px;font-weight:500;letter-spacing:.2em}
  .svcx__raillabel{font-size:15px;font-weight:500;letter-spacing:-.005em}

  /* ---- right: the pillars scroll past ---- */
  .svcx__flow{display:flex;flex-direction:column}
  .svcx__pillar{min-height:86vh;display:flex;flex-direction:column;justify-content:center;padding:5vh 0}
  .svcx__num{font-family:var(--font-grotesk);font-size:12px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.52)}
  .svcx__title{font-family:var(--font-grotesk);font-weight:700;font-size:clamp(36px,2.9vw,52px);line-height:1.03;letter-spacing:-.03em;margin:14px 0 0}
  .svcx__lead{font-family:var(--font-grotesk);font-weight:300;font-size:clamp(17px,1.25vw,20px);line-height:1.5;color:rgba(255,255,255,.68);margin:18px 0 0;max-width:44ch}
  .svcx__feats{list-style:none;margin:34px 0 0;padding:0;display:flex;flex-direction:column}
  .svcx__feats li{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:16px;padding:15px 2px;border-top:1px solid rgba(255,255,255,.1);font-family:var(--font-grotesk);font-weight:300;font-size:16px;color:rgba(255,255,255,.86)}
  .svcx__feats li:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
  .svcx__ico{display:grid;place-items:center;width:22px;height:22px;color:rgba(255,255,255,.72)}
  .svcx__ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
}

@media (prefers-reduced-motion:reduce){
  .svcx__img,.svcx__ghost,.svcx__railitem::after{transition:none}
}