.services-dropdown summary {
  list-style: none;
}
.services-dropdown summary::-webkit-details-marker {
  display: none;
}
.services-dropdown[open] > summary .chevron {
  transform: rotate(180deg);
}
.chevron {
  transition: transform 0.15s ease;
}

/* Closed-state guard: without this, a plain "flex" utility class on
   .dropdown-panel can render even while <details> lacks [open], since
   author-origin CSS overrides the browser's default details-hiding rule. */
.services-dropdown:not([open]) .dropdown-panel {
  display: none;
}

/* Desktop convenience: reveal on hover so pointer users get the submenu
   with zero extra clicks, without changing the tap-to-open behavior that
   touch/keyboard users rely on. Scoped to hover-capable, fine-pointer
   devices specifically (not just min-width) so a touch tablet in landscape
   at >=860px doesn't get a hover state it can't cleanly clear with a tap. */
@media (min-width: 860px) and (hover: hover) and (pointer: fine) {
  .services-dropdown:hover .dropdown-panel {
    display: flex !important;
  }
  .services-dropdown:hover > summary .chevron {
    transform: rotate(180deg);
  }
}

/* Branded focus ring: replaces the unstyled browser default with a Navy
   outline consistent with the palette, on every interactive element. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid #0F172A;
  outline-offset: 2px;
  border-radius: 4px;
}