/*
 * Magister Digital - Service Page Master ("The Maestro's Ledger", Page Type 2)
 * ---------------------------------------------------------------------------
 * Shared section styles inherited by all 7 service pages (SEO, Google Ads,
 * Meta Ads, AI Automation, CRM Development, Web Design, Full-Stack Marketing).
 *
 * Built on the --md-* token system + the homepage type scale. Reuses the
 * homepage scene shell (.md-scene, .md-scene--hero/--marquee, .md-scene__cta,
 * .md-scene-hero__*, .md-offer__*, .md-pillars__*, .md-qualify__*) and the
 * design-system primitives (.md-container, .md-section--soft/--deep,
 * .md-section__header, .md-h2, .md-eyebrow, .md-body, .md-hero__cta,
 * .md-faq-cards, .md-scrim, .md-link). This sheet adds ONLY the
 * service-page-specific sections with the .md-svc-* prefix.
 *
 * AEO LAW: every selling/ranking word, answer block, CTA label, and proof line
 * lives in server-rendered HTML on first paint. Motion below is cosmetic only;
 * the .reveal failsafe + prefers-reduced-motion rules guarantee no-JS / no-
 * scroll users see every element. Big legible type (body >= 16px). Reserved
 * media dimensions to avoid CLS. Mobile-first. >= 44px tap targets. No raw hex
 * where a token exists.
 *
 * Enqueued on service-page templates by functions.php:
 *   magister_enqueue_service_page_assets().
 * Created: 2026-05-30 (Slice 2 - service-page master).
 */

/* ===========================================================================
   REVEAL SAFETY NET (service pages). Mirrors the homepage failsafe so any
   .reveal element far below the fold resolves to visible without JS / without
   the user scrolling there (and for full-page screenshot capture). The
   IntersectionObserver still wins with its snappy .is-revealed transition for
   elements it reaches first; this only rescues the ones it never reaches.
   =========================================================================== */
.js .md-svc-page .reveal {
	animation: md-svc-reveal-failsafe 0.5s 0.15s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.js .md-svc-page .reveal.is-revealed {
	animation: none;
}
@keyframes md-svc-reveal-failsafe {
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.js .md-svc-page .reveal {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ===========================================================================
   1. HERO - service outcome, founder-owned (deep charcoal).
   Asymmetric copy ~55% / visual ~45%, matching the homepage hero. Reuses the
   homepage .md-scene-hero__* type + figure rules; this block only tunes the
   service-specific eyebrow (channel + founder owner) and the scan/answer.
   =========================================================================== */
.md-svc-hero__owner {
	font-family: var(--md-font-mono);
	font-size: 13px;
	letter-spacing: 0.06em;
	color: var(--md-blue-on-dark);
	margin: 0;
}

/* ===========================================================================
   2. PROBLEM - accusation audit + calibrated loss frame (bone).
   Concede the channel's specific burn, then a calibrated How/What headline and
   a concrete-loss paragraph that ends on a Voss label. Reuses the homepage
   .md-scene-blind__lead / __label measure rules for the loss beat.
   =========================================================================== */
.md-svc-problem__inner {
	max-width: 840px;
	display: flex;
	flex-direction: column;
	gap: var(--md-space-5);
}
.md-svc-problem__audit {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--md-space-3);
}
.md-svc-problem__audit li {
	position: relative;
	padding-left: var(--md-space-5);
	font-size: 17px;
	line-height: 1.55;
	color: var(--md-fg-soft);
}
.md-svc-problem__audit li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.62em;
	width: 12px;
	height: 2px;
	background: var(--md-fg-muted);
}

/* ===========================================================================
   3. THE-WORK / SIGNATURE SECTION - "What we would run first" (deep charcoal).
   Per-channel signature visual lives in .md-svc-signature__figure (a single
   realistic-data still: SERP/citation, funnel, audience grid, workflow,
   pipeline board, before/after, attribution dashboard). 3-4 numbered steps
   sit beside it. Asymmetric: figure ~48% / steps ~52% on wide.
   =========================================================================== */
.md-svc-work__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--md-space-8);
	align-items: start;
}
@media (min-width: 960px) {
	.md-svc-work__grid { grid-template-columns: 48fr 52fr; gap: var(--md-space-10); }
}
.md-svc-signature__figure {
	margin: 0;
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	/* Charcoal poster so the media zone reads as an intentional dark panel
	   before/if the image loads, never an empty bone void. */
	background-color: var(--md-bg-deep);
	border: 1px solid rgba(212, 175, 55, 0.28);
}
.md-svc-signature__figure img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
}
.md-svc-signature__cap {
	margin: 0;
	padding: var(--md-space-3) var(--md-space-4);
	font-family: var(--md-font-sans);
	font-size: 13px;
	line-height: 1.5;
	color: rgba(247, 247, 245, 0.74);
	border-top: 1px solid rgba(212, 175, 55, 0.25);
}
.md-svc-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--md-space-5);
}
.md-svc-steps__item {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--md-space-5);
	align-items: start;
}
.md-svc-steps__num {
	font-family: var(--md-font-mono);
	font-size: clamp(22px, 2.6vw, 32px);
	font-weight: 600;
	line-height: 1;
	color: var(--md-blue-on-dark);
}
.md-svc-steps__title {
	font-family: var(--md-font-display);
	font-size: clamp(1.25rem, 1.2vw + 0.75rem, 1.5rem);
	line-height: 1.2;
	margin: 0 0 6px;
	color: #F7F7F5;
}
.md-svc-steps__body {
	font-size: 17px;
	line-height: 1.6;
	color: rgba(247, 247, 245, 0.86);
	margin: 0;
	max-width: 56ch;
}
@media (max-width: 959px) {
	.md-svc-signature__figure { order: -1; }
}

