/* ===================== Service pages ===================== */

/* Hero — a section photo sits behind a heavy navy gradient overlay (mirrors
   the home .sm-hero treatment) so white hero text stays fully legible.
   The bare .sm-service-hero is the service-category hero; each modifier
   swaps in its own photo. */
.sm-service-hero {
	background-color: var(--sm-navy);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-image:
		linear-gradient(105deg, rgba(26, 58, 107, 0.95) 0%, rgba(26, 58, 107, 0.86) 48%, rgba(26, 58, 107, 0.78) 100%),
		url("../images/sections/service-hero.jpg?v=2");
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block: var(--sm-space-16);
}
.sm-service-hero--index {
	background-image:
		linear-gradient(105deg, rgba(26, 58, 107, 0.95) 0%, rgba(26, 58, 107, 0.88) 45%, rgba(26, 58, 107, 0.8) 100%),
		url("../images/sections/warehouse.jpg?v=2");
}
.sm-service-hero--sub {
	background-image:
		linear-gradient(105deg, rgba(26, 58, 107, 0.95) 0%, rgba(26, 58, 107, 0.86) 48%, rgba(26, 58, 107, 0.78) 100%),
		url("../images/sections/subservice-hero.jpg?v=2");
}
.sm-service-hero--location {
	background-image:
		linear-gradient(105deg, rgba(26, 58, 107, 0.95) 0%, rgba(26, 58, 107, 0.86) 48%, rgba(26, 58, 107, 0.78) 100%),
		url("../images/sections/location-hero.jpg?v=2");
}
/* --location-aud also carries the --sub class; this rule comes later in the
   cascade, so it wins the background image. */
.sm-service-hero--location-aud {
	background-image:
		linear-gradient(105deg, rgba(26, 58, 107, 0.95) 0%, rgba(26, 58, 107, 0.86) 48%, rgba(26, 58, 107, 0.78) 100%),
		url("../images/sections/subservice-hero.jpg?v=2");
}
.sm-service-hero__inner {
	display: flex;
	align-items: center;
	gap: var(--sm-space-10);
}
.sm-service-hero__content {
	flex: 1;
	max-width: 640px;
}
.sm-service-hero__crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.6);
	margin-bottom: var(--sm-space-4);
}
.sm-service-hero__crumbs a {
	color: rgba(255, 255, 255, 0.75);
}
.sm-service-hero__crumbs a:hover {
	color: var(--sm-green);
}
.sm-service-hero__crumbs [aria-current] {
	color: var(--sm-green);
	font-weight: 600;
}
.sm-service-hero__title {
	color: var(--sm-white);
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
	margin: 0 0 var(--sm-space-4);
}
.sm-service-hero__intro {
	color: rgba(255, 255, 255, 0.85);
	font-size: 1.0625rem;
	line-height: var(--sm-lh-relaxed);
	margin: 0 0 var(--sm-space-6);
}
.sm-service-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sm-space-3);
}
.sm-service-hero__art {
	flex-shrink: 0;
	color: rgba(123, 193, 68, 0.16);
}
.sm-service-hero__art svg {
	width: 220px;
	height: 220px;
}

/* Body — two column with sticky aside */
.sm-service-body__inner {
	display: grid;
	grid-template-columns: 1fr 400px;
	gap: var(--sm-space-8);
	align-items: start;
}
.sm-service-body__content {
	/* Fill the column — a 70ch cap left a large empty gap before the form. */
	max-width: none;
	min-width: 0;
}

/* Components placed in the narrow content column need their own fixes:
   keep light-on-dark text light (the body p/li colour would darken it), and
   stack >2-column structures (case studies, reviews) into rows so they don't
   squish against the sticky form. */
