/* Preview and layout corrections */
:root {
  --moss: #4AB064;
  --terracotta: #D67C3D;
  --blue: #0043AB;
}

.nav__links a:hover {
  color: var(--blue);
}

.skill-group:nth-child(2) .skill-group__dot {
  background: var(--blue);
}

.testimonial__avatar {
  border-color: var(--blue);
  color: var(--blue);
}

/* Final brand-colour mapping */
.metric__value--green,
.testimonials .section__tag,
.footer__cta,
.testimonial__avatar {
  color: var(--moss);
}

.testimonial__avatar {
  border-color: var(--moss);
}

.skill-group:nth-child(2) .skill-group__dot {
  background-color: var(--blue);
}

.testimonial__stars {
  color: var(--blue);
}

.pulse,
.grad,
.contact__content .section__tag,
.service__list li::before {
  color: var(--terracotta);
}

.pulse,
.skill-group__dot {
  background-color: var(--terracotta);
}

/* Deliberate, low-motion entrance and interaction system */
@keyframes neighbly-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes neighbly-drift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

.hero__content > * {
  animation: neighbly-rise .7s both;
}

.hero__content > :nth-child(1) { animation-delay: .05s; }
.hero__content > :nth-child(2) { animation-delay: .12s; }
.hero__content > :nth-child(3) { animation-delay: .19s; }
.hero__content > :nth-child(4) { animation-delay: .26s; }
.hero__content > :nth-child(5) { animation-delay: .33s; }

.hero__visual {
  animation: neighbly-rise .8s .18s both;
}

.hero__portrait img {
  animation: neighbly-drift 7s ease-in-out 1s infinite;
}

.service,
.vertical,
.skill-group,
.testimonial {
  transition: transform .25s ease, background-color .25s ease, border-color .25s ease;
}

.service:hover,
.vertical:hover,
.skill-group:hover,
.testimonial:hover {
  transform: translateY(-5px);
  box-shadow: inset 0 0 0 2px var(--blue);
  position: relative;
  z-index: 1;
}

.service:hover,
.skill-group:hover {
  border-color: var(--line);
}

.vertical:hover {
  border-color: var(--ink);
}

.testimonial:hover {
  border-color: #61726b;
}

.btn {
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

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

.hero__visual {
  align-self: center;
}