/*
 * Services page — hero, the three category sections and the closing band.
 *
 * Mobile-first: one column at 320px, the asymmetric split only from 900px up.
 * Every colour, size, radius, shadow and duration comes from the design tokens
 * (assets/css/design-tokens.css), so a section is never hard-coded light and
 * stays readable if the token values change.
 */

/* ==========================================================================
   Page-local custom properties

   The token palette has no alpha variants, and the dark bands need translucent
   tints and hairlines. They are declared ONCE here, on the page container, so
   every rule below consumes a custom property instead of repeating a colour
   literal — change a value here and the whole page follows.
   ========================================================================== */

.site-main--services {
	--services-tint-accent: rgba(45, 212, 191, 0.18);
	--services-tint-accent-transparent: rgba(45, 212, 191, 0);
	--services-tint-accent-soft: rgba(45, 212, 191, 0.14);
	--services-hairline: rgba(248, 249, 250, 0.3);
	--services-hairline-soft: rgba(248, 249, 250, 0.16);
	--services-veil: rgba(248, 249, 250, 0.1);
	--services-veil-soft: rgba(248, 249, 250, 0.06);
	/* Comfortable minimum hit area for a finger on a 360px screen. */
	--services-tap-target: 44px;

	/* Nothing on this page may push the document sideways at 320–360px. */
	overflow-x: clip;
}

/* ==========================================================================
   Yoast breadcrumbs (rendered only when the plugin is active)
   ========================================================================== */

.site-main--services .breadcrumbs {
	padding-block: var(--space-4) var(--space-0);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	/* A long trail wraps instead of widening the page on a phone. */
	overflow-wrap: anywhere;
}

.site-main--services .breadcrumbs a {
	color: var(--color-link);
	text-decoration: none;
}

.site-main--services .breadcrumbs a:hover,
.site-main--services .breadcrumbs a:focus {
	color: var(--color-link-hover);
	text-decoration: underline;
}

/* ==========================================================================
   Hero — dark band, so it alternates with the first category below it
   ========================================================================== */

.services-hero {
	background:
		radial-gradient(circle at 85% 15%, var(--services-tint-accent) 0%, var(--services-tint-accent-transparent) 55%),
		var(--color-primary-900);
	color: var(--color-neutral-50);
}

.services-hero__inner {
	padding-block: clamp(var(--space-12), 9vw, var(--space-20));
}

.services-hero__eyebrow {
	margin: 0 0 var(--space-3);
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: var(--letter-wide);
	text-transform: uppercase;
	color: var(--color-accent-300);
}

.services-hero__title {
	margin: 0 0 var(--space-5);
	max-width: 22ch;
	font-size: clamp(var(--text-2xl), 6vw, var(--text-4xl));
	color: var(--color-neutral-50);
}

.services-hero__lead {
	margin: 0 0 var(--space-8);
	max-width: 58ch;
	font-size: clamp(var(--text-base), 2.2vw, var(--text-lg));
	color: var(--color-neutral-100);
}

.services-hero__jump {
	margin-bottom: var(--space-8);
}

.services-hero__jump-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.services-hero__jump-list li {
	list-style: none;
}

.services-hero__jump-link {
	display: inline-flex;
	align-items: center;
	min-height: var(--services-tap-target);
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--services-hairline);
	border-radius: var(--radius-full);
	color: var(--color-neutral-100);
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: 600;
	text-decoration: none;
	transition: background var(--duration-fast) var(--ease-default),
		border-color var(--duration-fast) var(--ease-default),
		color var(--duration-fast) var(--ease-default);
}

.services-hero__jump-link:hover,
.services-hero__jump-link:focus {
	background: var(--services-veil);
	border-color: var(--color-accent-400);
	color: var(--color-neutral-50);
}

.services-hero__actions {
	margin: 0;
}

/* Every button on this page is at least a comfortable finger-width tall. */
.site-main--services .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--services-tap-target);
}

/* ==========================================================================
   Category sections
   ========================================================================== */

.service-section {
	background: var(--color-bg);
	color: var(--color-text);
	scroll-margin-top: var(--space-8);
}

.service-section--alt {
	background: var(--color-primary-900);
	color: var(--color-neutral-100);
}

.service-section__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-8);
	padding-block: var(--space-section);
}

.service-section__head {
	max-width: 62ch;
}

.service-section__number {
	margin: 0 0 var(--space-2);
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: var(--letter-wide);
	color: var(--color-primary-600);
}

.service-section--alt .service-section__number {
	color: var(--color-accent-300);
}

.service-section__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: var(--space-4);
	border-radius: var(--radius-md);
	background: var(--color-primary-100);
	color: var(--color-primary-700);
}

