.product-reveal-shell { perspective: 1400px; }
.products .product-reveal-shell > .product { width: 100%; }
.has-scroll-motion .opening-heading { transform: translate3d(0, calc(var(--cover-progress, 0) * -100px), 0); }
.has-scroll-motion .opening-backdrop { transform: translate3d(0, calc(var(--cover-progress, 0) * -38px), 0) scale(calc(1 + var(--cover-progress, 0) * .035)); transform-origin: 72% 55%; }
.has-scroll-motion .depth-product { opacity: calc(1 - var(--rise, 0) * .38); transform: translate3d(0, calc(var(--rise, 0) * 70px), calc(var(--rise, 0) * -150px)) rotateX(calc(var(--rise, 0) * 9deg)); transform-origin: 50% 0; }
.has-scroll-motion .depth-reveal { opacity: calc(1 - var(--rise, 0) * .65); transform: translate3d(0, calc(var(--rise, 0) * 48px), 0); }
.has-scroll-motion .founder-portrait.depth-reveal { transform: perspective(1200px) translate3d(0, calc(var(--rise, 0) * 55px), 0) rotateX(calc(var(--rise, 0) * 5deg)) scale(calc(1 - var(--rise, 0) * .055)); transform-origin: 50% 100%; }
.has-scroll-motion .footer-bottom > img.depth-reveal { opacity: 1; transform: translate3d(0, calc(var(--rise, 0) * 38px), 0); clip-path: inset(calc(var(--rise, 0) * 65%) 0 0 0); }
.has-scroll-motion :is(.depth-product, .depth-reveal):focus-within { transform: none; opacity: 1; clip-path: none; }

/* One illustration unfolds through the three service stages. */
.service-experience { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .75fr); gap: 7vw; align-items: start; --scan: 1; --deploy: 1; --cover: 1; }
.service-visual { position: sticky; top: 9vh; align-self: start; }
.service-visual svg { width: 100%; height: auto; overflow: visible; }
.service-visual figcaption { display: flex; align-items: center; justify-content: space-between; gap: 15px; border-top: 1px solid var(--line); padding-top: 16px; margin-top: 5px; font-size: 11px; color: var(--muted); }
.service-visual figcaption span:first-child { font-size: 9px; }
.service-visual { margin: 0; }
.service-model .service-experience .service-steps { display: flex; flex-direction: column; gap: 40px; }
.service-model .service-experience .service-steps::before { top: 10px; bottom: 25px; left: 0; right: auto; width: 1px; height: auto; background: #d7d7cf; }
.service-model .service-experience .service-steps::after { content: ''; position: absolute; top: 10px; bottom: 25px; left: 0; width: 1px; background: #c8734c; transform-origin: top; transform: scaleY(var(--journey-progress, 1)); }
.service-model .service-experience .service-steps article { padding: 0 0 15px 45px; min-height: 0; justify-content: center; }
.service-model .service-experience .service-steps article::before { display: none; }
.service-model .service-experience .service-steps h3 { font-size: clamp(29px, 3.2vw, 48px); max-width: 15ch; }
.service-model .service-experience .service-steps .mono { position: static; order: -1; margin-bottom: 22px; padding: 0; font-size: 11px; }
.has-scroll-motion .service-experience { --scan: 0; --deploy: 0; --cover: 0; }
.has-scroll-motion .service-experience .service-steps { gap: 0; }
.has-scroll-motion .service-experience .service-steps article { min-height: 56vh; padding-top: 55px; padding-bottom: 55px; }
.has-scroll-motion .service-experience .service-steps article > * { opacity: 1; transform: translateY(16px); transition: opacity .5s, transform .65s cubic-bezier(.16, 1, .3, 1); }
.has-scroll-motion .service-experience .service-steps article.is-service-current > * { opacity: 1; transform: none; }
.has-scroll-motion .service-visual svg .servicescan { opacity: var(--scan); }
.has-scroll-motion .service-visual svg .servicebox { opacity: var(--deploy); transform: translateY(calc((1 - var(--deploy)) * -90px)); }
.has-scroll-motion .service-visual svg .servicecover { opacity: var(--cover); transform: translateY(calc((1 - var(--cover)) * 30px)) scaleY(calc(.8 + var(--cover) * .2)); transform-origin: 50% 70%; }
@media (max-width: 1000px) and (min-width: 761px) {
  .service-experience { gap: 35px; }
  .service-model .service-experience .service-steps article { padding-left: 30px; }
}
@media (max-width: 760px) {
  .has-scroll-motion .opening-heading { transform: translate3d(0, calc(var(--cover-progress, 0) * -32px), 0); }
  .has-scroll-motion .opening-backdrop { transform: translate3d(0, calc(var(--cover-progress, 0) * -14px), 0); }
  .has-scroll-motion .depth-product { transform: translate3d(0, calc(var(--rise, 0) * 44px), calc(var(--rise, 0) * -65px)) rotateX(calc(var(--rise, 0) * 5deg)); }
  .service-experience { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .service-visual { position: relative; top: auto; }
  .has-scroll-motion .service-visual { position: sticky; top: 0; z-index: 2; background: #f7f7f4; padding-top: 5px; }
  .has-scroll-motion .service-visual svg { height: 32svh; width: 100%; }
  .service-visual figcaption { font-size: 10px; padding: 10px 0 12px; margin: 0; }
  .service-model .service-experience .service-steps h3 { font-size: 30px; max-width: 20ch; }
  .service-model .service-experience .service-steps article { padding-left: 30px; }
  .has-scroll-motion .service-experience .service-steps article { min-height: 52svh; padding-top: 35px; padding-bottom: 35px; }
  .service-model .service-experience .service-steps .mono { margin-bottom: 16px; }
  .service-visual { margin: 0; }
}
@media (prefers-reduced-motion: reduce), print {
  .service-visual { position: relative; top: auto; }
  .depth-product, .depth-reveal { transform: none !important; opacity: 1 !important; clip-path: none !important; }
}

.has-scroll-motion .service-experience .service-steps article h3 { opacity: .72; }
.has-scroll-motion .service-experience .service-steps article.is-service-current h3 { opacity: 1; }
.has-scroll-motion .service-visual svg .servicescan path[pathLength="1"] { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--scan)); }
.has-scroll-motion .service-visual svg .servicecover path[pathLength="1"] { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--cover)); }
@media (prefers-reduced-motion: reduce), print {
  .has-scroll-motion .opening-heading, .has-scroll-motion .opening-backdrop { transform: none !important; }
  .has-scroll-motion .service-visual { position: relative; top: auto; }
  .has-scroll-motion .service-visual svg { height: auto; }
  .has-scroll-motion .service-experience { --scan: 1 !important; --deploy: 1 !important; --cover: 1 !important; --journey-progress: 1 !important; }
  .has-scroll-motion .service-experience .service-steps { gap: 40px; }
  .has-scroll-motion .service-experience .service-steps article { min-height: 0; padding-top: 0; padding-bottom: 15px; }
  .has-scroll-motion .service-experience .service-steps article > * { opacity: 1 !important; transform: none !important; }
}