/* ---------- M2M Completed Services ("recent jobs" stats + table section) ---------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.m2m-jobs-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-bottom: 20px;
}

.m2m-jobs-stat {
	background: #fff;
	border-radius: 6px;
	padding: 16px 18px;
}

.m2m-jobs-stat-label {
	font: 600 11.5px Montserrat, sans-serif;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #175a75;
	margin-bottom: 6px;
}

.m2m-jobs-stat-value {
	font: 700 18px 'utopia-bold', Georgia, serif;
	color: #000;
}

.m2m-jobs-table-wrap {
	max-height: 392px;
	overflow: auto;
	background: #fff;
	border-radius: 6px;
}

.m2m-jobs-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font: 400 15.5px Lato, sans-serif;
	color: #000;
}

/* Themes and page builders sometimes turn table parts into blocks at narrow
   widths, which stacks every cell into its own line. These restate the table
   roles so the layout holds whatever the surrounding CSS does. */

.m2m-jobs-table thead {
	display: table-header-group !important;
}

.m2m-jobs-table tbody {
	display: table-row-group !important;
}

.m2m-jobs-table tr {
	display: table-row !important;
}

.m2m-jobs-table th,
.m2m-jobs-table td {
	display: table-cell !important;
	vertical-align: top;
}

/* The wrapper's own radius can't do this on its own: a sticky header paints
   outside a scroll container's rounded clip, and a collapsed table ignores a
   radius on its cells. So separate the borders and round the corner cells. */

.m2m-jobs-table thead th:first-child {
	border-top-left-radius: 6px;
}

.m2m-jobs-table thead th:last-child {
	border-top-right-radius: 6px;
}

.m2m-jobs-table tbody tr:last-child td:first-child {
	border-bottom-left-radius: 6px;
}

.m2m-jobs-table tbody tr:last-child td:last-child {
	border-bottom-right-radius: 6px;
}

.m2m-jobs-table thead th {
	background: #175a75;
	color: #fff !important;
	text-align: left;
	padding: 13px 18px !important;
	font: 600 15px Montserrat, sans-serif;
	letter-spacing: .04em;
	position: sticky;
	top: 0;
}

.m2m-jobs-table td {
	padding: 14px 18px !important;
	white-space: nowrap;
}

/* Divi and the site's table styles draw cell borders, which showed as a white
   line between the columns. This table separates rows by background only. */
.m2m-jobs-table th,
.m2m-jobs-table td {
	border: 0 !important;
}

.m2m-jobs-row-alt {
	background: #faf8f1;
}

.m2m-jobs-table--mobile {
	display: none;
}

@media (max-width: 767px) {
	.m2m-jobs-stats {
		display: flex;
		flex-direction: column;
		gap: 8px;
		margin-bottom: 14px;
	}

	.m2m-jobs-stat {
		background: none;
		border-radius: 0;
		padding: 0;
		display: flex;
		align-items: baseline;
		gap: 9px;
	}

	.m2m-jobs-stat::before {
		content: '';
		flex: 0 0 auto;
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background: #175a75;
		transform: translateY(-3px);
	}

	.m2m-jobs-stat-label {
		font: 400 15px Lato, sans-serif;
		letter-spacing: normal;
		text-transform: none;
		color: #000;
		margin-bottom: 0;
	}

	.m2m-jobs-stat-label::after {
		content: ':';
	}

	.m2m-jobs-stat-value {
		font: 700 15px 'utopia-bold', Georgia, serif;
		color: #175a75;
	}

	.m2m-jobs-table-wrap {
		max-height: 264px;
	}

	.m2m-jobs-table--desktop {
		display: none;
	}

	.m2m-jobs-table--mobile {
		display: table;
		font-size: 13px;
		/* Fixed layout, so the three columns split the screen by the widths
		   below instead of being sized by their longest word. */
		table-layout: fixed;
		width: 100%;
	}

	.m2m-jobs-table--mobile th:nth-child(1),
	.m2m-jobs-table--mobile td:nth-child(1) {
		width: 30%;
	}

	.m2m-jobs-table--mobile th:nth-child(2),
	.m2m-jobs-table--mobile td:nth-child(2) {
		width: 48%;
	}

	.m2m-jobs-table--mobile th:nth-child(3),
	.m2m-jobs-table--mobile td:nth-child(3) {
		width: 22%;
	}

	.m2m-jobs-table--mobile thead th {
		padding: 9px 8px;
		font-size: 14px;
	}

	.m2m-jobs-table--mobile td {
		padding: 9px 8px;
		white-space: normal;
		/* A long unbroken suburb name shouldn't push the column open. */
		overflow-wrap: break-word;
	}

	/* No sideways scroll on a phone: the mobile table already fits. */
	.m2m-jobs-table-wrap {
		overflow-x: hidden;
	}
}

