/* The approved Section 02 layout, type fitters and authored lines are retained.
   Only the photographic shell ends before the existing caption now. */
.proo-process-exterior { scroll-margin-top: 80px; }
/* Match both section handoffs to 80% of the former Section 02 -> 03 gap.
   These are precomputed CSS values, not a scroll/resize measuring routine.
   Retain the original responsive shape and split of the lower padding.
   The small fixed optical allowance accounts for the existing caption scale;
   the touch hero also has an existing 8px tail after its final paragraph. */
.proo-process-exterior,
.outcomes-clone--hybrid {
  --process-gap-inner: clamp(32px, 4vw, 72px);
  --process-gap-shell: clamp(32px, 3.6vw, 57.6px);
  --process-gap-intro: 57.6px;
  --process-caption-tail: 2.4px;
  --process-hero-tail: 8px;
  --process-section-gap: calc(var(--process-gap-inner) + var(--process-gap-shell) + var(--process-gap-intro) + var(--process-caption-tail) * .8);
}
@media (max-width: 600px) {
  .proo-process-exterior,
  .outcomes-clone--hybrid {
    --process-gap-intro: 24.56px;
    --process-caption-tail: -3.4px;
  }
  /* This is the actual shared spacing owner, above the legacy inline CSS.
     Increase only the lower handoff; do not grow the hero -> 02 gap too. */
  .outcomes-clone--hybrid {
    --process-gap-intro: 56.56px;
  }
  .proo-process-exterior.two-card-process-test .posh-grid {
    row-gap: var(--process-mobile-card-gap) !important;
  }
  .proo-process-exterior {
    --process-mobile-card-gap: clamp(51.2px, 12.8vw, 67.2px);
  }
}
@media (min-width: 1024px) {
  .proo-process-exterior,
  .outcomes-clone--hybrid {
    --process-gap-intro: 51.2px;
    --process-hero-tail: 0px;
  }
}
@media (min-width: 1100px) {
  .proo-process-exterior,
  .outcomes-clone--hybrid {
    --process-gap-shell: clamp(19.2px, 2vw, 35.2px);
    --process-gap-intro: calc(clamp(51.2px, 4.8vw, 81.6px) - 9.6px);
  }
}
.proo-process-exterior.cmp1-wrapper.two-card-process-test.demo-1 .posh-inner {
  padding-top: calc(var(--process-section-gap) - var(--process-hero-tail)) !important;
  padding-bottom: var(--process-gap-inner) !important;
}
@media (max-width: 1023px) {
  /* Paired with 12px less padding above the under-video editorial group. */
  .proo-process-exterior.cmp1-wrapper.two-card-process-test.demo-1 .posh-inner {
    padding-top: calc(var(--process-section-gap) - var(--process-hero-tail) - 12px) !important;
  }
}
@media (min-width: 1024px) {
  .proo-process-exterior.cmp1-wrapper.two-card-process-test.demo-1 .posh-inner {
    /* Only the hero -> 02 handoff gets this further 15% reduction. */
    padding-top: calc(var(--process-section-gap) * .85) !important;
  }
}
@media (max-width: 580px) {
  .proo-process-exterior.cmp1-wrapper.two-card-process-test.demo-1 .posh-inner {
    /* Match 110% of the visible gap after card one's scaled caption.
       The existing type fitter supplies its overflow from geometry it already
       reads; no independent measurement, observer or scroll listener. */
    padding-top: max(0px, calc((var(--process-mobile-card-gap) - var(--process-first-caption-overflow, 0px)) * 1.1)) !important;
  }
}
.proo-process-exterior.cmp1-wrapper.two-card-process-test.demo-1 .posh-section {
  padding-bottom: var(--process-gap-shell) !important;
}
.outcomes-clone--hybrid[data-lang] .outcomes-clone__inner {
  padding-top: calc(var(--process-gap-intro) - var(--process-caption-tail) * .2) !important;
}
/* Widen the approved copy group uniformly by 4%, retaining authored wrapping
   and the existing heading/subtext proportion. The group remains inset. */
