/* ==========================================================================
   W3 polish-b — /services cards + /service/<alias> detail (14-UXUI spec)
   Tokens only (templates/cmsmart/css/tokens.css). The detail view lives inside
   .component-uyiad66p6, whose reset paints every element rgb(51,51,51) and
   strips list/heading styles, so detail rules re-assert colour and spacing.
   ========================================================================== */

/* ---------- Media block + branded fallback tile ---------- */
.svc-media {
	position: relative;
	aspect-ratio: 16 / 9;
	width: 100%;
	overflow: hidden;
	background: var(--c-navy-600);
	border-radius: inherit;
}
.svc-media > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--thumb-pos, center);
	transition: transform var(--dur-base) var(--ease-standard);
}
.svc-media__fallback {
	position: absolute;
	inset: 0;
	display: none;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--sp-8);
	padding: var(--sp-24);
	text-align: left;
	background:
		radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--c-brand-500) 30%, transparent) 0%, transparent 55%),
		repeating-linear-gradient(0deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 28px),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 28px),
		linear-gradient(135deg, var(--c-navy-500) 0%, var(--c-navy-600) 100%);
}
.svc-media.is-fallback .svc-media__fallback { display: flex; }
.svc-media__icon {
	position: absolute;
	top: var(--sp-20);
	right: var(--sp-20);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: var(--r-12);
	background: var(--c-brand-500);
	color: var(--c-surface-0);
	box-shadow: var(--shadow-2);
}
.svc-media__icon svg { display: block; }
.svc-media__eyebrow {
	font: var(--fw-bold) var(--fs-12)/1 var(--font-base);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--c-brand-300);
}
.svc-media__name {
	font: var(--fw-bold) var(--fs-20)/1.25 var(--font-heading);
	color: var(--c-surface-0);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-width: 90%;
}
.component-uyiad66p6 .svc-media .svc-media__eyebrow { color: var(--c-brand-300); }
.component-uyiad66p6 .svc-media .svc-media__name { color: var(--c-surface-0); }
.component-uyiad66p6 .svc-media .svc-media__icon,
.component-uyiad66p6 .svc-media .svc-media__icon * { color: var(--c-surface-0); }
/* The detail view's reset zeroes every border inside .component-uyiad66p6. */
.component-uyiad66p6 .cm-btn--secondary { border: 1px solid var(--btn-secondary-border); }
.component-uyiad66p6 .svc-tile { border: 1px solid var(--c-line); }
/* .cm-btn padding/radius/font-size (v4 item 1): `.component-uyiad66p6 *` is a
   Tailwind-preflight reset (padding:0, border:0 solid #e5e7eb) at the same
   single-class specificity as .cm-btn's own rules in ui-refresh.css, and this
   stylesheet loads after it, so it wins the tie -- same root cause as the
   project widget's v3 item 2 fix. Re-assert with this wrapper's two-class
   specificity. Casing: the PHP copy here ("Request a quote", "What's
   included") is already sentence case; UPPERCASE is only the sitewide label
   convention (ui-refresh.css §2.1), not how this component's CTAs are written. */
.component-uyiad66p6 .cm-btn {
	padding: var(--btn-pad-y) var(--btn-pad-x);
	border-radius: var(--btn-radius);
	font-size: var(--fs-14);
	text-transform: none;
}

/* ---------- Card grid ---------- */
.svc-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sp-24);
	max-width: var(--container-max);
	margin: var(--sp-24) auto var(--sp-40);
	padding: 0;
	list-style: none;
}
@media (max-width: 1024px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .svc-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-20); } }

/* Related rail: never leave a hole — 1 or 2 cards are centred at card width. */
.svc-grid--related { margin-top: var(--sp-24); }
.svc-grid--related.svc-grid--n1,
.svc-grid--related.svc-grid--n2 { grid-template-columns: repeat(auto-fit, minmax(260px, 370px)); justify-content: center; }

