/* Scroll-driven stacking cards (CodyHouse-style sticky + scale).
   Loaded last so theme carousel leftovers cannot kill position:sticky.

   Pain/problem stacks: desktop pairs 2 cards per sticky layer;
   mobile keeps 1 card per layer — animation runs in both modes. */

/* overflow-x:hidden on body makes overflow-y compute to auto and
   breaks sticky. clip contains bleed without creating a scrollport. */
html:has(body.page-service),
html:has(body.page-web-dev){
  overflow-x:clip;
}
body.page-service,
body.page-web-dev{
  overflow-x:clip !important;
}

/* Theme sections use overflow:hidden for bg images; that kills sticky. */
.page-service section:has(.page-svc-stack),
body.page-web-dev section:has(.page-svc-stack){
  overflow-x:clip !important;
  overflow-y:visible !important;
}

.page-service .page-svc-stack,
body.page-web-dev .page-svc-stack{
  --svc-stack-nav: calc(72px + 10px);
  --svc-stack-peek: 14px;
  --svc-stack-gap: 20px;
  position:relative;
  width:100%;
  max-width:100%;
  min-width:0;
  margin-top:8px;
  padding-inline:0 !important;
  overflow:visible !important;
  transform:none !important;
  filter:none !important;
  perspective:none !important;
  contain:none !important;
  will-change:auto !important;
}
@media (max-width:900px){
  .page-service .page-svc-stack,
  body.page-web-dev .page-svc-stack{
    --svc-stack-nav: calc(56px + 12px);
  }
}

.page-service .page-svc-stack .svc-nav,
.page-service .page-svc-stack .svc-dots,
body.page-web-dev .page-svc-stack .svc-nav,
body.page-web-dev .page-svc-stack .svc-dots,
.page-service .page-svc-carousel .svc-nav,
body.page-web-dev .page-svc-carousel .svc-nav,
.page-service .svc-prev,
.page-service .svc-next,
body.page-web-dev .svc-prev,
body.page-web-dev .svc-next{
  display:none !important;
}

.page-service .page-svc-stack .svc-viewport,
.page-service .page-svc-stack .svc-track,
body.page-web-dev .page-svc-stack .svc-viewport,
body.page-web-dev .page-svc-stack .svc-track{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  overflow:visible !important;
  transform:none !important;
  filter:none !important;
  perspective:none !important;
  contain:none !important;
  will-change:auto !important;
  gap:0 !important;
  flex:none !important;
  flex-wrap:nowrap !important;
  touch-action:auto !important;
  cursor:default !important;
  transition:none !important;
}

.page-service .page-svc-stack .svc-stack-item,
body.page-web-dev .page-svc-stack .svc-stack-item{
  position:sticky;
  top:calc(var(--svc-stack-nav) + (var(--index0, 0) * var(--svc-stack-peek)));
  z-index:calc(1 + var(--index0, 0));
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  height:auto !important;
  margin:0 0 var(--svc-stack-gap) !important;
  padding:0 !important;
  flex:none !important;
  overflow:visible !important;
  transform:none !important;
  box-sizing:border-box;
}
.page-service .page-svc-stack .svc-stack-item:last-child,
body.page-web-dev .page-svc-stack .svc-stack-item:last-child{
  margin-bottom:0 !important;
}

/* Desktop pair layer: 2 cards side-by-side inside one sticky row */
.page-service .page-svc-stack .svc-stack-pair,
body.page-web-dev .page-svc-stack .svc-stack-pair{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--svc-stack-gap);
  width:100%;
  align-items:stretch;
  transform-origin:center top;
  backface-visibility:hidden;
}
.page-service .page-svc-stack .svc-stack-pair:has(> :only-child),
body.page-web-dev .page-svc-stack .svc-stack-pair:has(> :only-child){
  grid-template-columns:1fr;
}
.page-service .page-svc-stack .svc-stack-pair > *,
body.page-web-dev .page-svc-stack .svc-stack-pair > *{
  width:100%;
  min-width:0;
  height:100%;
  box-sizing:border-box;
}

