/* Local copies of the reference's slide backgrounds (style.css hotlinks them from images.servicedirect.com). */
#carousel { transition: left 0.5s; }
#carousel_slide_1 { background-image: url('/images/reference/slide-1-background.jpg'); background-position: 30% 20%; }
#carousel_slide_2 { background-image: url('/images/reference/slide-2-background.jpg'); background-position: center center; }
#carousel_slide_3 { background-image: url('/images/reference/slide-3-background.jpg'); background-position: 70% center; }
#carousel_slide_4 { background-image: url('/images/reference/slide-4-background.jpg'); background-position: 40% center; }
/* Arrows are real buttons (reference used bare <img>); strip button chrome so geometry is unchanged. */
#carousel_container button.arrow { padding: 0; border: 0; background: none; display: block; }
#carousel_container button.arrow img { display: block; width: 100%; height: 100%; max-width: none; }
#carousel_container button.arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Reference behaviour restored on top of the CMM site-wide overrides in cmm.css. */
:where(#page3, #carousel_container, #new-testimonials, #page4) *,
:where(#page3, #carousel_container, #new-testimonials, #page4) *::before,
:where(#page3, #carousel_container, #new-testimonials, #page4) *::after { box-sizing: content-box; }
#page3 h2, #page4 h2 { line-height: 0.85em; }
/* Source script: $('.page').css('height', window.innerHeight) */
.carousel_slide, #arrow_overlay { height: 100svh; }
#page3, #page4 { color: rgb(82, 89, 91); } /* reference body colour; cmm.css darkens it */
a#bottom_phone:link, a#bottom_phone:visited { color: cornflowerblue; } /* reference a:link colour; cmm.css overrides it */