/* ---------- Service card (hub + related) ---------- */
.svc-tile {
	display: flex;
	flex-direction: column;
	min-width: 0;
	height: 100%;
	background: var(--c-surface-0);
	border: 1px solid var(--c-line);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
	overflow: hidden;
	transition: box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.svc-tile:hover,
.svc-tile:focus-within {
	box-shadow: var(--card-shadow-hover);
	border-color: var(--c-brand-200);
	transform: translateY(-3px);
}
.svc-tile:hover .svc-media > img { transform: scale(1.04); }
.svc-tile__media {
	position: relative;
	display: block;
	border-radius: 0;
}
.svc-tile__badge {
	position: absolute;
	left: var(--sp-12);
	bottom: var(--sp-12);
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: var(--sp-4);
	padding: var(--sp-4) var(--sp-10);
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, .94);
	color: var(--c-navy-500);
	font: var(--fw-semibold) var(--fs-12)/1.4 var(--font-base);
	box-shadow: var(--shadow-1);
}
.svc-tile__badge svg { display: block; color: var(--c-brand-600); }
.svc-media.is-fallback ~ .svc-tile__badge { display: none; } /* tile already names the cluster */
.svc-tile__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: var(--sp-10);
	padding: var(--sp-20) var(--sp-20) var(--sp-12);
}
.svc-tile__title {
	margin: 0;
	font: var(--fw-semibold) var(--text-h4)/1.3 var(--font-heading);
	text-transform: none;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.svc-tile__title a { color: var(--color-heading); text-decoration: none; }
.svc-tile__title a:hover { color: var(--c-brand-600); }
.svc-tile__text {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--fs-14);
	line-height: var(--lh-base);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.svc-tile__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-8);
	margin-top: auto;
	padding-top: var(--sp-8);
	font-size: var(--fs-14);
}
.svc-tile__price { color: var(--c-brand-700); font-weight: var(--fw-bold); font-size: var(--fs-16); }
.svc-tile__price small { color: var(--color-text-muted); font-weight: var(--fw-normal); font-size: var(--fs-13); }
.svc-tile__quote {
	display: inline-flex;
	padding: var(--sp-2) var(--sp-10);
	border-radius: var(--r-pill);
	background: var(--c-accent-50);
	color: var(--c-accent-800);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-13);
}
.svc-tile__days { color: var(--color-text-muted); font-size: var(--fs-13); }
.svc-tile__foot {
	padding: var(--sp-12) var(--sp-20) var(--sp-20);
}
.svc-tile__cta { width: 100%; justify-content: center; }

/* Detail-page reset defence for the related cards */
.component-uyiad66p6 .svc-tile * { color: inherit; }
.component-uyiad66p6 .svc-tile { color: var(--color-text); }
.component-uyiad66p6 .svc-tile__title { margin: 0 !important; font-weight: var(--fw-semibold) !important; }
.component-uyiad66p6 .svc-tile__title a { color: var(--color-heading); }
.component-uyiad66p6 .svc-tile__title a:hover { color: var(--c-brand-600); }
.component-uyiad66p6 .svc-tile__text { color: var(--color-text-muted); font-size: var(--fs-14); }
.component-uyiad66p6 .svc-tile__price { color: var(--c-brand-700); }
.component-uyiad66p6 .svc-tile__price small,
.component-uyiad66p6 .svc-tile__days { color: var(--color-text-muted); }
.component-uyiad66p6 .svc-tile__quote { color: var(--c-accent-800); }
.component-uyiad66p6 .svc-tile__badge { color: var(--c-navy-500); }
.component-uyiad66p6 .svc-tile__badge svg { color: var(--c-brand-600); }
.component-uyiad66p6 .svc-tile .cm-btn--secondary { color: var(--btn-secondary-text) !important; }

/* ==========================================================================
   Detail page
   ========================================================================== */
.svcd-wrap {
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--sp-16);
}

/* ---------- Hero ---------- */
.component-uyiad66p6 .svcd-hero {
	position: relative;
	margin: var(--sp-8) var(--sp-16) 0;
	padding: var(--sp-48) 0;
	border-radius: var(--r-20);
	color: var(--c-surface-0);
	background:
		radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, var(--c-brand-500) 22%, transparent) 0%, transparent 60%),
		linear-gradient(135deg, var(--c-navy-500) 0%, var(--c-navy-600) 100%);
	overflow: hidden;
}
.component-uyiad66p6 .svcd-hero * { color: inherit; }
.svcd-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
	gap: var(--sp-48);
	align-items: center;
}
.component-uyiad66p6 .svcd-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-8);
	padding: var(--sp-4) var(--sp-12);
	border-radius: var(--r-pill);
	background: var(--c-eyebrow-bg);
	color: var(--c-brand-300);
	font: var(--fw-semibold) var(--fs-13)/1.4 var(--font-base);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
}
.component-uyiad66p6 .svcd-hero__title {
	margin: var(--sp-16) 0 0 !important;
	font: var(--fw-bold) var(--text-h1)/var(--lh-tight) var(--font-heading) !important;
	color: var(--c-surface-0);
	text-transform: none;
	overflow-wrap: anywhere;
}
.component-uyiad66p6 .svcd-rating {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	margin-top: var(--sp-10);
	font-size: var(--fs-14);
}
.component-uyiad66p6 .svcd-rating .svc-star-on { color: var(--c-amber-500); }
.component-uyiad66p6 .svcd-rating .svc-star-off { color: var(--c-navy-200); }
.component-uyiad66p6 .svcd-hero__lede {
	margin-top: var(--sp-16);
	max-width: 60ch;
	color: var(--c-surface-0);
}
.component-uyiad66p6 .svcd-hero__lede p,
.component-uyiad66p6 .svcd-hero__lede .cm-tldr {
	margin: 0;
	font-size: var(--text-lead);
	line-height: var(--lh-loose);
	color: rgba(255, 255, 255, .86);
	border: 0;
	background: none;
	padding: 0;
}
.component-uyiad66p6 .svcd-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 560px;
	gap: var(--sp-12);
	margin: var(--sp-24) 0 0;
}
.component-uyiad66p6 .svcd-fact {
	padding: var(--sp-12) var(--sp-16);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--r-12);
	background: rgba(255, 255, 255, .06);
}
.component-uyiad66p6 .svcd-fact dt {
	margin: 0;
	font: var(--fw-semibold) var(--fs-12)/1.3 var(--font-base);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--c-navy-200);
}
.component-uyiad66p6 .svcd-fact dd {
	margin: var(--sp-4) 0 0;
	font: var(--fw-semibold) var(--fs-15)/1.35 var(--font-base);
	color: var(--c-surface-0);
}
.component-uyiad66p6 .svcd-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-12);
	margin-top: var(--sp-24);
}
.component-uyiad66p6 .svcd-hero .cm-btn--primary { color: var(--btn-primary-text) !important; }
.component-uyiad66p6 .svcd-hero .cm-btn--secondary {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .55);
	color: var(--c-surface-0) !important;
}
.component-uyiad66p6 .svcd-hero .cm-btn--secondary:hover { background: rgba(255, 255, 255, .1); border-color: var(--c-surface-0); }
.svcd-hero__media {
	min-width: 0;
	border-radius: var(--r-16);
	padding: var(--sp-8);
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .14);
	box-shadow: var(--shadow-3);
}
.svcd-hero__media .svc-media { border-radius: var(--r-12); }

