.nav_list a:hover,
.nav_list a:focus-visible {
  border-color: var(--white-100);
}

.fade_in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade_in.visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes reveal-header {
  0% {
    opacity: 0;
    transform: translateY(48px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes reveal-subheader {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes reveal-button {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal_header {
  animation: reveal-header 0.72s ease-out both;
}

.reveal_subheader {
  animation: reveal-subheader 0.72s ease-out 0.2s both;
}

.reveal_button {
  animation: reveal-button 0.72s ease-out 0.38s both;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .fade_in,
  .fade_in.visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .reveal_header,
  .reveal_subheader,
  .reveal_button {
    animation: none;
  }

  .btn {
    transition: none;
  }
}

@media (max-width: 1180px) {
  .service_grid,
  .testimonial_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .panel {
    padding-top: clamp(3.4rem, 8vh, 5.4rem);
    padding-bottom: clamp(3.4rem, 8vh, 5.4rem);
  }

  .hero_content h1 {
    font-size: clamp(1.9rem, 6.2vw, 3.6rem);
  }

  .hero_content p {
    width: min(46ch, 100%);
    font-size: clamp(0.88rem, 1.3vw, 0.95rem);
  }
}

@media (max-width: 980px) {
  .service_grid,
  .testimonial_grid,
  .business_facts,
  .project_grid,
  .detail_grid,
  .contact_layout,
  .form_row {
    grid-template-columns: 1fr;
  }

  .panel_story .panel_content,
  .panel_center .panel_content {
    width: min(760px, 100%);
  }

  .panel h2 {
    font-size: clamp(1.45rem, 5.2vw, 2.4rem);
  }

  .panel_content > p {
    font-size: clamp(0.88rem, 1.8vw, 0.96rem);
    letter-spacing: 0.024em;
  }

  .subpage_shell h1 {
    font-size: clamp(1.65rem, 7vw, 2.9rem);
  }
}

@media (max-width: 760px) {
  body.has_mobile_cta {
    padding-bottom: calc(var(--mobile-cta-height) + env(safe-area-inset-bottom));
  }

  body.nav_open {
    overflow: hidden;
  }

  .site_header {
    align-items: flex-start;
    height: auto;
    gap: 0.62rem;
    flex-direction: column;
    padding-top: calc(0.66rem + env(safe-area-inset-top));
    background: rgba(0, 0, 0, 0.9);
    border-bottom: 1px solid var(--line-soft);
  }

  .nav_toggle {
    display: inline-flex;
  }

  .site_nav {
    width: 100%;
  }

  .js .site_nav {
    display: none;
  }

  .js .site_header.nav_open .site_nav {
    display: block;
  }

  .nav_list {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    border-top: 1px solid var(--line-soft);
    padding-top: 0.2rem;
  }

  .nav_list li {
    width: 100%;
  }

  .nav_list a {
    display: block;
    width: 100%;
    font-size: 0.8rem;
    padding: 0.54rem 0;
    border-bottom: 1px solid var(--line-soft);
  }

  .hero {
    align-items: flex-end;
    padding-top: calc(var(--header-height) + 2.7rem);
    padding-bottom: 1.45rem;
  }

  .hero_content {
    gap: 0.86rem;
  }

  .hero_content h1 {
    font-size: clamp(1.7rem, 8.5vw, 2.8rem);
    line-height: 0.93;
    max-width: 13ch;
  }

  .hero_content p {
    font-size: 0.84rem;
    letter-spacing: 0.03em;
  }

  .hero_actions .btn {
    width: 100%;
    min-height: 46px;
  }

  .panel {
    min-height: auto;
    padding-top: 3rem;
    padding-bottom: 2.5rem;
  }

  .panel_content {
    gap: 0.75rem;
  }

  .panel_content > p {
    font-size: 0.86rem;
    letter-spacing: 0.02em;
    line-height: 1.38;
  }

  .subpage_shell > p {
    font-size: 0.94rem;
  }

  .mobile_cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}