.page-service .page-svc-stack .svc-stack-item > *,
body.page-web-dev .page-svc-stack .svc-stack-item > *{
  width:100%;
  max-width:100%;
  height:auto;
  min-height:0;
  box-sizing:border-box;
  transform-origin:center top;
  backface-visibility:hidden;
  opacity:1 !important;
  transition:box-shadow .2s,border-color .2s,background .2s !important;
}

/* Opaque stack faces — prevent see-through / text overlap while scaling */
.page-service .page-svc-stack .svc-stack-pair,
body.page-web-dev .page-svc-stack .svc-stack-pair{
  background:transparent;
  isolation:isolate;
}
.page-service:not(.page-theme-html) .page-svc-stack .step,
.page-service:not(.page-theme-html) .page-svc-stack .proc,
.page-service:not(.page-theme-html) .page-svc-stack .process-step,
.page-service:not(.page-theme-html) .page-svc-stack .process-card,
.page-service:not(.page-theme-html) .page-svc-stack .proc-card,
.page-service:not(.page-theme-html) .page-svc-stack .proc-step,
.page-service:not(.page-theme-html) .page-svc-stack .loop-card,
.page-service:not(.page-theme-html) .page-svc-stack .pain,
.page-service:not(.page-theme-html) .page-svc-stack .pain-card,
.page-service:not(.page-theme-html) .page-svc-stack .problem-card,
.page-service:not(.page-theme-html) .page-svc-stack .svc,
.page-service:not(.page-theme-html) .page-svc-stack .svc-card,
.page-service:not(.page-theme-html) .page-svc-stack .serv-card,
.page-service:not(.page-theme-html) .page-svc-stack .feat-card,
.page-service:not(.page-theme-html) .page-svc-stack .feat,
.page-service:not(.page-theme-html) .page-svc-stack .why-card,
.page-service:not(.page-theme-html) .page-svc-stack .why,
.page-service:not(.page-theme-html) .page-svc-stack .pstep,
.page-service:not(.page-theme-html) .page-svc-stack .compare-card,
.page-service:not(.page-theme-html) .page-svc-stack .ptile,
.page-service:not(.page-theme-html) .page-svc-stack .prob,
.page-service:not(.page-theme-html) .page-svc-stack .edge,
body.page-web-dev .page-svc-stack .step,
body.page-web-dev .page-svc-stack .process-step,
body.page-web-dev .page-svc-stack .pain-card,
body.page-web-dev .page-svc-stack .service-card,
body.page-web-dev .page-svc-stack .why-card{
  opacity:1 !important;
  background:#fff !important;
  background-color:#fff !important;
  border:1px solid var(--line, #E1E9E5) !important;
  border-radius:var(--r-card, 18px) !important;
  box-shadow:0 1px 2px rgba(13,32,41,.04),0 10px 28px -16px rgba(13,32,41,.16) !important;
  padding:28px 26px !important;
  -webkit-font-smoothing:antialiased;
}

/* Theme-html process/loop cards: opaque white faces (stops text bleed while stacking) */
.page-theme-html .page-svc-stack .svc-stack-item > .step,
.page-theme-html [data-thm-stack] .svc-stack-item > .step,
.page-theme-html .page-svc-stack .proc-card,
.page-theme-html [data-thm-stack] .proc-card,
.page-theme-html .page-svc-stack .proc-step,
.page-theme-html [data-thm-stack] .proc-step,
.page-theme-html .page-svc-stack .loop-card,
.page-theme-html [data-thm-stack] .loop-card,
.page-theme-html .page-svc-stack .svc-stack-item > .proc,
.page-theme-html [data-thm-stack] .svc-stack-item > .proc,
.page-theme-html .page-svc-stack .process-card,
.page-theme-html [data-thm-stack] .process-card{
  opacity:1 !important;
  background:#fff !important;
  background-color:#fff !important;
  isolation:isolate;
  overflow:hidden !important;
  backface-visibility:hidden;
}

/* Featured large card stays ink on mobile/tablet stack */
body.page-web-dev .page-svc-stack .service-card.svc-card-lg,
body.page-web-dev .page-svc-stack .svc-card-lg,
.page-service .page-svc-stack .svc-card-lg{
  background:var(--ink, #0A1A22) !important;
  background-color:var(--ink, #0A1A22) !important;
  border-color:var(--line-dark, rgba(244,122,31,.16)) !important;
  color:#fff !important;
  box-shadow:0 12px 32px -18px rgba(0,0,0,.55) !important;
}
body.page-web-dev .page-svc-stack .service-card.svc-card-lg h3,
body.page-web-dev .page-svc-stack .svc-card-lg h3,
.page-service .page-svc-stack .svc-card-lg h3{
  color:#fff !important;
}
body.page-web-dev .page-svc-stack .service-card.svc-card-lg p,
body.page-web-dev .page-svc-stack .service-card.svc-card-lg .tag,
.page-service .page-svc-stack .svc-card-lg p,
.page-service .page-svc-stack .svc-card-lg .tag{
  color:#B7CBD2 !important;
}
body.page-web-dev .page-svc-stack .service-card.svc-card-lg .tag{
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(255,255,255,.12) !important;
}
body.page-web-dev .page-svc-stack .service-card.svc-card-lg .svc-icon{
  background:rgba(244,122,31,.15) !important;
  color:var(--signal, #F47A1F) !important;
}
.page-service:not(.page-theme-html) .sec-ink .page-svc-stack .step,
.page-service:not(.page-theme-html) .sec-ink .page-svc-stack .proc,
.page-service:not(.page-theme-html) .sec-ink .page-svc-stack .pain,
.page-service:not(.page-theme-html) .sec-ink .page-svc-stack .pain-card,
.page-service:not(.page-theme-html) .sec-ink .page-svc-stack .problem-card,
.page-service:not(.page-theme-html) .sec-ink .page-svc-stack .svc,
.page-service:not(.page-theme-html) .sec-ink .page-svc-stack .svc-card,
.page-service:not(.page-theme-html) .page-svc-stack--ink .step,
.page-service:not(.page-theme-html) .page-svc-stack--ink .proc,
.page-service:not(.page-theme-html) .page-svc-stack--ink .pain,
.page-service:not(.page-theme-html) .page-svc-stack--ink .pain-card,
.page-service:not(.page-theme-html) .page-svc-stack--ink .problem-card,
.page-service:not(.page-theme-html) .page-svc-stack--ink .svc,
.page-service:not(.page-theme-html) .page-svc-stack--ink .svc-card{
  background:var(--ink-2, #0F2A33) !important;
  background-color:var(--ink-2, #0F2A33) !important;
  border-color:var(--line-dark, rgba(244,122,31,.16)) !important;
  box-shadow:0 12px 32px -18px rgba(0,0,0,.55) !important;
  color:#B7CBD2;
}
.page-service:not(.page-theme-html) .sec-ink .page-svc-stack .step h4,
.page-service:not(.page-theme-html) .sec-ink .page-svc-stack .pain h4,
.page-service:not(.page-theme-html) .sec-ink .page-svc-stack .svc h4,
.page-service:not(.page-theme-html) .page-svc-stack--ink .step h4,
.page-service:not(.page-theme-html) .page-svc-stack--ink .pain h4,
.page-service:not(.page-theme-html) .page-svc-stack--ink .svc h4,
.page-service:not(.page-theme-html) .sec-ink .page-svc-stack .problem-card h4,
.page-service:not(.page-theme-html) .page-svc-stack--ink .problem-card h4{
  color:#fff !important;
}
/* Process steps in stack: keep number accent, kill bare top-rule look */
.page-service:not(.page-theme-html) .page-svc-stack .step,
.page-service:not(.page-theme-html) .page-svc-stack .proc,
.page-service:not(.page-theme-html) .page-svc-stack .process-step{
  border-top-width:1px !important;
  padding-top:28px !important;
}

.page-service .page-svc-stack .svc-stack-item > .reveal,
.page-service .page-svc-stack .svc-stack-pair > .reveal,
.page-service .page-svc-stack .reveal,
body.page-web-dev .page-svc-stack .svc-stack-item > .reveal,
body.page-web-dev .page-svc-stack .reveal{
  opacity:1 !important;
}

@media (prefers-reduced-motion: reduce){
  .page-service .page-svc-stack .svc-stack-item,
  body.page-web-dev .page-svc-stack .svc-stack-item{
    position:relative !important;
    top:auto !important;
    z-index:auto;
    margin-bottom:16px !important;
  }
  .page-service .page-svc-stack .svc-stack-item > *,
  body.page-web-dev .page-svc-stack .svc-stack-item > *{
    transform:none !important;
  }
}

/* AC-WHITE-STACK-CARDS — keep light paper faces on chatbot stacks */
.page-service .ac-page .page-svc-stack .pstep,
.page-service .ac-page .page-svc-stack .proc,
.page-service .ac-page .page-svc-stack .why,
.page-service .ac-page .page-svc-stack .why-card,
.page-service .ac-page .page-svc-stack .svc{
  background:#fff !important;
  background-color:#fff !important;
  border-color:var(--line,#E1E9E5) !important;
  color:var(--graphite,#0D2029) !important;
  box-shadow:0 1px 2px rgba(13,32,41,.04),0 10px 28px -16px rgba(13,32,41,.16) !important;
}
.page-service .ac-page .page-svc-stack .pstep h4,
.page-service .ac-page .page-svc-stack .proc h4,
.page-service .ac-page .page-svc-stack .svc h3,
.page-service .ac-page .page-svc-stack .why h3{
  color:var(--graphite,#0D2029) !important;
}
.page-service .ac-page .page-svc-stack .pstep p,
.page-service .ac-page .page-svc-stack .proc p,
.page-service .ac-page .page-svc-stack .svc p,
.page-service .ac-page .page-svc-stack .why p{
  color:var(--slate,#4B5B62) !important;
}

/* ============================================================
   WP .why-bg ONLY — mobile horizontal swipe carousel
   Loads last. Desktop: wrapper is transparent; grid unchanged.
   ============================================================ */

/* Desktop / tablet: wrapper does nothing */
.page-wordpress .why-bg .why-mobile-carousel,
.wpdev-theme-page .why-bg .why-mobile-carousel{
  display:block;
  width:100%;
  max-width:100%;
}

@media (max-width:767px){
  /* Scroll lives on the wrapper — survives .why-bg { overflow:hidden } */
  .page-wordpress .why-bg .why-mobile-carousel,
  .wpdev-theme-page .why-bg .why-mobile-carousel{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    touch-action:pan-x;
  }
  .page-wordpress .why-bg .why-mobile-carousel::-webkit-scrollbar,
  .wpdev-theme-page .why-bg .why-mobile-carousel::-webkit-scrollbar{
    display:none;
    height:0;
  }

  /* Kill the desktop/tablet grid — force one horizontal track */
  .page-wordpress .why-bg .why-mobile-carousel .feature-grid,
  .wpdev-theme-page .why-bg .why-mobile-carousel .feature-grid{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:stretch;
    gap:16px;
    width:max-content !important;
    max-width:none !important;
    min-width:0;
    margin:0;
    padding:0;
    grid-template-columns:none !important;
    grid-template-rows:none !important;
    overflow:visible !important;
  }

  /* One slide ≈ viewport; peek of next card */
  .page-wordpress .why-bg .why-mobile-carousel .feat-card,
  .wpdev-theme-page .why-bg .why-mobile-carousel .feat-card,
  .wpdev-theme-page #why-us .why-mobile-carousel .why-card,
  .wpdev-theme-page .why-mobile-carousel .why-grid > .why-card{
    flex:0 0 85vw !important;
    flex-shrink:0 !important;
    width:85vw !important;
    min-width:85vw !important;
    max-width:85vw !important;
    box-sizing:border-box !important;
    scroll-snap-align:start;
    scroll-snap-stop:normal;
  }

  .wpdev-theme-page #why-us .why-mobile-carousel,
  .wpdev-theme-page .why-mobile-carousel:has(> .why-grid){
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    touch-action:pan-x;
  }

  .wpdev-theme-page #why-us .why-mobile-carousel .why-grid,
  .wpdev-theme-page .why-mobile-carousel > .why-grid{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:stretch;
    gap:16px;
    width:max-content !important;
    max-width:none !important;
    min-width:0;
    margin:0;
    padding:0;
    grid-template-columns:none !important;
    grid-template-rows:none !important;
    overflow:visible !important;
  }
}