/* Multi-image gallery (detail-gallery.js drives the slides) */
.component-uyiad66p6 .svcd-gallery .image-gallery-slide-wrapper { position: relative; overflow: hidden; border-radius: var(--r-12); aspect-ratio: 16 / 9; }
.component-uyiad66p6 .svcd-gallery .image-gallery-swipe,
.component-uyiad66p6 .svcd-gallery .image-gallery-slides { position: absolute; inset: 0; }
.component-uyiad66p6 .svcd-gallery .image-gallery-slide { position: absolute; inset: 0; transition: transform var(--dur-base) var(--ease-standard); }
.component-uyiad66p6 .svcd-gallery .image-gallery-slide .svc-media { height: 100%; aspect-ratio: auto; }
.component-uyiad66p6 .svcd-gallery .image-gallery-icon {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, .92);
	color: var(--c-navy-500);
	box-shadow: var(--shadow-2);
}
.component-uyiad66p6 .svcd-gallery .image-gallery-icon svg { width: 18px; height: 18px; margin: auto; color: var(--c-navy-500); }
.component-uyiad66p6 .svcd-gallery .image-gallery-left-nav { left: var(--sp-10); }
.component-uyiad66p6 .svcd-gallery .image-gallery-right-nav { right: var(--sp-10); }
.component-uyiad66p6 .svcd-gallery .image-gallery-thumbnails-container { display: flex; gap: var(--sp-8); margin-top: var(--sp-8); overflow-x: auto; }
.component-uyiad66p6 .svcd-gallery .image-gallery-thumbnail { flex: 0 0 72px; height: 48px; border-radius: var(--r-8); overflow: hidden; border: 2px solid transparent; opacity: .7; }
.component-uyiad66p6 .svcd-gallery .image-gallery-thumbnail.active { border-color: var(--c-brand-500); opacity: 1; }
.component-uyiad66p6 .svcd-gallery .image-gallery-thumbnail img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Body layout ---------- */
.svcd-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: var(--sp-48);
	align-items: start;
	padding-top: var(--sp-48);
	padding-bottom: var(--sp-48);
}
.svcd-main { min-width: 0; }
/* Each main-column section is a white card on the grey page, matching project detail. */
.component-uyiad66p6 .svcd-section {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
	padding: var(--sp-32);
}
.component-uyiad66p6 .svcd-section + .svcd-section {
	margin-top: var(--sp-24);
}
@media (max-width: 767px) {
	.component-uyiad66p6 .svcd-section { padding: var(--sp-20); }
}
.component-uyiad66p6 .svcd-section__title {
	margin: 0 0 var(--sp-20) !important;
	font: var(--fw-bold) var(--text-h2)/var(--lh-tight) var(--font-heading) !important;
	color: var(--color-heading);
	text-transform: none;
}

