/* ==========================================================================
   Section: Service / Hero. Ported from service-styles.css (+ hero layout the
   design reuses from the home hero, included here so the Service page is
   self-contained — home section CSS does not load on this page).
   ========================================================================== */

/* --- shared hero layout (from home hero) --- */
.svc-hero {
	padding: 150px 0 110px;
	/* Solid tint up top, dissolving into white over the lower half so it meets
	   the white top-edge of the next section seamlessly (no hard line). */
	background: linear-gradient(180deg, var(--bg-alt) 0, var(--bg-alt) 45%, var(--bg) 100%);
	overflow: hidden; position: relative;
}
.svc-hero .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; position: relative; }
.svc-hero .hero-copy { display: flex; flex-direction: column; gap: 26px; }
.svc-hero h1 { font-size: clamp(40px, 4.6vw, 64px); line-height: 1.04; }
.svc-hero h1 .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.svc-hero .hero-lead { font-size: 18px; color: var(--body); max-width: 560px; }
.svc-hero .hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.svc-hero .hero-art { display: flex; align-items: center; justify-content: center; }

/* --- hero quote card (service-specific) --- */
.svc-hero-quote {
	position: relative;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 40px 38px 34px;
	box-shadow: var(--shadow);
	max-width: 480px;
	margin-left: auto;
}
.svc-hero-quote::before {
	content: '';
	position: absolute; left: 0; top: 32px; bottom: 32px; width: 4px;
	border-radius: 4px; background: var(--grad);
}
.svc-quote-mark {
	font-family: var(--sans); font-size: 64px; line-height: 0.8; font-weight: 700;
	background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
	display: block; margin-bottom: 6px;
}
.svc-hero-quote p {
	font-size: 19px; line-height: 1.55; color: var(--navy); font-weight: 500;
	font-family: var(--sans);
}
.svc-hero-quote .attr { margin-top: 18px; font-size: 13.5px; color: var(--muted); font-weight: 400; font-family: var(--body-font); }

@media (max-width: 1080px) {
	.svc-hero .hero-grid { grid-template-columns: 1fr; gap: 44px; }
	.svc-hero-quote { margin-left: 0; max-width: none; }
}
@media (max-width: 520px) {
	.svc-hero .hero-btns { flex-direction: column; align-items: stretch; }
}