/*
 * Magister Digital — Light Theme Token Overrides
 *
 * vm50-reference-design-system.css ships with DARK tokens at :root for
 * vm50's dark editorial variant. Magister runs a LIGHT/DARK JOURNEY (near-white
 * canvas + graphite ink on light chapters; graphite bg + white/silver/gold on
 * dark chapters). This sheet redeclares the --md-* tokens at :root so the entire
 * md-* class system renders on Magister's palette without touching vendored vm50.
 *
 * Load order: AFTER vm50-reference-design-system.css, BEFORE header.css.
 * Enqueue in functions.php:magister_aka_enqueue_assets().
 *
 * Palette: "Gold Standard" (LOCKED 2026-05-30, official brand kit).
 *   Graphite #0F1115 (dark chapters) · rich gold #D4AF37 · platinum silver
 *   #C0C3C7 · near-white #F7F7F5 (light canvas).
 *   GOLD-ON-DARK RULE: gold appears as small text/accent on GRAPHITE only
 *   (~8.5:1). On LIGHT sections small accents are GRAPHITE #45474C or gold-ink
 *   #6E561A, never gold-on-white. Gold CTA = gold fill + graphite #0F1115 label
 *   (self-contained, works on light AND dark).
 */

:root {
	/* ============================================================
	   "Gold Standard" palette (LOCKED 2026-05-30, official brand kit)
	   Graphite #0F1115 dark chapters · rich gold #D4AF37 · platinum
	   silver #C0C3C7 · near-white #F7F7F5 canvas. Supersedes the interim
	   Ink·Signal·Ember (blue + coral).
	   ============================================================ */

	/* Canvas — near-white light chapters + graphite dark chapter sections */
	--md-bg: #F7F7F5;          /* near-white light canvas */
	--md-bg-soft: #EEEEEB;     /* alt soft light section */
	--md-bg-card: #F1F1EE;     /* light cards */
	--md-bg-deep: #0F1115;     /* GRAPHITE dark / chapter sections */

	/* Foreground — graphite on light canvas */
	--md-fg: #16171A;          /* body ink, ~16:1 on near-white */
	--md-fg-soft: #45474C;     /* soft body, ~8:1 */
	--md-fg-muted: #5E6066;    /* muted footnote, ~5:1 */

	/* Accent — GOLD. Restricted to DARK (graphite) sections + large/decorative
	   use (gold-on-graphite ~8.5:1). On LIGHT sections, small accent text is
	   routed to --md-gold-ink / graphite below (gold-on-white fails). */
	--md-accent: #D4AF37;      /* rich gold (dark sections + CTA fill) */
	--md-accent-hi: #E3C24E;   /* gold hover */
	--md-accent-deep: #A8842A; /* deep gold, large fills */
	--md-accent-tint: rgba(212, 175, 55, 0.10);
	--md-accent-tint-strong: rgba(212, 175, 55, 0.18);

	/* Silver — platinum for hairlines, muted-on-dark, secondary accents. */
	--md-silver: #C0C3C7;      /* platinum silver (on graphite ~10:1) */

	/* Gold-ink — the ONLY gold that is safe as small text on LIGHT (rare). */
	--md-gold-ink: #6E561A;    /* deep gold-ink on near-white, ~5:1 */

	/* On-dark accent alias — gold reads ~8.5:1 on graphite, so deep-section
	   accents (eyebrows, numbers, em) use gold directly. Kept for ~30 refs. */
	--md-blue-on-dark: #D4AF37; /* gold accent on graphite */

	/* Action — GOLD CTA buttons everywhere: gold fill + GRAPHITE #0F1115 label
	   (self-contained ~8.5:1, works on light AND dark). Single action treatment. */
	--md-action: #D4AF37;      /* gold CTA fill */
	--md-action-hi: #E3C24E;   /* gold CTA hover */
	--md-action-ink: #6E561A;  /* gold as small text on light (gold-ink) */

	/* Rules — graphite hairlines on light */
	--md-rule: rgba(22, 23, 26, 0.10);
	--md-rule-strong: rgba(22, 23, 26, 0.20);
	--md-rule-hover: rgba(22, 23, 26, 0.32);
}

/* Body baseline — vm50 forces body bg/color to --md-bg/--md-fg. Token
   override above already swings this to bone+ink, but explicit for safety. */
body {
	background: var(--md-bg);
	color: var(--md-fg);
}

/* ::selection — gold highlight, deep teal text (was bone-on-gold which fails on light) */
::selection {
	background: var(--md-accent);
	color: var(--md-fg);
}

/* ====================================================================
   CTA = GOLD (the single action treatment everywhere)
   Every "Book a strategy call" / hero / sticky / final-CTA submit button is
   gold fill + GRAPHITE #0F1115 bold label. Graphite-on-gold is ~8.5:1 — it is
   self-contained, so the same button works on light AND dark sections.
   ==================================================================== */
.md-hero__cta,
.md-sticky-cta,
a.md-hero__cta,
.md-final-cta--gold__submit,
.md-cta--primary,
.wp-block-button.is-style-magister-gold .wp-block-button__link {
	background: var(--md-action) !important;
	border-color: var(--md-action) !important;
	color: #0F1115 !important;
	font-weight: 700;
	font-size: 19px;
	line-height: 1.2;
}
.md-hero__cta:hover,
.md-sticky-cta:hover,
a.md-hero__cta:hover,
.md-final-cta--gold__submit:hover,
.md-cta--primary:hover,
.wp-block-button.is-style-magister-gold .wp-block-button__link:hover {
	background: var(--md-action-hi) !important;
	border-color: var(--md-action-hi) !important;
	color: #0F1115 !important;
}

/* SECONDARY CTAs (nav/header/mobile-menu) — same gold action treatment:
   gold fill + graphite label. Single sitewide action color. */
.md-header__cta,
.md-mobile-menu__cta {
	background: var(--md-action);
	border-color: var(--md-action);
	color: #0F1115;
}
.md-header__cta:hover,
.md-mobile-menu__cta:hover {
	background: var(--md-action-hi);
	border-color: var(--md-action-hi);
}
.md-skip-link {
	color: var(--md-fg);
}