/* ---------- Service body typography (Strapi HTML) ---------- */
.component-uyiad66p6 .svc-prose {
	max-width: 72ch;
	color: var(--color-text);
	font-size: var(--text-body);
	line-height: var(--lh-loose);
}
.component-uyiad66p6 .svc-prose * { color: inherit; }
.component-uyiad66p6 .svc-prose > * + * { margin-top: var(--sp-16); }
.component-uyiad66p6 .svc-prose p { font-size: var(--text-body); line-height: var(--lh-loose); }
.component-uyiad66p6 .svc-prose h2 {
	margin: var(--sp-40) 0 var(--sp-12) !important;
	font: var(--fw-bold) var(--text-h3)/var(--lh-tight) var(--font-heading) !important;
	color: var(--color-heading);
}
.component-uyiad66p6 .svc-prose h3 {
	margin: var(--sp-32) 0 var(--sp-10) !important;
	font: var(--fw-semibold) var(--text-h4)/1.3 var(--font-heading) !important;
	color: var(--color-heading);
	text-transform: none;
}
.component-uyiad66p6 .svc-prose h4 {
	margin: var(--sp-24) 0 var(--sp-8) !important;
	font: var(--fw-semibold) var(--fs-16)/1.4 var(--font-heading);
	color: var(--color-heading);
}
.component-uyiad66p6 .svc-prose > :first-child { margin-top: 0 !important; }
.component-uyiad66p6 .svc-prose strong,
.component-uyiad66p6 .svc-prose b { font-weight: var(--fw-semibold); color: var(--color-heading); }
.component-uyiad66p6 .svc-prose a {
	color: var(--color-link);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--color-link) 35%, transparent);
	text-underline-offset: 3px;
}
.component-uyiad66p6 .svc-prose a:hover { color: var(--color-link-hover); text-decoration-color: currentColor; }

/* Bulleted lists: brand check bullets, even rhythm */
.component-uyiad66p6 .svc-prose ul:not(.svc-chips) { list-style: none; padding: 0; margin-left: 0; }
.component-uyiad66p6 .svc-prose ul:not(.svc-chips) > li {
	position: relative;
	margin: 0 0 var(--sp-8);
	padding-left: var(--sp-30);
	font-size: var(--text-body);
	line-height: var(--lh-base);
}
.component-uyiad66p6 .svc-prose ul:not(.svc-chips) > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .2em;
	width: 18px;
	height: 18px;
	border-radius: var(--r-pill);
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ea580c' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 13px no-repeat,
		var(--c-brand-50);
}

/* Ordered lists ("How it works"): numbered steps */
.component-uyiad66p6 .svc-prose ol {
	list-style: none;
	counter-reset: svc-step;
	margin-left: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-10);
}
.component-uyiad66p6 .svc-prose ol > li {
	counter-increment: svc-step;
	position: relative;
	margin: 0;
	padding: var(--sp-12) var(--sp-16) var(--sp-12) 60px;
	min-height: 52px;
	border: 1px solid var(--c-line);
	border-radius: var(--r-12);
	background: var(--c-surface-0);
	line-height: var(--lh-base);
}
.component-uyiad66p6 .svc-prose ol > li::before {
	content: counter(svc-step);
	position: absolute;
	left: var(--sp-12);
	top: var(--sp-12);
	width: 32px;
	height: 32px;
	border-radius: var(--r-pill);
	background: var(--c-navy-500);
	color: var(--c-surface-0);
	font: var(--fw-bold) var(--fs-14)/32px var(--font-heading);
	text-align: center;
}

/* Link runs -> related-service chips */
.component-uyiad66p6 .svc-prose .svc-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-8);
	list-style: none;
	padding: 0;
	margin-left: 0;
}
.component-uyiad66p6 .svc-prose .svc-chips li { margin: 0; padding: 0; }
.component-uyiad66p6 .svc-prose .svc-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-8);
	min-height: 40px;
	padding: var(--sp-8) var(--sp-16);
	border: 1px solid var(--c-brand-200);
	border-radius: var(--r-pill);
	background: var(--c-brand-50);
	color: var(--c-brand-800);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-14);
	line-height: 1.3;
	text-decoration: none;
	transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.component-uyiad66p6 .svc-prose .svc-chip::after { content: "\2192"; color: var(--c-brand-600); }
.component-uyiad66p6 .svc-prose .svc-chip:hover { background: var(--c-brand-100); border-color: var(--c-brand-400); color: var(--c-brand-900); }

/* Tables */
.component-uyiad66p6 .svc-prose .svc-table-wrap { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--r-12); }
.component-uyiad66p6 .svc-prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-14); line-height: var(--lh-base); }
.component-uyiad66p6 .svc-prose th,
.component-uyiad66p6 .svc-prose td { padding: var(--sp-10) var(--sp-16); text-align: left; vertical-align: top; border-bottom: 1px solid var(--c-line); }
.component-uyiad66p6 .svc-prose thead th { background: var(--c-surface-50); color: var(--color-heading); font-weight: var(--fw-semibold); }
.component-uyiad66p6 .svc-prose tbody tr:last-child td { border-bottom: 0; }
.component-uyiad66p6 .svc-prose td:first-child { font-weight: var(--fw-medium); color: var(--color-heading); min-width: 180px; }

