/* ═══════════════════════════════════════════════════════════════════
   SERVICES GRID — desktop and mobile.

   Eight cards, four to a row at 1728. The card is the image (367x280,
   r10) with a 52px red "+" inset 20px from its top-right, and the title
   below it. Flex throughout - there is no display:grid in this theme.
   ═══════════════════════════════════════════════════════════════════ */

.services-section__head { text-align: center; }

/* eyebrow box ends 1134, H2 starts 1149 (desktop) / 852 -> 862 (mobile) */
.services-section__head .eyebrow { margin-bottom: clamp(10px, 8.54px + 0.374vw, 15px); }

/* H2 box ends 1205, intro starts 1225 (desktop) / 934 -> 944 (mobile) */
.services-section__title { margin-bottom: clamp(10px, 7.09px + 0.747vw, 20px); }

/* intro ends 1303, cards start 1343 (desktop) / 1178 -> 1198 (mobile) */
.services-section__intro { margin-bottom: clamp(20px, 14.17px + 1.495vw, 40px); }

/* ── The row ─────────────────────────────────────────────────────
   A fixed column count, pinned with a basis computed from --per-row
   rather than left to a plain wrap, which drifts through counts the
   design never asks for and strands orphans on the left.

   Column gap 20 (367 x 4 + 20 x 3 = 1528, the container). Row gap is
   the title box's bottom (1725) to the next image (1765) = 40 at 1728,
   and 1496 -> 1526 = 30 at 390. */
.services-section__grid {
	--per-row: 4;
	--col-gap: 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: var(--col-gap);
	row-gap: clamp(30px, 27.09px + 0.747vw, 40px);
}

.services-section__card {
	flex: 0 1 calc((100% - (var(--per-row) - 1) * var(--col-gap)) / var(--per-row));
	min-width: 0;
}

.services-section__cardInner {
	display: block;
	width: 100%;
	padding: 0;
	text-align: center;
	background: none;
	border: 0;
	cursor: pointer;
}
div.services-section__cardInner { cursor: default; }

/* ── Media, 367 x 280 at 1728 and 330 x 250 at 390 - the same ratio,
      so one aspect-ratio covers both frames. ────────────────────── */
.services-section__media {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--radius);
	aspect-ratio: 367 / 280;
}
.services-section__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}

/* ── The "+" — 52px red circle; the glyph is a plain
      22x22 cross in 2px white, so it is drawn rather than
      set in an icon font. Inset 20px from the image's top-right. ── */
.services-section__plus {
	/* 52px is the desktop frame's circle. The mobile frame draws no
	   "+" at all - it is here so the pop-up is reachable on a phone - so its
	   size at 390 is ours to pick: 40 against a 330-wide card reads the same
	   as 52 against 367. The inset travels with it, 15 -> 20. */
	--plus: clamp(40px, 36.50px + 0.897vw, 52px);
	position: absolute;
	top:   clamp(15px, 13.54px + 0.374vw, 20px);
	right: clamp(15px, 13.54px + 0.374vw, 20px);
	width:  var(--plus);
	height: var(--plus);
	border-radius: 50%;
	background: var(--red);
	transition: background-color .3s ease, transform .3s ease;
}
.services-section__plus::before,
.services-section__plus::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	background: var(--white);
}
/* 22 of 52 in the design, kept as a share so the bars travel with the circle. */
.services-section__plus::before { width: 42.3%; height: 2px; }
.services-section__plus::after  { width: 2px;  height: 42.3%; }

.services-section__cardInner:hover .services-section__plus,
.services-section__cardInner:focus-visible .services-section__plus {
	background: #c72c2d;
	transform: scale(1.08);
}
.services-section__cardInner:hover .services-section__media img { transform: scale(1.05); }

/* ── Title — 32px Demi centred in a 41px box ────────────────── */
.services-section__cardTitle {
	display: block;
	margin-top: 20px; /* 1623 -> 1643 desktop, 1448 -> 1468 mobile */
	font-weight: 600;
	line-height: 1.28;
	color: var(--red-ink);
	text-align: center;
	overflow-wrap: break-word;
}
.services-section__cardInner:hover .services-section__cardTitle { color: var(--red); }

/* ── Load more + progress. Off by default; the
      breakpoint below turns it on. ─────────────────────────────────── */
.services-section__more { display: none; }

.services-section__progress {
	width: 100%;
	height: 4px;
	margin-top: 20px; /* 2578 -> 2598 */
	border-radius: var(--radius);
	background: var(--red-tint);
	overflow: hidden;
}
.services-section__progressFill {
	display: block;
	height: 100%;
	border-radius: var(--radius);
	background: var(--red);
	transition: width .35s ease;
}

.services-section__count {
	margin-top: 10px; /* 2602 -> 2612 */
	font-size: 14px;
	line-height: 18px;
	color: var(--red-ink);
	text-align: center;
}

/* One control at a time in the same slot, so the row never changes height:
   "Load more" until all eight are out, then "Show less" to fold them back.
   Not in the design - added on request,
   2026-09-02. It is the same btn--primary as "Load more", fill and hover
   both, so the pager reads as one control that changes its label. */
.services-section__more.is-complete .services-section__loadMore { display: none; }
.services-section__showLess { display: none; }
.services-section__more.is-complete .services-section__showLess { display: inline-flex; }

/* Three across once four no longer leave a card wide enough for its
   title on two lines (367 -> 260 at 1240). */
@media (max-width: 1239px) {
	.services-section__grid { --per-row: 3; }
}

/* Two across, and this is where the pager starts. The desktop frame draws all
   eight with no control because four across puts them in two rows; at two or
   one across the same eight cards are four to eight rows deep, which is the
   run the mobile frame's "Load more" exists to shorten. */
@media (max-width: 899px) {

	.services-section__grid { --per-row: 2; }

	.services-section__card.is-beyond { display: none; }
	.services-section__card.is-shown  { display: block; }

	.services-section__more {
		display: flex;
		flex-direction: column;
		align-items: center;
		/* The progress track is the button's width in the design, not the
		   container's (both are 330). */
		width: 100%;
		max-width: 280px;
		margin: 30px auto 0; /* 2496 -> 2528 */
	}
}

@media (max-width: 599px) {
	.services-section__grid { --per-row: 1; }
	/* The mobile frame runs the button, the track and the count the full 330 of
	   the column. */
	.services-section__more { max-width: none; }
	.services-section__loadMore,
	.services-section__showLess { width: 100%; }
}