/* ---------- M2M Reviews (Owl Carousel) ---------- */

.m2m-reviews {
	margin: 20px 0;
	/* Anchor for the nav arrows, which sit outside the cards. */
	position: relative;
}

/* ---------- Carousel arrows ---------- */
/* Owl's default theme paints these as small grey pills, so every property it
   sets has to be restated here rather than just added to. */

.m2m-reviews .owl-nav {
	margin: 0;
}

.m2m-reviews .owl-nav button.owl-prev,
.m2m-reviews .owl-nav button.owl-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 42px;
	height: 42px;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font: 400 19px/1 Lato, sans-serif;
	background: transparent;
	border: 1.5px solid rgb(23, 90, 117) !important;
	color: #555 !important;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s, opacity 0.2s;
}

.m2m-reviews .owl-nav button.owl-prev svg,
.m2m-reviews .owl-nav button.owl-next svg {
	width: 18px;
	height: 18px;
}

.m2m-reviews .owl-nav button.owl-prev {
	left: -58px;
}

.m2m-reviews .owl-nav button.owl-next {
	right: -58px;
}

.m2m-reviews .owl-nav button.owl-prev:hover,
.m2m-reviews .owl-nav button.owl-next:hover {
	background: #175a75;
	border-color: #175a75 !important;
	color: #fff !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .14);
}

.m2m-reviews .owl-nav button.owl-prev.disabled,
.m2m-reviews .owl-nav button.owl-next.disabled {
	opacity: .5;
	cursor: default;
}

/* Not enough room beside the cards to park them outside, so they tuck in. */
@media (max-width: 1200px) {
	.m2m-reviews .owl-nav button.owl-prev {
		left: -8px;
	}

	.m2m-reviews .owl-nav button.owl-next {
		right: -8px;
	}
}

.m2m-review {
	width: 100%;
	box-sizing: border-box;
	background: #fff;
	/* Desktop has no outline: the arrows and the beige section already give the
	   cards their edges. The border comes back on tablet and mobile below. */
	border: 1.5px solid transparent;
	border-radius: 10px;
	padding: 20px;
	color: #000;
}

@media (max-width: 980px) {
	.m2m-review {
		border-color: #175a75;
	}
}

.m2m-review-stars {
	color: #f4cd00;
	font-size: 20px;
	letter-spacing: 3px;
	margin-bottom: 8px;
}

.m2m-review-name {
	font-family: 'utopia-bold' !important;
	font-size: 16px;
	color: #000;
	margin: 0 0 4px;
	padding-bottom: 0px;
}

.m2m-review-staff {
	font-weight: 400;
}

.m2m-review-meta {
	font-family: Lato, sans-serif;
	font-size: 13px;
	font-weight: normal;
	color: #000;
	margin: 0 0 8px;
	padding-bottom: 0px;

}

.m2m-review-quote {
	font-family: Lato, sans-serif;
	font-size: 15px;
	line-height: 1.6em !important;
	color: #000;
	/* Room for exactly four lines on every card, so the boxes stay one height;
	   anything longer is clamped with an ellipsis on the fourth line. */
	min-height: 6.4em;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
	margin: 0;
}

/* Mobile cards are narrower, so they get five lines. */
@media (max-width: 767px) {
	.m2m-review-quote {
		min-height: 8em;
		-webkit-line-clamp: 5;
		line-clamp: 5;
	}
}

.m2m-reviews-empty,
.m2m-completed-services-empty {
	color: #000;
}

/* ---------- Equal-height cards (Owl doesn't stretch items by default) ---------- */

