section[id] {
  scroll-margin-top: 88px;
}

html.cateena-scroll-motion {
  overflow-x: clip;
}

@media (prefers-reduced-motion: no-preference) {
  html.cateena-scroll-motion .scroll-reveal {
    opacity: 0;
    translate: 0 16px;
    scale: 1;
    rotate: 0deg;
    clip-path: inset(0);
    transition:
      opacity 560ms cubic-bezier(0.22, 1, 0.36, 1),
      translate 680ms cubic-bezier(0.22, 1, 0.36, 1),
      scale 700ms cubic-bezier(0.22, 1, 0.36, 1),
      rotate 700ms cubic-bezier(0.22, 1, 0.36, 1),
      clip-path 720ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--scroll-reveal-delay, 0ms);
  }

  html.cateena-scroll-motion .scroll-reveal[data-scroll-reveal="fade"] {
    translate: 0 0;
  }

  html.cateena-scroll-motion .scroll-reveal[data-scroll-reveal="drop"] {
    translate: 0 -14px;
  }

  html.cateena-scroll-motion .scroll-reveal[data-scroll-reveal="slide-left"] {
    translate: -28px 0;
  }

  html.cateena-scroll-motion .scroll-reveal[data-scroll-reveal="slide-right"] {
    translate: 28px 0;
  }

  html.cateena-scroll-motion .scroll-reveal[data-scroll-reveal="mask-up"] {
    translate: 0 8px;
    clip-path: inset(82% 0 0 0);
  }

  html.cateena-scroll-motion .scroll-reveal[data-scroll-reveal="wipe-left"] {
    translate: 0 0;
    clip-path: inset(0 82% 0 0);
  }

  html.cateena-scroll-motion .scroll-reveal[data-scroll-reveal="wipe-right"] {
    translate: 0 0;
    clip-path: inset(0 0 0 82%);
  }

  html.cateena-scroll-motion .scroll-reveal[data-scroll-reveal="wipe-down"] {
    translate: 0 0;
    clip-path: inset(0 0 82% 0);
  }

  html.cateena-scroll-motion .scroll-reveal[data-scroll-reveal="zoom-soft"] {
    opacity: 0.5;
    translate: 0 6px;
    scale: 0.985;
  }

  html.cateena-scroll-motion .scroll-reveal[data-scroll-reveal="pop-soft"] {
    translate: 0 6px;
    scale: 0.9;
  }

  html.cateena-scroll-motion .scroll-reveal[data-scroll-reveal="settle"],
  html.cateena-scroll-motion .scroll-reveal[data-scroll-reveal="collage"] {
    translate: 0 14px;
    scale: 0.97;
  }

  html.cateena-scroll-motion .scroll-reveal[data-scroll-reveal="card-left"] {
    translate: -20px 10px;
    scale: 0.99;
    rotate: -0.4deg;
  }

  html.cateena-scroll-motion .scroll-reveal[data-scroll-reveal="card-right"] {
    translate: 20px 10px;
    scale: 0.99;
    rotate: 0.4deg;
  }

  html.cateena-scroll-motion .scroll-reveal[data-scroll-reveal="step-left"] {
    translate: -18px 8px;
  }

  html.cateena-scroll-motion .scroll-reveal[data-scroll-reveal="step-right"] {
    translate: 18px 8px;
  }

  html.cateena-scroll-motion .scroll-reveal[data-scroll-reveal="stamp"] {
    translate: 0 9px;
    scale: 0.84;
    rotate: -5deg;
  }

  html.cateena-scroll-motion .scroll-reveal.is-visible,
  html.cateena-scroll-motion .scroll-reveal:focus-within,
  html.cateena-scroll-motion .scroll-reveal:target,
  html.cateena-scroll-motion :target .scroll-reveal {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    rotate: 0deg;
    clip-path: inset(0);
  }

  html.cateena-scroll-motion .scroll-reveal.reveal-instant,
  html.cateena-scroll-motion .scroll-reveal.reveal-instant *,
  html.cateena-scroll-motion .scroll-reveal:focus-within,
  html.cateena-scroll-motion .scroll-reveal:focus-within * {
    animation: none !important;
    transition: none !important;
  }

  /* The channel graphic assembles after its panel settles into place. */
  html.cateena-scroll-motion .channel-board.scroll-reveal .orbit-ring,
  html.cateena-scroll-motion .channel-board.scroll-reveal .orbit-centre,
  html.cateena-scroll-motion .channel-board.scroll-reveal .orbit-label {
    opacity: 0;
    scale: 0.76;
    transition:
      opacity 500ms cubic-bezier(0.22, 1, 0.36, 1),
      scale 620ms cubic-bezier(0.22, 1, 0.36, 1),
      rotate 760ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  html.cateena-scroll-motion .channel-board.scroll-reveal .orbit-two {
    rotate: -18deg;
  }

  html.cateena-scroll-motion .channel-board.scroll-reveal.is-visible .orbit-ring,
  html.cateena-scroll-motion .channel-board.scroll-reveal.is-visible .orbit-centre,
  html.cateena-scroll-motion .channel-board.scroll-reveal.is-visible .orbit-label {
    opacity: 1;
    scale: 1;
    rotate: 0deg;
  }

  html.cateena-scroll-motion .channel-board.scroll-reveal.is-visible .orbit-one {
    transition-delay: 110ms;
  }

  html.cateena-scroll-motion .channel-board.scroll-reveal.is-visible .orbit-two {
    transition-delay: 170ms;
  }

  html.cateena-scroll-motion .channel-board.scroll-reveal.is-visible .orbit-centre {
    transition-delay: 230ms;
  }

  html.cateena-scroll-motion .channel-board.scroll-reveal.is-visible .orbit-amazon {
    transition-delay: 285ms;
  }

  html.cateena-scroll-motion .channel-board.scroll-reveal.is-visible .orbit-tiktok {
    transition-delay: 340ms;
  }

  html.cateena-scroll-motion .channel-board.scroll-reveal.is-visible .orbit-ebay {
    transition-delay: 395ms;
  }

  html.cateena-scroll-motion .channel-board.scroll-reveal.is-visible .orbit-temu {
    transition-delay: 450ms;
  }

  /* Service lists follow their copy panel in a short, readable sequence. */
  html.cateena-scroll-motion .service-copy.scroll-reveal .service-list li {
    opacity: 0;
    translate: -10px 0;
    transition:
      opacity 380ms ease-out,
      translate 480ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  html.cateena-scroll-motion .service-copy.scroll-reveal.is-visible .service-list li {
    opacity: 1;
    translate: 0 0;
  }

  html.cateena-scroll-motion .service-copy.scroll-reveal.is-visible .service-list li:nth-child(1) {
    transition-delay: 150ms;
  }

  html.cateena-scroll-motion .service-copy.scroll-reveal.is-visible .service-list li:nth-child(2) {
    transition-delay: 195ms;
  }

  html.cateena-scroll-motion .service-copy.scroll-reveal.is-visible .service-list li:nth-child(3) {
    transition-delay: 240ms;
  }

  html.cateena-scroll-motion .service-copy.scroll-reveal.is-visible .service-list li:nth-child(4) {
    transition-delay: 285ms;
  }

  html.cateena-scroll-motion .service-copy.scroll-reveal.is-visible .service-list li:nth-child(5) {
    transition-delay: 330ms;
  }

  /* Small focal details settle after their parent card has entered. */
  html.cateena-scroll-motion .process-steps article.scroll-reveal > span,
  html.cateena-scroll-motion .comparison-card.scroll-reveal .comparison-title > span,
  html.cateena-scroll-motion .capability-card.scroll-reveal > a {
    opacity: 0;
    scale: 0.72;
    rotate: -7deg;
    transition:
      opacity 400ms ease-out 120ms,
      scale 560ms cubic-bezier(0.22, 1, 0.36, 1) 120ms,
      rotate 560ms cubic-bezier(0.22, 1, 0.36, 1) 120ms;
  }

  html.cateena-scroll-motion .process-steps article.scroll-reveal.is-visible > span,
  html.cateena-scroll-motion .comparison-card.scroll-reveal.is-visible .comparison-title > span,
  html.cateena-scroll-motion .capability-card.scroll-reveal.is-visible > a {
    opacity: 1;
    scale: 1;
    rotate: 0deg;
  }

  /* The products intentionally rise above the collage, so this reveal must not
     retain the generic clip-path once the artwork is in view. */
  html.cateena-scroll-motion .edenarch-collage.scroll-reveal {
    clip-path: none;
    overflow: visible;
  }

  /* Edenarch's three-piece artwork fans in without replacing its base transforms. */
  html.cateena-scroll-motion .edenarch-collage.scroll-reveal .edenarch-card,
  html.cateena-scroll-motion .edenarch-collage.scroll-reveal .edenarch-sticker,
  html.cateena-scroll-motion .edenarch-collage.scroll-reveal .edenarch-product {
    opacity: 0;
    transition:
      opacity 430ms ease-out,
      translate 650ms cubic-bezier(0.22, 1, 0.36, 1),
      scale 650ms cubic-bezier(0.22, 1, 0.36, 1),
      rotate 650ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  html.cateena-scroll-motion .edenarch-collage.scroll-reveal .edenarch-card-one {
    translate: -16px 16px;
    scale: 0.94;
    rotate: -2deg;
  }

  html.cateena-scroll-motion .edenarch-collage.scroll-reveal .edenarch-card-two {
    translate: 16px 20px;
    scale: 0.94;
    rotate: 2deg;
  }

  html.cateena-scroll-motion .edenarch-collage.scroll-reveal .edenarch-sticker {
    scale: 0.72;
    rotate: -10deg;
  }

  html.cateena-scroll-motion .edenarch-collage.scroll-reveal .edenarch-product-bragg {
    translate: -14px 18px;
    scale: 0.9;
    rotate: -4deg;
  }

  html.cateena-scroll-motion .edenarch-collage.scroll-reveal .edenarch-product-samyang {
    translate: 0 22px;
    scale: 0.9;
  }

  html.cateena-scroll-motion .edenarch-collage.scroll-reveal .edenarch-product-arm-hammer {
    translate: 14px 18px;
    scale: 0.9;
    rotate: 4deg;
  }

  html.cateena-scroll-motion .edenarch-collage.scroll-reveal.is-visible .edenarch-card,
  html.cateena-scroll-motion .edenarch-collage.scroll-reveal.is-visible .edenarch-sticker,
  html.cateena-scroll-motion .edenarch-collage.scroll-reveal.is-visible .edenarch-product {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    rotate: 0deg;
  }

  html.cateena-scroll-motion .edenarch-collage.scroll-reveal.is-visible .edenarch-card-one {
    transition-delay: 100ms;
  }

  html.cateena-scroll-motion .edenarch-collage.scroll-reveal.is-visible .edenarch-card-two {
    transition-delay: 180ms;
  }

  html.cateena-scroll-motion .edenarch-collage.scroll-reveal.is-visible .edenarch-product-bragg {
    transition-delay: 150ms;
  }

  html.cateena-scroll-motion .edenarch-collage.scroll-reveal.is-visible .edenarch-product-samyang {
    transition-delay: 220ms;
  }

  html.cateena-scroll-motion .edenarch-collage.scroll-reveal.is-visible .edenarch-product-arm-hammer {
    transition-delay: 290ms;
  }

  html.cateena-scroll-motion .edenarch-collage.scroll-reveal.is-visible .edenarch-sticker {
    transition-delay: 340ms;
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  html.cateena-scroll-motion .scroll-reveal {
    transition-duration: 400ms, 460ms, 480ms, 480ms, 520ms;
  }

  html.cateena-scroll-motion .scroll-reveal[data-scroll-reveal="up"] {
    translate: 0 10px;
  }

  html.cateena-scroll-motion .scroll-reveal[data-scroll-reveal="drop"] {
    translate: 0 -8px;
  }

  html.cateena-scroll-motion .scroll-reveal[data-scroll-reveal="slide-left"] {
    translate: -12px 0;
  }

  html.cateena-scroll-motion .scroll-reveal[data-scroll-reveal="slide-right"] {
    translate: 12px 0;
  }

  html.cateena-scroll-motion .scroll-reveal[data-scroll-reveal="step-left"] {
    translate: -10px 5px;
  }

  html.cateena-scroll-motion .scroll-reveal[data-scroll-reveal="step-right"] {
    translate: 10px 5px;
  }

  html.cateena-scroll-motion .scroll-reveal[data-scroll-reveal="card-left"],
  html.cateena-scroll-motion .scroll-reveal[data-scroll-reveal="card-right"] {
    translate: 0 10px;
    scale: 0.995;
    rotate: 0deg;
  }

  html.cateena-scroll-motion .scroll-reveal[data-scroll-reveal="zoom-soft"] {
    translate: 0 5px;
    scale: 0.99;
  }

  html.cateena-scroll-motion .scroll-reveal[data-scroll-reveal="pop-soft"] {
    translate: 0 4px;
    scale: 0.94;
  }

  html.cateena-scroll-motion .scroll-reveal[data-scroll-reveal="settle"],
  html.cateena-scroll-motion .scroll-reveal[data-scroll-reveal="collage"] {
    translate: 0 9px;
    scale: 0.985;
  }

  html.cateena-scroll-motion .scroll-reveal[data-scroll-reveal="stamp"] {
    translate: 0 6px;
    scale: 0.9;
    rotate: -3deg;
  }

  html.cateena-scroll-motion .service-copy.scroll-reveal .service-list li {
    translate: 0 6px;
  }

  /* Keep the compact mobile starting offsets above, but always return every
     revealed target to its true layout position. These rules deliberately sit
     after the mobile variants so they cannot leave content shifted or clipped. */
  html.cateena-scroll-motion .scroll-reveal.is-visible,
  html.cateena-scroll-motion .scroll-reveal:focus-within,
  html.cateena-scroll-motion .scroll-reveal:target,
  html.cateena-scroll-motion :target .scroll-reveal {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    rotate: 0deg;
    clip-path: inset(0);
  }

  html.cateena-scroll-motion .service-copy.scroll-reveal.is-visible .service-list li {
    opacity: 1;
    translate: 0 0;
  }
}

@media (max-width: 620px) {
  section[id] {
    scroll-margin-top: 76px;
  }
}

@media (max-width: 620px) and (prefers-reduced-motion: no-preference) {
  html.cateena-scroll-motion .edenarch-collage.scroll-reveal .edenarch-card,
  html.cateena-scroll-motion .edenarch-collage.scroll-reveal .edenarch-sticker,
  html.cateena-scroll-motion .edenarch-collage.scroll-reveal .edenarch-product {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    rotate: 0deg;
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal,
  .channel-board .orbit-ring,
  .channel-board .orbit-centre,
  .channel-board .orbit-label,
  .service-copy .service-list li,
  .process-steps article > span,
  .comparison-card .comparison-title > span,
  .capability-card > a,
  .edenarch-collage .edenarch-card,
  .edenarch-collage .edenarch-sticker,
  .edenarch-collage .edenarch-product {
    opacity: 1 !important;
    translate: none !important;
    scale: 1 !important;
    rotate: 0deg !important;
    clip-path: none !important;
    animation: none !important;
    transition: none !important;
  }
}