/* One continuous finale surface behind every non-media section. */
html.pcf-page-root,
body.pcf-page-active {
  background:#000;
}
body.pcf-page-active {
  position:relative;
  isolation:isolate;
}
.journey-surface-shader {
  position:fixed;
  z-index:0;
  inset:0;
  display:block;
  width:100vw;
  height:100vh;
  background:
    url('/cooperation/grain.svg') center/340px repeat,
    radial-gradient(ellipse 54% 120% at -4% 54%,rgba(103,91,214,.82) 0%,rgba(73,65,153,.56) 38%,transparent 73%),
    radial-gradient(ellipse 43% 105% at 104% 48%,rgba(94,83,181,.64) 0%,rgba(43,38,87,.34) 48%,transparent 77%),
    linear-gradient(101deg,#433d82 0%,#28254e 25%,#111020 51%,#18162d 72%,#4a4384 100%);
  background-blend-mode:soft-light,normal,normal,normal;
  pointer-events:none;
  transform:translateZ(0);
}

body>.hero,
body>.overview.cosmic-roadmap,
body>.stages,
body>.ops,
body>.promise,
body>.finale-reference {
  position:relative;
  z-index:1;
}

/* The hero, roadmap video and requirements particles keep their own canvases. */
.stages,
#s2.cooperation-stage,
#s3.product-design-stage,
#s4.product-design-stage,
#s5.delivery-stage,
.cooperation-scene,
.delivery-stage-scene,
.ops,
.finale-reference {
  background-color:transparent;
  background-image:none;
}

/* Carry the roadmap's last violet light across the stage-one particle canvas. */
#s1.requirements-stage {
  background:#09090f;
}
#s1 .requirements-scene::after {
  content:'';
  position:absolute;
  z-index:2;
  top:0;
  left:0;
  right:0;
  height:clamp(220px,26vh,300px);
  background:
    radial-gradient(ellipse 76% 170px at 50% 0%,rgba(79,73,151,.2),transparent 78%),
    linear-gradient(180deg,
      #09090f 0%,
      rgba(9,9,17,.86) 24%,
      rgba(8,7,16,.5) 56%,
      transparent 100%);
  pointer-events:none;
}

/* Match the particle scene's black edge first, then reveal the shared surface. */
#s2.cooperation-stage {
  isolation:isolate;
  background-image:linear-gradient(180deg,
    #000 0%,
    #000 5%,
    rgba(0,0,0,.96) 11%,
    rgba(0,0,0,.78) 20%,
    rgba(0,0,0,.52) 30%,
    rgba(0,0,0,.27) 40%,
    rgba(0,0,0,.09) 49%,
    transparent 57%);
}
#s2.cooperation-stage::before {
  content:'';
  position:absolute;
  z-index:0;
  top:clamp(-150px,-8vw,-96px);
  left:0;
  display:block;
  width:100%;
  height:clamp(210px,17vw,300px);
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(0,0,0,.14) 15%,
    rgba(0,0,0,.48) 32%,
    rgba(0,0,0,.88) 47%,
    #000 56%,
    rgba(0,0,0,.82) 68%,
    rgba(0,0,0,.36) 84%,
    transparent 100%);
  filter:blur(9px);
  pointer-events:none;
}
#s2 .cooperation-scene {
  z-index:1;
}

#s3.product-design-stage::before,
#s3.product-design-stage::after,
#s4.product-design-stage::before,
#s4.product-design-stage::after,
#s5.delivery-stage::before,
#s5.delivery-stage::after {
  background:none;
}
#s3.product-design-stage::after,
#s4.product-design-stage::after,
#s5.delivery-stage::after {
  display:none;
}

/* Keep the black particle scene entering the shared surface without a hard edge. */
.cooperation-scene::before {
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.08) 7%,rgba(0,0,0,.42) 16%,rgba(0,0,0,.82) 27%,#000 38%,#000 62%,rgba(0,0,0,.9) 72%,rgba(0,0,0,.56) 84%,rgba(0,0,0,.18) 94%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.08) 7%,rgba(0,0,0,.42) 16%,rgba(0,0,0,.82) 27%,#000 38%,#000 62%,rgba(0,0,0,.9) 72%,rgba(0,0,0,.56) 84%,rgba(0,0,0,.18) 94%,transparent 100%);
}
.cooperation-scene::after {
  background:linear-gradient(90deg,rgba(2,1,9,.42),transparent 34%,transparent 67%,rgba(2,1,9,.34));
  box-shadow:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.86) 70%,rgba(0,0,0,.48) 82%,rgba(0,0,0,.14) 93%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.86) 70%,rgba(0,0,0,.48) 82%,rgba(0,0,0,.14) 93%,transparent 100%);
}
.cooperation-character {
  --character-fade:none;
  bottom:1%;
  transform:none;
  will-change:auto;
}
.cooperation-character::before,
.cooperation-character::after {
  content:none;
}
/* The actor is cut at the opening's near arc, not faded into a flat shadow.
   These normalized coordinates match the SVG's 260 × 29 inner ellipse. */
