body.has-motion-reveals [data-motion-reveal] {
  transform: translateY(22px) scale(0.99);
  transition: transform 700ms cubic-bezier(0.2, 0.75, 0.25, 1)
    var(--motion-delay, 0ms);
  will-change: transform;
}

body.has-motion-reveals [data-motion-reveal].is-motion-visible {
  transform: none;
  will-change: auto;
}

.site-page .site-header {
  animation: site-header-arrive 650ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.home-page .home-hero .hero-copy > * {
  animation: home-copy-arrive 720ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.home-page .home-hero .hero-copy > :nth-child(2) {
  animation-delay: 70ms;
}

.home-page .home-hero .hero-copy > :nth-child(3) {
  animation-delay: 140ms;
}

.home-page .home-hero .hero-copy > :nth-child(4) {
  animation-delay: 210ms;
}

.home-page .home-hero .hero-copy > :nth-child(5) {
  animation-delay: 280ms;
}

.home-page .home-hero .hero-carousel {
  animation: home-carousel-arrive 900ms cubic-bezier(0.2, 0.75, 0.25, 1) 120ms
    both;
}

@keyframes site-header-arrive {
  from {
    transform: translateY(-10px);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes home-copy-arrive {
  from {
    transform: translateY(18px);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes home-carousel-arrive {
  from {
    transform: translateY(16px) scale(0.985);
  }
  to {
    transform: translateY(0) scale(1);
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .site-page
    :is(
      .service-menu-item,
      .services-offer-card,
      .about-highlight-item,
      .about-value-grid article
    ) {
    transition:
      transform 240ms cubic-bezier(0.2, 0.75, 0.25, 1),
      box-shadow 240ms ease;
  }

  .site-page
    :is(
      .service-menu-item,
      .services-offer-card,
      .about-highlight-item,
      .about-value-grid article
    ):hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(24, 48, 45, 0.09);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-page *,
  .site-page *::before,
  .site-page *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  body.has-motion-reveals [data-motion-reveal],
  body.has-motion-reveals [data-motion-reveal].is-motion-visible {
    transform: none;
    transition: none;
    will-change: auto;
  }
}

.not-found-page {
  display: grid;
  min-height: min(680px, calc(100vh - 190px));
  place-items: center;
  padding: 56px 0;
  background:
    radial-gradient(
      circle at 78% 22%,
      rgba(232, 100, 69, 0.12),
      transparent 18rem
    ),
    linear-gradient(145deg, #f8f5ed, #f0eee5);
}

.not-found-panel {
  position: relative;
  width: min(100% - 48px, 760px);
  padding: clamp(32px, 7vw, 72px);
  overflow: hidden;
  border: 1px solid rgba(24, 48, 45, 0.12);
  border-radius: 8px 42px 8px 42px;
  background: rgba(255, 253, 248, 0.9);
  box-shadow: 12px 12px 0 #e86445;
}

.not-found-panel::after {
  position: absolute;
  top: 22px;
  right: 28px;
  color: #e86445;
  content: "✳";
  font-size: 42px;
  line-height: 1;
}

.not-found-panel h1 {
  max-width: 620px;
  margin: 0;
  color: #202a26;
  font-family: "Syne", sans-serif;
  font-size: clamp(42px, 8vw, 76px);
  letter-spacing: -0.055em;
  line-height: 0.98;
  overflow-wrap: anywhere;
}

.not-found-panel > p:not(.eyebrow) {
  max-width: 520px;
  margin: 22px 0 0;
  color: #68736c;
}

.not-found-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

@media (max-width: 560px) {
  .not-found-page {
    min-height: 0;
    padding: 48px 0;
  }

  .not-found-panel {
    width: calc(100% - 40px);
    box-shadow: 7px 7px 0 #e86445;
  }
}