/* P2.7 step 3: only the two homepage groups; reuse site.js's one-shot .on observer. */
.js #services .services > .service.reveal { --p27-delay: 0ms; }
.js #services .services > .service.reveal:nth-child(2) { --p27-delay: 75ms; }
.js #services .services > .service.reveal:nth-child(3) { --p27-delay: 150ms; }
.js #services .services > .service.reveal:nth-child(4) { --p27-delay: 225ms; }
.js #services .services > .service.reveal:nth-child(5) { --p27-delay: 300ms; }
.js #services .services > .service.reveal:nth-child(6) { --p27-delay: 375ms; }
.js #services .services > .service.reveal:not(.on) { opacity: 0; transform: translateY(22px) scale(.98); }
.js #services .services > .service.reveal.on { animation: p27-service-reveal 600ms cubic-bezier(.22,.61,.36,1) var(--p27-delay) backwards; }

.js #approach .evidence > .ev.reveal { --p27-x: -24px; --p27-y: 0px; --p27-delay: 0ms; }
.js #approach .evidence > .ev.reveal:nth-child(even) { --p27-x: 24px; }
.js #approach .evidence > .ev.reveal:nth-child(2) { --p27-delay: 85ms; }
.js #approach .evidence > .ev.reveal:nth-child(3) { --p27-delay: 170ms; }
.js #approach .evidence > .ev.reveal:nth-child(4) { --p27-delay: 255ms; }
.js #approach .evidence > .ev.reveal:not(.on) { opacity: 0; transform: translate(var(--p27-x), var(--p27-y)); }
.js #approach .evidence > .ev.reveal.on { animation: p27-principle-reveal 600ms cubic-bezier(.22,.61,.36,1) var(--p27-delay) backwards; }

@keyframes p27-service-reveal {
  from { opacity: 0; transform: translateY(22px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@keyframes p27-principle-reveal {
  from { opacity: 0; transform: translate(var(--p27-x), var(--p27-y)); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 1100px) {
  .js #approach .evidence > .ev.reveal:nth-child(n) { --p27-x: 0px; --p27-y: 16px; }
}
/* Keyboard focus never waits for an observer callback or stagger. */
.js #services .services > .service.reveal:focus-within,
.js #approach .evidence > .ev.reveal:focus-within {
  animation: none; transition: none; opacity: 1; transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js #services .services > .service.reveal,
  .js #approach .evidence > .ev.reveal {
    animation: none !important; animation-delay: 0s !important;
    transition: none !important; transition-delay: 0s !important;
    opacity: 1 !important; transform: none !important;
  }
}