/* Localised dossier value proposition: green text trigger, restrained hover/focus/tap panel. */
.service-pro-why {
  position: relative;
  align-self: flex-start;
  max-width: 100%;
  margin: 0 0 18px;
  z-index: 3;
}
.service-pro-why > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  list-style: none;
  cursor: pointer;
  font: 650 12px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--brand-green, #21845B);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color .15s ease;
}
/* The shared brand system sets summary text to grey with !important.
   This precisely-scoped exception restores the corporate green trigger. */
body article.service details.service-pro-why > summary:not(.eyebrow):not(.label):not(.form-status):not(.error):not(.success) {
  color: var(--brand-green, #21845B) !important;
}
.service:has(.service-pro-why[open]) {
  z-index: 5;
}
.service-pro-why > summary::-webkit-details-marker { display: none; }
.service-pro-why > summary::after {
  content: "ⓘ";
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
}
.service-pro-why > summary:hover,
.service-pro-why[open] > summary {
  text-decoration-color: currentColor;
}
.service-pro-why > summary:focus-visible {
  outline: 2px solid var(--brand-green, #21845B);
  outline-offset: 4px;
  border-radius: 2px;
}
.service-pro-why-panel {
  width: min(370px, calc(100vw - 48px));
  padding: 14px 17px;
  margin-top: 8px;
  color: #4a4f4c;
  background: #fff;
  border: 1px solid #cbded3;
  border-radius: 8px;
  box-shadow: 0 10px 28px rgb(25 55 39 / 12%);
  font: 400 12px/1.65 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.service-pro-why-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.service-pro-why-panel li {
  display: flex;
  align-items: start;
  gap: 8px;
  margin: 0;
}
.service-pro-why-panel li + li { margin-top: 8px; }
.service-pro-why-panel li::before {
  content: "–";
  color: var(--brand-green, #21845B);
  flex: 0 0 auto;
}
@media (hover: hover) and (pointer: fine) and (min-width: 961px) {
  .service-pro-why-panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 5;
  }
}
/* On phones/tablets and narrower layouts, opening expands the card rather than
   placing an overlay beyond the viewport. Native <details> works without JS. */
@media (max-width: 960px) {
  .service-pro-why { align-self: stretch; }
  .service-pro-why-panel { width: 100%; }
}