/* Rotating reasons-to-call box.
 *
 * One box whose copy changes, rather than a wall of claims the reader skips.
 * Every line in it is already stated elsewhere on this site - the guarantee,
 * the technician count, the review totals - so nothing here is a new promise.
 *
 * The first message is in the HTML, painted by CSS, and never animated into
 * existence. A visitor, a screenshot or a crawler arriving mid-cycle always
 * sees a complete, true message; the script only swaps which one.
 */

.rsdr-promo {
  max-width: 1140px;
  margin: 0 auto 48px;
  padding: 0 20px;
  font-family: Lato, sans-serif;
}

.rsdr-promo-inner {
  position: relative;
  display: flex;
  /* Top-aligned, not centred: with a two-line heading the centred icon drifted
     down beside the body copy and read as unrelated to the heading it belongs
     to. The small offset lines it up with the cap height rather than the box. */
  align-items: flex-start;
  gap: 22px;
  min-height: 132px;
  padding: 26px 30px;
  background: #fff;
  border: 1px solid #e8e2df;
  border-left: 4px solid #ff7a3d;
  border-radius: 6px;
}

.rsdr-promo-mark {
  flex: 0 0 auto;
  margin-top: 2px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fdf1ec;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rsdr-promo-mark svg { width: 24px; height: 24px; stroke: #c14a12; fill: none; stroke-width: 2; }

.rsdr-promo-text { flex: 1 1 auto; min-width: 0; }

.rsdr-promo-head {
  margin: 0 0 6px;
  font-family: Montserrat, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  /* #ff7a3d is only 2.59:1 on white, so the darker shade of the same orange
     carries the text and the bright brand colour stays on the border. */
  color: #c14a12;
}

.rsdr-promo-body {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: #1e1810;
}

/* The dots say how many messages there are and which one is showing. They are
   buttons because they are operable, and they are labelled for screen readers. */
.rsdr-promo-dots {
  position: absolute;
  right: 20px;
  bottom: 14px;
  display: flex;
  gap: 7px;
}
.rsdr-promo-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ded6d2;
  cursor: pointer;
}
.rsdr-promo-dot[aria-current="true"] { background: #ff7a3d; }
.rsdr-promo-dot:focus-visible { outline: 2px solid #c14a12; outline-offset: 2px; }

/* The message that is not showing is removed from the flow, not faded, so the
   box never renders half a sentence over another. */
.rsdr-promo-item { display: none; }
.rsdr-promo-item.is-on { display: block; }

@media (max-width: 767px) {
  .rsdr-promo { margin-bottom: 34px; }
  /* Fixed, not auto: measured across the five messages the card ranged from
     200px to 245px, so every rotation shifted the whole page below it by up to
     45px. Evening up the copy cut that to 25px but did not remove it: at this
     width two of the headings wrap to a second line and three do not, and the
     heading drives the height. Only a floor as tall as the tallest slide holds
     the card still, which is worth a little slack on the shorter ones. */
  .rsdr-promo-inner { gap: 16px; padding: 22px 20px 34px; min-height: 222px; }
  .rsdr-promo-mark { width: 38px; height: 38px; }
  .rsdr-promo-mark svg { width: 20px; height: 20px; }
  .rsdr-promo-head { font-size: 17px; }
  .rsdr-promo-body { font-size: 15px; }
  .rsdr-promo-dots { right: auto; left: 20px; bottom: 12px; }
}

/* Someone who has asked for less motion gets the box without the carousel:
   every message at once, which is more information rather than less. */
@media (prefers-reduced-motion: reduce) {
  .rsdr-promo-item { display: block; }
  .rsdr-promo-item + .rsdr-promo-item { margin-top: 14px; padding-top: 14px; border-top: 1px solid #f0eae7; }
  .rsdr-promo-dots { display: none; }
}