/* ===========================================================================
   4. VALUE PROPOSITION - this channel inside one stack (bone).
   The only-factor: the channel runs next to the rest of the stack, one team.
   A cross-link rail to the other 6 service pillars (entity density + internal
   links). Reuses .md-scene-blind__lead for the value statement.
   =========================================================================== */
.md-svc-value__inner {
	max-width: 880px;
	display: flex;
	flex-direction: column;
	gap: var(--md-space-6);
}
.md-svc-crosslinks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--md-space-3);
}
@media (min-width: 600px) { .md-svc-crosslinks { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 920px) { .md-svc-crosslinks { grid-template-columns: repeat(3, 1fr); } }
.md-svc-crosslinks__item {
	display: flex;
	align-items: center;
	gap: var(--md-space-3);
	min-height: var(--md-tap, 44px);
	padding: var(--md-space-4) var(--md-space-5);
	background: var(--md-bg-card);
	border: 1px solid var(--md-rule);
	border-left: 3px solid var(--md-accent);
	border-radius: 10px;
	font-family: var(--md-font-sans);
	font-size: 16px;
	font-weight: 600;
	color: var(--md-fg);
	transition: border-color var(--md-dur-base) var(--md-ease), transform var(--md-dur-base) var(--md-ease);
}
.md-svc-crosslinks__item:hover {
	border-color: var(--md-accent);
	transform: translateY(-2px);
}
.md-svc-crosslinks__item::after {
	content: "\203A"; /* › */
	margin-left: auto;
	color: var(--md-accent);
	font-size: 18px;
}
/* Self-referential item: this is the page you are on. No link, no hover lift, no chevron. */
.md-svc-crosslinks__item[aria-current="page"] {
	background: var(--md-bg-subtle, var(--md-bg-card));
	border-left-color: var(--md-action);
	color: var(--md-fg-muted, var(--md-fg));
	cursor: default;
}
.md-svc-crosslinks__item[aria-current="page"]:hover { transform: none; border-color: var(--md-rule); }
.md-svc-crosslinks__item[aria-current="page"]::after { content: ""; }
.md-svc-crosslinks__current { font-weight: 600; }

/* ===========================================================================
   5. PROOF - Perceived Likelihood (deep charcoal).
   A founder-track-record card for this channel: named venture, named outcome
   (qualitative-true, no fabricated number), founder-signed operating principle
   as a pull-quote. Never an anonymous client testimonial.
   =========================================================================== */
.md-svc-proof__card {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--md-space-5);
	padding: var(--md-space-7);
	background: rgba(247, 247, 245, 0.05);
	border: 1px solid rgba(212, 175, 55, 0.30);
	border-left: 3px solid var(--md-blue-on-dark);
	border-radius: 12px;
	max-width: 960px;
}
.md-svc-proof__quote {
	font-family: var(--md-font-display);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.375rem, 1.6vw + 1rem, 2rem);
	line-height: 1.35;
	color: #F7F7F5;
	margin: 0;
}
.md-svc-proof__body {
	font-size: 17px;
	line-height: 1.62;
	color: rgba(247, 247, 245, 0.86);
	margin: 0;
	max-width: 66ch;
}
.md-svc-proof__attr {
	margin: 0;
	padding-top: var(--md-space-3);
	border-top: 1px solid rgba(212, 175, 55, 0.25);
	font-family: var(--md-font-mono);
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--md-blue-on-dark);
}

