/*
 * Get MEP Plans theme — service-page.css
 * For pages using template page-service.php (Mechanical, Electrical, Plumbing, Fire Protection).
 * 9-section structure per the locked sitemap.
 */

.mep-service-hero {
	padding: 64px 0 48px;
	border-bottom: 1px solid var(--rule);
}

.mep-service-hero .meta-strip {
	display: flex;
	gap: 24px;
	font-family: var(--f-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-mute);
	margin-bottom: 32px;
}

.mep-service-hero .meta-strip .code {
	color: var(--accent);
	font-weight: 600;
}

.mep-service-hero h1 {
	margin-bottom: 24px;
}

.mep-service-hero .lede {
	font-size: 19px;
	line-height: 1.55;
	color: var(--ink-soft);
	max-width: 64ch;
	margin-bottom: 32px;
}

.mep-service-hero .cta-row {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

/* "What we do" 3-column block */
.mep-service-deliverables {
	padding: 64px 0;
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 60px;
	border-bottom: 1px solid var(--rule);
}

.mep-service-deliverables h2 {
	font-family: var(--f-display);
	font-weight: 380;
	font-size: 32px;
	letter-spacing: -0.018em;
	font-variation-settings: "opsz" 144, "SOFT" 25;
}

.mep-service-deliverables ul {
	list-style: none;
	padding: 0;
	margin: 0;
	columns: 2;
	column-gap: 40px;
}

.mep-service-deliverables li {
	font-family: var(--f-body);
	font-size: 15.5px;
	line-height: 1.55;
	padding: 12px 0;
	border-bottom: 1px solid var(--rule);
	break-inside: avoid;
	color: var(--ink-soft);
}

.mep-service-deliverables li::before {
	content: "—";
	color: var(--accent);
	margin-right: 10px;
	font-weight: 600;
}

/* "How it fits" prose section */
.mep-service-fit {
	padding: 64px 0;
	border-bottom: 1px solid var(--rule);
	max-width: 760px;
}

.mep-service-fit h2 {
	font-family: var(--f-display);
	font-weight: 380;
	font-size: 32px;
	letter-spacing: -0.018em;
	margin-bottom: 16px;
}

.mep-service-fit p {
	font-size: 17px;
	line-height: 1.65;
	color: var(--ink-soft);
}

/* Code references */
.mep-code-refs {
	padding: 64px 0;
	border-bottom: 1px solid var(--rule);
}

.mep-code-refs h2 {
	font-family: var(--f-display);
	font-weight: 380;
	font-size: 32px;
	letter-spacing: -0.018em;
	margin-bottom: 24px;
}

.mep-code-refs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
}

.mep-code-ref {
	font-family: var(--f-mono);
	font-size: 13px;
	padding: 16px 20px;
	background: var(--paper-2);
	border-left: 3px solid var(--accent);
	color: var(--ink);
	letter-spacing: 0.02em;
}

.mep-code-ref strong {
	display: block;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-mute);
	margin-bottom: 4px;
	font-weight: 600;
}

/* Sample project card area */
.mep-service-sample {
	padding: 64px 0;
	border-bottom: 1px solid var(--rule);
}

.mep-service-sample .head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 24px;
	margin-bottom: 24px;
}

.mep-service-sample .head h2 {
	font-family: var(--f-display);
	font-weight: 380;
	font-size: 32px;
	letter-spacing: -0.018em;
}

.mep-service-sample .head a {
	font-family: var(--f-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--ink);
	color: var(--ink);
	padding-bottom: 2px;
}

.mep-service-sample .head a:hover {
	color: var(--accent);
	border-bottom-color: var(--accent);
}

/* Service area note */
.mep-service-area-note {
	padding: 32px 0;
	border-bottom: 1px solid var(--rule);
	font-family: var(--f-mono);
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--ink-soft);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

.mep-service-area-note a {
	font-family: var(--f-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink);
	border-bottom: 1px solid var(--ink);
	padding-bottom: 2px;
}

.mep-service-area-note a:hover {
	color: var(--accent);
	border-bottom-color: var(--accent);
}

/* Productized cross-sell card (Mechanical only — points to getmanualjsd.com) */
.mep-service-cross-sell {
	padding: 64px 0;
	border-bottom: 1px solid var(--rule);
}

.mep-cross-sell-card {
	border: 1px solid var(--ink);
	padding: 32px;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 32px;
	align-items: center;
	background: var(--paper-2);
	text-decoration: none;
	color: var(--ink);
	transition: background 0.25s ease;
}

.mep-cross-sell-card:hover {
	background: var(--paper-bright);
	color: var(--ink);
}

.mep-cross-sell-card .domain {
	font-family: var(--f-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--accent);
	margin-bottom: 8px;
	text-transform: lowercase;
}

.mep-cross-sell-card h3 {
	font-family: var(--f-display);
	font-size: 26px;
	font-weight: 400;
	margin-bottom: 8px;
	color: var(--ink);
}

.mep-cross-sell-card p {
	font-size: 14.5px;
	color: var(--ink-soft);
	margin: 0;
}

.mep-cross-sell-card .arrow {
	font-family: var(--f-mono);
	font-size: 18px;
	color: var(--accent);
}

/* FAQ block */
.mep-faq {
	padding: 64px 0;
	border-bottom: 1px solid var(--rule);
}

.mep-faq h2 {
	font-family: var(--f-display);
	font-weight: 380;
	font-size: 32px;
	letter-spacing: -0.018em;
	margin-bottom: 32px;
}

.mep-faq-item {
	border-bottom: 1px solid var(--rule);
	padding: 20px 0;
}

.mep-faq-item:last-child {
	border-bottom: 0;
}

.mep-faq-item summary {
	font-family: var(--f-display);
	font-size: 19px;
	font-weight: 500;
	cursor: pointer;
	color: var(--ink);
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

.mep-faq-item summary::-webkit-details-marker {
	display: none;
}

.mep-faq-item summary::after {
	content: "+";
	font-family: var(--f-mono);
	font-size: 22px;
	color: var(--accent);
	transition: transform 0.25s ease;
}

.mep-faq-item[open] summary::after {
	transform: rotate(45deg);
}

.mep-faq-item .answer {
	margin-top: 14px;
	font-size: 16px;
	line-height: 1.65;
	color: var(--ink-soft);
}

@media (max-width: 980px) {
	.mep-service-hero {
		padding: 32px 0 32px;
	}

	.mep-service-deliverables {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 32px 0;
	}

	.mep-service-deliverables ul {
		columns: 1;
	}

	.mep-service-fit,
	.mep-code-refs,
	.mep-service-sample,
	.mep-service-cross-sell,
	.mep-faq {
		padding: 32px 0;
	}

	.mep-cross-sell-card {
		grid-template-columns: 1fr;
		text-align: left;
		padding: 20px;
	}

	.mep-service-area-note {
		flex-direction: column;
		align-items: flex-start;
	}
}