/* ===========================================================
   Section 2 - The Problem (Elementor)
   Left column holds still; the six cost cards stack up under
   the header as you scroll. Motion lives in "FAS 02 Problem JS".
   Keyed off classes, not ids, so any page can use it: a section marked (attributes, not classes -
   Elementor drops _css_classes on containers)
   [data-fp~=pstacksec] holding [data-fp~=pstackstill] (the column that stays put) and [data-fp~=pstack]
   (one .e-con per card). Used by the homepage and For Leaders.
   =========================================================== */

[data-fp~=pstacksec] { position: relative; }

/* a whisper of brand warmth in the top corner so the canvas is not flat */
[data-fp~=pstacksec]::after {
  content: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(58% 44% at 88% 4%, rgba(224, 49, 43, .06), transparent 62%);
}
[data-fp~=pstacksec] > .e-con { position: relative; z-index: 1; }

/* ---------- opener ---------- */
.kp2-strike { position: relative; white-space: nowrap; }
.kp2-strike::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: 54%;
  height: 6px;
  border-radius: 3px;
  background: #E0312B;
  transform: scaleX(var(--kp2-sx, 0));
  transform-origin: left;
}

/* ---------- the cards ---------- */
[data-fp~=pstack] > .e-con {
  position: relative;
  padding: 38px 42px 40px !important;
  border-radius: 22px;
  background: #FFFFFF;
  border: 1px solid rgba(30, 26, 22, .09);
  /* a tight contact shadow under a wide soft one - reads as a real object
     rather than a blurry smudge */
  box-shadow:
    0 1px 2px rgba(30, 26, 22, .06),
    0 30px 60px -34px rgba(30, 26, 22, .6);
  transition: border-color .45s ease, box-shadow .45s ease;
  will-change: transform;
}

/* veil that deepens as the next card covers this one (own property,
   so it never fights the entrance tween over opacity) */
[data-fp~=pstack] > .e-con::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background: #EFEAE2;
  opacity: var(--kp2-dim, 0);
  pointer-events: none;
}

/* the index is the card's one bold move */
[data-fp~=pstack] .kp2-num {
  position: absolute;
  top: 14px;
  right: 34px;
  width: auto !important;
  margin: 0 !important;
  z-index: 1;
}
[data-fp~=pstack] .kp2-num .elementor-heading-title {
  font-weight: 700;
  font-size: 70px;
  line-height: 1;
  letter-spacing: -3px;
  color: rgba(224, 49, 43, .14);
  transition: color .45s ease;
}
[data-fp~=pstack] > .e-con:hover {
  border-color: rgba(224, 49, 43, .3);
  box-shadow:
    0 1px 2px rgba(30, 26, 22, .06),
    0 38px 72px -34px rgba(224, 49, 43, .45);
}
[data-fp~=pstack] > .e-con:hover .kp2-num .elementor-heading-title {
  /* full brand red on hover, so the index reads as the card's live state */
  color: #E0312B;
}

[data-fp~=pstack] .kp2-t .elementor-heading-title {
  font-weight: 700;
  font-size: 30px;
  line-height: 1.12;
  letter-spacing: -.5px;
  color: #1E1A16;
  padding-right: 108px;
}

/* a rule under the title gives the card editorial structure */
[data-fp~=pstack] .kp2-d {
  position: relative;
  padding-top: 18px;
  margin-top: 5px;
  font-size: 17px;
  line-height: 1.62;
  color: #6B6055;
}
[data-fp~=pstack] .kp2-d::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 126px;
  height: 1px;
  background: rgba(30, 26, 22, .12);
}
[data-fp~=pstack] .kp2-d p { margin: 0; }
[data-fp~=pstack] .kp2-d p + p { margin-top: 10px; }

/* ---------- the stack (desktop only) ---------- */
@media (min-width: 1025px) {
  /* Elementor's own .e-con rule sets position:relative, so out-specify it */
  [data-fp~=pstacksec] [data-fp~=pstackstill] { position: sticky; top: 132px; }
  [data-fp~=pstack] > .e-con { position: sticky; }
  [data-fp~=pstack] > .e-con:nth-child(1) { top: 96px; }
  [data-fp~=pstack] > .e-con:nth-child(2) { top: 112px; }
  [data-fp~=pstack] > .e-con:nth-child(3) { top: 128px; }
  [data-fp~=pstack] > .e-con:nth-child(4) { top: 144px; }
  [data-fp~=pstack] > .e-con:nth-child(5) { top: 160px; }
  [data-fp~=pstack] > .e-con:nth-child(6) { top: 176px; }
}

@media (max-width: 1024px) {
  [data-fp~=pstack] > .e-con { padding: 30px 28px 32px !important; }
  [data-fp~=pstack] .kp2-num { top: 12px; right: 24px; }
  [data-fp~=pstack] .kp2-num .elementor-heading-title { font-size: 54px; letter-spacing: -2px; }
  [data-fp~=pstack] .kp2-t .elementor-heading-title { font-size: 24px; padding-right: 74px; }
  [data-fp~=pstack] .kp2-d { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .kp2-strike::after { transform: scaleX(1); }
}

@media (max-width: 1024px) {
  [data-fp~=pstack] .kp2-d::before { right: 86px; }
}