/* Blockquote, notes, callouts, FAQ */
.component-uyiad66p6 .svc-prose blockquote {
	margin-left: 0;
	padding: var(--sp-12) var(--sp-20);
	border-left: 4px solid var(--c-brand-500);
	border-radius: 0 var(--r-8) var(--r-8) 0;
	background: var(--c-surface-50);
	font-style: italic;
}
.component-uyiad66p6 .svc-prose .svc-note { font-size: var(--fs-13); color: var(--color-text-muted); }
.component-uyiad66p6 .svc-prose .svc-faq h2 { margin-top: 0 !important; }
.component-uyiad66p6 .svc-prose .svc-faq {
	margin-top: var(--sp-40);
	padding: var(--sp-24);
	border-radius: var(--r-16);
	background: var(--c-surface-50);
}
.component-uyiad66p6 .svc-prose .svc-faq h3 {
	margin: var(--sp-20) 0 var(--sp-4) !important;
	padding-left: var(--sp-12);
	border-left: 3px solid var(--c-brand-500);
	font-size: var(--fs-16) !important;
}
.component-uyiad66p6 .svc-prose .svc-faq h3 + p { padding-left: calc(var(--sp-12) + 3px); margin-top: var(--sp-4); }

/* FAQ moved into the sidebar (coordinator feedback 2026-10-02, item 1): the
   .svc-faq block already supplies its own card look (background, padding) for
   its old spot at the end of the main column; nested inside the narrow
   .project-sidebar-faq card that would be a card-in-a-card, so strip it back
   down to plain text here and drop the 72ch max-width (the sidebar is 340px). */
.component-uyiad66p6 .svc-prose--sidebar { max-width: none; font-size: var(--fs-14); }
.component-uyiad66p6 .svc-prose--sidebar .svc-faq { margin-top: 0; padding: 0; background: none; }
.component-uyiad66p6 .svc-prose--sidebar .svc-faq h2,
.component-uyiad66p6 .svc-prose--sidebar .svc-faq h3 {
	font-family: var(--font-base) !important;
}
.component-uyiad66p6 .svc-prose--sidebar .svc-faq h2 { font-size: var(--fs-14) !important; }
/* Question/answer size parity (v4 item 2): h3 (question) was --fs-13 while
   its answer <p> fell through to the full-width .svc-prose p rule
   (--text-body, bigger) -- the sidebar's narrower answers never got their own
   size, so they rendered larger than the question above them. Match both to
   --fs-14 so the card reads as one consistent block. */
.component-uyiad66p6 .svc-prose--sidebar .svc-faq h3 { font-size: var(--fs-14) !important; font-weight: var(--fw-bold) !important; }
.component-uyiad66p6 .svc-prose--sidebar .svc-faq h3 + p { font-size: var(--fs-14) !important; line-height: var(--lh-base) !important; }
.component-uyiad66p6 .svc-prose .svc-callout {
	margin-top: var(--sp-40);
	padding: var(--sp-24);
	border: 1px solid var(--c-brand-200);
	border-radius: var(--r-16);
	background: linear-gradient(135deg, var(--c-brand-50), var(--c-surface-0));
}
.component-uyiad66p6 .svc-prose .svc-callout h2 { margin-top: 0 !important; font-size: var(--text-h4) !important; }

/* Timeline (step_by_step) */
.component-uyiad66p6 .svcd-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.component-uyiad66p6 .svcd-timeline__item { position: relative; display: flex; gap: var(--sp-16); margin: 0; padding-bottom: var(--sp-20); }
.component-uyiad66p6 .svcd-timeline__item:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 17px;
	top: 40px;
	bottom: 4px;
	width: 2px;
	background: var(--c-brand-200);
}
.component-uyiad66p6 .svcd-timeline__num {
	flex: 0 0 36px;
	height: 36px;
	border-radius: var(--r-pill);
	background: var(--c-brand-500);
	color: var(--c-surface-0);
	font: var(--fw-bold) var(--fs-15)/36px var(--font-heading);
	text-align: center;
}
.component-uyiad66p6 .svcd-timeline__body { padding-top: var(--sp-8); line-height: var(--lh-base); color: var(--color-text); }
.component-uyiad66p6 .svcd-timeline__body strong { display: block; color: var(--color-heading); font-weight: var(--fw-semibold); }
.component-uyiad66p6 .svcd-timeline__body span { color: var(--color-text); }