.sm-service-body__content .sm-page-cta__title { color: #fff; }
.sm-service-body__content .sm-page-cta__sub { color: rgba(255, 255, 255, 0.85); }
.sm-service-body__content .sm-scenarios,
.sm-service-body__content .sm-testimonials { grid-template-columns: 1fr; }

.sm-service-body__content > * + * {
	margin-top: var(--sm-space-5);
}
.sm-service-body__content h2 {
	font-size: var(--sm-h3);
	margin-top: var(--sm-space-10);
}
.sm-service-body__content h3 {
	font-size: var(--sm-h5);
	margin-top: var(--sm-space-8);
}
.sm-service-body__content p,
.sm-service-body__content li {
	color: var(--sm-text);
	line-height: var(--sm-lh-relaxed);
}
.sm-service-body__content ul,
.sm-service-body__content ol {
	padding-left: 1.25rem;
}
.sm-service-body__content li {
	margin-bottom: 0.5rem;
}
.sm-service-body__content ul li::marker {
	color: var(--sm-green);
}
.sm-service-body__content .sm-feature-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sm-space-4);
	margin-top: var(--sm-space-6);
}
.sm-service-body__content .sm-feature {
	background: var(--sm-lightgrey);
	border-radius: var(--sm-radius-md);
	padding: var(--sm-space-5);
}
.sm-service-body__content .sm-feature h3 {
	margin-top: 0;
	font-size: var(--sm-h6);
	color: var(--sm-navy);
}
.sm-service-body__content .sm-feature p {
	margin: 0.4rem 0 0;
	font-size: 0.9375rem;
	color: var(--sm-muted);
}
.sm-service-body__content .sm-steps {
	counter-reset: smstep;
	list-style: none;
	padding-left: 0;
	margin-top: var(--sm-space-6);
}
.sm-service-body__content .sm-steps li {
	position: relative;
	padding-left: 3rem;
	margin-bottom: var(--sm-space-5);
}
.sm-service-body__content .sm-steps li::before {
	counter-increment: smstep;
	content: counter(smstep);
	position: absolute;
	left: 0;
	top: -2px;
	width: 2rem;
	height: 2rem;
	background: var(--sm-green);
	color: #fff;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--sm-font-display);
	font-weight: 700;
	font-size: 0.9375rem;
}

/* Aside */
.sm-service-body__aside {
	position: sticky;
	top: 100px;
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-5);
}
.sm-service-aside-card {
	background: var(--sm-green);
	color: var(--sm-white);
	border-radius: var(--sm-radius-lg);
	padding: var(--sm-space-6);
}
.sm-service-aside-card__title {
	color: var(--sm-white);
	font-size: var(--sm-h5);
	margin: 0 0 var(--sm-space-2);
}
.sm-service-aside-card p {
	margin: 0 0 var(--sm-space-5);
	font-size: 0.9375rem;
	line-height: var(--sm-lh-relaxed);
	color: rgba(255, 255, 255, 0.9);
}
.sm-service-aside-card .sm-btn {
	width: 100%;
}
/* White button on the green aside card so it actually stands out */
.sm-service-aside-card .sm-btn--primary {
	background: var(--sm-white);
	color: var(--sm-green-dark);
	border-color: var(--sm-white);
}
.sm-service-aside-card .sm-btn--primary:hover {
	background: var(--sm-navy);
	color: var(--sm-white);
	border-color: var(--sm-navy);
}
.sm-service-aside-card__phone {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	margin-top: var(--sm-space-3);
	color: var(--sm-white);
	font-family: var(--sm-font-display);
	font-weight: 600;
	font-size: 0.9375rem;
}
.sm-service-aside-links {
	background: var(--sm-white);
	border: 1px solid var(--sm-border);
	border-radius: var(--sm-radius-lg);
	padding: var(--sm-space-6);
}
.sm-service-aside-links h3 {
	margin: 0 0 var(--sm-space-3);
	font-size: var(--sm-h6);
}
.sm-service-aside-links ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.sm-service-aside-links li {
	border-top: 1px solid var(--sm-border);
}
.sm-service-aside-links li:first-child {
	border-top: 0;
}
.sm-service-aside-links a {
	display: block;
	padding: 0.7rem 0;
	font-family: var(--sm-font-display);
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--sm-navy);
}
.sm-service-aside-links a:hover {
	color: var(--sm-green-dark);
}
.sm-service-aside-links li.is-current a {
	color: var(--sm-green-dark);
}

/* Related */
.sm-service-related {
	background: var(--sm-lightgrey);
}
.sm-service-related__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sm-space-4);
}
.sm-service-related__card {
	display: flex;
	align-items: flex-start;
	gap: var(--sm-space-3);
	background: var(--sm-white);
	border: 1px solid var(--sm-border);
	border-radius: var(--sm-radius-md);
	padding: var(--sm-space-5);
	transition: transform var(--sm-dur-base) var(--sm-ease), box-shadow var(--sm-dur-base) var(--sm-ease), border-color var(--sm-dur-base) var(--sm-ease);
}
.sm-service-related__card:hover {
	transform: translateY(-3px);
	box-shadow: var(--sm-shadow-md);
	border-color: transparent;
}
.sm-service-related__icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--sm-radius-sm);
	background: var(--sm-green-tint);
	color: var(--sm-green-dark);
}
.sm-service-related__icon svg {
	width: 22px;
	height: 22px;
}
.sm-service-related__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}
.sm-service-related__label {
	font-family: var(--sm-font-display);
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--sm-navy);
	line-height: 1.3;
}
.sm-service-related__text {
	color: var(--sm-muted);
	font-size: 0.8125rem;
	line-height: 1.45;
}
.sm-service-related__arrow {
	flex-shrink: 0;
	align-self: center;
	color: var(--sm-muted);
	transition: transform var(--sm-dur-base) var(--sm-ease), color var(--sm-dur-base) var(--sm-ease);
}
.sm-service-related__card:hover .sm-service-related__arrow {
	color: var(--sm-green);
	transform: translateX(3px);
}

