/* Opt in only contact / consultation actions with a leading icon.
   The original action owns its size, label, link and pixel hover surface. */
body[class*="-framed"] .service-hero-action.service-hero-action-primary.jvds-call-action > .service-hero-action-arrow.jvds-call-action-icon {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  box-sizing: border-box;
  height: calc(100% + 2px);
  margin-block: -1px;
  margin-inline-start: -1px;
  border: 1px solid #000;
  border-radius: 0 !important;
  background: #e0f94c !important;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}

/* A handset stays upright; arrow rotation does not apply to consultation. */
body[class*="-framed"] .service-hero-action.service-hero-action-primary.jvds-call-action > .service-hero-action-arrow.jvds-call-action-icon svg {
  display: block;
  width: calc(29px * 2 / 3);
  height: calc(29px * 2 / 3);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: none;
  -webkit-transform: none;
}

/* Keep the existing tablet/mobile glyph proportions; only the phone shrinks. */
@media (min-width: 801px) and (max-width: 1280px) {
  body[class*="-framed"] .service-hero-action.service-hero-action-primary.jvds-call-action > .service-hero-action-arrow.jvds-call-action-icon svg {
    width: 18px;
    height: 18px;
  }
}
@media (max-width: 800px) {
  body[class*="-framed"] .service-hero-action.service-hero-action-primary.jvds-call-action > .service-hero-action-arrow.jvds-call-action-icon svg {
    width: 16px;
    height: 16px;
  }
}