.cooperation-character-cutout {
  position:relative;
  z-index:1;
  display:block;
  clip-path:url(#cooperation-opening-clip);
}
.cooperation-character-motion {
  position:relative;
  display:block;
  transform:translateY(var(--character-entry-y)) scale(var(--character-scale));
  transform-origin:50% 94%;
  transition:transform .95s cubic-bezier(.22,1,.36,1),opacity .65s ease;
}
/* Multiply the lower body by an opaque light map. Alpha stays unchanged:
   the surrounding tint follows each animated silhouette, including the hands. */
.cooperation-character-motion>img,
.cooperation-character-motion>.cooperation-character-canvas {
  filter:url(#cooperation-contact-light);
}
/* Anchor the opening to the surface while the actor rises inside its clip. */
.cooperation-scene.is-motion-ready .cooperation-character,
.cooperation-scene.is-motion-ready.is-visible .cooperation-character {
  opacity:1;
  filter:none;
  transform:none;
  transition:none;
}
.cooperation-scene.is-motion-ready .cooperation-character-motion { opacity:0; }
.cooperation-scene.is-motion-ready.is-visible .cooperation-character-motion {
  opacity:1;
  transition-delay:.12s;
}
.cooperation-opening {
  position:absolute;
  left:-10%;
  top:76%;
  display:block;
  width:120%;
  height:24%;
  overflow:visible;
  pointer-events:none;
  transition:opacity .45s ease;
}
.cooperation-opening--back { z-index:0; }
.cooperation-opening--front { z-index:3; }
.cooperation-scene.is-motion-ready .cooperation-opening { opacity:0; }
.cooperation-scene.is-motion-ready.is-visible .cooperation-opening { opacity:1; }
@media(prefers-reduced-motion:reduce) {
  .cooperation-character-motion { transform:none; }
}

#s3 .product-design-pin::before,
#s3 .product-design-pin::after,
#s4 .product-design-pin::before,
#s4 .product-design-pin::after {
  opacity:0;
}
#s3 .product-design-grid,
#s4 .product-design-grid {
  opacity:0;
}

/* The landscape remains foreground artwork and now dissolves into the same surface. */
.delivery-stage-landscape::after {
  background:linear-gradient(180deg,transparent 54%,rgba(7,5,16,.08) 72%,rgba(7,5,16,.2) 90%,transparent 100%);
  box-shadow:none;
}

.promise::before,
.promise::after {
  display:none;
}

/* Let the commitment rows belong to the shared violet surface instead of reading as black slabs. */
.promise .pg {
  overflow:hidden;
  gap:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.promise .pcard {
  grid-template-columns:minmax(0,1fr) 34px;
  column-gap:clamp(14px,1.5vw,22px);
  margin:0;
  padding:0 clamp(24px,3vw,48px);
  border:0;
  border-top:1px solid transparent;
  border-bottom:1px solid transparent;
  background:transparent;
  box-shadow:none;
}
.promise .pcard.is-selected {
  border-top:1px solid rgba(231,216,246,.36);
  border-bottom:1px solid rgba(231,216,246,.36);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.promise .pcard.is-selected::after {
  display:none;
}
.promise .pcard:hover:not(.is-selected),
.promise .pcard:focus-visible:not(.is-selected) {
  background:linear-gradient(100deg,rgba(255,255,255,.065),rgba(113,86,185,.045) 60%,rgba(8,7,24,.08));
  border-color:rgba(225,203,255,.34);
}
.promise .pcard p {
  color:rgba(248,244,255,.84);
}
.promise .pcard h4 {
  color:rgba(255,255,255,.94);
}
.promise .pcard h4::before {
  color:rgba(231,216,246,.78);
}
.promise .pcard .ic {
  color:rgba(230,211,249,.88);
  border-color:rgba(225,202,248,.56);
  opacity:.72;
  visibility:visible;
  transform:scale(.88);
  transition-delay:0s;
}
.promise .pcard>div:not(.ic) {
  grid-template-columns:minmax(170px,.42fr) minmax(300px,1fr);
  gap:clamp(28px,4vw,64px);
  padding:0 clamp(10px,2vw,30px);
}
.promise .promise-toggle {
  background:rgba(28,21,56,.62);
  border-color:rgba(214,190,238,.48);
}

@media(max-width:800px) {
  .promise .pcard:nth-of-type(n) {
    grid-template-columns:minmax(0,1fr) 30px;
    column-gap:14px;
    padding:0 18px;
  }
  .promise .pcard>div:not(.ic) {
    grid-template-columns:minmax(128px,.48fr) minmax(190px,1fr);
    gap:20px;
    padding:0 10px;
  }
}

@media(max-width:480px) {
  .promise .pcard:nth-of-type(n) {
    grid-template-columns:minmax(0,1fr) 26px;
    column-gap:10px;
    padding:0 12px;
  }
}

/* Keep editorial sections on one shared reading measure. Full-bleed scenes
   (hero, roadmap, requirements, cooperation, product showcase and delivery)
   retain their composition-specific geometry. */
:root {
  --journey-shell-max:1400px;
  --journey-shell-gutter:clamp(48px,5.625vw,90px);
}

@media(min-width:901px) {
  .stage-layout,
  #s4.development-design-stage .product-design-stage-head,
  #s4.development-design-stage .product-design-deck,
  .promise>.wrap {
    width:min(calc(100% - (var(--journey-shell-gutter) * 2)),var(--journey-shell-max));
    max-width:none;
    margin-right:auto;
    margin-left:auto;
  }

  #s4.development-design-stage .product-design-pin {
    padding-right:0;
    padding-left:0;
  }
}

@media(prefers-reduced-motion:reduce) {
  .journey-surface-shader {
    background:
      url('/cooperation/grain.svg') center/340px repeat,
      radial-gradient(ellipse 54% 120% at -4% 54%,rgba(103,91,214,.82) 0%,rgba(73,65,153,.56) 38%,transparent 73%),
      radial-gradient(ellipse 43% 105% at 104% 48%,rgba(94,83,181,.64) 0%,rgba(43,38,87,.34) 48%,transparent 77%),
      linear-gradient(101deg,#433d82 0%,#28254e 25%,#111020 51%,#18162d 72%,#4a4384 100%);
  }
}