/* Services as strands */

.blk-strands__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}

.blk-strands__head {
	position: sticky;
	top: calc(var(--header-h) + 32px);
}

.blk-strands__head .section-heading {
	margin-bottom: 0;
}

/* The line art, with the hovered service's strand lit and the rest dimmed. */
.strand-preview {
	margin-top: clamp(32px, 4vw, 56px);
	max-width: 440px;
}

.strand-preview svg {
	width: 100%;
	height: auto;
	overflow: visible;
}

.strand-preview .hero-dot-marker {
	display: none;
}

.strand-preview path,
.strand-preview circle {
	transition: opacity .35s var(--ease);
}

.strand-preview[data-hl] path,
.strand-preview[data-hl] circle {
	opacity: .18;
}

.strand-preview[data-hl="colour_one"] .oms-colour-one,
.strand-preview[data-hl="colour_two"] .oms-colour-two,
.strand-preview[data-hl="colour_three"] .oms-colour-three,
.strand-preview[data-hl="colour_four"] .oms-colour-four,
.strand-preview[data-hl="colour_five"] .oms-colour-five,
.strand-preview[data-hl="colour_six"] .oms-colour-six {
	opacity: 1;
}

@media (max-width: 1023px) {
	.blk-strands__head {
		position: static;
	}

	.strand-preview {
		display: none;
	}
}

.strand-list {
	list-style: none;
}

.strand {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 44px;
	grid-template-areas: 'title arrow' 'desc arrow';
	column-gap: 20px;
	row-gap: 4px;
	align-items: center;
	padding: 28px 0 30px;
	border-top: 4px solid var(--line);
}

.blk--dark .strand {
	border-top-color: var(--line-dark);
}

/* The strand on the rail. */
.strand::before {
	content: '';
	position: absolute;
	top: -4px;
	left: 0;
	width: 56px;
	height: 4px;
	border-radius: 0 2px 2px 0;
	background: var(--swatch, var(--amber));
	transition: width .6s cubic-bezier(.65, 0, .35, 1);
}

.strand:hover::before {
	width: 100%;
}

.strand__title {
	grid-area: title;
	font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
	line-height: 1.1;
}

.strand__title a {
	color: var(--heading);
	text-decoration: none;
	transition: color .2s var(--ease);
}

.strand:hover .strand__title a {
	color: var(--swatch, var(--amber-text));
}

.strand__title a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

.strand__title a:focus-visible {
	outline: none;
}

.strand:has(a:focus-visible) {
	outline: 3px solid var(--focus);
	outline-offset: 4px;
}

.strand__desc {
	grid-area: desc;
	font-size: .9375rem;
	line-height: 1.5;
	color: var(--muted);
}

.strand__arrow {
	grid-area: arrow;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--tint);
	color: var(--heading);
	transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}

.blk--tint .strand__arrow {
	background: var(--surface);
}

.blk--dark .strand__arrow {
	background: var(--ink-2);
	color: #fff;
}

.strand__arrow svg {
	width: 18px;
	height: 18px;
}

.strand:hover .strand__arrow {
	background: var(--swatch, var(--amber));
	color: var(--ink-2);
	transform: translateX(4px);
}

@media (max-width: 1023px) {
	.blk-strands__grid {
		grid-template-columns: 1fr;
	}
}