/*
 * Single service page (LEDG-656). Loaded only on a websly_service single.
 * Mobile first. Tokens come from style.css (:root); square corners, hairline
 * rules, Lora italic display over Instrument Sans, brand red on warm off-white
 * (design system §01-§03). No new JS: the FAQ is <details>, the sticky bar and
 * the sticky estimate card are plain CSS.
 */


:root {
	--svc-white: #ffffff;
	--svc-body: #2c2c31;
	--svc-soft: #e4e4e2;
	--svc-hair: 1px;
	--svc-2px: 2px;
	--svc-3px: 3px;
	--svc-4px: 4px;
	--svc-shadow-bar: 0 -6px 18px -10px rgba(26, 26, 30, 0.35);
	--svc-lift: -2px;
	--svc-inset3: -3px;
}

.websly-msr-svc {
	--svc-ink: var(--websly-color-text);
	--svc-red: var(--websly-color-primary);
	--svc-slate: var(--websly-color-secondary);
	--svc-paper: var(--websly-color-surface-alt);
	--svc-linen: var(--websly-color-surface);
	--svc-line: var(--websly-color-border);
	--svc-muted: var(--websly-color-text-muted);
	background: var(--svc-linen);
	color: var(--svc-ink);
	font-family: var(--websly-font-body);
	font-size: 1.0625rem;
	line-height: 1.65;
}

.websly-msr-svc *,
.websly-msr-svc *::before,
.websly-msr-svc *::after { box-sizing: border-box; }

.websly-msr-svc__wrap {
	max-width: 75rem;
	margin: 0 auto;
	padding-inline: 1.25rem;
}

.websly-msr-svc a { color: var(--svc-red); text-underline-offset: var(--svc-3px); }
.websly-msr-svc a:hover { color: var(--svc-ink); }

.websly-msr-svc a:focus-visible,
.websly-msr-svc summary:focus-visible {
	outline: var(--svc-3px) solid var(--svc-red);
	outline-offset: var(--svc-3px);
}

/* ---------------------------------------------------------------- hero */

.websly-msr-svc__hero { padding: 1.25rem 0 2.25rem; }

.websly-msr-svc__crumbs { margin: 0 0 1.25rem; font-size: 0.875rem; }
.websly-msr-svc__crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--svc-4px) 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.websly-msr-svc__crumbs li { color: var(--svc-muted); }
.websly-msr-svc__crumbs li + li::before {
	content: '/';
	margin: 0 0.625rem;
	color: var(--svc-line);
}

.websly-msr-svc__hero-grid { display: grid; gap: 1.75rem; }

.websly-msr-svc__eyebrow {
	margin: 0 0 0.75rem;
	font-size: 0.7813rem;
	font-weight: 500;
	letter-spacing: 0.0313rem;
	text-transform: uppercase;
	color: var(--svc-slate);
}

.websly-msr-svc__h1 {
	margin: 0 0 1rem;
	font-family: var(--websly-font-heading);
	font-style: italic;
	font-weight: 700;
	font-size: clamp(2rem, 7.4vw, 3.625rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--svc-ink);
}

.websly-msr-svc__promise {
	margin: 0 0 1.5rem;
	max-width: 52ch;
	font-size: clamp(1.0625rem, 2.4vw, 1.25rem);
	line-height: 1.55;
	color: var(--svc-body);
}

.websly-msr-svc__actions { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-bottom: 1.25rem; }

.websly-msr-svc__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem 1.125rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.7813rem;
	font-weight: 500;
	letter-spacing: 0.025rem;
	text-transform: uppercase;
	color: var(--svc-ink);
}

.websly-msr-svc__hero-media { margin: 0; }
.websly-msr-svc__hero-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--svc-line);
}

/* ------------------------------------------------------------- buttons */

.websly-msr-svc__btn,
.websly-msr-svc__bar a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0.75rem 1.375rem;
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.0313rem;
	text-transform: uppercase;
	text-decoration: none;
	border: var(--svc-hair) solid var(--svc-red);
	border-radius: 0;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.websly-msr-svc a.websly-msr-svc__btn--call {
	background: var(--svc-red);
	color: var(--svc-white);
}
.websly-msr-svc a.websly-msr-svc__btn--call:hover { background: var(--svc-ink); border-color: var(--svc-ink); color: var(--svc-white); }

