/* Cards arrive once with a small staggered lift. Their surface color and
   text opacity stay constant throughout; no wash, overlay or sweep. */
.service-card,
.price-card { isolation: isolate; overflow: hidden; }
@keyframes card-enter {
  from { translate: 0 10px; }
  to { translate: 0 0; }
}
:is(.service-card, .price-card, .reason).reveal-ready.is-visible {
  animation: card-enter 700ms var(--ease) var(--entry-delay, 0ms) backwards;
}
:is(.service-card, .price-card, .reason):focus-within { animation: none; }

/* A short rim highlight identifies the service selected in the hero. The
   card's background and text stay unchanged while this border fades away. */
@keyframes service-target-glow {
  0%, 100% { opacity: 0; }
  18%, 42% { opacity: 1; }
}
.service-card.is-service-selected::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent);
  border-radius: inherit;
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--accent) 12%, transparent);
  animation: service-target-glow 1800ms ease-out both;
}

/* A quiet, keyboard-accessible invitation to the first section. */
.hero-scroll {
  position: absolute;
  z-index: 2;
  bottom: 24px;
  left: 50%;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  color: var(--text);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  transition: color 180ms;
}
.hero-scroll:hover { color: var(--accent); }
.hero-scroll svg { display: block; }
@keyframes scroll-invite {
  0%, 70%, 100% { transform: translateY(0); }
  40% { transform: translateY(5px); }
}
.hero[data-motion-running='true'] .hero-scroll svg {
  animation: scroll-invite 3.6s ease-in-out infinite;
}

/* Letter timing never changes the heading's measured footprint. The complete
   accessible heading and no-script content are present from the first paint. */
.type-word { white-space: nowrap; }
@keyframes type-character {
  from { opacity: 0; }
  to { opacity: 1; }
}
.section-head.is-visible .type-char {
  animation: type-character 1ms linear calc(var(--char-index) * 30ms + 100ms) both;
}

/* A short underline and a responsive icon give links a distinct destination. */
.text-link {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left calc(100% - 7px);
  background-size: 0 1px;
  transition: color 180ms ease, background-size 320ms var(--ease);
}
.text-link:hover,
.text-link:focus-visible { background-size: 100% 1px; }
.icon-tile {
  transition: background-color 300ms ease;
}
.icon-tile img {
  transform-origin: center;
  transition: transform 420ms var(--ease);
}
.service-card:focus-within .icon-tile img { transform: translateY(-2px) scale(1.07); }
.button:focus-visible .arrow { transform: translateX(3px); }
a.contact-row:focus-visible::after { transform: translate(2px, -2px); }
@media (hover: hover) and (pointer: fine) {
  .service-card:hover .icon-tile img,
  .reason:hover .icon-tile img { transform: translateY(-2px) scale(1.07); }
}

/* Introductory copy settles before its cards. These work with the existing
   observer's fail-open entrance system; unrevealed content remains visible. */
.section-head,
.how-head,
.why-intro,
.faq-title,
.contact-intro { --entry-delay: 0ms; }
.form-panel { --entry-delay: 100ms; }
.statement p { --entry-delay: 120ms; }
.proof-point:nth-child(2) { --entry-delay: 70ms; }
.proof-point:nth-child(3) { --entry-delay: 140ms; }
.proof-point:nth-child(4) { --entry-delay: 210ms; }

@keyframes answer-enter {
  from { opacity: .35; translate: 0 6px; }
  to { opacity: 1; translate: 0 0; }
}
.faq-list details[open] > p { animation: answer-enter 360ms var(--ease) backwards; }
.faq-list summary::after {
  content: '+';
  transition: rotate 280ms var(--ease), color 180ms ease;
}
.faq-list details[open] summary::after { content: '+'; rotate: 45deg; }
.faq-list summary:focus-visible h3 { color: var(--accent); }

@keyframes menu-link-enter {
  from { opacity: .3; translate: 0 8px; }
  to { opacity: 1; translate: 0 0; }
}
.menu-dialog[open] .mobile-menu nav a {
  animation: menu-link-enter 360ms var(--ease) backwards;
}
.menu-dialog[open] .mobile-menu nav a:nth-child(2) { animation-delay: 35ms; }
.menu-dialog[open] .mobile-menu nav a:nth-child(3) { animation-delay: 70ms; }
.menu-dialog[open] .mobile-menu nav a:nth-child(4) { animation-delay: 105ms; }
.menu-dialog[open] .mobile-menu nav a:nth-child(5) { animation-delay: 140ms; }
.menu-dialog[open] .mobile-menu nav a:focus-visible { animation: none; }

@media (max-width: 800px) {
  .hero { padding-bottom: 112px; }
  .hero-scroll { bottom: 16px; }
  .form-panel,
  .proof-point:nth-child(n) { --entry-delay: 0ms; }
}
@media (prefers-reduced-motion: reduce) {
  .service-card.is-service-selected::after { animation: none; box-shadow: none; opacity: 1; }
  .hero .hero-scroll svg,
  :is(.service-card, .price-card, .reason).reveal-ready.is-visible,
  .section-head.is-visible .type-char {
    animation: none; translate: none;
  }
  .icon-tile img,
  .service-card:focus-within .icon-tile img,
  .service-card:hover .icon-tile img,
  .reason:hover .icon-tile img,
  .button:focus-visible .arrow,
  a.contact-row:focus-visible::after { transform: none; }
  .faq-list details[open] > p,
  .menu-dialog[open] .mobile-menu nav a { animation: none; opacity: 1; translate: none; }
}