/* Terms accordion. detail-layout-v2 item 12: this card row must NOT also carry
   .svcd-section (default_detail.php no longer puts that class on its wrapper)
   -- it used to, which nested one card's border/shadow/padding inside another.
   Same margin-top rhythm as "two sections in a row" (.svcd-section + .svcd-section)
   so it still reads as the next card down the main column. */
.svcd-main > .svcd-terms { margin-top: var(--sp-24); }
.component-uyiad66p6 .svcd-accordion {
	border: 1px solid var(--c-line);
	border-radius: var(--r-16);
	background: var(--c-surface-0);
	box-shadow: var(--card-shadow);
}
.component-uyiad66p6 .svcd-accordion > summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sp-4) var(--sp-12);
	padding: var(--sp-20) 56px var(--sp-20) var(--sp-24);
	cursor: pointer;
	list-style: none;
	position: relative;
}
.component-uyiad66p6 .svcd-accordion > summary::-webkit-details-marker { display: none; }
.component-uyiad66p6 .svcd-accordion > summary::after {
	content: "+";
	position: absolute;
	right: var(--sp-24);
	top: 50%;
	transform: translateY(-50%);
	font: var(--fw-normal) 28px/1 var(--font-base);
	color: var(--c-brand-600);
}
.component-uyiad66p6 .svcd-accordion[open] > summary::after { content: "\2212"; }
.component-uyiad66p6 .svcd-accordion .svcd-section__title { margin: 0 !important; font-size: var(--text-h4) !important; }
.component-uyiad66p6 .svcd-accordion__hint { color: var(--color-text-muted); font-size: var(--fs-14); }
.component-uyiad66p6 .svcd-accordion > .svc-prose { padding: 0 var(--sp-24) var(--sp-24); }

/* ---------- Decision card ---------- David 2026-10-02: the whole aside used to be
   sticky, which only worked while it was short. Now that the aside also carries
   the "how we run your project" cards and (when the service has one) the FAQ,
   it is routinely taller than the viewport -- a sticky aside that tall just
   pins most of its own content off-screen. Only the decide (CTA) card sticks,
   same rule as the project detail sidebar. */
.svcd-aside { display: grid; gap: var(--sp-16); min-width: 0; }
@media (min-width: 1025px) {
	.svcd-decide { position: sticky; top: 96px; order: -1; }
}
.component-uyiad66p6 .svcd-decide {
	padding: var(--sp-24);
	border: 1px solid var(--c-line);
	border-top: 4px solid var(--c-brand-500);
	border-radius: var(--r-16);
	background: var(--c-surface-0);
	box-shadow: var(--shadow-2);
	display: grid;
	gap: var(--sp-10);
}
.component-uyiad66p6 .svcd-decide__label {
	font: var(--fw-semibold) var(--fs-12)/1.3 var(--font-base);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--c-brand-700);
}
.component-uyiad66p6 .svcd-decide__price { font: var(--fw-bold) var(--fs-30)/1.15 var(--font-heading); color: var(--color-heading); }
.component-uyiad66p6 .svcd-decide__price small { font-size: var(--fs-15); font-weight: var(--fw-normal); color: var(--color-text-muted); }
.component-uyiad66p6 .svcd-decide__note { font-size: var(--fs-14); line-height: var(--lh-base); color: var(--color-text-muted); }
.component-uyiad66p6 .svcd-decide__btn { width: 100%; justify-content: center; }
.component-uyiad66p6 .svcd-decide .cm-btn--primary { color: var(--btn-primary-text) !important; margin-top: var(--sp-4); }
.component-uyiad66p6 .svcd-decide .cm-btn--secondary { color: var(--btn-secondary-text) !important; }
.component-uyiad66p6 .svcd-decide__trust { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; gap: var(--sp-8); }
.component-uyiad66p6 .svcd-decide__trust li { display: flex; gap: var(--sp-8); align-items: flex-start; margin: 0; font-size: var(--fs-13); color: var(--color-text-muted); }
.component-uyiad66p6 .svcd-decide__trust svg { flex: 0 0 16px; margin-top: 2px; color: var(--c-teal-500); }
.component-uyiad66p6 .svcd-provider {
	display: flex;
	align-items: center;
	gap: var(--sp-12);
	margin-top: var(--sp-8);
	padding-top: var(--sp-16);
	border-top: 1px solid var(--c-line);
}
.component-uyiad66p6 .svcd-provider img { width: 40px; height: 40px; border-radius: var(--r-pill); object-fit: cover; }
.component-uyiad66p6 .svcd-provider a,
.component-uyiad66p6 .svcd-provider span { display: block; font-weight: var(--fw-semibold); font-size: var(--fs-14); color: var(--color-heading); }
.component-uyiad66p6 .svcd-provider small { display: block; font-size: var(--fs-12); color: var(--color-text-muted); }
/* detail-layout-v2 item 5: now nested inside .svcd-decide (the aside's only
   card) instead of its own sibling block in the aside -- needs its own
   top clearance from the provider credit line above it. */