.websly-msr-svc a.websly-msr-svc__btn--whatsapp,
.websly-msr-svc a.websly-msr-svc__btn--quote {
	background: transparent;
	color: var(--svc-ink);
	border-color: var(--svc-ink);
}
.websly-msr-svc a.websly-msr-svc__btn--whatsapp:hover,
.websly-msr-svc a.websly-msr-svc__btn--quote:hover { background: var(--svc-ink); color: var(--svc-white); }

/* --------------------------------------------------------------- intro */

.websly-msr-svc__intro { padding: 0 0 0.5rem; }
.websly-msr-svc__lede {
	max-width: 72ch;
	margin: 0;
	padding-top: 1.75rem;
	border-top: var(--svc-hair) solid var(--svc-line);
	font-size: clamp(1.125rem, 2.4vw, 1.3125rem);
	line-height: 1.6;
}

/* --------------------------------------------------- content + estimate */

.websly-msr-svc__content { padding: 1.75rem 0 2.75rem; }
.websly-msr-svc__content-grid { display: grid; gap: 2rem; }

.websly-msr-svc__prose { max-width: 70ch; }
.websly-msr-svc__prose > *:first-child { margin-top: 0; }
.websly-msr-svc__prose h2 {
	margin: 2.5rem 0 0.875rem;
	font-family: var(--websly-font-heading);
	font-style: italic;
	font-weight: 700;
	font-size: clamp(1.5625rem, 4.4vw, 2rem);
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--svc-ink);
}
.websly-msr-svc__prose p { margin: 0 0 1rem; }
.websly-msr-svc__prose ul {
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
}
.websly-msr-svc__prose li {
	position: relative;
	margin: 0 0 0.75rem;
	padding: 0 0 0.75rem 1.375rem;
	border-bottom: var(--svc-hair) solid var(--svc-line);
}
.websly-msr-svc__prose li:last-child { border-bottom: 0; }
.websly-msr-svc__prose li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 0.5rem;
	height: 0.5rem;
	background: var(--svc-red);
}

.websly-msr-svc__aside {
	align-self: start;
	padding: 1.5rem;
	background: var(--svc-paper);
	border: var(--svc-hair) solid var(--svc-line);
	border-top: var(--svc-4px) solid var(--svc-red);
}
.websly-msr-svc__aside-h {
	margin: 0 0 0.5rem;
	font-family: var(--websly-font-heading);
	font-style: italic;
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.15;
}
.websly-msr-svc__aside p { margin: 0 0 1rem; font-size: 0.9375rem; color: var(--svc-muted); }
.websly-msr-svc__aside-actions { display: grid; gap: 0.625rem; }

/* ------------------------------------------------------------ sections */

.websly-msr-svc__sec { padding: 2.75rem 0; }
.websly-msr-svc__sec--alt { background: var(--svc-paper); border-block: var(--svc-hair) solid var(--svc-line); }

.websly-msr-svc__h2 {
	margin: 0 0 0.625rem;
	font-family: var(--websly-font-heading);
	font-style: italic;
	font-weight: 700;
	font-size: clamp(1.625rem, 4.8vw, 2.375rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--svc-ink);
}
.websly-msr-svc__sec-intro { margin: 0 0 1.5rem; max-width: 60ch; color: var(--svc-muted); }

