/* Navigation keeps its approved resting layout. Interactions change only
   paint and individual translation, never the header's positions or size. */
.site-header nav > :is(a, button),
.floating-header :is(a, button) {
  transition: color 180ms ease, background-color 220ms ease,
    box-shadow 220ms ease, translate 220ms cubic-bezier(.22,1,.36,1);
}
.site-header .nav-contact:focus-visible {
  color: #fff; background: #d43b00;
  box-shadow: 0 5px 18px rgba(255,75,0,.24); translate: 0 -2px;
}
.floating-header-contact:focus-visible {
  background: #ff4b002e; color: #a62f00;
  box-shadow: 0 4px 14px rgba(255,75,0,.12); translate: 0 -2px;
}
.floating-header .navigation-menu-button:focus-visible {
  background: #1a264b; box-shadow: 0 4px 14px rgba(0,7,31,.15); translate: 0 -2px;
}

@media (min-width: 768px) {
  .site-header :is(.nav-about, .nav-service, .nav-company, .nav-work, .nav-downloads)::after {
    content: ''; position: absolute; inset: auto 0 -7px; height: 2px;
    border-radius: 2px; background: var(--orange); pointer-events: none;
    transform: scaleX(0); transform-origin: left center;
    transition: transform 240ms cubic-bezier(.22,1,.36,1);
  }
  .site-header :is(.nav-about, .nav-service, .nav-company, .nav-work, .nav-downloads):focus-visible {
    translate: 0 -2px;
  }
  .site-header :is(.nav-about, .nav-service, .nav-company, .nav-work, .nav-downloads):focus-visible::after,
  .site-header .nav-service[aria-expanded='true']::after { transform: scaleX(1); }
}

@media (hover: hover) {
  .site-header .nav-contact:hover {
    color: #fff; background: #d43b00;
    box-shadow: 0 5px 18px rgba(255,75,0,.24); translate: 0 -2px;
  }
  .floating-header-contact:hover {
    background: #ff4b002e; color: #a62f00;
    box-shadow: 0 4px 14px rgba(255,75,0,.12); translate: 0 -2px;
  }
  .floating-header .navigation-menu-button:hover {
    background: #1a264b; box-shadow: 0 4px 14px rgba(0,7,31,.15); translate: 0 -2px;
  }
}
@media (min-width: 768px) and (hover: hover) {
  .site-header :is(.nav-about, .nav-service, .nav-company, .nav-work, .nav-downloads):hover { translate: 0 -2px; }
  .site-header :is(.nav-about, .nav-service, .nav-company, .nav-work, .nav-downloads):hover::after { transform: scaleX(1); }
}

/* The mobile Service trigger uses its existing two bars, not an underline. */
@media (max-width: 767px) {
  .site-header .nav-service {
    transition: background-color 180ms ease, box-shadow 180ms ease;
  }
  .site-header .nav-service:focus-visible {
    background: #fff0e9; box-shadow: 0 4px 14px rgba(255,75,0,.13);
  }
}
@media (max-width: 767px) and (hover: hover) {
  .site-header .nav-service:hover {
    background: #fff0e9; box-shadow: 0 4px 14px rgba(255,75,0,.13);
  }
}
@media (hover: none) {
  /* Override the earlier generic hover colors on touch-only browsers. */
  .floating-header-contact:hover:not(:focus-visible) { background: #ff4b0014; color: #b83700; box-shadow: none; translate: none; }
  .floating-header .navigation-menu-button:hover:not(:focus-visible) { background: var(--ink); box-shadow: none; translate: none; }
}

.site-header nav > :is(a, button):active,
.floating-header :is(a, button):active { translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  .site-header nav > :is(a, button),
  .site-header nav > :is(.nav-about, .nav-service, .nav-company, .nav-work, .nav-downloads, .nav-contact):is(:hover, :focus-visible, :active),
  .floating-header :is(a, button),
  .floating-header :is(.floating-header-contact, .navigation-menu-button):is(:hover, :focus-visible, :active) { transition: none; translate: none; }
  .site-header :is(.nav-about, .nav-service, .nav-company, .nav-work, .nav-downloads)::after { transition: none; }
}
html[data-motion-paused='true'] .site-header nav > :is(a, button),
html[data-motion-paused='true'] .site-header :is(.nav-about, .nav-service, .nav-company, .nav-work, .nav-downloads, .nav-contact),
html[data-motion-paused='true'] .floating-header :is(a, button),
html[data-motion-paused='true'] .floating-header :is(.floating-header-contact, .navigation-menu-button) { transition: none; translate: none; }
html[data-motion-paused='true'] .site-header :is(.nav-about, .nav-service, .nav-company, .nav-work, .nav-downloads)::after { transition: none; }