.component-uyiad66p6 .svcd-taxo { display: flex; flex-wrap: wrap; gap: var(--sp-8); padding: 0 var(--sp-4); margin-top: var(--sp-12); }

/* ---------- Related rail ---------- */
.component-uyiad66p6 .svcd-related { padding: var(--sp-48) 0 var(--sp-24); }
.component-uyiad66p6 .svcd-related__title {
	margin: 0 !important;
	text-align: center;
	font: var(--fw-bold) var(--text-h2)/var(--lh-tight) var(--font-heading) !important;
	color: var(--color-heading);
}
.component-uyiad66p6 .svcd-related__all { text-align: center; margin: 0; }
.component-uyiad66p6 .svcd-related__all a { color: var(--color-link); font-weight: var(--fw-semibold); }
.component-uyiad66p6 .svcd-related__all a:hover { color: var(--color-link-hover); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.svcd-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-32); }
	.svcd-hero__media { max-width: 640px; }
	/* Mobile reading order (coordinator feedback 2026-10-02): story -> how we
	   deliver -> FAQ -> company/CTA, so the aside no longer jumps above the
	   "About this service" story the way the old order:-1 made it. */
	.svcd-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-32); padding-top: var(--sp-32); }
}
@media (max-width: 640px) {
	.component-uyiad66p6 .svcd-hero { margin: var(--sp-8) 0 0; border-radius: 0; padding: var(--sp-32) 0; }
	.component-uyiad66p6 .svcd-hero__ctas .cm-btn { flex: 1 1 100%; justify-content: center; }
	.component-uyiad66p6 .svcd-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.component-uyiad66p6 .svc-prose ol > li { padding-left: 54px; }
	.component-uyiad66p6 .svcd-accordion > summary { padding-left: var(--sp-16); }
	.component-uyiad66p6 .svcd-accordion > .svc-prose { padding: 0 var(--sp-16) var(--sp-16); }
	.component-uyiad66p6 .svc-prose .svc-faq,
	.component-uyiad66p6 .svc-prose .svc-callout { padding: var(--sp-16); }
	.svc-media__name { font-size: var(--fs-18); }
}
@media (prefers-reduced-motion: reduce) {
	.svc-tile, .svc-media > img, .component-uyiad66p6 .svcd-gallery .image-gallery-slide { transition: none; }
	.svc-tile:hover, .svc-tile:focus-within { transform: none; }
	.svc-tile:hover .svc-media > img { transform: none; }
}

/* Breadcrumb strip sits directly above the hero (legacy pb-7 left a ~70px hole). */
.cmsmart-project-widget #banner.pb-7 { padding-bottom: var(--sp-8); }
.component-uyiad66p6 { min-height: 0; }

/* ==========================================================================
   /services hub lower sections: process row, FAQ accordion, "Who it's for".
   The FAQ markup reuses solution/block_faq.php inline rules (white text for a
   parallax photo that no longer loads); #faqs.svc-hub-faq outranks them.
   ========================================================================== */
.how-it-work { padding: var(--sp-48) 0; }
.how-it-work .row { display: flex; flex-wrap: wrap; row-gap: var(--sp-24); }
.how-it-work .row > [class*="col-"] { display: flex; float: none; }
.how-it-work .category-wrapper {
	flex: 1 1 auto;
	padding: var(--sp-32) var(--sp-24);
	border: 1px solid var(--c-line);
	border-radius: var(--card-radius);
	background: var(--c-surface-0);
	box-shadow: var(--card-shadow);
	color: var(--color-text);
	font-size: var(--fs-15);
	line-height: var(--lh-base);
}
.how-it-work .category-wrapper:after { content: none; }
.how-it-work .category-wrapper svg {
	display: block;
	width: auto;
	max-width: 100%;
	height: 84px;
	margin: 0 auto;
	position: static !important; /* the 2nd icon carried right:22px */
}
.how-it-work .category-wrapper h5 {
	margin: var(--sp-16) 0 var(--sp-8);
	font: var(--fw-semibold) var(--text-h4)/1.3 var(--font-heading);
	color: var(--color-heading);
	text-transform: none;
}

