/* ==========================================================================
   Services — Figma 130:377 (hero + CTA), with the list of services in the
   client's document order. Each row links to the delivering company's page,
   scrolled to that service (company.css / company.js handle the landing).
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */
.svc-hero {
	padding: calc(210 * var(--u)) 0 calc(90 * var(--u));
	background: var(--navy);
}
.svc-hero__title {
	max-width: 794px;
	min-height: calc(225 * var(--u));        /* the design's three-line block, 210–435 */
}
.svc-hero__body {
	margin: calc(90 * var(--u)) 0 0 calc(664 * var(--u)); /* body at x 736, y 525 */
	max-width: 632px;
}
.svc-hero__text > p + p { margin-top: 12px; }
.svc-hero__cta { margin-top: 40px; }          /* button at y 702: two paragraphs (12px apart) end at 662 */


/* ==========================================================================
   List of services
   Desktop row: number | title (Tinos) | sub-services + "Delivered by" | Explore.
   The whole row is the link (the title link's ::after covers it).
   ========================================================================== */
.sl {
	--sl-ink: var(--navy);
	--sl-text: var(--navy-deep);
	--sl-mute: rgba(24, 48, 102, 0.5);
	padding: calc(140 * var(--u)) 0 calc(160 * var(--u));
}
.sl__head {
	display: grid;
	grid-template-columns: 443fr 853fr;
	align-items: baseline;
	margin-bottom: calc(90 * var(--u));
}
.sl__head .label { margin: 0; }
.sl__heading { color: var(--sl-ink); }

.sl__list { border-bottom: 1px solid var(--line-dark); }
.sl__row {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 72fr) minmax(0, 371fr) minmax(0, 633fr) minmax(0, 220fr);
	grid-template-areas: "num title body cta";
	align-items: start;
	padding: calc(44 * var(--u)) 0 calc(48 * var(--u));
	border-top: 1px solid var(--line-dark);
	isolation: isolate;
}
/* Hover tint, slightly wider than the column so the text never touches its edge. */
.sl__row::before {
	content: "";
	position: absolute;
	inset: -1px -24px 0;
	z-index: -1;
	border-radius: 4px;
	background: linear-gradient(90deg, rgba(191, 217, 255, 0.42), rgba(191, 217, 255, 0.16));
	opacity: 0;
	transition: opacity 0.6s var(--ease-out);
}
/* A navy rule draws over the 50% rule on hover / focus. */
.sl__rule {
	position: absolute;
	left: 0;
	right: 0;
	top: -1px;
	height: 1px;
	background: var(--navy);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.9s var(--ease-out);
	pointer-events: none;
}
.sl__num {
	grid-area: num;
	padding-top: 16px;
	font-size: 12px;
	line-height: 18px;
	font-weight: 500;
	letter-spacing: 1.92px;
	font-variant-numeric: tabular-nums;
	color: var(--sl-mute);
	transition: color 0.4s var(--ease-out);
}
.sl__title {
	grid-area: title;
	margin: 0;
	padding-right: 32px;
	color: var(--sl-ink);
}
/* The shift lives on the text, not the h3: a transformed h3 would become the
   containing block of the link's row-sized ::after. */
.sl__title-text { display: inline-block; transition: transform 0.7s var(--ease-out); }
.sl__link { color: inherit; }
.sl__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.sl__link:focus-visible { outline: 0; }
.sl__row:has(.sl__link:focus-visible) { outline: 2px solid var(--navy); outline-offset: 6px; border-radius: 2px; }

.sl__body { grid-area: body; padding-top: 12px; max-width: 560px; color: var(--sl-text); }
.sl__teaser { font-size: 16px; line-height: 25px; margin-bottom: 14px; }
/* Separator dots precede each item; the one starting a line falls into the
   wrapper's clipped negative margin, so no line starts or ends with a dot. */
.sl__subs-wrap { overflow: hidden; }
.sl__subs { display: flex; flex-wrap: wrap; margin-left: -27px; font-size: 16px; line-height: 25px; }
.sl__subs li { display: inline-flex; align-items: center; }
.sl__subs li::before {
	content: "";
	flex: none;
	width: 3px;
	height: 3px;
	margin: 0 12px;
	border-radius: 50%;
	background: var(--navy);
	opacity: 0.45;
}
.sl__teaser + .sl__subs-wrap { color: rgba(20, 39, 73, 0.78); }
.sl__by {
	margin-top: 18px;
	font-size: 12px;
	line-height: 18px;
	font-weight: 500;
	letter-spacing: 1.92px;
	text-transform: uppercase;
	color: rgba(24, 48, 102, 0.78); /* QA: 0.5 was ~3:1 on white at 12px; this is ~5:1 */
}
.sl__by-label { margin-right: 6px; opacity: 0.85; }