/* (.sm-cta-strip + --solid variant now live in overrides.css — shared component) */

/* ===== Services Index (hub) — distinct from single-service pages ===== */
.sm-service-hero--index .sm-container {
	text-align: center;
}
.sm-eyebrow--on-navy {
	color: var(--sm-green);
}
.sm-service-hero--index .sm-service-hero__title {
	margin-inline: auto;
}
.sm-service-hero__intro--wide {
	max-width: 62ch;
	margin-inline: auto;
}
.sm-service-hero--index .sm-service-hero__actions {
	justify-content: center;
}
.sm-services-index__intro-inner {
	max-width: 760px;
	margin-inline: auto;
	text-align: center;
}
.sm-services-index__intro-inner > * + * {
	margin-top: var(--sm-space-4);
}
.sm-services-index__intro-inner h2 {
	font-size: var(--sm-h4);
	margin-top: var(--sm-space-8);
}
.sm-services-index__intro-inner .sm-feature-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sm-space-4);
	text-align: left;
	margin-top: var(--sm-space-6);
}
.sm-services-index__intro-inner .sm-feature {
	background: var(--sm-lightgrey);
	border-radius: var(--sm-radius-md);
	padding: var(--sm-space-5);
}
.sm-services-index__intro-inner .sm-feature h3 {
	margin: 0 0 0.35rem;
	font-size: var(--sm-h6);
}
.sm-services-index__intro-inner .sm-feature p {
	margin: 0;
	color: var(--sm-muted);
	font-size: 0.9375rem;
}
.sm-services-index__intro-inner .sm-steps {
	text-align: left;
}
.sm-services-index__directory {
	background: var(--sm-lightgrey);
}
.sm-services-index__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sm-space-6);
}
.sm-index-cat {
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-5);
	background: var(--sm-white);
	border: 1px solid var(--sm-border);
	border-radius: var(--sm-radius-lg);
	padding: var(--sm-space-8);
}
.sm-index-cat__head {
	display: flex;
	gap: var(--sm-space-4);
	align-items: flex-start;
}
.sm-index-cat__icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: var(--sm-radius-md);
	background: var(--sm-green-tint);
	color: var(--sm-green-dark);
}
.sm-index-cat__icon svg {
	width: 26px;
	height: 26px;
}
.sm-index-cat__title {
	margin: 0 0 0.25rem;
	font-size: var(--sm-h5);
}
.sm-index-cat__title a {
	color: var(--sm-navy);
}
.sm-index-cat__title a:hover {
	color: var(--sm-green-dark);
}
.sm-index-cat__text {
	margin: 0;
	color: var(--sm-muted);
	font-size: 0.9375rem;
	line-height: var(--sm-lh-relaxed);
}
.sm-index-cat__subs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sm-space-2) var(--sm-space-4);
	border-top: 1px solid var(--sm-border);
	padding-top: var(--sm-space-5);
}
.sm-index-cat__subs a {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9375rem;
	color: var(--sm-navy);
	font-weight: 500;
}
.sm-index-cat__subs a:hover {
	color: var(--sm-green-dark);
}
.sm-index-cat__subs svg {
	flex-shrink: 0;
	color: var(--sm-green);
}
.sm-index-cat__more {
	margin-top: auto;
	font-family: var(--sm-font-display);
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--sm-green-dark);
}
.sm-index-cat__more:hover {
	color: var(--sm-green);
}

/* ===== Sub-service page — distinct from category pages ===== */
.sm-service-hero--sub {
	border-top: 4px solid var(--sm-green);
}
.sm-subservice-hero__parent {
	display: inline-block;
	font-family: var(--sm-font-display);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sm-green);
	margin-bottom: var(--sm-space-2);
}
.sm-subservice-hero__parent a {
	color: var(--sm-green);
}
.sm-subservice-hero__parent a:hover {
	color: var(--sm-white);
}
.sm-subservice-body .sm-service-body__content {
	max-width: 74ch;
}
.sm-subservice-faq {
	background: var(--sm-lightgrey);
}