/* ---------------- Deep section text colors ----------------
   .md-section--deep, .md-final-cta--gold, .md-footer all use --md-bg-deep
   as background (#0F1115 deep teal). Body text default is --md-fg
   (#16171A deep teal) which would be invisible on deep teal bg. Flip
   inner text to bone for contrast. */

/* Direct children only — avoids cascade into nested .md-service-card,
   .md-asym-feature, .md-faq-cards__card (which keep their own bg/fg).
   Eyebrow NOT in this list — vm50:889 gives deep-section eyebrows a gold
   accent (#D4AF37) which is part of the editorial language; preserve it. */
.md-section--deep > h2,
.md-section--deep > h3,
.md-section--deep > p,
.md-section--deep > strong,
.md-section--deep > .md-h2,
.md-section--deep > .md-h3,
.md-section--deep > .md-body,
.md-section--deep > .md-mono,
.md-section--deep .md-pull-quote__text,
.md-section--deep .md-operator-quote__body,
.md-section--deep .md-container > h2,
.md-section--deep .md-container > h3,
.md-section--deep .md-container > p,
.md-section--deep .md-section__header > h2,
.md-section--deep .md-section__header > h3,
.md-section--deep .md-section__header > p {
	color: #F7F7F5;
}

/* Scene/service hero headings + scan/answer copy on DEEP sections.
   These BEM classes live in homepage-journey.css / service-pages.css, which are
   NOT enqueued on every template — so on service+vertical pages the only matching
   rule was style.css `h1,h2,h3,h4 { color: graphite }`, giving graphite-on-graphite
   hero H1s. This sheet IS loaded everywhere and at higher specificity (0,2,0 +
   !important) beats the bare element rule, so deep heroes read bone on graphite. */
.md-section--deep .md-scene-hero__h1,
.md-section--deep .md-scene-hero__h2,
.md-section--deep .md-scene__h1,
.md-section--deep .md-scene__h2,
.md-section--deep .md-scene-hero__answer,
.md-section--deep .md-scene-hero__sub {
	color: #F7F7F5 !important;
}

/* Pull-quote / operator-quote text in deep sections carries an INLINE
   style="color:var(--md-fg)" (graphite) that beats the stylesheet rule above →
   graphite-on-graphite, invisible (about page operator quote). !important beats
   the inline color so the quote reads bone on graphite (~18:1). */
.md-section--deep .md-pull-quote__text,
.md-section--deep .md-operator-quote__body {
	color: #F7F7F5 !important;
}

.md-section--deep .md-pull-quote__attribution,
.md-section--deep .md-operator-quote__attribution,
.md-section--deep .md-body--muted,
.md-section--deep .md-fg-muted {
	color: rgba(247, 247, 245, 0.78);
}

/* Final CTA gold treatment — same rule (deep teal bg with radial gold glow) */
.md-final-cta,
.md-final-cta--gold,
.md-final-cta--gold .md-final-cta--gold__title,
.md-final-cta--gold .md-final-cta--gold__body,
.md-final-cta--gold .md-eyebrow,
.md-final-cta--gold .md-mono {
	color: #F7F7F5;
}

.md-final-cta--gold__title em {
	color: var(--md-accent);
}

/* Final CTA form inputs — light fields on deep teal */
.md-final-cta--gold__input,
.md-final-cta--gold__textarea {
	background: rgba(247, 247, 245, 0.06);
	border: 1px solid rgba(212, 175, 55, 0.35);
	color: #F7F7F5;
}

.md-final-cta--gold__input::placeholder,
.md-final-cta--gold__textarea::placeholder {
	color: rgba(247, 247, 245, 0.78); /* WCAG-tuned 2026-05-19 — was 0.55 (4.04:1, FAIL); now ~6.5:1 against composited input bg */
}

/* "Reviewed and replied" microcopy override — vanilla --md-fg-muted on deep teal fails (2.94:1). Use high-opacity bone text. */
.md-final-cta--gold .md-micro,
.md-section--deep .md-micro {
	color: rgba(247, 247, 245, 0.78); /* 7.35:1 on #0F1115 — matches the muted-text standard used in the footer */
}

/* Autofill override — without this, Chrome/Safari paint autofilled inputs
   bright yellow #FAFFBD with default text color, unreadable on deep teal. */
.md-final-cta--gold__input:-webkit-autofill,
.md-final-cta--gold__input:-webkit-autofill:hover,
.md-final-cta--gold__input:-webkit-autofill:focus,
.md-final-cta--gold__textarea:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px var(--md-bg-deep) inset !important;
	-webkit-text-fill-color: #F7F7F5 !important;
	caret-color: #F7F7F5;
	transition: background-color 999999s ease-in-out 0s;
}

/* (Primary submit recolored coral + white in the CTA block near top of file.) */

/* ---------------- Footer on deep teal bg ---------------- */
.md-footer {
	background: var(--md-bg-deep);
	color: rgba(247, 247, 245, 0.78);
}

.md-footer a,
.md-footer .md-link {
	color: rgba(247, 247, 245, 0.92);
}

.md-footer a:hover,
.md-footer .md-link:hover {
	color: var(--md-accent);
}

/* ---------------- Live ledger — keep bone bg with deep teal text + gold ›  ---------------- */
.md-live-ledger {
	background: var(--md-bg-soft);
	border-top: 1px solid var(--md-rule);
	border-bottom: 1px solid var(--md-rule);
}

.md-live-ledger__figure {
	color: var(--md-fg);
}

/* Service cards — bone-soft cards with subtle deep-teal border on bone canvas */
.md-service-card,
.md-asym-feature {
	background: var(--md-bg-card);
	border-color: var(--md-rule);
}

.md-service-card:hover,
.md-asym-feature:hover {
	border-color: var(--md-accent);
	box-shadow: 0 0 32px rgba(212, 175, 55, 0.18), 0 12px 28px rgba(22, 23, 26, 0.12);
}

/* First-30-days cards same treatment */
.md-first-30-days__card {
	background: var(--md-bg-card);
	border-color: var(--md-rule);
}

.md-first-30-days__card:hover {
	border-color: var(--md-accent);
	background: var(--md-bg);
}