.m2m-reviews.owl-carousel .owl-stage {
	display: flex;
}

.m2m-reviews.owl-carousel .owl-item {
	display: flex;
	height: auto;
}

.m2m-reviews.owl-carousel .owl-item > * {
	width: 100%;
}
.m2m-reviews .owl-dots .owl-dot span {
	background: #8BB7BD;
}

.m2m-reviews .owl-dots .owl-dot.active span {
	background: #175a75;
}


.m2m-jobs-range {
	font: 600 11.5px Montserrat, sans-serif;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #175a75;
	margin: 0 0 10px;
}

/* ---------- Breadcrumbs + last updated ---------- */
/* Each shortcode renders only its own text, so the beige bar, its padding and
   the split across the row stay with the page layout, same boundary the other
   shortcodes use. */

.m2m-crumbs-nav {
	font: 400 15.5px/1.5 Lato, sans-serif;
	color: #000;
}

.m2m-crumbs-nav a {
	color: #175a75;
	text-decoration: none;
}

.m2m-crumbs-nav a:hover {
	text-decoration: underline;
}

.m2m-updated {
	font: 400 15px Lato, sans-serif;
	color: #5f5a4e;
}

@media (max-width: 767px) {
	.m2m-crumbs-nav {
		font-size: 14.5px;
	}
}

/* ---------- M2M Staff (Owl Carousel) ---------- */

.m2m-staff {
	margin: 20px 0;
	/* Anchor for the nav arrows, same as the reviews carousel. */
	position: relative;
}

.m2m-staff-card {
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	color: #000;
}

/* A div with a background image, not an <img>: themes force width and height
   onto images, which stretched these into ellipses. A square box with
   aspect-ratio can't be pulled out of shape, and width is capped by the card so
   it shrinks on narrow screens without ever going oval. */
.m2m-staff-photo {
	width: 190px;
	max-width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
	border-radius: 50%;
	margin: 0 auto;
	display: block;
	background-color: #e6e3da;
	background-repeat: no-repeat;
	background-size: cover;
	/* Faces sit high in these portraits, so bias the crop upwards. */
	background-position: 50% 22%;
}

.m2m-staff-photo--empty {
	background-color: #e6e3da;
}

.m2m-staff-name {
	font-family: 'utopia-bold', Georgia, serif !important;
	font-size: 21px;
	color: #000;
	margin: 14px 0 0;
	padding-bottom: 0;
}

.m2m-staff-role {
	font: 400 16.5px/1.4 Lato, sans-serif;
	color: #3a3a3a;
	padding-bottom: 0;
}

.m2m-staff-joined {
	font: 600 13.5px Montserrat, sans-serif;
	color: #175a75;
	padding-bottom: 0;
}

.m2m-staff .owl-nav {
	margin: 0;
}

.m2m-staff .owl-nav button.owl-prev,
.m2m-staff .owl-nav button.owl-next {
	position: absolute;
	/* Centred on the photo, not the whole card, so the arrows line up with the
	   circles rather than drifting down past the names. */
	top: 95px;
	transform: translateY(-50%);
	width: 42px;
	height: 42px;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1.5px solid rgb(23, 90, 117) !important;
	color: #555 !important;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s, opacity 0.2s;
}

.m2m-staff .owl-nav button.owl-prev svg,
.m2m-staff .owl-nav button.owl-next svg {
	width: 18px;
	height: 18px;
}

.m2m-staff .owl-nav button.owl-prev {
	left: -58px;
}

.m2m-staff .owl-nav button.owl-next {
	right: -58px;
}

.m2m-staff .owl-nav button.owl-prev:hover,
.m2m-staff .owl-nav button.owl-next:hover {
	background: #175a75;
	border-color: #175a75 !important;
	color: #fff !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .14);
}

.m2m-staff .owl-nav button.owl-prev.disabled,
.m2m-staff .owl-nav button.owl-next.disabled {
	opacity: .5;
	cursor: default;
}

@media (max-width: 1200px) {
	.m2m-staff .owl-nav button.owl-prev {
		left: -8px;
	}

	.m2m-staff .owl-nav button.owl-next {
		right: -8px;
	}
}