.service-section--alt .service-section__icon {
	background: var(--services-tint-accent-soft);
	color: var(--color-accent-300);
}

.service-section__title {
	margin: 0 0 var(--space-4);
	font-size: clamp(var(--text-xl), 4vw, var(--text-3xl));
	color: inherit;
}

.service-section__summary {
	margin: 0;
	max-width: 56ch;
	font-size: var(--text-lg);
	color: var(--color-text-muted);
}

.service-section--alt .service-section__summary {
	color: var(--color-neutral-200);
}

.service-section__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-6);
}

.service-block {
	padding: var(--space-6);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-left: 3px solid var(--color-primary-500);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	transition: box-shadow var(--duration-normal) var(--ease-default),
		transform var(--duration-normal) var(--ease-default);
}

.service-block:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-2px);
}

.service-block--who {
	border-left-color: var(--color-accent-600);
}

.service-section--alt .service-block {
	background: var(--services-veil-soft);
	border-color: var(--services-hairline-soft);
	border-left-color: var(--color-accent-400);
	box-shadow: none;
}

.service-block__title {
	margin: 0 0 var(--space-3);
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: var(--letter-wide);
	text-transform: uppercase;
	color: var(--color-primary-700);
}

.service-section--alt .service-block__title {
	color: var(--color-accent-300);
}

.service-block__text {
	margin: 0;
	max-width: var(--measure);
	color: inherit;
}

.service-block__list {
	margin: var(--space-4) 0 0;
	padding: 0;
	list-style: none;
}

.service-block__list-item {
	position: relative;
	padding-left: var(--space-6);
	margin-bottom: var(--space-2);
	list-style: none;
	color: inherit;
}

.service-block__list-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: var(--space-3);
	height: 2px;
	background: var(--color-accent-600);
}

.service-section--alt .service-block__list-item::before {
	background: var(--color-accent-400);
}

.service-block__list-item:last-child {
	margin-bottom: 0;
}

.service-section__media {
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
}

.service-section__image {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center;
}

.service-section__panel {
	display: flex;
	align-items: flex-end;
	aspect-ratio: 4 / 3;
	margin: 0;
	padding: var(--space-6);
	background: linear-gradient(145deg, var(--color-primary-700) 0%, var(--color-accent-800) 100%);
	color: var(--color-neutral-50);
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	font-weight: 700;
	letter-spacing: var(--letter-tight);
	line-height: var(--leading-tight);
	max-width: none;
}

.service-section__actions {
	margin: 0;
}

/* The Inquire link is a button, with an unmistakable hover and keyboard focus
   state on both the light and the alternate section background. */
.service-section__actions .btn:hover {
	box-shadow: var(--shadow-lg);
}

.service-section__actions .btn:focus-visible,
.services-cta__actions .btn:focus-visible {
	outline: 3px solid var(--color-accent-400);
	outline-offset: 3px;
}

/* Tablet (roughly 768px): the two blocks sit side by side while the section is
   still full width. From 900px up the body moves into the narrow column of the
   asymmetric split below, so it returns to one column there. */
@media (min-width: 680px) and (max-width: 899px) {
	.service-section__body {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.service-section__inner {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		column-gap: var(--space-12);
		align-items: start;
	}

	.service-section__head,
	.service-section__actions {
		grid-column: 1 / -1;
	}

	.service-section__media {
		grid-column: 2;
		grid-row: 2;
	}

	.service-section__body {
		grid-column: 1;
		grid-row: 2;
	}

	/* Asymmetry: every other section puts the photo on the left. */
	.service-section--alt .service-section__media {
		grid-column: 1;
	}

	.service-section--alt .service-section__body {
		grid-column: 2;
	}
}

/* ==========================================================================
   Page content from the editor + the closing band
   ========================================================================== */

.services-body {
	background: var(--color-surface);
}

.services-cta {
	background: var(--color-primary-800);
	color: var(--color-neutral-50);
}

.services-cta__inner {
	padding-block: clamp(var(--space-12), 8vw, var(--space-16));
}

.services-cta__title {
	margin: 0 0 var(--space-4);
	max-width: 26ch;
	font-size: clamp(var(--text-xl), 4vw, var(--text-2xl));
	color: var(--color-neutral-50);
}

.services-cta__text {
	margin: 0 0 var(--space-6);
	max-width: 58ch;
	color: var(--color-neutral-100);
}

.services-cta__actions {
	margin: 0;
}

/* ==========================================================================
   Motion
   ========================================================================== */

/* The tokens already zero every duration under prefers-reduced-motion; this
   also drops the lift so nothing moves at all. */
@media (prefers-reduced-motion: reduce) {
	.service-block:hover,
	.site-main--services .btn:hover,
	.site-main--services .btn:focus {
		transform: none;
	}
}