/* Process section v2 — stacking cards, replicated from the omnerat template's
   "Designed for forward-thinking innovation" block.

   Measured off the live template (2026-08-13):
     wrapper .wrok-wrapper  position:sticky top:0, grid rows 636px per card
     card    .work-card     position:sticky top:90px, height 600px,
                            border-radius 25px,
                            background rgba(46,46,46,.5),
                            backdrop-filter blur(20px)
     motion  each card scales 1 -> 0.7 as the next card covers it (scrub).
             The last card never scales. No opacity, no y-translate.

   The "blurred card behind" look is NOT an animated filter — it is the
   incoming card's backdrop-filter blurring whatever sits under it.

   Ours: icons removed, our type scale, image slot kept on the right. */

.pk-ps{
  --pk-ps-card-h: 600px;
  --pk-ps-gap: 36px;
  --pk-ps-pin: 90px;
  position:sticky;
  top:0;
  display:grid;
  grid-auto-rows:calc(var(--pk-ps-card-h) + var(--pk-ps-gap));
}
.pk-ps > :last-child{height:var(--pk-ps-card-h)}

.pk-ps__card{
  position:sticky;
  top:var(--pk-ps-pin);
  height:var(--pk-ps-card-h);
  border-radius:25px;
  background:rgba(46,46,46,.5);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.06);
  overflow:hidden;
  will-change:transform;
}

.pk-ps__grid{
  height:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:48px;
  padding:48px;
  align-items:stretch;
}

.pk-ps__copy{display:flex;flex-direction:column;height:100%}

.pk-ps__step{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.4);
  margin:0 0 28px;
}

.pk-ps__title{
  font-size:clamp(28px,2.8vw,44px);
  line-height:1.06;
  letter-spacing:-.02em;
  font-weight:500;
  color:#fff;
  margin:0 0 16px;
}

.pk-ps__desc{
  font-size:17px;
  line-height:1.5;
  color:rgba(255,255,255,.62);
  margin:0;
  max-width:52ch;
}

/* Bottom-anchored row — mirrors the template's tag row position. */
.pk-ps__foot{margin-top:auto;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.pk-ps__price{font-size:15px;color:rgba(255,255,255,.5)}

/* Image / icon slot, right half. Holds its box before the real shots land. */
.pk-ps__shot{
  margin:0;
  border-radius:14px;
  overflow:hidden;
  background:rgba(255,255,255,.05);
  height:100%;
}
.pk-ps__shot img{display:block;width:100%;height:100%;object-fit:cover}

/* Watery hover (process-liquid.js). The SVG displacement warp pulls pixels in
   from outside the image box, so the image sits slightly oversized while
   hovered — that keeps the real edges out of frame instead of showing a torn
   transparent rim. Fine pointers only; the warp itself is JS-driven. */
@media (hover:hover) and (pointer:fine){
  .pk-ps__shot img{
    transition:transform .6s cubic-bezier(.22,1,.36,1);
    transform-origin:center;
    will-change:filter,transform;
  }
  .pk-ps__shot.is-liquid img{transform:scale(1.045)}
}
.pk-ps__shot:empty{
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.045) 0 12px,
      rgba(255,255,255,.02) 12px 24px);
}

/* Section head (2026-08-13) — one big centred line + one sub, replacing the
   template's 3-line eyebrow/split-headline/lede stack. Sizes mirror the
   "What we do" intro: eyebrow scale for the heading, lede scale for the sub. */
.pk-ps__head{display:flex;flex-direction:column;align-items:center}
.pk-ps__heading{
  margin:0;
  font-size:clamp(34px,6.35vw,96px);
  line-height:1;
  letter-spacing:-0.03em;
  font-weight:var(--font-weight--400);
}
/* split-word/letter units for the heading fade (driven by process-v2.js) */
.pk-ps__hw{display:inline-block;white-space:nowrap}
.pk-ps__hl{display:inline-block}

.pk-ps__sub{
  margin:clamp(20px,2.2vw,32px) 0 0;
  font-size:clamp(20px,2.65vw,40px);
  line-height:1.15;
  letter-spacing:-0.03em;
  font-weight:var(--font-weight--400);
  max-width:26ch;
}

/* Runway before the cards — measured off the live omnerat template: its
   heading-top to first-card-top gap holds at ~374px. Ours was 280. */
@media (min-width:992px){
  .pk-ps{margin-top:94px}
}

@media (max-width:991px){
  .pk-ps{margin-top:40px}
  .pk-ps__heading{font-size:clamp(30px,7.4vw,56px)}
  .pk-ps__sub{font-size:clamp(19px,4.4vw,30px);max-width:24ch}
  .pk-ps{--pk-ps-card-h:auto;--pk-ps-gap:16px;position:static;grid-auto-rows:auto;gap:16px}
  .pk-ps__card{position:static;height:auto}
  .pk-ps__grid{grid-template-columns:1fr;padding:32px;gap:28px}
  .pk-ps__step{margin-bottom:20px}
  .pk-ps__shot{aspect-ratio:4/3;height:auto}
}

@media (prefers-reduced-motion:reduce){
  .pk-ps__card{transform:none !important}
  .pk-ps__shot img{transition:none;transform:none !important;filter:none !important}
}

/* Step-one CTA (2026-08-13) — the template's nav button has zero horizontal
   padding (it relies on min-width:123px with two-word nav labels), so a real
   sentence label runs edge-to-edge and spills past the pill. Scope a proper
   pill here: real side padding, width from content, no shrink. */
.pk-ps__foot .nav-link.for-button{
  min-width:0;
  width:auto;
  height:auto;
  min-height:52px;
  padding:15px 28px;
  flex:0 0 auto;
}