/* ---------------------------------------------------------------------
   Sharp-Rite Services page (page-templates/sr-services.php)
   Reuses the Contact page hero, popup and form styles (sr-contact.css).
   Scoped to .srh.sct.sv.
   ------------------------------------------------------------------- */

/* ---- Hero: workshop photo under a dark overlay ---------------------- */
.srh.sct.sv .sv-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		linear-gradient(90deg, rgba(20, 19, 18, .95) 0%, rgba(20, 19, 18, .78) 55%, rgba(20, 19, 18, .6) 100%),
		var(--sv-img, none) center / cover no-repeat;
}
.srh.sct.sv .sct-hero h1 { max-width: 15ch; }
.srh.sct.sv .sct-hero h1 span { color: var(--srh-yellow); }
.srh.sct.sv .sv-pill {
	display: inline-block;
	padding: 8px 15px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .14);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	font-size: 13px;
	font-weight: 600;
	color: #fff;
}
.srh.sct.sv .sv-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.srh.sct.sv .sv-stat {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 150px;
	padding: 13px 18px;
	border-radius: 18px;
	background: rgba(255, 255, 255, .1);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.srh.sct.sv .sv-stat b { font: 700 21px / 1 var(--srh-display); letter-spacing: -.03em; color: #fff; }
.srh.sct.sv .sv-stat span { font-size: 12.5px; color: rgba(255, 255, 255, .72); }

/* ---- Section heads ---------------------------------------------------- */
.srh.sct.sv .sv-head { max-width: 640px; margin: 0 auto 32px; text-align: center; }
.srh.sct.sv .sv-head h2 { margin: 8px 0 0; font: 700 clamp(30px, 3.4vw, 46px) / 1.02 var(--srh-display); letter-spacing: -.04em; color: var(--srh-ink); }
.srh.sct.sv .sv-head p { margin: 12px 0 0; font-size: 16.5px; color: var(--srh-body); }

/* ---- Services ---------------------------------------------------------- */
.srh.sct.sv .sv-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.srh.sct.sv .sv-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 32px;
	border-radius: var(--srh-r-xl);
	background: #fff;
	transition: transform .25s, box-shadow .25s;
}
.srh.sct.sv .sv-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0, 0, 0, .08); }
.srh.sct.sv .sv-card__ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	margin-bottom: 14px;
	border-radius: 18px;
	background: var(--srh-ink);
	color: var(--srh-yellow);
}
.srh.sct.sv .sv-card__kicker { font-size: 13px; font-weight: 600; color: var(--srh-red); }
.srh.sct.sv .sv-card h3 { margin: 0; font: 700 clamp(22px, 2.2vw, 28px) / 1.1 var(--srh-display); letter-spacing: -.03em; color: var(--srh-ink); }
.srh.sct.sv .sv-card p { margin: 0; max-width: 46ch; font-size: 16px; line-height: 1.55; color: var(--srh-body); }

/* ---- Steps ---------------------------------------------------------------- */
.srh.sct.sv .sv-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.srh.sct.sv .sv-step { padding: 30px; border-radius: var(--srh-r-xl); background: #fff; }
.srh.sct.sv .sv-step__n {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	margin-bottom: 18px;
	border-radius: 50%;
	background: var(--srh-yellow);
	font: 800 20px / 1 var(--srh-display);
	letter-spacing: -.02em;
	color: var(--srh-ink);
}
.srh.sct.sv .sv-step h3 { margin: 0 0 8px; font: 700 22px / 1.1 var(--srh-display); letter-spacing: -.03em; color: var(--srh-ink); }
.srh.sct.sv .sv-step p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--srh-body); }

/* ---- FAQ ------------------------------------------------------------------ */
.srh.sct.sv .sv-faq { display: grid; gap: 10px; max-width: 820px; margin: 0 auto; }
.srh.sct.sv .sv-faq__item { border-radius: 22px; background: #fff; }
.srh.sct.sv .sv-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 26px;
	list-style: none;
	cursor: pointer;
	font: 700 19px / 1.25 var(--srh-display);
	letter-spacing: -.02em;
	color: var(--srh-ink);
}
.srh.sct.sv .sv-faq__item summary::-webkit-details-marker { display: none; }
.srh.sct.sv .sv-faq__item summary::after {
	content: "+";
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--srh-bg);
	font: 600 20px / 1 var(--srh-text);
	transition: background .2s, color .2s;
}
.srh.sct.sv .sv-faq__item[open] summary::after { content: "\2212"; background: var(--srh-ink); color: #fff; }
.srh.sct.sv .sv-faq__a { padding: 0 26px 24px; font-size: 15.5px; line-height: 1.6; color: var(--srh-body); }
.srh.sct.sv .sv-faq__a p { margin: 0; }
.srh.sct.sv .sv-faq__a ul { margin: 0 0 0 18px; }
.srh.sct.sv .sv-faq__a li { margin: 0 0 8px; }

/* ---- Book a service ------------------------------------------------------- */
.srh.sct.sv .sv-cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 40px;
	align-items: center;
	padding: 52px;
	border-radius: 32px;
	background: var(--srh-dark);
	color: #fff;
}
.srh.sct.sv .sv-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(55% 90% at 100% 0%, rgba(214, 48, 31, .55), transparent 70%),
		radial-gradient(45% 70% at 0% 100%, rgba(255, 207, 58, .14), transparent 70%);
}
.srh.sct.sv .sv-cta .srh-kicker { color: var(--srh-yellow); }
.srh.sct.sv .sv-cta h2 { margin: 10px 0 0; font: 700 clamp(32px, 3.8vw, 52px) / .98 var(--srh-display); letter-spacing: -.045em; color: #fff; }
.srh.sct.sv .sv-cta p { margin: 16px 0 0; max-width: 46ch; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.srh.sct.sv .sv-cta .sct-actions { margin-top: 26px; }
.srh.sct.sv .sv-cta__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.srh.sct.sv .sv-cta__list li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 18px;
	margin: 0;
	padding: 16px 18px;
	border-radius: 18px;
	background: rgba(255, 255, 255, .08);
	font-size: 15px;
}
.srh.sct.sv .sv-cta__list span { flex: none; color: rgba(255, 255, 255, .6); }
.srh.sct.sv .sv-cta__list b,
.srh.sct.sv .sv-cta__list a { font-weight: 600; text-align: right; color: #fff; line-height: 1.4; }
.srh.sct.sv .sv-cta__list a:hover { color: var(--srh-yellow); }

/* ---- Responsive ------------------------------------------------------------- */
@media (max-width: 1100px) {
	.srh.sct.sv .sv-steps { grid-template-columns: minmax(0, 1fr); }
	.srh.sct.sv .sv-cta { grid-template-columns: minmax(0, 1fr); padding: 40px 32px; gap: 28px; }
}
@media (max-width: 820px) {
	.srh.sct.sv .sv-cards { grid-template-columns: minmax(0, 1fr); }
	.srh.sct.sv .sv-card,
	.srh.sct.sv .sv-step { padding: 24px; border-radius: 24px; }
	.srh.sct.sv .sv-cta { padding: 30px 22px; border-radius: 24px; }
	.srh.sct.sv .sv-stat { flex: 1 1 100%; }
	.srh.sct.sv .sv-faq__item summary { padding: 18px 20px; font-size: 17px; }
	.srh.sct.sv .sv-faq__a { padding: 0 20px 20px; }
}