.product-sequence { position: relative; isolation: isolate; background: #f6faf5; overflow: clip; }
.product-sequence[data-sequence-scroll] { height: 340svh; }
.sequence-accessible-title { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
.sequence-stage { position: relative; padding: 64px 24px; }
[data-sequence-scroll] .sequence-stage { position: sticky; top: var(--site-header-height); height: calc(100svh - var(--site-header-height)); padding: 0; overflow: clip; }
.sequence-backdrop { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.sequence-backdrop > span { position: absolute; width: max-content; color: transparent; -webkit-text-stroke: 1px #0d795836; font-size: clamp(120px, 17vw, 310px); font-weight: 650; line-height: 1; letter-spacing: -.055em; white-space: nowrap; }
.sequence-backdrop > span:first-child { left: -8%; top: 15%; transform: translateX(calc(var(--sequence-progress, 0) * -20vw)); }
.sequence-backdrop > span:last-child { right: -8%; top: 52%; transform: translateX(calc(var(--sequence-progress, 0) * 20vw)); }
.sequence-track { display: grid; gap: 72px; width: min(920px, 100%); margin: auto; }
[data-sequence-scroll] .sequence-track { position: absolute; top: 46%; left: 0; display: flex; align-items: start; width: max-content; gap: clamp(90px, 12vw, 180px); transform: translate3d(var(--sequence-x, 110vw), -43%, 0); }
.sequence-card { min-width: 0; }
[data-sequence-scroll] .sequence-card { animation: sequence-card-arrive 1.15s cubic-bezier(.16,1,.3,1) both paused; }
[data-sequence-entered][data-sequence-scroll] .sequence-card { animation-play-state: running; }
[data-sequence-scroll] .sequence-card:nth-child(2) { animation-delay: .12s; }
[data-sequence-scroll] .sequence-card:nth-child(3) { animation-delay: .24s; }
@keyframes sequence-card-arrive { from { opacity: 0; translate: 70px 65px; } to { opacity: 1; translate: 0 0; } }
[data-sequence-scroll] .sequence-card { width: min(62vw, 780px, calc((100svh - 300px) * 1.598)); flex: 0 0 auto; }
.sequence-window { position: relative; border: 1px solid #c2dace; border-radius: 23px; padding: 13px; background: linear-gradient(145deg, #fff, #d4efdf); box-shadow: 0 22px 55px -30px #1763474a; }
[data-sequence-scroll] .sequence-window { transform: perspective(1800px) translateY(calc((1 - var(--card-arrival, 1)) * 65px)) rotateY(var(--card-yaw, 0deg)) rotate(calc(var(--card-tilt) + var(--sequence-sway, 0deg))) scale(calc(.95 + var(--card-focus, 1) * .05)); }
.sequence-window > img { display: block; width: 100%; height: auto; border-radius: 12px; background: #181818; }
.sequence-expand { position: absolute; top: 23px; right: 23px; display: grid; place-items: center; width: 34px; height: 34px; padding: 8px; border: 1px solid #e4eee5a8; border-radius: 50%; background: #f5faf1e8; color: #205c41; }
.sequence-expand svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.sequence-expand:hover { background: #fff; }
.sequence-caption { display: flex; align-items: start; justify-content: center; gap: 17px; margin-top: 32px; text-align: left; }
.sequence-caption h3 { margin: 0; font-size: clamp(24px, 2.5vw, 34px); line-height: 1.15; font-weight: 550; letter-spacing: -.04em; }
.sequence-caption p { margin-top: 8px; font-size: 14px; color: #566c5d; }
@media (max-width: 899px), (max-height: 649px) {
  .sequence-stage { padding-block: 65px; }
  .sequence-backdrop > span { font-size: 110px; }
  .sequence-backdrop > span:first-child { top: 2%; }
  .sequence-backdrop > span:last-child { top: 65%; }
  .sequence-track { gap: 64px; }
  .sequence-window { padding: 8px; border-radius: 15px; }
  .sequence-window > img { border-radius: 8px; }
  .sequence-expand { top: 16px; right: 16px; }
  .sequence-caption { margin-top: 20px; justify-content: start; }
  .sequence-caption h3 { font-size: 25px; }
  .sequence-caption p { font-size: 13px; line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) { .sequence-card { animation: none !important; } .sequence-backdrop { display: none; } .sequence-window { transform: none; } }