.proo-process-exterior.two-card-process-test .posh-caption {
  --posh-card-copy-scale: 0.9776;
}
@media (max-width: 600px) {
  .proo-process-exterior.two-card-process-test .posh-caption {
    --posh-card-copy-scale: 1.036256;
  }
}
.proo-process-exterior.two-card-process-test .posh-grid .posh-col {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  padding-bottom: 0 !important;
  box-shadow: none !important;
}
.proo-process-exterior.two-card-process-test .posh-grid .posh-col::before,
.proo-process-exterior.two-card-process-test .posh-grid .posh-col::after {
  display: none !important;
  content: none !important;
}
.proo-process-exterior.two-card-process-test .posh-grid .posh-col .posh-card {
  border-radius: clamp(14px, 1.4vw, 22px) !important;
  overflow: hidden !important;
  isolation: isolate;
}
.proo-process-exterior.two-card-process-test .posh-grid .posh-col .posh-card::before {
  display: block !important;
  content: "" !important;
  position: absolute;
  inset: -16% -8%;
  z-index: 0;
  opacity: 1;
  border: 0;
  border-radius: 0;
  pointer-events: none;
  background: url("/wp-content/themes/blocksy-child/proo-new-home/assets/section2-academy-lamplight.webp") center 47% / cover no-repeat;
  transform: scale(1.06);
}
.proo-process-exterior.two-card-process-test .posh-grid .posh-col:nth-child(4) .posh-card::before {
  background-image: url("/wp-content/themes/blocksy-child/proo-new-home/assets/section2-development-launch.webp");
  /* Reveal more sky above the shuttle so its focal point sits lower, nearer
     the sculpture's. Background positioning preserves the parallax overscan. */
  background-position: center 20%;
}
.proo-process-exterior.two-card-process-test .posh-grid .posh-col .posh-card::after {
  display: none !important;
  content: none !important;
}
.proo-process-exterior.two-card-process-test .posh-wrapper[data-lang] .posh-caption .posh-caption-title {
  color: #f7f7f5 !important;
}
.proo-process-exterior.two-card-process-test .posh-caption-desc {
  color: rgba(239, 239, 237, .68) !important;
}
html[data-hero-theme="light"] .proo-process-exterior.two-card-process-test .posh-wrapper[data-lang] .posh-caption .posh-caption-title {
  color: #131314 !important;
}
html[data-hero-theme="light"] .proo-process-exterior.two-card-process-test .posh-caption-desc {
  color: #646468 !important;
}
@supports (animation-timeline: view()) {
  .proo-process-exterior.two-card-process-test .posh-grid .posh-col .posh-card::before {
    animation: section2-card1-parallax linear both;
    animation-duration: auto;
    animation-timeline: --section2-card1;
    animation-range: cover 0% cover 100%;
    will-change: transform;
  }
  .proo-process-exterior.two-card-process-test .posh-grid .posh-col:nth-child(4) .posh-card::before {
    animation-timeline: --section2-card2;
  }
}
@media (max-width: 600px) {
  /* Same muted caption colors as the Section 03 mobile cards. */
  .proo-process-exterior.two-card-process-test .posh-caption-desc {
    color: #858588 !important;
  }
  html[data-hero-theme="light"] .proo-process-exterior.two-card-process-test .posh-caption-desc {
    color: #8b8b90 !important;
  }
  .proo-process-exterior.two-card-process-test .posh-grid .posh-col .posh-card {
    border-radius: clamp(18px, 4.6vw, 22px) !important;
  }
  .proo-process-exterior.two-card-process-test .posh-grid .posh-col .posh-card::before {
    animation: none !important;
    transform: translate3d(0, var(--section2-stable-parallax-y, 0%), 0) scale(1.06) !important;
    will-change: transform;
  }
}
@media (prefers-reduced-motion: reduce) {
  .proo-process-exterior.two-card-process-test .posh-grid .posh-col .posh-card::before {
    animation: none !important;
    transform: scale(1.06) !important;
    will-change: auto;
  }
}