/* real-job cards */
.websly-msr-svc__cards {
	display: grid;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.websly-msr-svc__card {
	position: relative;
	background: var(--svc-linen);
	border: var(--svc-hair) solid var(--svc-line);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.websly-msr-svc__card:hover { box-shadow: var(--websly-shadow-md); transform: translateY(var(--svc-lift)); }
.websly-msr-svc__card-media { display: grid; grid-template-columns: 1fr; gap: var(--svc-2px); }
.websly-msr-svc__card-media--pair { grid-template-columns: 1fr 1fr; }
.websly-msr-svc__card-media figure { position: relative; margin: 0; }
.websly-msr-svc__card-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	background: var(--svc-line);
}
.websly-msr-svc__card-media figcaption {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: var(--svc-3px) 0.5625rem;
	background: var(--svc-ink);
	color: var(--svc-white);
	font-size: 0.7188rem;
	font-weight: 500;
	letter-spacing: 0.0313rem;
	text-transform: uppercase;
}
.websly-msr-svc__card-body { padding: 1rem 1.125rem 1.25rem; }
.websly-msr-svc__card-title { margin: 0 0 var(--svc-2px); font-size: 1.125rem; line-height: 1.3; font-weight: 600; }
.websly-msr-svc__card-title a { color: var(--svc-ink); text-decoration: none; }
.websly-msr-svc__card-title a::after { content: ''; position: absolute; inset: 0; } /* whole card is one tap target */
.websly-msr-svc__card-title a:hover { color: var(--svc-red); text-decoration: underline; }
.websly-msr-svc__card-title a:focus-visible { outline-offset: var(--svc-inset3); }
.websly-msr-svc__card-loc {
	margin: 0 0 0.5rem;
	font-size: 0.7813rem;
	font-weight: 500;
	letter-spacing: 0.025rem;
	text-transform: uppercase;
	color: var(--svc-slate);
}
.websly-msr-svc__card-body p:last-child { margin: 0; font-size: 0.9375rem; color: var(--svc-muted); }

/* FAQ */
.websly-msr-svc__faq { max-width: 53.75rem; border-top: var(--svc-hair) solid var(--svc-line); }

.websly-msr-svc__q { border-bottom: var(--svc-hair) solid var(--svc-line); }
.websly-msr-svc__q summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 3.5rem;
	padding: 0.875rem var(--svc-4px);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.35;
	cursor: pointer;
	list-style: none;
}
.websly-msr-svc__q summary::-webkit-details-marker { display: none; }
.websly-msr-svc__q summary::after {
	content: '+';
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
	line-height: 1.625rem;
	text-align: center;
	font-size: 1.375rem;
	font-weight: 400;
	color: var(--svc-red);
	border: var(--svc-hair) solid var(--svc-line);
}
.websly-msr-svc__q[open] summary::after { content: '\2212'; }
.websly-msr-svc__a { padding: 0 var(--svc-4px) 1.125rem; max-width: 70ch; color: var(--svc-body); }
.websly-msr-svc__a p { margin: 0 0 0.75rem; }

/* areas + other services */
.websly-msr-svc__links-grid { display: grid; gap: 2.25rem; }
.websly-msr-svc__links { margin: 0 0 1rem; padding: 0; list-style: none; }
.websly-msr-svc__links li { padding: 0.625rem 0; border-bottom: var(--svc-hair) solid var(--svc-line); }
.websly-msr-svc__links li:first-child { border-top: var(--svc-hair) solid var(--svc-line); }
.websly-msr-svc__links a { font-weight: 600; }
.websly-msr-svc__pc { font-size: 0.7813rem; font-weight: 500; letter-spacing: 0.025rem; color: var(--svc-slate); }
.websly-msr-svc__note { display: block; font-size: 0.9063rem; color: var(--svc-muted); }
.websly-msr-svc__small { margin: 0; font-size: 0.9375rem; color: var(--svc-muted); }