/* ===========================================================================
   6. OFFER STACK AT THE BUTTON - "What lands in your inbox" (bone).
   The single pinned-proof moment, reusing the homepage .md-offer__* grid:
   sticky offer/CTA panel left, checkmarked deliverables right. This block adds
   only the per-service price line under the CTA.
   =========================================================================== */
.md-svc-offer__price {
	margin-top: var(--md-space-4);
	font-family: var(--md-font-mono);
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--md-fg-muted);
}
.md-svc-offer__price strong { color: var(--md-fg); font-weight: 600; }

/* ===========================================================================
   7. FAQ - "The questions a careful buyer is already holding" (bone).
   Reuses the design-system .md-faq-cards / __card / __prefix / __question /
   __answer primitives 1:1 with the FAQPage schema. No new rules needed beyond
   the section spacing the .md-section--soft shell already provides.
   (Intentionally empty - documented so future edits know the reuse is by
   design, not an omission.)
   =========================================================================== */

/* ===========================================================================
   8. FINAL CTA BAND - no-oriented mid + positive close, founder owner (deep).
   Reuses the homepage .md-final__* + .md-scene-hero__call patterns. This block
   adds the no-oriented skeptic headline treatment that precedes the positive
   close on a service page.
   =========================================================================== */
.md-svc-final__no {
	font-family: var(--md-font-display);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.375rem, 1.6vw + 1rem, 2.125rem);
	line-height: 1.3;
	color: #F7F7F5;
	margin: 0 0 var(--md-space-5);
	max-width: 28ch;
}
.md-svc-final__owner {
	margin-top: var(--md-space-5);
	font-family: var(--md-font-mono);
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--md-blue-on-dark);
}

/* ===========================================================================
   MOBILE LAYOUT GUARDS - single-column stacks, full-width CTAs, generous tap,
   and bottom padding so the persistent sticky call-bar never hides the close.
   =========================================================================== */
@media (max-width: 767px) {
	.md-svc-work__grid,
	.md-svc-page .md-offer__grid { grid-template-columns: 1fr !important; gap: var(--md-space-7) !important; }
	.md-svc-page .md-offer__sticky { position: static; }
	.md-svc-page .md-scene__cta .md-hero__cta,
	.md-svc-page .md-final__cta-row .md-hero__cta { width: 100%; }
	.md-svc-page .md-scene--final { padding-bottom: calc(var(--md-section-y) + 72px); }
}