/* Direct destination for the hero's Recent Work button. */
#recent-work { scroll-margin-top: 110px; }

/* Keep open FAQ answers legible when the card turns yellow on hover or focus. */
.faq-item:is(:hover, :focus-within) .faq-answer {
  background: #f1c61a !important;
  color: #080808 !important;
}
.faq-item:not(:hover):not(:focus-within) .faq-answer { color: #e7e1d4; }

@media (max-width: 760px) {
  #recent-work { scroll-margin-top: 92px; }
  .hero--clean .hero-title { max-width: 13ch; font-size: clamp(2.25rem, 9vw, 3.2rem); }
  .hero--clean .hero-copy { margin-top: 19px; }
}
.contact-submit:disabled {
  opacity: .7;
  cursor: wait;
}

/* Later global background styles lowered the sticky header to the main layer. */
.site-header { position: sticky !important; top: 0; z-index: 1000 !important; }
.nav-toggle { position: relative; z-index: 2; cursor: pointer; touch-action: manipulation; }
.site-nav { z-index: 3; }
.nav-toggle:focus-visible { outline: 2px solid #f1c61a; outline-offset: 3px; }
@media (max-width: 860px) {
  .site-nav:not(.is-open) { visibility: hidden; }
  .site-nav.is-open { visibility: visible; max-height: calc(100dvh - 100px); overflow-y: auto; }
}
@media (min-width: 861px) and (max-width: 1120px) {
  .site-nav { gap: 16px; }
  .site-nav a { font-size: .92rem; }
  .site-header .brand img { width: 140px; }
}