.sl__cta {
	grid-area: cta;
	justify-self: end;
	display: inline-flex;
	align-items: center;
	gap: 16px;
	padding-top: 6px;
	color: var(--sl-ink);
	font-size: 14px;
	line-height: 18px;
	font-weight: 500;
}
.sl__cta-label { position: relative; }
.sl__cta-label::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.6s var(--ease-out);
}
.sl__cta-icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	overflow: hidden;
	border: 1px solid var(--line-dark);
	border-radius: 50%;
	transition: background-color 0.45s var(--ease-out), border-color 0.45s var(--ease-out), color 0.45s var(--ease-out);
}
.sl__cta-icon svg { width: 17px; height: 13px; transition: transform 0.6s var(--ease-out); }

/* Hover / keyboard focus */
@media (hover: hover) {
	.sl__row:hover::before { opacity: 1; }
	.sl__row:hover .sl__rule { transform: scaleX(1); }
	.sl__row:hover .sl__num { color: var(--sl-ink); }
	.sl__row:hover .sl__title-text { transform: translateX(8px); }
	.sl__row:hover .sl__cta-label::after { transform: scaleX(1); transform-origin: left; }
	.sl__row:hover .sl__cta-icon { background: var(--navy); border-color: var(--navy); color: var(--white); }
	.sl__row:hover .sl__cta-icon svg { animation: sl-arrow 0.7s var(--ease-out); }
}
.sl__row:has(.sl__link:focus-visible)::before { opacity: 1; }
.sl__row:has(.sl__link:focus-visible) .sl__rule { transform: scaleX(1); }
.sl__row:has(.sl__link:focus-visible) .sl__cta-icon { background: var(--navy); border-color: var(--navy); color: var(--white); }
.sl__row:active .sl__cta-icon { background: var(--navy); border-color: var(--navy); color: var(--white); }

/* The arrow leaves to the right and comes back in from the left. */
@keyframes sl-arrow {
	0% { transform: translateX(0); }
	45% { transform: translateX(36px); }
	46% { transform: translateX(-36px); }
	100% { transform: translateX(0); }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1279px) and (min-width: 1024px) {
	.sl__row { grid-template-columns: minmax(0, 64fr) minmax(0, 330fr) minmax(0, 560fr) minmax(0, 150fr); }
	.sl__cta-label { display: none; }
}

@media (max-width: 1023px) {
	.svc-hero { padding: calc(var(--header-h) + 64px) 0 64px; }
	.svc-hero__title { min-height: 0; max-width: 640px; }
	.svc-hero__body { margin: 36px 0 0; max-width: 560px; }
	.svc-hero__cta { margin-top: 32px; }

	.sl { padding: 80px 0 96px; }
	.sl__head { grid-template-columns: 1fr; row-gap: 18px; margin-bottom: 44px; }
	.sl__row {
		grid-template-columns: 48px minmax(0, 1fr) auto;
		grid-template-areas:
			"num title cta"
			"num body  body";
		padding: 32px 0 34px;
	}
	.sl__row::before { inset: -1px calc(-1 * var(--gutter)) 0; border-radius: 0; }
	.sl__num { padding-top: 10px; }
	.sl__title { padding-right: 16px; }
	.sl__body { max-width: 620px; padding-top: 14px; }
	.sl__cta { padding-top: 0; }
	.sl__cta-label { display: none; }
}

@media (max-width: 599px) {
	.svc-hero .btn { height: 44px; min-width: 148px; }
	.sl__row {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"num   cta"
			"title cta"
			"body  body";
		padding: 26px 0 28px;
	}
	.sl__num { padding-top: 0; margin-bottom: 6px; }
	.sl__title { font-size: 28px; line-height: 34px; padding-right: 12px; }
	.sl__cta { align-self: center; grid-row: 1 / 3; }
	.sl__cta-icon { width: 44px; height: 44px; }
	.sl__body { padding-top: 12px; }
	.sl__subs, .sl__teaser { font-size: 15px; line-height: 23px; }
	.sl__subs { margin-left: -21px; }
	.sl__subs li::before { margin: 0 9px; }
	.sl__by { margin-top: 14px; font-size: 11px; letter-spacing: 1.5px; }
}

@media (prefers-reduced-motion: reduce) {
	.sl__row:hover .sl__cta-icon svg { animation: none; }
	.sl__title-text, .sl__rule { transition: none; }
}