/* ============================================================================
   JegoDigital — service landing pages (2026-07-26)
   Extends css/jd-home-2026.css. Only the pieces the homepage doesn't already
   provide: split hero, 3-up stat row, step cards, tighter band.
   ========================================================================== */

/* ---------- split hero ---------- */
.jd-hero--svc{
  padding:clamp(120px,13vh,158px) 24px clamp(60px,7vw,88px);
  border-bottom:1px solid rgba(197,160,89,.16);
}
.jd-svc-hero{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(32px,5vw,68px);align-items:center;
}
.jd-svc-hero__copy .jd-h1{margin:0 0 22px;font-size:clamp(2.2rem,4.6vw,3.7rem);letter-spacing:-.03em}
.jd-svc-hero__copy .jd-lead{margin:0 0 32px}
.jd-svc-hero__cta{justify-content:flex-start;margin-bottom:0}
.jd-svc-hero__art{
  position:relative;border-radius:24px;overflow:hidden;
  border:1px solid var(--jd-line);background:#0b0d12;
  box-shadow:0 40px 110px -40px rgba(0,0,0,.9),0 0 70px rgba(197,160,89,.10);
}
.jd-svc-hero__art img{width:100%;display:block;aspect-ratio:16/10;object-fit:cover}
.jd-svc-hero__art::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(11,13,18,.55),transparent 46%);
}

/* ---------- tighter band + 3-up stats ---------- */
.jd-band--tight{padding-block:clamp(40px,5vw,60px)}
.jd-stats--3{grid-template-columns:repeat(3,1fr)}
.jd-stats--3 .jd-stat strong{font-size:clamp(1.5rem,2.5vw,2.1rem)}

/* ---------- 3-up feature grid: media is a fixed frame, no scrim needed ---- */
.jd-grid--3{grid-template-columns:repeat(auto-fit,minmax(288px,1fr))}
.jd-grid--3 .jd-svc__media{aspect-ratio:4/3}
.jd-grid--3 .jd-svc__media::after{
  background:linear-gradient(0deg,rgba(20,23,30,.94) 2%,rgba(20,23,30,.22) 40%,transparent 70%);
}

/* ---------- steps ---------- */
.jd-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.jd-step{
  position:relative;padding:30px 26px 28px;border-radius:20px;
  border:1px solid var(--jd-line);background:var(--jd-surface);
  transition:border-color .45s,transform .55s var(--ease-settle);
}
.jd-step:hover{border-color:rgba(197,160,89,.4);transform:translateY(-5px)}
.jd-step__n{
  display:block;font-family:'Roboto Mono',monospace;font-size:2.1rem;font-weight:300;
  line-height:1;color:rgba(197,160,89,.34);margin-bottom:14px;
}
.jd-step p{margin:9px 0 0;font-size:.9rem;line-height:1.62;color:var(--jd-txt-2)}

/* ---------- split media on service pages is a plain image ---------- */
.jd-split__media img{aspect-ratio:4/3;object-fit:cover}

/* ---------- demo gallery (9:16 delivered videos, poster-first) ---------- */
.jd-rail--demos{gap:18px}
.jd-demo{flex:0 0 min(62vw,258px);scroll-snap-align:start}
.jd-demo__frame{
  position:relative;border-radius:20px;overflow:hidden;aspect-ratio:9/16;
  border:1px solid var(--jd-line);background:#000;cursor:pointer;
  transition:border-color .45s,transform .55s var(--ease-settle),box-shadow .55s var(--ease-settle);
}
.jd-demo__frame:hover{border-color:rgba(197,160,89,.5);transform:translateY(-5px);box-shadow:var(--shadow)}
.jd-demo__frame video{width:100%;height:100%;object-fit:cover;display:block}
.jd-demo__play{
  position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.30);border:0;color:#120d02;transition:opacity .4s,background .4s;
}
.jd-demo__frame:hover .jd-demo__play{background:rgba(0,0,0,.14)}
.jd-demo__play svg{
  width:54px;height:54px;padding:16px 14px 16px 18px;border-radius:50%;
  background:linear-gradient(135deg,var(--jd-gold-2),var(--jd-gold));
  box-shadow:0 0 34px rgba(197,160,89,.44);transition:transform .45s var(--ease-settle);
}
.jd-demo__frame:hover .jd-demo__play svg{transform:scale(1.08)}
.jd-demo__frame.is-playing .jd-demo__play{opacity:0;pointer-events:none}
.jd-demo__cap{
  margin:13px 3px 0;font-family:'Roboto Mono',monospace;font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--jd-txt-3);
}

@media (max-width:1024px){
  .jd-svc-hero{grid-template-columns:1fr;gap:36px}
  .jd-svc-hero__art{order:-1}
  .jd-steps{grid-template-columns:1fr}
}
@media (max-width:640px){
  .jd-hero--svc{padding:110px 20px 52px}
  .jd-svc-hero__cta{flex-direction:column;align-items:stretch}
  .jd-svc-hero__cta .jd-btn{width:100%}
  .jd-stats--3{grid-template-columns:1fr}
}