/* ============================================================
   The Bespoke page (2026-10-24) - "Bespoke", desktop and mobile
   (docs/design-renders/bespoke-desktop-v1, bespoke-mobile-v1).
   The hero is the inner-page hero (page-hero.css); each service
   card is the homepage's split card (split-card.css), with these
   differences, measured on both artboards:
   - every text panel White on the Cream section (the homepage's
     photo-left card has a Cream panel on White);
   - the cards 112px apart at 1440 (the section's own padding), 30
     on phones (--bespoke-cards-gap);
   - a bulleted list (a 4px disc 10px in, the text 24px in, as
     article-body.css draws its lists) and an "Ideal for:" line with
     its label in Bold, each 24px under what comes before it;
   - phones: a square photo (375 x 376 as drawn) and a tighter
     panel: 42px from the photo to the eyebrow's line (46 to its
     capitals) and 30px under the link (its baseline 37 above the
     card's bottom), where the homepage's cards have 76 / 70.
   Tablets and desktop are the split card's own (50/50, 1280 x 569
   at 1440, the 507px text column, content centred down the card;
   5 : 7 on tablets). The design's phone gap from the eyebrow to the
   heading (40px between capitals, 24 on desktop) is the split
   card's single value here, as on the homepage (brief 12).
   This file loads before split-card.css (alphabetical order), so
   its overrides carry one more class.
   ============================================================ */

.bespoke-services__list {
	display: grid;
	gap: var(--bespoke-cards-gap);
}

.bespoke-services .split-card .split-card__card {
	background-color: var(--color-surface);
}

/* ---------- Bulleted list ---------- */

.bespoke-service__points {
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.bespoke-service__point {
	position: relative;
	padding-left: 24px;
}

/* The drawn disc, centred on the first line (x 148-150 of text from
   137, items from 161 at 1440). */
.bespoke-service__point::before {
	content: "";
	position: absolute;
	top: calc(var(--lh-body) * 0.5em - 2px);
	left: 10px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: currentColor;
}

/* ---------- "Ideal for:" ---------- */

.bespoke-service__ideal {
	margin: 24px 0 0;
}

.bespoke-service__ideal-label {
	font-weight: var(--fw-bold);
}

/* ---------- Phones ---------- */

@media (max-width: 767px) {
	.bespoke-services .split-card .split-card__media {
		aspect-ratio: 375 / 376;
	}

	.bespoke-services .split-card .split-card__body {
		padding: 42px 24px 30px;
	}
}

/* Windows High Contrast: the discs are backgrounds; keep them in the
   text colour (as article-body.css does). */
@media (forced-colors: active) {
	.bespoke-service__point::before {
		background-color: var(--color-forced-line);
		forced-color-adjust: none;
	}
}