/* ===== Location pages (reuse service design system + these additions) ===== */
.sm-location-hero__kicker {
	display: inline-block;
	font-family: var(--sm-font-display);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--sm-green);
	margin-bottom: var(--sm-space-2);
}
.sm-locations-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sm-space-4);
}
.sm-location-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sm-space-3);
	background-color: var(--sm-white);
	/* Country flag bleeds in from the right edge; the white→transparent
	   gradient fades it out toward the left so the name stays crisp and the
	   flag reads only as a subtle accent on the right third. */
	background-image:
		linear-gradient(to right, var(--sm-white) 56%, rgba(255, 255, 255, 0.86) 72%, rgba(255, 255, 255, 0.42) 88%, rgba(255, 255, 255, 0.18) 100%),
		var(--sm-flag, none);
	background-position: center, right center;
	background-size: cover, auto 116%;
	background-repeat: no-repeat;
	border: 1px solid var(--sm-border);
	border-radius: var(--sm-radius-md);
	padding: var(--sm-space-5) var(--sm-space-6);
	font-family: var(--sm-font-display);
	font-weight: 700;
	color: var(--sm-navy);
	overflow: hidden;
	transition: transform var(--sm-dur-base) var(--sm-ease), box-shadow var(--sm-dur-base) var(--sm-ease), border-color var(--sm-dur-base) var(--sm-ease);
}
.sm-location-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--sm-shadow-md);
	border-color: var(--sm-green);
	color: var(--sm-navy);
}
.sm-location-card__name {
	position: relative;
}
/* Arrow removed from country cards — it clashed with the flag artwork. */
.sm-location-card__arrow {
	display: none;
}
.sm-locations-grid-section,
.sm-location-audiences {
	background: var(--sm-white);
}
.sm-location-more {
	background: var(--sm-lightgrey);
}
@media (max-width: 980px) {
	.sm-locations-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 680px) {
	.sm-locations-grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 420px) {
	.sm-locations-grid {
		grid-template-columns: 1fr;
	}
}

/* Sub-services grid */
.sm-subservices {
	background: var(--sm-white);
}
.sm-subservices__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sm-space-5);
}
.sm-subservice-card {
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-3);
	background: var(--sm-lightgrey);
	border: 1px solid var(--sm-border);
	border-radius: var(--sm-radius-lg);
	padding: var(--sm-space-6);
	transition: transform var(--sm-dur-base) var(--sm-ease), box-shadow var(--sm-dur-base) var(--sm-ease), border-color var(--sm-dur-base) var(--sm-ease), background var(--sm-dur-base) var(--sm-ease);
}
.sm-subservice-card:hover {
	transform: translateY(-4px);
	background: var(--sm-white);
	border-color: var(--sm-border);
	box-shadow: var(--sm-shadow-lg);
}
.sm-subservice-card__title {
	font-size: var(--sm-h6);
	margin: 0;
}
.sm-subservice-card__text {
	margin: 0;
	flex: 1;
	color: var(--sm-muted);
	font-size: 0.9375rem;
	line-height: var(--sm-lh-relaxed);
}
.sm-subservice-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--sm-font-display);
	font-weight: 700;
	font-size: 0.875rem;
	color: var(--sm-green-dark);
}
.sm-subservice-card__link svg {
	transition: transform var(--sm-dur-base) var(--sm-ease);
}
.sm-subservice-card:hover .sm-subservice-card__link svg {
	transform: translateX(3px);
}

/* Responsive */
@media (max-width: 980px) {
	.sm-service-hero__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--sm-space-6);
	}
	.sm-service-hero__art {
		display: none;
	}
	.sm-service-body__inner {
		grid-template-columns: 1fr;
		gap: var(--sm-space-10);
	}
	.sm-service-body__aside {
		position: static;
	}
	.sm-service-related__grid {
		grid-template-columns: 1fr 1fr;
	}
	.sm-subservices__grid {
		grid-template-columns: 1fr 1fr;
	}
	.sm-services-index__grid {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 560px) {
	.sm-service-body__content .sm-feature-grid {
		grid-template-columns: 1fr;
	}
	.sm-service-related__grid {
		grid-template-columns: 1fr;
	}
	.sm-subservices__grid {
		grid-template-columns: 1fr;
	}
	.sm-services-index__intro-inner .sm-feature-grid {
		grid-template-columns: 1fr;
	}
	.sm-index-cat__subs {
		grid-template-columns: 1fr;
	}
}