/* Process steps */
.md-process-steps__step {
	background: var(--md-bg-card);
	border-color: var(--md-rule);
}

/* FAQ cards */
.md-faq-cards__card {
	background: var(--md-bg-card);
	border: 1px solid var(--md-rule);
}

/* Mega menu — light variant with subtle elevation */
.md-mega {
	background: var(--md-bg);
	border-color: var(--md-rule);
	box-shadow: 0 24px 64px rgba(22, 23, 26, 0.18);
}

.md-mega__feature {
	background: var(--md-bg-soft);
	border-color: var(--md-rule);
}

/* Mobile menu — light bone overlay */
.md-mobile-menu {
	background: var(--md-bg);
}

/* ---------------- Hero microproof fix (Brian-reported readability) ----------------
   vm50-reference at .md-hero__microproof uses mono + 12px + 0.12em letter-spacing
   + uppercase = reads as terminal output, not premium editorial. Override to
   Inter sans, sentence case, normal letter-spacing. Keep the dot pulse via
   ::before (defined in vm50-reference). */
.md-hero__microproof {
	font-family: var(--md-font-sans);
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--md-fg-muted);
	line-height: 1.6;
}

/* ---------------- Hero portrait placeholder (Wave 3 image gen pending) ----------------
   Until real photography is generated per page, the documentary-placeholder.svg
   was mass-applied as a stand-in. That SVG is a cartoon clipboard illustration
   that reads as amateur clip-art when used as the primary hero image. Replace
   with an intentional design: clean deep-teal block with subtle gold dot
   pattern. When real photos arrive, they replace the src and naturally render
   over the bg. (Brian-reported visual fail 2026-05-18.) */
.md-hero__portrait {
	background: var(--md-bg-deep);
	background-image:
		radial-gradient(circle at 30% 30%, rgba(212, 175, 55, 0.10) 1px, transparent 1.5px),
		radial-gradient(circle at 70% 70%, rgba(212, 175, 55, 0.06) 1px, transparent 1.5px);
	background-size: 22px 22px, 22px 22px;
	background-position: 0 0, 11px 11px;
	border-radius: 4px;
	overflow: hidden;
	min-height: 480px;
	position: relative;
}

/* Hide the cartoon placeholder so the deep-teal block shows through.
   When src changes to a real photo, this rule no longer matches → photo shows. */
img.md-hero__portrait-img[src*="documentary-placeholder"] {
	opacity: 0;
}

/* ---------- Hero "first 30 days" timeline caption ----------
   Replaces the absolute overlay on the photo (illegible against variable
   photo lighting per Brian feedback 2026-05-18) with a solid bone panel
   that sits immediately below the photo. Gold top accent rule + 2x2 grid
   on desktop, single column on narrow. (Path: figcaption is still inside
   the .md-hero__portrait figure but renders as block below the image.) */
.md-hero__portrait .md-hero__portrait-caption.md-hero__timeline {
	position: static;
	display: block;
	margin-top: 16px;
	padding: 20px 22px 22px;
	background: var(--md-bg);
	border-top: 2px solid var(--md-accent);
	border-radius: 0 0 4px 4px;
	box-shadow: 0 1px 0 var(--md-rule);
	color: var(--md-fg);
	font-family: var(--md-font-sans);
	font-size: 13px;
	line-height: 1.55;
}
.md-hero__timeline-label {
	display: block;
	margin-bottom: 12px;
	font-family: var(--md-font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--md-fg-muted);
}
.md-hero__timeline-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 18px;
}
.md-hero__timeline-list li {
	font-size: 13px;
	line-height: 1.5;
	color: var(--md-fg);
}
.md-hero__timeline-list li strong {
	display: inline;
	color: var(--md-accent);
	font-weight: 600;
	margin-right: 4px;
}
@media (max-width: 640px) {
	.md-hero__timeline-list { grid-template-columns: 1fr; gap: 8px; }
}
/* Legacy caption (non-timeline) keeps old overlay treatment for any other
   page that still uses the bare .md-hero__portrait-caption class. */
.md-hero__portrait .md-hero__portrait-caption:not(.md-hero__timeline) {
	position: absolute;
	bottom: 24px;
	left: 24px;
	right: 24px;
	color: rgba(247, 247, 245, 0.92);
	font-family: var(--md-font-sans);
	font-size: 13px;
	line-height: 1.55;
	padding-left: 12px;
	border-left: 2px solid var(--md-accent);
}

/* Inline section illustrations (md-asym-feature, md-operator-qualifier, etc.)
   also use documentary-placeholder. Hide the cartoon and replace parent figure
   with a smaller deep-teal block. */
