/* Optional interaction polish. Baseline content and controls remain visible without JS. */
.sector-tabs.has-control-marker { position: relative; }
.sector-tabs.has-control-marker button[aria-selected="true"]::after { display: none; }
.control-sector-marker {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  background: #cdb691;
  pointer-events: none;
  transform-origin: left center;
}
.capability-detail[data-control-open="false"] .disclosure-icon { transform: rotate(0); }
.capability-detail[data-control-open="true"] .disclosure-icon { transform: rotate(45deg); }

@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="off"]) .button {
    transition: background-color 240ms ease, border-color 240ms ease,
      box-shadow 320ms ease, transform 320ms cubic-bezier(.22,.8,.25,1);
  }
  :root:not([data-motion="off"]) .button:active { transform: translateY(0) scale(.985); }
  :root:not([data-motion="off"]) :is(.button, .text-link, .document-links a) > .icon {
    transition: transform 320ms cubic-bezier(.22,.8,.25,1);
  }
  :root:not([data-motion="off"]) :is(.button, .text-link, .document-links a):is(:hover, :focus-visible) > .icon {
    transform: translateX(4px);
  }
  :root:not([data-motion="off"]) .service-row { position: relative; isolation: isolate; }
  :root:not([data-motion="off"]) .service-row::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 7px -14px;
    border-radius: 3px;
    background: var(--soft);
    opacity: 0;
    transition: opacity 260ms ease;
    pointer-events: none;
  }
  :root:not([data-motion="off"]) .service-row:is(:hover, :focus-visible)::before { opacity: 1; }
  :root:not([data-motion="off"]) .service-row > .icon:last-child {
    transition: transform 350ms cubic-bezier(.22,.8,.25,1), color 240ms ease;
  }
  :root:not([data-motion="off"]) .service-row:is(:hover, :focus-visible) > .icon:last-child {
    transform: translate(4px, -4px);
    color: var(--bronze);
  }
  :root:not([data-motion="off"]) .service-row h3 { transition: color 240ms ease; }
  :root:not([data-motion="off"]) .capability-detail .disclosure-icon {
    transition: transform 340ms cubic-bezier(.22,.8,.25,1);
  }
  :root:not([data-motion="off"]) .detail-pin {
    transition: background-color 240ms ease, color 240ms ease,
      box-shadow 350ms ease, transform 350ms cubic-bezier(.22,.8,.25,1);
  }
  :root:not([data-motion="off"]) .detail-pin:is(:hover, :focus-visible) {
    box-shadow: 0 0 0 10px #ffffff25;
    transform: scale(1.12);
  }
  :root:not([data-motion="off"]) .theme-toggle,
  :root:not([data-motion="off"]) .nav-toggle { transition: background-color 240ms ease; }
}

/* The injected marker follows the buttons without changing the mobile end padding. */
@media (max-width: 639px) {
  .sector-tabs.has-control-marker > button:last-of-type { padding-right: 0; }
  :root:not([data-motion="off"]) .service-row::before { inset-inline: -8px; }
}

:root[data-motion="off"] :is(.button, .text-link, .service-row, .detail-pin,
  .disclosure-icon, .theme-toggle, .nav-toggle, .document-links a),
:root[data-motion="off"] :is(.button, .text-link, .service-row, .document-links a) > .icon {
  transition: none !important;
}
:root[data-motion="off"] .button:hover,
:root[data-motion="off"] .service-row:hover > .icon:last-child { transform: none; }