#faqs.svc-hub-faq {
	padding: var(--sp-section-tight) 0;
	background: var(--c-surface-0);
	border-top: 1px solid var(--c-line);
	border-bottom: 1px solid var(--c-line);
}
#faqs.svc-hub-faq .mg-title {
	color: var(--color-heading);
	font: var(--fw-bold) var(--text-h2)/var(--lh-tight) var(--font-heading);
	text-align: center;
	max-width: none;
	margin: 0 0 var(--sp-8);
}
#faqs.svc-hub-faq .frequently .panel-title { margin: 0; padding: 0; border: 0; background: transparent; }
#faqs.svc-hub-faq .mg-sub-title { color: var(--color-text-muted); margin: 0 auto var(--sp-32); }
#faqs.svc-hub-faq .frequently .panel {
	margin: 0 0 var(--sp-12);
	border: 1px solid var(--c-line);
	border-radius: var(--r-12);
	background: var(--c-surface-0);
	box-shadow: none;
	overflow: hidden;
}
#faqs.svc-hub-faq .frequently .panel-heading {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}
#faqs.svc-hub-faq .frequently .panel-title > a {
	display: block;
	position: relative;
	min-height: 44px;
	padding: var(--sp-16) 52px var(--sp-16) var(--sp-20);
	color: var(--color-heading) !important;
	font: var(--fw-semibold) var(--fs-16)/1.4 var(--font-heading);
	text-decoration: none;
}
#faqs.svc-hub-faq .frequently .panel-title > a:hover,
#faqs.svc-hub-faq .frequently .panel-title > a:not(.collapsed) { color: var(--c-brand-600) !important; }
#faqs.svc-hub-faq .frequently .panel .panel-title > a:after,
#faqs.svc-hub-faq .frequently .panel-title > a.collapsed:after {
	content: "" !important;
	position: absolute;
	right: var(--sp-20);
	top: 50%;
	width: 10px;
	height: 10px;
	margin-top: -7px;
	border-right: 2px solid var(--c-brand-600);
	border-bottom: 2px solid var(--c-brand-600);
	font-family: inherit;
	transform: rotate(-135deg);
	transition: transform var(--dur-fast) var(--ease-standard);
}
#faqs.svc-hub-faq .frequently .panel-title > a.collapsed:after { transform: rotate(45deg); }
#faqs.svc-hub-faq .frequently .panel-body {
	width: auto;
	padding: 0 var(--sp-20) var(--sp-16);
	border: 0;
	color: var(--color-text);
}
#faqs.svc-hub-faq .frequently .panel-body p {
	margin: 0 0 var(--sp-8);
	color: var(--color-text);
	font-size: var(--fs-15);
	line-height: var(--lh-loose);
}

.svc-who {
	padding: var(--sp-section-tight) var(--sp-16);
	background: var(--c-surface-50);
}
.svc-who__inner { max-width: var(--container-max); margin: 0 auto; }
.svc-who .svc-who__title {
	margin: 0 0 var(--sp-12);
	padding: 0;
	background: none;
	color: var(--color-heading);
	font: var(--fw-bold) var(--text-h2)/var(--lh-tight) var(--font-heading);
	text-align: center;
	text-transform: none;
}
.svc-who__intro {
	max-width: 68ch;
	margin: 0 auto var(--sp-32);
	color: var(--color-text-muted);
	font-size: var(--text-lead);
	line-height: var(--lh-loose);
	text-align: center;
}
.svc-who__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-24); }
.svc-who__card {
	position: relative;
	padding: var(--sp-32) var(--sp-24) var(--sp-24);
	border: 1px solid var(--c-line);
	border-top: 4px solid var(--c-brand-500);
	border-radius: var(--card-radius);
	background: var(--c-surface-0);
	box-shadow: var(--card-shadow);
	transition: box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.svc-who__card:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-3px); }
.svc-who__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--r-12);
	background: var(--c-navy-500);
	color: var(--c-surface-0);
	font: var(--fw-bold) var(--fs-18)/1 var(--font-heading);
}
.svc-who__card h3 {
	margin: var(--sp-16) 0 var(--sp-8);
	color: var(--color-heading);
	font: var(--fw-semibold) var(--text-h4)/1.3 var(--font-heading);
	text-transform: none;
}
.svc-who__card p { margin: 0; color: var(--color-text); font-size: var(--fs-15); line-height: var(--lh-loose); }
@media (max-width: 900px) { .svc-who__grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .svc-who__card { transition: none; } .svc-who__card:hover { transform: none; } }

/* "View service" tile CTA: the wrapper reset zeroed its border/padding, so the button only
   appeared on hover. Keep it a visible outline button, sentence case, at rest. */
a.cm-btn.svc-tile__cta,
.component-uyiad66p6 a.cm-btn.svc-tile__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	padding: var(--btn-pad-y) var(--btn-pad-x);
	border: 1px solid var(--c-brand-500) !important;
	border-radius: var(--btn-radius);
	background: transparent;
	color: var(--c-brand-600) !important;
	font-size: var(--fs-14);
	font-weight: var(--fw-semibold);
	text-transform: none !important;
	letter-spacing: 0;
}
a.cm-btn.svc-tile__cta:hover,
a.cm-btn.svc-tile__cta:focus-visible,
.component-uyiad66p6 a.cm-btn.svc-tile__cta:hover {
	background: var(--c-brand-500);
	color: var(--c-surface-0) !important;
}