/* closing band */
.websly-msr-svc__band { padding: 3rem 0; background: var(--websly-color-surface-inverse); color: var(--svc-linen); }
.websly-msr-svc__band-inner { display: grid; gap: 1.5rem; }
.websly-msr-svc__band-h {
	margin: 0 0 0.5rem;
	font-family: var(--websly-font-heading);
	font-style: italic;
	font-weight: 700;
	font-size: clamp(1.625rem, 4.8vw, 2.5rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--svc-white);
}
.websly-msr-svc__band p { margin: 0; max-width: 56ch; color: var(--svc-soft); }
.websly-msr-svc__band-actions { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.websly-msr-svc__band a:focus-visible { outline-color: var(--svc-white); }
.websly-msr-svc .websly-msr-svc__band a.websly-msr-svc__btn--call { background: var(--svc-white); color: var(--svc-ink); border-color: var(--svc-white); }
.websly-msr-svc .websly-msr-svc__band a.websly-msr-svc__btn--call:hover { background: var(--svc-soft); color: var(--svc-ink); }
.websly-msr-svc .websly-msr-svc__band a.websly-msr-svc__btn--whatsapp,
.websly-msr-svc .websly-msr-svc__band a.websly-msr-svc__btn--quote { color: var(--svc-white); border-color: var(--svc-white); }
.websly-msr-svc .websly-msr-svc__band a.websly-msr-svc__btn--whatsapp:hover,
.websly-msr-svc .websly-msr-svc__band a.websly-msr-svc__btn--quote:hover { background: var(--svc-white); color: var(--svc-ink); }

/* ------------------------------------------- phone: sticky call/estimate bar */

.websly-msr-svc__bar { display: none; }

@media (max-width: 44.9375em) {
	.single-websly_service { padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0)); }
	.websly-msr-svc__bar {
		position: fixed;
		inset: auto 0 0 0;
		z-index: 998;
		display: grid;
		grid-template-columns: 1.4fr 1fr;
		gap: 0.5rem;
		padding: 0.625rem 0.75rem calc(0.625rem + env(safe-area-inset-bottom, 0));
		background: var(--svc-paper);
		border-top: var(--svc-hair) solid var(--svc-line);
		box-shadow: var(--svc-shadow-bar);
	}
	.websly-msr-svc__bar a { padding: 0.625rem 0.75rem; font-size: 0.8438rem; }
	.websly-msr-svc__bar .websly-msr-svc__bar-call { background: var(--svc-red); color: var(--svc-white); }
	.websly-msr-svc__bar .websly-msr-svc__bar-quote { background: transparent; color: var(--svc-ink); border-color: var(--svc-ink); }
	/* lift the floating WhatsApp bubble clear of the bar */
	.single-websly_service .websly-whatsapp-button { bottom: calc(5rem + env(safe-area-inset-bottom, 0)); }
}

/* --------------------------------------------------------------- tablet+ */

@media (min-width: 45em) {
	.websly-msr-svc__wrap { padding-inline: 2rem; }
	.websly-msr-svc__cards { grid-template-columns: repeat(2, 1fr); }
	.websly-msr-svc__links-grid { grid-template-columns: 1.2fr 1fr; gap: 3.5rem; }
	.websly-msr-svc__aside-actions { grid-template-columns: 1fr; }
	.websly-msr-svc__band-inner { grid-template-columns: 1.3fr 1fr; align-items: center; gap: 2.5rem; }
	.websly-msr-svc__band-actions { justify-content: flex-end; }
}

@media (min-width: 56.25em) {
	.websly-msr-svc__hero { padding: 2rem 0 3.5rem; }
	.websly-msr-svc__hero-grid { grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 3.5rem; }
	.websly-msr-svc__hero-grid--text { grid-template-columns: 1fr; }
	.websly-msr-svc__hero-media img { aspect-ratio: 4 / 5; max-height: 37.5rem; }
	.websly-msr-svc__content-grid { grid-template-columns: minmax(0, 1fr) 20rem; gap: 3.5rem; }
	.websly-msr-svc__aside { position: sticky; top: 6.5rem; }
}

@media (min-width: 68.75em) {
	.websly-msr-svc__wrap { padding-inline: 2.5rem; }
	.websly-msr-svc__cards { grid-template-columns: repeat(3, 1fr); }
	.websly-msr-svc__sec { padding: 4rem 0; }
	.websly-msr-svc__band { padding: 4rem 0; }
}

@media (prefers-reduced-motion: reduce) {
	.websly-msr-svc__btn,
	.websly-msr-svc__bar a,
	.websly-msr-svc__card { transition: none; }
	.websly-msr-svc__card:hover { transform: none; }
}

@media print {
	.websly-msr-svc__bar,
	.websly-msr-svc__aside,
	.websly-msr-svc__band-actions { display: none; }
}