@media (max-width: 767px) {
	.m2m-staff-photo,
	.m2m-staff-photo--empty {
		width: 140px;
	}

	.m2m-staff-name {
		font-size: 18px;
	}

	.m2m-staff-role {
		font-size: 15px;
	}

	.m2m-staff-joined {
		font-size: 13px;
	}

	.m2m-staff .owl-nav button.owl-prev,
	.m2m-staff .owl-nav button.owl-next {
		top: 70px;
	}
}

/* ---------- M2M Staff, no-photo variant ([m2m_staff no-img]) ---------- */
/* Same carousel, different box: a white left-aligned card carrying the name,
   the joined date and the completed-service count. */

.m2m-staff--no-img .m2m-staff-card--plain {
	background: #fff;
	border-radius: 10px;
	padding: 24px 26px;
	text-align: left;
	height: 100%;
}

.m2m-staff--no-img .m2m-staff-name {
	margin: 0;
	font-size: 26px;
	line-height: 1.2;
}

.m2m-staff--no-img .m2m-staff-joined {
	margin: 8px 0 0;
	font-size: 15px;
}

.m2m-staff-services {
	font: 400 17px/1.35 Lato, sans-serif;
	color: #000;
	margin: 10px 0 0;
	padding-bottom: 0;
}

/* Owl leaves items at their content height, so without this the boxes in a row
   end up different heights whenever one name or count wraps. */

.m2m-staff--no-img.owl-carousel .owl-stage {
	display: flex;
}

.m2m-staff--no-img.owl-carousel .owl-item {
	display: flex;
	height: auto;
}

.m2m-staff--no-img.owl-carousel .owl-item > * {
	width: 100%;
}

/* The photo variant parks its arrows on the circles (top: 95px); with no photo
   there's nothing to line up with, so they centre on the box instead. */

.m2m-staff--no-img .owl-nav button.owl-prev,
.m2m-staff--no-img .owl-nav button.owl-next {
	top: 50%;
}

@media (max-width: 767px) {
	.m2m-staff--no-img .m2m-staff-card--plain {
		padding: 18px;
	}

	.m2m-staff--no-img .m2m-staff-name {
		font-size: 20px;
	}

	.m2m-staff--no-img .m2m-staff-joined {
		font-size: 13px;
	}

	.m2m-staff-services {
		font-size: 15px;
	}

	.m2m-staff--no-img .owl-nav button.owl-prev,
	.m2m-staff--no-img .owl-nav button.owl-next {
		top: 50%;
	}
}

/* ---------- Google rating ---------- */
/* Five grey stars with a gold copy clipped to the rating, so 4.2 fills
   four stars and a fifth of the last one. */

.m2m-grating {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.m2m-grating-stars {
	position: relative;
	display: inline-block;
	font-size: 1.15em;
	line-height: 1;
	letter-spacing: 2px;
	white-space: nowrap;
	color: #c9c6b4;
}

.m2m-grating-stars::before {
	content: "\2605\2605\2605\2605\2605";
}

.m2m-grating-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	overflow: hidden;
	white-space: nowrap;
	color: #e0a537;
}

.m2m-grating-fill::before {
	content: "\2605\2605\2605\2605\2605";
}

/* ---------- Mobile peek (reviews + staff) ---------- */
/* The carousel is made narrower than its section and its stage is allowed to
   overflow, so the next card shows in the leftover space on the right. The
   .m2m-peek wrapper clips it at the section edge (and hides cards already
   swiped past on the left). Owl keeps whole-number items, which it needs to
   scroll all the way to the end. Mobile only: on desktop the arrows sit
   outside the carousel and must not be clipped. */
@media (max-width: 767px) {
	.m2m-peek {
		overflow: hidden;
	}

	.m2m-peek .owl-stage-outer {
		overflow: visible;
	}

	/* Two cards in 1/2.4 of the width each: the third shows about 40%. */
	.m2m-peek > .m2m-staff {
		width: calc(100% / 2.4 * 2);
	}

	/* One card in 1/1.12 of the width: the next shows a sliver. */
	.m2m-peek > .m2m-reviews {
		width: calc(100% / 1.12);
	}
}