figure:has(img[src*="documentary-placeholder"]) {
	background: var(--md-bg-deep);
	background-image:
		radial-gradient(circle at 30% 30%, rgba(212, 175, 55, 0.08) 1px, transparent 1.5px);
	background-size: 20px 20px;
	border-radius: 4px;
	overflow: hidden;
	min-height: 240px;
	display: flex;
	align-items: flex-end;
	padding: 16px;
}
figure img[src*="documentary-placeholder"] {
	opacity: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------------- Mobile vertical-page layout fix (Agent C audit finding) ----------------
   vm50-reference defines `.md-hero__inner--split` with grid-template-columns: 1.4fr 1fr
   at min-width: 1024px BUT inherits the desktop grid below that breakpoint on some
   templates, causing a cramped center channel with empty side gutters on mobile.
   Force a single-column stack below 768px so vertical pages render cleanly on mobile.
   (Brian-reported via Agent C audit 2026-05-18.) */
@media (max-width: 767px) {
	.md-hero__inner,
	.md-hero__inner--split,
	.md-asym-services__grid,
	.md-how-we-help,
	.md-final-cta--gold__card,
	.md-operator-qualifier {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}
	.md-hero__portrait {
		min-height: 320px;
		order: -1;
	}
	.md-hero__inner-copy {
		max-width: 100%;
	}
	.md-final-cta--gold__card {
		padding: 32px 20px !important;
	}
}

/* ---------------- Gold accent bar site-wide (Agent B audit finding) ----------------
   Inline `border-left:4px solid var(--md-accent)` was applied only on page-about
   pull-quote bank. Other templates use blockquote elements without the gold bar.
   Apply globally to any blockquote that doesn't already have a border treatment. */
blockquote.md-pull-quote-card,
.md-pull-quote-bank blockquote,
.md-operator-quote,
.md-pull-quote {
	border-left: 4px solid var(--md-accent);
	padding-left: 24px;
}

/* ---------------- Sticky CTA bar (Axis 9 — was dead site-wide per Agent C) ----------------
   vm50-reference defines `.md-sticky-cta` at position: fixed bottom but it never
   becomes visible on scroll because no JS toggle-visibility logic exists, and the
   default CSS has it always visible/no-display rule. Show it after 200px scroll
   via body.is-scrolled class (toggled by header.js). Falls back to always-shown
   if JS is disabled. */
.md-sticky-cta {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 240ms ease-out, transform 240ms ease-out;
	pointer-events: none;
}
body:has(.magister-header.is-scrolled) .md-sticky-cta,
.is-scrolled-page .md-sticky-cta {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
@media (max-width: 767px) {
	/* On mobile, show sticky CTA always — high conversion priority */
	.md-sticky-cta {
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}
}

/* === MAGISTER ENHANCEMENTS — 2026-05-29 (scroll-reveal animation system) ===
   reveal.js (already enqueued, deferred) adds .is-revealed when an element with
   class "reveal" enters the viewport. These rules animate that transition.
   The `.js` guard is set by reveal.js only after the script has initialized,
   so no-JS users, crawlers, and script-failure paths stay fully rendered.
   Usage in templates: class="reveal" (+ optional data-reveal="d1|d2|d3" for stagger,
   + optional reveal--left / reveal--zoom for direction). */
.js .reveal { opacity: 0; transform: translateY(24px); will-change: opacity, transform; }
/* GLOBAL REVEAL FAILSAFE (sitewide, loads on every page via this file).
   The rule above hides every .reveal until reveal.js's IntersectionObserver adds
   .is-revealed. That observer only fires for elements that actually enter the live
   viewport, so anything far below the fold (and EVERY element in a non-scrolling
   full-page render / crawler / preview) stays stranded at opacity:0 — blank section
   voids. The homepage-journey + service-pages stylesheets carry their own scoped
   failsafe, but they don't load on the vertical/contact pages, which left those
   reveals invisible. This sitewide keyframe guarantees every .reveal resolves to
   visible on its own, independent of JS scroll. The observer still wins first for
   on-screen elements (its .is-revealed rule cancels this animation below). */
.js .reveal {
	animation: md-reveal-failsafe-global 0.5s 0.15s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes md-reveal-failsafe-global {
	to { opacity: 1; transform: none; }
}
.js .reveal.is-revealed {
	animation: none;
	opacity: 1;
	transform: none;
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.js .reveal[data-reveal="d1"].is-revealed { transition-delay: 0.09s; }
.js .reveal[data-reveal="d2"].is-revealed { transition-delay: 0.18s; }
.js .reveal[data-reveal="d3"].is-revealed { transition-delay: 0.27s; }
.js .reveal--left { transform: translateX(-28px); }
.js .reveal--zoom { transform: scale(0.965); }
@media (prefers-reduced-motion: reduce) {
	.js .reveal,
	.js .reveal.is-revealed { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
}

/* === PLATINUM SILVER (--md-silver #C0C3C7) — SECOND BRAND METAL, 2026-05-30 ===
   The brand kit ships two metals: rich gold + platinum silver. Gold was used
   everywhere; silver was a defined-but-dead token (zero usages). These rules put
   the second metal on the page as subtle structural hairlines/dividers on DARK
   (graphite) sections only — where #C0C3C7 sits at ~10:1 on #0F1115 — so the
   palette reads as the full kit, not gold-on-black alone. Silver is structural
   (lines/rules), never small body text; gold keeps the accent/eyebrow/CTA role. */

/* 1) Top hairline on every dark chapter section: a hair of platinum marking the
      light->dark transition. Inset box-shadow adds no layout shift. */
.md-section--deep {
	box-shadow: inset 0 1px 0 0 rgba(192, 195, 199, 0.22);
}

/* 2) Marquee rule becomes a gold->silver bi-metal bar (both brand metals, paired). */
.md-section--deep .md-marquee__rule,
.md-scene--deep .md-marquee__rule {
	background: linear-gradient(90deg, var(--md-accent), var(--md-silver));
}

/* 3) Pull-quote attribution gets a short platinum divider above it on dark. */
.md-section--deep .md-pull-quote__attribution {
	position: relative;
	padding-top: 18px;
}
.md-section--deep .md-pull-quote__attribution::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 40px;
	height: 1px;
	background: var(--md-silver);
	opacity: 0.55;
}

/* 4) Founder/vertical proof cards on dark: platinum hairline under the media zone
      so each photo reads as framed in the second metal, not floating on graphite. */
.md-section--deep .md-verticals__media,
.md-scene--deep .md-verticals__media {
	border-bottom: 1px solid rgba(192, 195, 199, 0.20);
}

/* === KEYBOARD FOCUS-VISIBLE RINGS (sitewide a11y, 2026-05-30) ===
   A single, strong, high-contrast focus ring on every interactive element so
   keyboard users always see where they are. Gold ring (>=2px, >=3:1 vs both the
   light canvas and graphite) is the default. On gold-FILLED CTA buttons a gold
   ring would be gold-on-gold (fails), so those get a graphite ring + silver halo
   instead. Overrides the per-component outline:none rules below in source order
   only where needed; we re-assert a ring on the form inputs that killed it. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.md-nav__link:focus-visible,
.md-verticals__link:focus-visible {
	outline: 2px solid var(--md-accent, #D4AF37);
	outline-offset: 3px;
	border-radius: 3px;
}
/* Gold-filled action buttons: graphite ring (8.5:1 on gold) + silver outer halo so
   the focus state is unmistakable against the gold fill on light AND dark sections. */
.md-hero__cta:focus-visible,
.md-final-cta--gold__submit:focus-visible,
.md-btn:focus-visible,
.md-sticky-cta:focus-visible,
.md-header__cta .md-btn:focus-visible {
	outline: 2px solid var(--md-bg-deep, #0F1115);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px rgba(192, 195, 199, 0.85);
	border-radius: 10px;
}
/* Re-assert a visible ring on the inputs that set outline:none. */
.md-final-cta--gold__input:focus-visible,
.md-final-cta--gold__textarea:focus-visible {
	outline: 2px solid var(--md-silver, #C0C3C7);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	a:focus-visible, button:focus-visible, input:focus-visible,
	select:focus-visible, textarea:focus-visible { transition: none; }
}

/* === FULL-BLEED HERO (md-hero--bleed) — 2026-05-29 ===
   Flagship + per-page hero pattern: full-width WebP background, deep-teal
   legibility scrim (heavier on the copy side), bone display text, gold CTA that
   pops off the teal (isolation effect — see CRO-PLAYBOOK color section), plus a
   click-to-call link. LCP image lives in .md-hero__bg with fetchpriority=high. */
.md-hero--bleed {
	position: relative;
	padding: 0;
	border-bottom: none;
	min-height: clamp(560px, 86vh, 840px);
	display: flex;
	align-items: stretch;
	background: var(--md-bg-deep, #0F1115);
	overflow: hidden;
}
.md-hero--bleed .md-hero__bg { position: absolute; inset: 0; z-index: 0; }
.md-hero--bleed .md-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; display: block; }
.md-hero--bleed .md-hero__scrim {
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background:
		linear-gradient(90deg, rgba(15, 17, 21,0.93) 0%, rgba(15, 17, 21,0.80) 40%, rgba(15, 17, 21,0.40) 72%, rgba(15, 17, 21,0.18) 100%),
		linear-gradient(0deg, rgba(15, 17, 21,0.55) 0%, rgba(15, 17, 21,0) 48%);
}
.md-hero--bleed .md-hero__inner {
	position: relative; z-index: 2; align-self: center; display: block;
	width: 100%; max-width: var(--md-container); margin-inline: auto;
	padding-block: clamp(64px, 9vw, 112px); padding-inline: var(--md-space-5);
}
@media (min-width: 720px)  { .md-hero--bleed .md-hero__inner { padding-inline: var(--md-space-6); } }
@media (min-width: 1024px) { .md-hero--bleed .md-hero__inner { padding-inline: var(--md-space-7); } }
.md-hero--bleed .md-hero__inner-copy { max-width: 660px; display: flex; flex-direction: column; gap: var(--md-space-5); }
.md-hero--bleed .md-hero__eyebrow { color: var(--md-accent-hi, #E3C24E); }
.md-hero--bleed .md-hero__eyebrow::before { background: var(--md-accent-hi, #E3C24E); }
.md-hero--bleed .md-hero__h1 { color: #F7F7F5; }
.md-hero--bleed .md-hero__h1 em, .md-hero--bleed .md-hero__h1 .md-em { color: var(--md-accent-hi, #E3C24E); }
.md-hero--bleed .md-hero__h1::before { display: none; }
/* LIGHT hero headline accent word (e.g. /dimitry-morgan/ "Morgan"): vm50 colors
   .md-hero__h1 em gold; gold-on-near-white fails even at display size (1.96 < 3.0).
   On light heroes route the accent word to gold-ink #6E561A (~5:1, hint of gold).
   Deep + bleed heroes keep gold via their own rules above/below. */
.md-hero:not(.md-section--deep):not(.md-hero--bleed) .md-hero__h1 em,
.md-hero:not(.md-section--deep):not(.md-hero--bleed) .md-hero__h1 .md-em,
.md-section:not(.md-section--deep) .md-hero__h1 em,
.md-section:not(.md-section--deep) .md-hero__h1 .md-em {
	color: var(--md-gold-ink);
}
.md-hero--bleed .md-hero__sub { color: rgba(247, 247, 245,0.90); }
.md-hero--bleed .md-hero__microproof { color: rgba(247, 247, 245,0.74); }
/* CTA row + click-to-call */
.md-hero__cta-row { display: flex; flex-wrap: wrap; gap: var(--md-space-4); align-items: center; }
.md-hero__call {
	display: inline-flex; align-items: center; gap: var(--md-space-2);
	min-height: var(--md-tap, 44px); font-family: var(--md-font-sans);
	font-size: 16px; font-weight: 600; color: #F7F7F5;
	border-bottom: 1px solid rgba(247, 247, 245,0.35);
	transition: color var(--md-dur-base) var(--md-ease), border-color var(--md-dur-base) var(--md-ease);
}
.md-hero__call:hover { color: var(--md-accent-hi, #E3C24E); border-bottom-color: var(--md-accent-hi, #E3C24E); }
.md-hero__call svg { flex: none; }
.md-hero__scarcity {
	display: inline-flex; align-items: center; gap: var(--md-space-2);
	font-family: var(--md-font-mono); font-size: 12px; letter-spacing: 0.12em;
	text-transform: uppercase; color: var(--md-accent-hi, #E3C24E);
}
.md-hero__scarcity::before {
	content: ""; width: 7px; height: 7px; border-radius: 50%;
	background: var(--md-accent-hi, #E3C24E); box-shadow: 0 0 0 0 rgba(227, 194, 78,0.6);
	animation: md-live-pulse 2s var(--md-ease) infinite;
}
@media (max-width: 767px) {
	.md-hero--bleed { min-height: 90vh; }
	.md-hero--bleed .md-hero__bg img { object-position: center 22%; }
	.md-hero--bleed .md-hero__scrim {
		background: linear-gradient(0deg, rgba(15, 17, 21,0.95) 0%, rgba(15, 17, 21,0.82) 42%, rgba(15, 17, 21,0.55) 100%);
	}
	.md-hero__cta-row { gap: var(--md-space-3); }
	.md-hero__cta-row .md-hero__cta { width: 100%; }
}

/* === Asym-services dead-space fix (Brian flag 2026-05-18) ===
   Feature card (6fr) was shorter than the service list (4fr) and align-items:start
   left a blank column under it. Stretch the card so its background fills the column
   and push the link to the bottom — the gap becomes designed card space, not dead page. */
/* Scope to the feature+list layout ONLY (home + verticals). Multi-card grids
   (accessibility checklist, founder bios) keep their natural top-aligned flow so
   text does not develop vertical gaps (Codex review 2026-05-29). */
.md-asym-services__grid:has(.md-asym-list) { align-items: stretch; }
.md-asym-services__grid:has(.md-asym-list) .md-asym-feature { height: 100%; }
.md-asym-services__grid:has(.md-asym-list) .md-asym-feature__media { flex: 1 1 auto; min-height: 220px; }

/* About founders: 3 equal-size, equal-height bio cards with a uniform photo area
   (Brian: "all the blocks for each bio different sizes — they need to be the same size"). */
#founders .md-asym-services__grid { align-items: stretch; gap: var(--md-space-6); }
@media (min-width: 900px) {
	#founders .md-asym-services__grid { grid-template-columns: repeat(3, 1fr); }
}
#founders .md-asym-feature { height: 100%; }
#founders .md-asym-feature__media { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 10px; margin-bottom: var(--md-space-4); }
#founders .md-asym-feature__media .md-asym-feature__img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

/* === MAGISTER ANIMATIONS round 2 (2026-05-29) — premium, performant, reduced-motion safe === */
/* Hero Ken-Burns: slow zoom-out on the full-bleed hero image as the page settles. */
.js .md-hero--bleed .md-hero__bg img { animation: md-hero-zoom 16s cubic-bezier(0.16, 1, 0.3, 1) both; transform-origin: 60% 45%; }
@keyframes md-hero-zoom { from { transform: scale(1.07); } to { transform: scale(1); } }
/* Card hover lift on the main content cards. */
.md-asym-feature, .md-faq-cards__card, .md-asym-list__item { transition: transform var(--md-dur-base) var(--md-ease), box-shadow var(--md-dur-base) var(--md-ease); }
.md-asym-feature:hover, .md-faq-cards__card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(22, 23, 26, 0.12); }
.md-asym-list__item:hover { transform: translateX(4px); }
/* Animated gold underline that draws in under section eyebrows when revealed. */
.md-section__header.reveal.is-revealed .md-eyebrow::after,
.md-section__header.reveal.is-revealed .md-hero__eyebrow::after { content: ""; display: block; height: 2px; width: 0; margin-top: 8px; background: linear-gradient(90deg, var(--md-accent), var(--md-accent-hi)); animation: md-underline-draw 0.7s 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes md-underline-draw { to { width: 48px; } }
@media (prefers-reduced-motion: reduce) {
	.js .md-hero--bleed .md-hero__bg img { animation: none; transform: none; }
	.md-section__header.reveal.is-revealed .md-eyebrow::after,
	.md-section__header.reveal.is-revealed .md-hero__eyebrow::after { animation: none; width: 48px; }
	.md-asym-feature:hover, .md-faq-cards__card:hover, .md-asym-list__item:hover { transform: none; }
}

/* === CONTRAST P0 FIXES (2026-05-29 redesign audit) — invisible-text root causes ===
   Found via Playwright computed-contrast sweep: 570 failures / 16 root combos.
   These two are the catastrophic (≈1.06–1.10 : 1) invisible-text bugs Brian flagged. */

/* Bottom CTA card: vm50:249 paints it var(--md-bg-card) (#F1F1EE light sand), but the
   deep-section override forces its title/body/"Next step" eyebrow to bone → 1.10:1,
   invisible on ALL 16 pages. The section is deep teal with a gold glow, so make the card
   a dark glass surface: bone text now reads ~9:1 and it still looks like an elevated card. */
.md-final-cta--gold__card {
	background: rgba(247, 247, 245, 0.05);
	border-color: rgba(212, 175, 55, 0.40);
}
/* The dark-glass card composites to ~#1F2024. All its content text must be
   bone / muted-bone / blue-on-dark — but the inner-page templates set list +
   "Or call us directly" text via INLINE style="color:var(--md-fg-muted)"
   (ink #5E6066 → ~3:1 on the dark card) and the <em> inherits cobalt #D4AF37
   (~2.8:1). Override with !important to beat the inline styles. */
.md-final-cta--gold__card li,
.md-final-cta--gold__card p.md-mono,
.md-final-cta--gold__card .md-mono,
.md-final-cta--gold__card .md-final-cta--gold__body,
.md-final-cta--gold__card p {
	color: rgba(247, 247, 245, 0.82) !important;
}
.md-final-cta--gold__card .md-final-cta--gold__title em,
.md-final-cta--gold__card em,
.md-final-cta--gold__card strong {
	color: var(--md-blue-on-dark) !important;
}
/* Click-to-call inside the dark final-CTA card → bone (it's on charcoal glass,
   not a light hero). Covers BOTH the .md-hero__call and the .md-scene-hero__call
   variants (founder pages place a .md-scene-hero__call in this card). Beats the
   broad hero-call ink rule + the WP `a → inkwell` rule via !important. */
.md-final-cta--gold__card .md-hero__call,
.md-final-cta--gold .md-hero__call,
.md-final-cta--gold__card .md-scene-hero__call,
.md-final-cta--gold .md-scene-hero__call {
	color: #F7F7F5 !important;
	border-bottom-color: rgba(247, 247, 245, 0.35) !important;
}

/* Operator quote (About — Brian's own quote): vm50:1269 hardcodes background:#F1F1EE
   (pale cream), but the blockquote lives in a md-section--deep band that forces its text
   to bone → 1.06:1, invisible. Honor the dramatic dark-band intent: drop the cream card so
   the bone quote sits directly on deep teal (~10:1). Attribution + quote-mark already bone/gold. */
.md-section--deep .md-operator-quote {
	background: transparent;
}

/* ============================================================================
   SLICE 0 — GLOBAL LEGIBILITY (gold-on-DARK rule) — 2026-05-30
   ----------------------------------------------------------------------------
   GOLD-ON-DARK RULE (Gold Standard, LOCKED): gold #D4AF37 is only legible as
   small text on GRAPHITE. On LIGHT sections gold-on-white fails (~2:1), so every
   small accent on a light surface is routed to graphite or gold-ink:
     --md-gold-ink  #6E561A : deep gold-ink, ~5:1 on near-white  (eyebrows/numbers
                              — keeps a hint of gold without failing on white)
     --md-teal-ink  #45474C : graphite, ~8:1 on near-white       (links/attribution)
   On DARK (graphite) sections these same accents route to gold via
   --md-blue-on-dark (#D4AF37, ~8.5:1 on graphite). The deep-section twin rules
   below re-assert gold on graphite so the cascade stays correct.
   ============================================================================ */
:root {
	/* GOLD-ON-DARK rule: small accent text on LIGHT must NOT be gold (fails on
	   white). Eyebrows/numbers get a hint of gold via gold-ink #6E561A; links and
	   attributions get graphite #45474C. Aliases kept so ~30 downstream rules work
	   unchanged; deep-section rules override these to gold on graphite. */
	--md-gold-ink: #6E561A; /* hint-of-gold ink on near-white, ~5:1 (was gold #D4AF37) */
	--md-teal-ink: #45474C; /* graphite accent on near-white, ~8:1 (was gold #D4AF37) */
}

/* (a) GOLD small text on LIGHT → gold-ink.
   Scope OUT deep sections: gold-on-deep-teal (#0F1115/#0F1115) already passes,
   and vm50:889 deliberately gives deep-band eyebrows a gold accent. We re-assert
   the deep-section color immediately below so the cascade stays intact. */
.md-eyebrow,
.md-faq-cards__prefix,
.md-asym-list__num,
.md-process-steps__number,
.md-first-30-days__label,
.md-asym-feature__num,
.md-asym-feature__outcome,
.md-channels-dynamic__panel-eyebrow,
.md-channels-dynamic__panel-outcome,
.md-channels-dynamic__tab-num,
.md-trust-line__text strong {
	color: var(--md-gold-ink);
}

/* On CHARCOAL deep bands, the bright cobalt accent #D4AF37 only hits ~2.8:1.
   Route every deep-section blue accent to blue-on-dark #D4AF37 (~6:1 on
   #0F1115). This is the dark-section twin of the light-section blue above. */
.md-section--deep .md-eyebrow,
.md-section--deep .md-faq-cards__prefix,
.md-section--deep .md-asym-list__num,
.md-section--deep .md-process-steps__number,
.md-section--deep .md-first-30-days__label,
.md-section--deep .md-asym-feature__num,
.md-section--deep .md-asym-feature__outcome,
.md-section--deep .md-channels-dynamic__panel-eyebrow,
.md-section--deep .md-channels-dynamic__panel-outcome,
.md-section--deep .md-channels-dynamic__tab-num,
.md-section--deep .md-trust-line__text strong {
	color: var(--md-blue-on-dark);
}

/* (b) TEAL small links/eyebrows/attribution on near-white → teal-ink.
   The bright #D4AF37 accent only fails on light; on deep bands the operator-quote
   attribution is already bone/gold (handled above), so re-assert that for safety. */
.md-link,
.md-channels-dynamic__panel-cta,
.md-operator-quote__attribution {
	color: var(--md-teal-ink);
}
/* Link hover on LIGHT must stay graphite (gold-on-white fails). Darken to
   full ink, not gold. Deep-section link hover is handled separately below. */
.md-link:hover,
.md-channels-dynamic__panel-cta:hover {
	color: var(--md-fg);
}

/* Eyebrows that render in the brighter teal accent (#D4AF37) on light surfaces —
   e.g. vertical-page hero eyebrows + section eyebrows tinted teal rather than gold.
   Only applies where the computed color was the teal accent; gold eyebrows already
   handled in (a). Targeted by the hero/section eyebrow that uses teal on mint/bone. */
.md-hero__eyebrow,
.md-section--soft .md-eyebrow {
	color: var(--md-teal-ink);
}
/* Deep-band + full-bleed hero eyebrows → blue-on-dark (#D4AF37, ~6:1 on
   charcoal). Bright cobalt #D4AF37/#E3C24E fails here. */
.md-hero--bleed .md-hero__eyebrow,
.md-section--deep .md-hero__eyebrow,
.md-section--deep .md-section--soft .md-eyebrow {
	color: var(--md-blue-on-dark);
}

/* (c) HERO CTA = coral. Recolored in the PRIMARY CTA block near the top of this
   file (coral fill #D4AF37 + white label, !important). Single source of truth;
   the old gold-fill/teal-label rule here is removed to avoid a stale override. */

/* (d) .md-scrim — reusable deep-teal gradient overlay for any text-over-image.
   Place as an absolutely-positioned layer behind text inside a positioned figure;
   text on top then reads against the teal wash, not the raw photo. The homepage
   journey builder (next phase) applies this to photo-backed sections. */
.md-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to top,
		rgba(15, 17, 21, 0.85) 0%,
		rgba(15, 17, 21, 0.35) 100%
	);
}
.md-scrim ~ * { position: relative; z-index: 2; }

/* --- Slice 0 follow-up: residual gold/teal small-text on light --- */

/* Gold-emphasis <strong> inside the operator-quote body/card. vm50:245 colors
   attribution <strong> with --md-accent, and body emphasis inherits gold too —
   on the cream operator-quote card (#F1F1EE) that is 2.05:1. Route to gold-ink. */
.md-operator-quote__body strong,
.md-operator-quote__body .md-em,
.md-operator-quote__attribution strong {
	color: var(--md-gold-ink);
}
/* Deep-band operator quotes keep the bright accent (gold-on-deep-teal passes). */
.md-section--deep .md-operator-quote__body strong,
.md-section--deep .md-operator-quote__body .md-em,
.md-section--deep .md-operator-quote__attribution strong {
	color: var(--md-accent);
}

/* Active channel tab number: vm50:3807 (.is-active .__tab-num, specificity 0,2,0)
   re-paints it --md-accent gold on the bone tab strip → 2.17:1. Beat it with a
   matching-specificity gold-ink rule. */
.md-channels-dynamic__tab-item.is-active .md-channels-dynamic__tab-num {
	color: var(--md-gold-ink);
}

/* Regression guard: .md-link now defaults to teal-ink, but a .md-link inside ANY
   deep-teal band (e.g. the "(619) 330-0953" call link in the md-final-cta--gold
   band, or deep sections) needs bone, not teal-ink. Re-assert bone across every
   deep band that the operator already flips body text to bone on. */
.md-section--deep .md-link,
.md-section--deep a.md-link,
.md-final-cta--gold .md-link,
.md-final-cta--gold a.md-link,
.md-footer .md-link,
.md-footer a.md-link {
	color: rgba(247, 247, 245, 0.92);
}
.md-section--deep .md-link:hover,
.md-section--deep a.md-link:hover,
.md-final-cta--gold .md-link:hover,
.md-final-cta--gold a.md-link:hover,
.md-footer .md-link:hover,
.md-footer a.md-link:hover {
	color: var(--md-accent-hi);
}

/* ====================================================================
   DEEP-SECTION CARD BACKGROUNDS (Gold Standard, 2026-05-30).
   Several card components default to the LIGHT card surface --md-bg-card
   (#F1F1EE). On a fully-dark page (e.g. /about/ wraps every section in
   md-section--deep), those light cards sit on graphite AND the deep-section
   text overrides below force their text to bone/gold → light card + bone text
   = invisible. Fix: inside deep sections, give these cards a dark glass surface
   (#16171A graphite) so the bone body + gold accents read at ~12:1 / ~8:1. */
.md-section--deep .md-faq-cards__card,
.md-section--deep .md-service-card,
.md-section--deep .md-first-30-days__card,
.md-section--deep .md-card,
.md-section--deep .md-scene__card {
	background: #16171A;
	border-color: rgba(192, 195, 199, 0.18);
}

/* ====================================================================
   DEEP-SECTION CARD TEXT.
   Cards inside deep sections are dark glass over graphite. Body text that
   defaults to ink (#16171A) or muted-ink (#5E6066) is then invisible / sub-AA
   on that dark card. Force list/body/mono/span text to bone, and gold accents
   (em/strong) to gold-on-dark. Scoped to deep sections only so light-section
   cards keep ink text. */
.md-section--deep .md-service-card li,
.md-section--deep .md-service-card p,
.md-section--deep .md-service-card span,
.md-section--deep .md-asym-feature li,
.md-section--deep .md-asym-feature p,
.md-section--deep .md-faq-cards__card li,
.md-section--deep .md-faq-cards__card p,
.md-section--deep .md-first-30-days__card li,
.md-section--deep .md-first-30-days__card p,
.md-section--deep .md-process-steps__step li,
.md-section--deep .md-process-steps__step p,
.md-section--deep .md-card li,
.md-section--deep .md-card p,
.md-section--deep .md-card span,
.md-section--deep .md-mono,
.md-section--deep li,
.md-section--deep .md-asym-feature__num + *,
.md-section--deep .md-scene__card li,
.md-section--deep .md-scene__card p,
/* Card heading H3s (e.g. FAQ question) default to graphite via the global
   `style.css h1,h2,h3,h4` rule; on a graphite deep card that's invisible. These
   higher-specificity selectors re-assert bone. */
.md-section--deep .md-faq-cards__card h3,
.md-section--deep .md-faq-cards__question,
.md-section--deep .md-service-card h3,
.md-section--deep .md-card h3 {
	color: #F7F7F5;
}

/* Scene/service hero click-to-call link on DEEP sections. The BEM rule lives in
   homepage-journey.css / service-pages.css which are not enqueued on founder
   pages, so the link inherited graphite. Re-assert bone here (loaded everywhere). */
.md-section--deep .md-scene-hero__call {
	color: #F7F7F5;
}
.md-section--deep .md-scene-hero__call:hover {
	color: var(--md-accent-hi);
}
.md-section--deep .md-mono,
.md-section--deep .md-card .md-micro,
.md-section--deep .md-body--muted,
.md-section--deep .md-service-card .md-micro {
	color: rgba(247, 247, 245, 0.82);
}
/* Blue emphasis/links inside deep cards → blue-on-dark (#D4AF37). */
.md-section--deep em,
.md-section--deep strong,
.md-section--deep .md-em,
.md-section--deep .md-card a,
.md-section--deep .md-service-card a {
	color: var(--md-blue-on-dark);
}
/* But keep deep-section BODY emphasis bone when it's running text, not an
   accent token (em/strong inside paragraphs read better bone on charcoal). */
.md-section--deep p em,
.md-section--deep p strong,
.md-section--deep .md-body em,
.md-section--deep .md-body strong {
	color: #F7F7F5;
}

/* Inner-page hero click-to-call: .md-hero__call defaults to bone (#F7F7F5)
   for dark heroes (md-hero--bleed = charcoal bleed). The md-hero--split layout
   instead has a LIGHT bone copy column beside a dark portrait, so its call
   link in the copy column needs INK, not bone. */
.md-hero:not(.md-section--deep):not(.md-hero--bleed) .md-hero__call,
.md-section:not(.md-section--deep):not(.md-hero--bleed) .md-hero__call,
.md-hero--split .md-hero__inner-copy .md-hero__call {
	color: var(--md-fg);
	border-bottom-color: var(--md-rule-strong);
}

/* Deep-section running body / micro / attribution that some templates set via
   INLINE style (color:var(--md-fg-soft) / opacity) → force bone on charcoal.
   Bare-element catch so inline colors lose; !important beats inline. */
.md-section--deep > .md-container .md-body,
.md-section--deep .md-body,
.md-section--deep .md-micro,
.md-section--deep .md-pull-quote__body,
.md-section--deep .md-pull-quote .md-body {
	color: rgba(247, 247, 245, 0.88) !important;
}
.md-section--deep .md-operator-quote__attribution strong,
.md-section--deep .md-pull-quote__attribution strong,
.md-section--deep .md-operator-quote__attribution,
.md-section--deep .md-pull-quote__attribution {
	color: var(--md-blue-on-dark) !important;
}

/* Light eyebrow variant rendered cobalt on charcoal → blue-on-dark. */
.md-section--deep .magister-eyebrow-light,
.magister-bg-navy .magister-eyebrow-light {
	color: var(--md-blue-on-dark);
}