@charset "UTF-8";
/* Google Fonts moved out of @import (which chained an extra render-blocking
* request) and into a direct in header.php — Lighthouse LCP fix 2026-05-17. */
/* MagisterDigital — Luxury direction (v4.0.0). Black + champagne gold. */
:root {
--md-bg: #0F1115;
--md-bg-soft: #0F1115;
--md-bg-card: #0F1115;
--md-bg-deep: #0F1115;
--md-fg: #F1F1EE;
--md-fg-soft: #5E6066;
--md-fg-muted: #5E6066;
--md-accent: #D4AF37;
--md-accent-hi: #E3C24E;
--md-accent-deep: #A8842A;
--md-accent-tint: rgba(212, 175, 55, 0.10);
--md-accent-tint-strong: rgba(212, 175, 55, 0.20);
--md-rule: rgba(241, 241, 238, 0.10);
--md-rule-strong: rgba(241, 241, 238, 0.20);
--md-rule-hover: rgba(241, 241, 238, 0.32);
--md-font-display: "Playfair Display", "Times New Roman", serif;
--md-font-sans: "Inter", system-ui, -apple-system, sans-serif;
--md-font-mono: "JetBrains Mono", "SF Mono", monospace;
--md-section-y: clamp(64px, 9vw, 128px);
--md-space-1: 4px; --md-space-2: 8px; --md-space-3: 12px; --md-space-4: 16px; --md-space-5: 24px;
--md-space-6: 32px; --md-space-7: 40px; --md-space-8: 48px; --md-space-9: 64px; --md-space-10: 96px;
--md-container: 1440px;
--md-container-wide: 1600px;
--md-ease: cubic-bezier(0.22, 1, 0.36, 1);
--md-dur-fast: 160ms; --md-dur-base: 240ms; --md-dur-slow: 360ms;
--md-tap: 56px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--md-bg); color: var(--md-fg); font-family: var(--md-font-sans); font-size: 17px; line-height: 1.6; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
img, svg, video { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
hr { border: 0; border-top: 1px solid var(--md-rule); margin: 0; }
input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--md-accent); color: var(--md-bg); }
.md-skip-link { position: absolute; top: -100px; left: 16px; z-index: 9999; background: var(--md-accent); color: var(--md-bg); padding: 12px 20px; border-radius: 6px; font-family: var(--md-font-sans); font-weight: 600; font-size: 14px; transition: top var(--md-dur-fast) var(--md-ease); }
.md-skip-link:focus, .md-skip-link:focus-visible { top: 16px; outline: 2px solid var(--md-fg); outline-offset: 2px; }
:focus-visible { outline: 2px solid var(--md-accent); outline-offset: 3px; border-radius: 2px; }
.md-container { width: 100%; max-width: var(--md-container); margin-inline: auto; padding-inline: var(--md-space-5); }
.md-container--wide { max-width: var(--md-container-wide); }
.md-section { padding-block: var(--md-section-y); background: var(--md-bg); }
.md-section--soft { background: var(--md-bg-soft); }
.md-section--deep { background: var(--md-bg-deep); }
.md-section__header { max-width: 760px; margin-bottom: var(--md-space-8); }
.md-section__header > * + * { margin-top: var(--md-space-4); }
@media (min-width: 720px) { .md-container { padding-inline: var(--md-space-6); } .md-section__header { margin-bottom: var(--md-space-9); } }
@media (min-width: 1024px) { .md-container { padding-inline: var(--md-space-7); } }
.md-h1, .md-h2, .md-h3, .md-display { font-family: var(--md-font-display); font-weight: 500; color: var(--md-fg); letter-spacing: -0.01em; line-height: 1.08; margin: 0; }
.md-display { font-size: clamp(48px, 8vw, 96px); letter-spacing: -0.02em; line-height: 1.02; }
.md-h1 { font-size: clamp(40px, 6.4vw, 76px); letter-spacing: -0.02em; }
.md-h2 { font-size: clamp(32px, 4.8vw, 56px); letter-spacing: -0.015em; }
.md-h3 { font-size: clamp(22px, 2.6vw, 32px); line-height: 1.18; letter-spacing: -0.01em; }
.md-lede { font-family: var(--md-font-sans); font-size: clamp(18px, 2vw, 22px); line-height: 1.5; color: var(--md-fg-soft); font-weight: 400; }
.md-body { font-family: var(--md-font-sans); font-size: 17px; line-height: 1.65; color: var(--md-fg-soft); font-weight: 400; }
.md-body--muted { color: var(--md-fg-muted); }
.md-eyebrow { display: inline-block; font-family: var(--md-font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--md-accent); margin: 0; }
.md-mono { font-family: var(--md-font-mono); font-size: 13px; letter-spacing: 0.04em; color: var(--md-fg-muted); }
.md-small { font-family: var(--md-font-sans); font-size: 14px; line-height: 1.55; color: var(--md-fg-muted); }
.md-micro { font-family: var(--md-font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--md-fg-muted); }
.md-em { font-style: italic; font-family: var(--md-font-display); color: var(--md-fg); }
.md-link { color: var(--md-accent); border-bottom: 1px solid var(--md-accent-tint-strong); transition: color var(--md-dur-base) var(--md-ease), border-color var(--md-dur-base) var(--md-ease); }
.md-link:hover { color: var(--md-accent-hi); border-bottom-color: var(--md-accent-hi); }
.md-direct-answer { font-family: var(--md-font-display); font-style: italic; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.4; color: var(--md-fg); padding: var(--md-space-5); border-left: 2px solid var(--md-accent); background: var(--md-accent-tint); margin: 0; }
@media (min-width: 720px) { .md-direct-answer { padding: var(--md-space-6) var(--md-space-7); } }
.md-header { position: sticky; top: 0; z-index: 100; background: rgba(15, 17, 21, 0.85); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--md-rule); }
.md-header__inner { width: 100%; max-width: var(--md-container-wide); margin-inline: auto; padding: var(--md-space-3) var(--md-space-5); display: flex; align-items: center; justify-content: space-between; gap: var(--md-space-5); min-height: 72px; }
.md-header__logo { display: inline-flex; align-items: center; height: var(--md-tap); color: var(--md-fg); transition: color var(--md-dur-base) var(--md-ease); }
.md-header__logo:hover { color: var(--md-accent); }
.md-header__cta { display: none; }
.md-header__phone { display: none; font-family: var(--md-font-mono); font-size: 13px; letter-spacing: 0.04em; color: var(--md-fg-soft); transition: color var(--md-dur-base) var(--md-ease); }
.md-header__phone:hover { color: var(--md-accent); }
@media (min-width: 720px) { .md-header__inner { padding: var(--md-space-3) var(--md-space-6); } .md-header__phone { display: inline-flex; align-items: center; gap: var(--md-space-2); } }
@media (min-width: 1024px) { .md-header__inner { padding: var(--md-space-4) var(--md-space-7); gap: var(--md-space-7); } .md-header__cta { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 var(--md-space-5); background: var(--md-accent); color: var(--md-bg); font-family: var(--md-font-sans); font-size: 14px; font-weight: 600; border-radius: 10px; transition: background var(--md-dur-base) var(--md-ease); } .md-header__cta:hover { background: var(--md-accent-hi); } }
.md-nav { display: none; }
@media (min-width: 1024px) {
.md-nav { display: block; flex: 1 1 auto; }
.md-nav__list { display: flex; align-items: center; justify-content: center; gap: var(--md-space-2); }
.md-nav__item { position: relative; }
.md-nav__link { display: inline-flex; align-items: center; gap: 6px; height: var(--md-tap); padding: 0 var(--md-space-4); font-family: var(--md-font-sans); font-size: 15px; font-weight: 500; color: var(--md-fg-soft); border-radius: 8px; transition: color var(--md-dur-base) var(--md-ease), background var(--md-dur-base) var(--md-ease); }
.md-nav__link:hover, .md-nav__item:hover .md-nav__link { color: var(--md-accent); background: var(--md-accent-tint); }
.md-nav__caret { width: 10px; height: 10px; transition: transform var(--md-dur-base) var(--md-ease); }
.md-nav__item--mega:hover .md-nav__caret { transform: rotate(180deg); }
}
.md-mega { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: min(960px, 92vw); margin-top: var(--md-space-3); background: var(--md-bg-card); border: 1px solid var(--md-rule); border-radius: 10px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6); opacity: 0; pointer-events: none; transition: opacity var(--md-dur-base) var(--md-ease); }
@media (min-width: 1024px) { .md-nav__item--mega:hover .md-mega, .md-nav__item--mega:focus-within .md-mega { display: block; opacity: 1; pointer-events: auto; } }
.md-mega__inner { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--md-space-6); padding: var(--md-space-7); }
.md-mega__inner--two { grid-template-columns: 1fr 1fr; }
.md-mega__col { display: flex; flex-direction: column; gap: var(--md-space-3); }
.md-mega__col-head { font-family: var(--md-font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--md-fg-muted); padding-bottom: var(--md-space-3); border-bottom: 1px solid var(--md-rule); }
.md-mega__list { display: flex; flex-direction: column; gap: var(--md-space-1); }
.md-mega__link { display: block; padding: var(--md-space-3); border-radius: 8px; transition: background var(--md-dur-base) var(--md-ease); }
.md-mega__link:hover { background: var(--md-accent-tint); }
.md-mega__link-title { display: block; font-family: var(--md-font-sans); font-size: 15px; font-weight: 600; color: var(--md-fg); margin-bottom: 4px; }
.md-mega__link:hover .md-mega__link-title { color: var(--md-accent); }
.md-mega__link-desc { display: block; font-size: 13px; line-height: 1.5; color: var(--md-fg-muted); }
.md-mega__feature { display: flex; flex-direction: column; gap: var(--md-space-3); padding: var(--md-space-5); background: var(--md-bg-soft); border: 1px solid var(--md-rule); border-radius: 10px; }
.md-mega__feature-eyebrow { font-family: var(--md-font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--md-accent); }
.md-mega__feature-num { font-family: var(--md-font-display); font-size: 40px; font-weight: 500; color: var(--md-accent); line-height: 1; }
.md-mega__feature-body { font-size: 14px; line-height: 1.55; color: var(--md-fg-soft); }
.md-mega__feature-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--md-font-sans); font-size: 13px; font-weight: 600; color: var(--md-accent); margin-top: auto; transition: gap var(--md-dur-base) var(--md-ease); }
.md-mega__feature-link:hover { gap: 12px; color: var(--md-accent-hi); }
.md-nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; width: var(--md-tap); height: var(--md-tap); border-radius: 8px; transition: background var(--md-dur-base) var(--md-ease); }
.md-nav-toggle:hover { background: var(--md-accent-tint); }
.md-nav-toggle__bar { display: block; width: 24px; height: 2px; background: var(--md-fg); border-radius: 1px; transition: transform var(--md-dur-base) var(--md-ease), opacity var(--md-dur-base) var(--md-ease); }
.md-nav-toggle[aria-expanded="true"] .md-nav-toggle__bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.md-nav-toggle[aria-expanded="true"] .md-nav-toggle__bar:nth-child(2) { opacity: 0; }
.md-nav-toggle[aria-expanded="true"] .md-nav-toggle__bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
@media (min-width: 1024px) { .md-nav-toggle { display: none; } }
.md-mobile-menu { position: fixed; inset: 0; z-index: 200; background: var(--md-bg); display: flex; flex-direction: column; padding: 80px var(--md-space-5) var(--md-space-7); overflow-y: auto; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity var(--md-dur-base) var(--md-ease), transform var(--md-dur-base) var(--md-ease), visibility 0s linear var(--md-dur-base); }
.md-mobile-menu[data-open="true"] { visibility: visible; opacity: 1; transform: translateY(0); transition: opacity var(--md-dur-base) var(--md-ease), transform var(--md-dur-base) var(--md-ease), visibility 0s linear 0s; }
.md-mobile-menu__overlay { position: fixed; inset: 0; z-index: 150; background: rgba(15, 17, 21, 0.6); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity var(--md-dur-base) var(--md-ease), visibility 0s linear var(--md-dur-base); }
.md-mobile-menu__overlay[data-open="true"] { opacity: 1; visibility: visible; transition: opacity var(--md-dur-base) var(--md-ease), visibility 0s linear 0s; }
@media (min-width: 1024px) { .md-mobile-menu, .md-mobile-menu__overlay { display: none; } }
.md-mobile-section { border-bottom: 1px solid var(--md-rule); }
.md-mobile-section__head { width: 100%; display: flex; align-items: center; justify-content: space-between; min-height: var(--md-tap); padding: var(--md-space-4) 0; font-family: var(--md-font-display); font-size: 24px; font-weight: 500; color: var(--md-fg); letter-spacing: -0.01em; text-align: left; transition: color var(--md-dur-base) var(--md-ease); }
.md-mobile-section__head:hover, .md-mobile-section__head[aria-expanded="true"] { color: var(--md-accent); }
.md-mobile-section__caret { width: 14px; height: 14px; flex-shrink: 0; transition: transform var(--md-dur-base) var(--md-ease); }
.md-mobile-section__head[aria-expanded="true"] .md-mobile-section__caret { transform: rotate(180deg); }
.md-mobile-section__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--md-dur-slow) var(--md-ease); }
.md-mobile-section__body > * { overflow: hidden; }
.md-mobile-section__head[aria-expanded="true"] + .md-mobile-section__body { grid-template-rows: 1fr; }
.md-mobile-section__body ul { display: flex; flex-direction: column; gap: var(--md-space-1); padding-bottom: var(--md-space-4); }
.md-mobile-section__body a { display: flex; flex-direction: column; min-height: var(--md-tap); justify-content: center; padding: var(--md-space-3) 0; color: var(--md-fg-soft); }
.md-mobile-section__body a:hover { color: var(--md-accent); }
.md-mobile-menu__cta { margin-top: var(--md-space-7); display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: var(--md-tap); padding: 0 var(--md-space-6); background: var(--md-accent); color: var(--md-bg); font-family: var(--md-font-sans); font-size: 16px; font-weight: 600; border-radius: 10px; transition: background var(--md-dur-base) var(--md-ease); }
.md-mobile-menu__cta:hover { background: var(--md-accent-hi); }
.md-footer { background: var(--md-bg-deep); border-top: 1px solid var(--md-rule); padding-block: var(--md-space-9) var(--md-space-7); color: var(--md-fg-soft); }
.md-footer__inner { width: 100%; max-width: var(--md-container); margin-inline: auto; padding-inline: var(--md-space-5); display: grid; grid-template-columns: 1fr; gap: var(--md-space-7); }
.md-footer__brand { display: flex; flex-direction: column; gap: var(--md-space-4); max-width: 360px; }
.md-footer__phone { display: inline-flex; align-items: center; gap: var(--md-space-2); font-family: var(--md-font-mono); font-size: 14px; color: var(--md-fg); letter-spacing: 0.04em; transition: color var(--md-dur-base) var(--md-ease); }
.md-footer__phone:hover { color: var(--md-accent); }
.md-footer__col { display: flex; flex-direction: column; gap: var(--md-space-3); }
.md-footer__col h4 { font-family: var(--md-font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--md-accent); margin: 0 0 var(--md-space-2); }
.md-footer__col a { display: inline-flex; align-items: center; min-height: 36px; font-size: 14px; color: var(--md-fg-soft); transition: color var(--md-dur-base) var(--md-ease); }
.md-footer__col a:hover { color: var(--md-accent); }
.md-footer__meta { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--md-space-3); padding-top: var(--md-space-6); border-top: 1px solid var(--md-rule); font-family: var(--md-font-mono); font-size: 12px; color: var(--md-fg-muted); letter-spacing: 0.04em; }
@media (min-width: 720px) { .md-footer__inner { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--md-space-7); padding-inline: var(--md-space-6); } .md-footer__meta { flex-direction: row; justify-content: space-between; align-items: center; } }
.md-sticky-cta { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; display: flex; align-items: center; justify-content: center; min-height: var(--md-tap); padding: 0 var(--md-space-5); background: var(--md-accent); color: var(--md-bg); font-family: var(--md-font-sans); font-size: 15px; font-weight: 600; border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(212, 175, 55, 0.4); transition: background var(--md-dur-base) var(--md-ease); }
.md-sticky-cta:hover { background: var(--md-accent-hi); }
@media (min-width: 1024px) { .md-sticky-cta { display: none; } }
.md-hero { position: relative; padding-block: clamp(80px, 12vw, 160px); background: var(--md-bg); border-bottom: 1px solid var(--md-rule); overflow: hidden; }
.md-hero::before { content: ""; position: absolute; inset: auto -10% -40% auto; width: 70%; aspect-ratio: 1 / 1; background: radial-gradient(closest-side, var(--md-accent-tint), transparent 70%); pointer-events: none; z-index: 0; }
.md-hero__inner { position: relative; z-index: 1; width: 100%; max-width: var(--md-container); margin-inline: auto; padding-inline: var(--md-space-5); display: grid; grid-template-columns: 1fr; gap: var(--md-space-8); align-items: center; }
.md-hero__inner-copy { display: flex; flex-direction: column; gap: var(--md-space-5); max-width: 720px; }
.md-hero__inner-visual { display: flex; align-items: center; justify-content: center; }
.md-hero__eyebrow { display: inline-flex; align-items: center; gap: var(--md-space-2); font-family: var(--md-font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--md-accent); }
.md-hero__eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--md-accent); }
.md-hero__h1 { font-family: var(--md-font-display); font-weight: 500; font-size: clamp(44px, 7.2vw, 88px); line-height: 1.04; letter-spacing: -0.02em; color: var(--md-fg); margin: 0; }
.md-hero__h1 em, .md-hero__h1 .md-em { font-style: italic; color: var(--md-accent); font-weight: 500; }
.md-hero__sub { font-family: var(--md-font-sans); font-size: clamp(17px, 1.6vw, 21px); line-height: 1.55; color: var(--md-fg-soft); max-width: 56ch; }
.md-hero__microproof { font-family: var(--md-font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--md-fg-muted); display: flex; flex-wrap: wrap; gap: var(--md-space-4); align-items: center; }
.md-hero__microproof::before { content: ""; width: 6px; height: 6px; background: var(--md-accent); border-radius: 50%; }
.md-hero__cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--md-space-2); min-height: var(--md-tap); padding: 0 var(--md-space-6); background: var(--md-accent); color: var(--md-bg); font-family: var(--md-font-sans); font-size: 16px; font-weight: 600; border-radius: 10px; align-self: flex-start; transition: background var(--md-dur-base) var(--md-ease); }
.md-hero__cta:hover { background: var(--md-accent-hi); }
@media (min-width: 720px) { .md-hero__inner { padding-inline: var(--md-space-6); } }
@media (min-width: 1024px) { .md-hero__inner { grid-template-columns: 1.4fr 1fr; gap: var(--md-space-10); padding-inline: var(--md-space-7); } }
.md-trust-line { background: var(--md-bg-soft); border-top: 1px solid var(--md-rule); border-bottom: 1px solid var(--md-rule); padding-block: var(--md-space-5); }
.md-trust-line__text { width: 100%; max-width: var(--md-container); margin-inline: auto; padding-inline: var(--md-space-5); font-family: var(--md-font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--md-fg-muted); text-align: center; }
.md-trust-line__text strong { color: var(--md-accent); font-weight: 500; }
.md-service-grid { display: grid; grid-template-columns: 1fr; gap: var(--md-space-4); }
.md-service-card { display: flex; flex-direction: column; gap: var(--md-space-4); padding: var(--md-space-6); background: var(--md-bg-card); border: 1px solid var(--md-rule); border-radius: 10px; transition: border-color var(--md-dur-base) var(--md-ease), transform var(--md-dur-base) var(--md-ease); }
.md-service-card:hover { border-color: var(--md-accent); transform: translateY(-2px); }
.md-service-card__icon { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: var(--md-accent-tint); border: 1px solid var(--md-accent-tint-strong); border-radius: 10px; color: var(--md-accent); }
.md-service-card__icon svg { width: 24px; height: 24px; }
.md-service-card__title { font-family: var(--md-font-display); font-size: clamp(22px, 2.2vw, 28px); font-weight: 500; line-height: 1.18; letter-spacing: -0.01em; color: var(--md-fg); margin: 0; }
.md-service-card__summary { font-family: var(--md-font-sans); font-size: 15px; line-height: 1.6; color: var(--md-fg-soft); margin: 0; }
.md-service-card__outcome { 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); padding-top: var(--md-space-3); border-top: 1px solid var(--md-rule); }
.md-service-card__link { display: inline-flex; align-items: center; gap: var(--md-space-2); margin-top: auto; padding-top: var(--md-space-3); font-family: var(--md-font-sans); font-size: 14px; font-weight: 600; color: var(--md-fg); transition: color var(--md-dur-base) var(--md-ease), gap var(--md-dur-base) var(--md-ease); }
.md-service-card:hover .md-service-card__link { color: var(--md-accent); gap: var(--md-space-3); }
@media (min-width: 720px) { .md-service-grid { grid-template-columns: repeat(2, 1fr); gap: var(--md-space-5); } }
@media (min-width: 1024px) { .md-service-grid { grid-template-columns: repeat(3, 1fr); } .md-service-card { padding: var(--md-space-7); } }
.md-how-we-help { display: grid; grid-template-columns: 1fr; gap: var(--md-space-7); }
.md-how-we-help__lead { display: flex; flex-direction: column; gap: var(--md-space-4); }
.md-how-we-help__title { font-family: var(--md-font-display); font-size: clamp(32px, 4.6vw, 52px); font-weight: 500; line-height: 1.1; letter-spacing: -0.015em; color: var(--md-fg); margin: 0; }
.md-how-we-help__body { font-family: var(--md-font-sans); font-size: 17px; line-height: 1.65; color: var(--md-fg-soft); }
.md-how-we-help__outcomes { display: flex; flex-direction: column; gap: var(--md-space-4); }
.md-how-we-help__outcome { display: flex; align-items: flex-start; gap: var(--md-space-4); padding: var(--md-space-4) 0; border-bottom: 1px solid var(--md-rule); font-family: var(--md-font-sans); font-size: 16px; line-height: 1.5; color: var(--md-fg); }
.md-how-we-help__outcome:last-child { border-bottom: 0; }
.md-how-we-help__check { flex-shrink: 0; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; background: var(--md-accent-tint); border-radius: 50%; color: var(--md-accent); }
@media (min-width: 1024px) { .md-how-we-help { grid-template-columns: 1fr 1fr; gap: var(--md-space-9); align-items: start; } }
.md-industries-list { display: flex; flex-direction: column; border-top: 1px solid var(--md-rule); }
.md-industries-list__item { display: grid; grid-template-columns: 1fr; gap: var(--md-space-2); padding: var(--md-space-5) 0; border-bottom: 1px solid var(--md-rule); transition: padding-left var(--md-dur-base) var(--md-ease); }
.md-industries-list__item:hover { padding-left: var(--md-space-3); }
.md-industries-list__name { font-family: var(--md-font-display); font-size: clamp(22px, 2.4vw, 30px); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; color: var(--md-fg); transition: color var(--md-dur-base) var(--md-ease); }
.md-industries-list__item:hover .md-industries-list__name { color: var(--md-accent); }
.md-industries-list__summary { font-family: var(--md-font-sans); font-size: 15px; line-height: 1.55; color: var(--md-fg-soft); }
@media (min-width: 720px) { .md-industries-list__item { grid-template-columns: minmax(220px, 1fr) 2fr; gap: var(--md-space-6); align-items: baseline; padding: var(--md-space-6) 0; } }
.md-process-steps { display: grid; grid-template-columns: 1fr; gap: var(--md-space-5); }
.md-process-steps__step { display: grid; grid-template-columns: auto 1fr; gap: var(--md-space-5); align-items: start; padding: var(--md-space-6); background: var(--md-bg-card); border: 1px solid var(--md-rule); border-radius: 10px; transition: border-color var(--md-dur-base) var(--md-ease); }
.md-process-steps__step:hover { border-color: var(--md-accent); }
.md-process-steps__number { font-family: var(--md-font-display); font-size: 40px; font-weight: 500; line-height: 1; color: var(--md-accent); letter-spacing: -0.02em; }
.md-process-steps__name { font-family: var(--md-font-display); font-size: clamp(20px, 2.2vw, 26px); font-weight: 500; line-height: 1.2; color: var(--md-fg); margin: 0 0 var(--md-space-3); }
.md-process-steps__body { font-family: var(--md-font-sans); font-size: 15px; line-height: 1.6; color: var(--md-fg-soft); margin: 0; }
@media (min-width: 720px) { .md-process-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .md-process-steps { grid-template-columns: repeat(4, 1fr); } .md-process-steps__step { grid-template-columns: 1fr; gap: var(--md-space-4); padding: var(--md-space-7); } .md-process-steps__number { font-size: 56px; } }
.md-first-30-days { display: grid; grid-template-columns: 1fr; gap: var(--md-space-4); }
.md-first-30-days__card { display: flex; flex-direction: column; gap: var(--md-space-3); padding: var(--md-space-6); background: var(--md-bg-soft); border: 1px solid var(--md-rule); border-radius: 10px; transition: border-color var(--md-dur-base) var(--md-ease), background var(--md-dur-base) var(--md-ease); }
.md-first-30-days__card:hover { border-color: var(--md-accent); background: var(--md-bg-card); }
.md-first-30-days__label { font-family: var(--md-font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--md-accent); }
.md-first-30-days__title { font-family: var(--md-font-display); font-size: clamp(20px, 2.2vw, 26px); font-weight: 500; line-height: 1.2; color: var(--md-fg); margin: 0; }
.md-first-30-days__body { font-family: var(--md-font-sans); font-size: 15px; line-height: 1.6; color: var(--md-fg-soft); margin: 0; }
@media (min-width: 720px) { .md-first-30-days { grid-template-columns: repeat(3, 1fr); gap: var(--md-space-5); } }
@media (min-width: 1024px) { .md-first-30-days { grid-template-columns: repeat(4, 1fr); } .md-first-30-days__card { padding: var(--md-space-7); } }
.md-faq-cards { display: grid; grid-template-columns: 1fr; gap: var(--md-space-4); }
.md-faq-cards__card { display: flex; flex-direction: column; gap: var(--md-space-3); padding: var(--md-space-6); background: var(--md-bg-card); border: 1px solid var(--md-rule); border-radius: 10px; transition: border-color var(--md-dur-base) var(--md-ease); }
.md-faq-cards__card:hover { border-color: var(--md-rule-hover); }
.md-faq-cards__prefix { font-family: var(--md-font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--md-accent); }
.md-faq-cards__question { font-family: var(--md-font-display); font-size: clamp(20px, 2.2vw, 26px); font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; color: var(--md-fg); margin: 0; }
.md-faq-cards__answer { font-family: var(--md-font-sans); font-size: 16px; line-height: 1.65; color: var(--md-fg-soft); margin: 0; }
@media (min-width: 720px) { .md-faq-cards { grid-template-columns: repeat(2, 1fr); gap: var(--md-space-5); } }
@media (min-width: 1024px) { .md-faq-cards__card { padding: var(--md-space-7); } }
.md-operator-quote { max-width: 880px; margin-inline: auto; padding: var(--md-space-7) var(--md-space-5); text-align: center; position: relative; }
.md-operator-quote::before { content: "\201C"; display: block; font-family: var(--md-font-display); font-size: clamp(80px, 12vw, 140px); line-height: 0.6; color: var(--md-accent); margin-bottom: var(--md-space-3); }
.md-operator-quote__body { font-family: var(--md-font-display); font-style: italic; font-weight: 400; font-size: clamp(22px, 3vw, 36px); line-height: 1.32; letter-spacing: -0.005em; color: var(--md-fg); margin: 0 0 var(--md-space-6); }
.md-operator-quote__attribution { font-family: var(--md-font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--md-fg-muted); }
.md-operator-quote__attribution strong { color: var(--md-accent); font-weight: 500; }
.md-final-cta--gold { background: var(--md-bg-deep); padding-block: var(--md-section-y); position: relative; overflow: hidden; }
.md-final-cta--gold::before { content: ""; position: absolute; inset: -10% -10% auto -10%; height: 80%; background: radial-gradient(ellipse at top, var(--md-accent-tint), transparent 70%); pointer-events: none; }
.md-final-cta--gold__card { position: relative; z-index: 1; width: 100%; max-width: 1080px; margin-inline: auto; padding: var(--md-space-7) var(--md-space-5); background: var(--md-bg-card); border: 1px solid var(--md-accent-tint-strong); border-radius: 10px; display: grid; grid-template-columns: 1fr; gap: var(--md-space-7); }
.md-final-cta--gold__title { font-family: var(--md-font-display); font-size: clamp(36px, 5vw, 60px); font-weight: 500; line-height: 1.06; letter-spacing: -0.02em; color: var(--md-fg); margin: 0; }
.md-final-cta--gold__title em { font-style: italic; color: var(--md-accent); }
.md-final-cta--gold__body { font-family: var(--md-font-sans); font-size: 17px; line-height: 1.6; color: var(--md-fg-soft); margin: 0; max-width: 52ch; }
.md-final-cta--gold__form { display: flex; flex-direction: column; gap: var(--md-space-4); }
.md-final-cta--gold__input, .md-final-cta--gold__textarea { width: 100%; min-height: var(--md-tap); padding: var(--md-space-4); background: var(--md-bg); border: 1px solid var(--md-rule-strong); border-radius: 10px; font-family: var(--md-font-sans); font-size: 16px; color: var(--md-fg); transition: border-color var(--md-dur-base) var(--md-ease); }
.md-final-cta--gold__input:focus, .md-final-cta--gold__textarea:focus { outline: none; border-color: var(--md-accent); background: var(--md-bg-deep); }
.md-final-cta--gold__submit { display: inline-flex; align-items: center; justify-content: center; gap: var(--md-space-2); min-height: var(--md-tap); padding: 0 var(--md-space-7); background: var(--md-accent); color: var(--md-bg); font-family: var(--md-font-sans); font-size: 16px; font-weight: 600; border-radius: 10px; transition: background var(--md-dur-base) var(--md-ease); }
.md-final-cta--gold__submit:hover { background: var(--md-accent-hi); }
@media (min-width: 1024px) { .md-final-cta--gold__card { grid-template-columns: 1fr 1fr; gap: var(--md-space-9); padding: var(--md-space-10) var(--md-space-9); align-items: start; } }
.md-logo svg { width: auto; height: 40px; color: var(--md-fg); }
.md-logo--gold svg { color: var(--md-accent); }
.md-reveal-js { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--md-ease), transform 600ms var(--md-ease); }
.md-reveal-js.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
.md-reveal-js { opacity: 1; transform: none; }
html { scroll-behavior: auto; }
}
@media print {
body { background: #fff; color: #000; }
.md-header, .md-mobile-menu, .md-nav-toggle, .md-sticky-cta { display: none !important; }
a { color: #000; text-decoration: underline; }
}
/* ============ Energy + high-tech polish (v4.0.1) ============ */
.md-section--deep, .md-final-cta--gold { background-image: radial-gradient(circle at center, rgba(212, 175, 55, 0.04) 1px, transparent 1.5px); background-size: 24px 24px; background-position: 0 0; }
.md-final-cta--gold { background-color: var(--md-bg-deep); }
.md-hero { position: relative; isolation: isolate; }
.md-hero__h1 { position: relative; }
.md-hero__h1::before { content: ""; position: absolute; top: 50%; left: 50%; width: 800px; height: 800px; max-width: 120%; transform: translate(-50%, -50%); background: radial-gradient(circle, var(--md-accent-tint) 0%, rgba(212, 175, 55, 0.04) 28%, transparent 62%); opacity: 0.55; z-index: -1; pointer-events: none; filter: blur(2px); }
.md-service-card { transition: transform 280ms var(--md-ease), box-shadow 280ms var(--md-ease), border-color 280ms var(--md-ease); }
.md-service-card:hover { box-shadow: 0 0 32px rgba(212, 175, 55, 0.18), 0 12px 28px rgba(0, 0, 0, 0.45); }
.md-scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; background: linear-gradient(90deg, var(--md-accent), var(--md-accent-hi)); transform: scaleX(0); transform-origin: 0 50%; z-index: 90; pointer-events: none; opacity: 0.85; }
.md-reveal-js .md-h2 { position: relative; padding-bottom: 0.4em; }
.md-reveal-js .md-h2::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--md-accent); opacity: 0.24; transform: scaleX(0); transform-origin: 0 50%; transition: transform 600ms var(--md-ease) 120ms; }
.md-reveal-js.is-visible .md-h2::after { transform: scaleX(1); }
.md-stat-number { font-variant-numeric: tabular-nums slashed-zero; font-feature-settings: "tnum", "zero"; color: var(--md-accent-hi); text-shadow: 0 0 20px var(--md-accent-tint); letter-spacing: -0.01em; }
/* (removed) the previous `.md-mega { position: relative; }` broke the
absolute-overlay positioning from line 100 and caused the menu to push the
nav layout downward when opened. The mega menu must stay absolute and
anchored to the trigger. The faint left-border between mega children was
never actually visible because .md-mega only has one direct child. */
@media (prefers-reduced-motion: no-preference) {
/* ANIMATION BUDGET (2026-05-30): the infinite CTA shimmer used to run on EVERY
.md-hero__cta (9 on the homepage) + submit + sticky bar = up to 11 infinite
loops per page. Trimmed so the shimmer is HOVER-ONLY on the inline CTAs (counts
as the one "CTA hover" interaction) and stays a single always-on shimmer on the
persistent sticky bar only. Net per-page infinite loops drop to: scroll-progress,
one sticky-bar shimmer, one sticky-bar pulse dot, one hero scarcity/microproof
pulse dot = 4, well under the 5-6 budget. Reduced-motion already kills all of it. */
.md-hero__cta, .md-final-cta--gold__submit, .md-sticky-cta { position: relative; overflow: hidden; isolation: isolate; }
.md-hero__cta::after, .md-final-cta--gold__submit::after, .md-sticky-cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.18) 50%, transparent 70%); transform: translateX(-100%); pointer-events: none; z-index: 1; }
/* Inline CTAs: shimmer sweeps once on hover/focus (interaction feedback, not ambient). */
.md-hero__cta:hover::after, .md-hero__cta:focus-visible::after,
.md-final-cta--gold__submit:hover::after, .md-final-cta--gold__submit:focus-visible::after { animation: md-shimmer 0.9s var(--md-ease) 1; }
/* Sticky bar: the single persistent ambient shimmer that signals "live action". */
.md-sticky-cta::after { animation: md-shimmer 4.6s var(--md-ease) infinite; }
.md-hero__cta > *, .md-final-cta--gold__submit > *, .md-sticky-cta > * { position: relative; z-index: 2; }
@keyframes md-shimmer { 0% { transform: translateX(-100%); } 55% { transform: translateX(200%); } 100% { transform: translateX(200%); } }
.md-sticky-cta::before { content: ""; position: absolute; right: 10px; bottom: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--md-accent-hi); box-shadow: 0 0 0 0 rgba(227, 194, 78, 0.55); animation: md-live-pulse 2s var(--md-ease) infinite; z-index: 3; pointer-events: none; }
@keyframes md-live-pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(227, 194, 78, 0.55); opacity: 0.9; } 50% { transform: scale(1.4); box-shadow: 0 0 0 8px rgba(227, 194, 78, 0); opacity: 1; } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(227, 194, 78, 0); opacity: 0.9; } }
/* Consolidated: microproof + risk-pill dots reuse the single md-live-pulse keyframe
(was 3 near-identical pulse keyframes). One pulse definition, sitewide. */
.md-hero__microproof::before { animation: md-live-pulse 2.4s var(--md-ease) infinite; }
@supports (animation-timeline: scroll()) {
.md-scroll-progress { animation: md-scroll-fill linear both; animation-timeline: scroll(root); }
@keyframes md-scroll-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
}
/* End polish layer */
/* Phase 9 polish: image reveal on scroll */
.md-reveal-image { overflow: hidden; clip-path: inset(100% 0 0 0); transition: clip-path 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
.md-reveal-image.is-revealed { clip-path: inset(0 0 0 0); }
/* Accessibility: visually hide content but keep it available to screen readers. */
.md-screen-reader { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
/* =========================================================================
v4.2.0 — Human design moves (D1-D5) + readability rebuild
Appended 2026-05-16. Do not rewrite the file — append only.
========================================================================= */
/* ---- D1 — Off-center founder portrait split hero ---------------------- */
.md-hero--split .md-hero__inner--split {
display: grid;
grid-template-columns: 1fr;
gap: var(--md-space-7);
align-items: center;
}
@media (min-width: 1024px) {
.md-hero--split .md-hero__inner--split {
grid-template-columns: 1fr 1fr;
gap: var(--md-space-9);
}
}
.md-hero__portrait {
margin: 0;
width: 100%;
max-width: 560px;
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--md-space-3);
}
.md-hero__portrait-img {
width: 100%;
height: auto;
aspect-ratio: 4 / 5;
object-fit: cover;
object-position: 72% 38%; /* push subject off-axis, not centered */
border-radius: 4px;
border: 1px solid var(--md-rule);
background: var(--md-bg-card);
display: block;
filter: grayscale(0.08) contrast(1.02);
}
@media (min-width: 1024px) {
.md-hero__portrait { transform: translate(8%, -2%); } /* off-center crop */
}
.md-hero__portrait-caption {
font-size: clamp(15px, 1.4vw, 18px);
color: var(--md-fg-soft);
line-height: 1.4;
padding-left: var(--md-space-2);
border-left: 1px solid var(--md-accent);
display: inline-block;
}
/* .md-pen-stroke — handwritten accent. Falls back to Playfair italic if the
intended handwriting face is not loaded. */
.md-pen-stroke {
font-family: "Caveat", "Kalam", "Patrick Hand", var(--md-font-display), cursive;
font-style: italic;
font-weight: 500;
letter-spacing: 0.005em;
}
/* ---- D2 — Asymmetric editorial service list -------------------------- */
.md-asym-services__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--md-space-7);
align-items: start;
}
@media (min-width: 960px) {
.md-asym-services__grid {
grid-template-columns: 6fr 4fr;
gap: var(--md-space-8);
}
}
.md-asym-feature {
display: flex;
flex-direction: column;
gap: var(--md-space-5);
padding: var(--md-space-6);
background: var(--md-bg-card);
border: 1px solid var(--md-rule);
border-radius: 10px;
}
@media (min-width: 720px) { .md-asym-feature { padding: var(--md-space-7); } }
.md-asym-feature__media {
width: 100%;
aspect-ratio: 16 / 10;
overflow: hidden;
border-radius: 6px;
background: var(--md-bg-soft);
border: 1px solid var(--md-rule);
}
.md-asym-feature__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.md-asym-feature__num {
display: inline-block;
font-family: var(--md-font-mono);
font-size: 13px;
letter-spacing: 0.2em;
color: var(--md-accent);
}
.md-asym-feature__title {
font-family: var(--md-font-display);
font-weight: 500;
font-size: clamp(34px, 4.4vw, 56px);
line-height: 1.04;
letter-spacing: -0.02em;
color: var(--md-fg);
margin: 0;
}
.md-asym-feature__summary {
font-family: var(--md-font-sans);
font-size: 16px;
line-height: 1.62;
color: var(--md-fg-soft);
margin: 0;
}
.md-asym-feature__outcome {
font-family: var(--md-font-mono);
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--md-accent);
padding-top: var(--md-space-3);
border-top: 1px solid var(--md-rule);
margin: 0;
}
.md-asym-feature__link {
font-family: var(--md-font-sans);
font-weight: 600;
font-size: 14px;
color: var(--md-fg);
display: inline-flex;
gap: var(--md-space-2);
transition: color var(--md-dur-base) var(--md-ease), gap var(--md-dur-base) var(--md-ease);
}
.md-asym-feature__link:hover { color: var(--md-accent); gap: var(--md-space-3); }
.md-asym-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.md-asym-list__item {
border-top: 1px solid var(--md-rule);
}
.md-asym-list__item:last-child { border-bottom: 1px solid var(--md-rule); }
.md-asym-list__link {
display: grid;
grid-template-columns: 56px 1fr;
grid-template-rows: auto auto;
column-gap: var(--md-space-5);
row-gap: var(--md-space-1);
padding: var(--md-space-5) 0;
align-items: baseline;
transition: padding-left var(--md-dur-base) var(--md-ease);
}
.md-asym-list__link:hover { padding-left: var(--md-space-3); }
.md-asym-list__num {
grid-row: 1 / span 2;
font-family: var(--md-font-mono);
font-size: 14px;
letter-spacing: 0.2em;
color: var(--md-accent);
align-self: center;
}
.md-asym-list__title {
font-family: var(--md-font-display);
font-weight: 500;
font-size: clamp(22px, 2.4vw, 30px);
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--md-fg);
transition: color var(--md-dur-base) var(--md-ease);
}
.md-asym-list__link:hover .md-asym-list__title { color: var(--md-accent); }
.md-asym-list__summary {
grid-column: 2;
font-family: var(--md-font-sans);
font-size: 15px;
line-height: 1.55;
color: var(--md-fg-soft);
}
/* ---- D3 — Full-bleed pull quote -------------------------------------- */
.md-pull-quote-section { padding-block: clamp(72px, 12vw, 160px); position: relative; }
.md-pull-quote {
position: relative;
width: 100%;
max-width: 1080px;
margin-inline: auto;
padding-inline: var(--md-space-5);
display: flex;
flex-direction: column;
gap: var(--md-space-5);
text-align: left;
}
.md-pull-quote__frame {
position: absolute;
top: -24px;
left: var(--md-space-3);
width: 64px;
height: 64px;
opacity: 0.55;
pointer-events: none;
}
.md-pull-quote__text {
font-family: var(--md-font-display);
font-weight: 500;
font-style: italic;
font-size: clamp(48px, 7vw, 112px);
line-height: 1.02;
letter-spacing: -0.025em;
color: var(--md-fg);
margin: 0;
}
.md-pull-quote__attribution {
font-family: var(--md-font-mono);
font-size: 13px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--md-fg-muted);
margin: 0;
}
.md-pull-quote__rule {
display: block;
width: 96px;
height: 1px;
background: linear-gradient(90deg, var(--md-accent) 0%, var(--md-accent-deep) 100%);
margin-top: var(--md-space-3);
}
/* ---- D4 — Signature pen-stroke underline ----------------------------- */
.md-pen-stroke-underline { position: relative; display: inline-block; }
.md-pen-stroke-underline::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -6px;
height: 6px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: 100% 100%;
pointer-events: none;
clip-path: inset(0 100% 0 0);
transition: clip-path 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.md-reveal-js.is-visible .md-pen-stroke-underline::after,
.md-reveal-js.is-visible.md-pen-stroke-underline::after,
.is-visible .md-pen-stroke-underline::after,
.md-pen-stroke-underline.is-visible::after {
clip-path: inset(0 0 0 0);
}
.md-process__num.md-pen-stroke-underline::after { bottom: -4px; height: 4px; }
/* ---- D5 — Live ledger strip (replaces trust line) -------------------- */
.md-live-ledger {
background: var(--md-bg-soft);
border-top: 1px solid var(--md-rule);
border-bottom: 1px solid var(--md-rule);
padding-block: var(--md-space-5);
}
.md-live-ledger__row {
list-style: none;
margin: 0;
padding-inline: var(--md-space-5);
width: 100%;
max-width: var(--md-container);
margin-inline: auto;
display: grid;
grid-template-columns: 1fr;
gap: 0;
}
.md-live-ledger__item {
padding: var(--md-space-3) var(--md-space-4);
border-bottom: 1px solid var(--md-rule);
}
.md-live-ledger__item:last-child { border-bottom: 0; }
.md-live-ledger__figure {
font-family: var(--md-font-mono);
font-size: 13px;
letter-spacing: 0.06em;
color: var(--md-fg-soft);
font-variant-numeric: tabular-nums slashed-zero;
font-feature-settings: "tnum", "zero";
display: inline-block;
}
.md-live-ledger__figure::before {
content: "›";
display: inline-block;
color: var(--md-accent);
margin-right: var(--md-space-2);
font-weight: 600;
}
@media (min-width: 720px) {
.md-live-ledger__row {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0;
}
.md-live-ledger__item {
border-bottom: 0;
border-right: 1px solid var(--md-rule);
text-align: center;
}
.md-live-ledger__item:last-child { border-right: 0; }
}
/* ---- Process visual + illustration ----------------------------------- */
.md-process__visual {
margin: var(--md-space-4) 0 0;
width: 100%;
border-radius: 6px;
overflow: hidden;
background: var(--md-bg-soft);
border: 1px solid var(--md-rule);
}
.md-process__visual-img { width: 100%; height: auto; display: block; }
.md-process__illustration {
margin: 0 auto var(--md-space-6);
width: 100%;
max-width: 720px;
opacity: 0.85;
}
.md-process__illustration img { width: 100%; height: auto; display: block; }
/* ---- Questions page H2/H3 readability rebuild ------------------------ */
.md-faq-group {
border-top: 1px solid var(--md-rule);
padding-top: var(--md-space-6);
}
.md-faq-group .md-exhibit__title {
font-family: var(--md-font-display);
font-size: clamp(28px, 3.6vw, 44px);
font-weight: 500;
color: var(--md-fg);
margin: 0 0 var(--md-space-5);
letter-spacing: -0.01em;
}
.md-faq-group h3.md-anticipated__q {
font-family: var(--md-font-display);
font-size: clamp(20px, 2.2vw, 26px);
font-weight: 500;
color: var(--md-fg);
margin: var(--md-space-5) 0 var(--md-space-2);
letter-spacing: -0.005em;
}
.md-faq-group p.md-anticipated__a {
font-family: var(--md-font-sans);
font-size: 16px;
line-height: 1.65;
color: var(--md-fg-soft);
max-width: 72ch;
margin: 0 0 var(--md-space-4);
}
/* ---- Phase 12 — Founder single + press cards + trust stamp ---------- */
.md-founder-single .md-container--narrow { max-width: 1080px; }
.md-founder-single__back {
margin-bottom: var(--md-space-5);
font-size: 13px;
letter-spacing: 0.08em;
}
.md-founder-single__back a { color: var(--md-fg-soft); text-decoration: none; }
.md-founder-single__back a:hover { color: var(--md-accent); }
.md-founder-single__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--md-space-7);
align-items: start;
}
@media (min-width: 960px) {
.md-founder-single__grid {
grid-template-columns: 4fr 6fr;
gap: var(--md-space-9);
}
}
.md-founder-portrait { margin: 0; }
.md-founder-portrait__figure {
margin: 0;
display: flex;
flex-direction: column;
gap: var(--md-space-3);
}
.md-founder-portrait__img {
width: 100%;
height: auto;
aspect-ratio: 4 / 5;
object-fit: cover;
object-position: 60% 35%;
border-radius: 4px;
border: 1px solid var(--md-rule);
background: var(--md-bg-card);
display: block;
filter: grayscale(0.08) contrast(1.02);
}
.md-founder-portrait__caption {
font-size: clamp(15px, 1.4vw, 18px);
color: var(--md-fg-soft);
line-height: 1.4;
padding-left: var(--md-space-2);
border-left: 1px solid var(--md-accent);
display: inline-block;
}
.md-founder-anchor {
font-family: var(--md-font-display);
font-size: clamp(17px, 1.9vw, 22px);
color: var(--md-fg-soft);
margin: var(--md-space-2) 0 var(--md-space-6);
line-height: 1.4;
}
.md-founder-anchor em { font-style: italic; }
.md-founder-single__bio { margin-bottom: var(--md-space-7); }
.md-founder-single__social {
list-style: none;
padding: var(--md-space-5) 0;
margin: 0 0 var(--md-space-6);
border-top: 1px solid var(--md-rule);
border-bottom: 1px solid var(--md-rule);
display: flex;
flex-wrap: wrap;
gap: var(--md-space-5);
font-size: 13px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.md-founder-single__social-link {
color: var(--md-fg);
text-decoration: none;
padding: 6px 0;
border-bottom: 1px solid transparent;
transition: border-color var(--md-dur-fast) var(--md-ease);
}
.md-founder-single__social-link:hover { border-bottom-color: var(--md-accent); color: var(--md-accent); }
.md-founder-single__foot { margin-top: var(--md-space-6); }
/* ---- Press page — editorial cards ------------------------------------- */
.md-press-list {
list-style: none;
padding: 0;
margin: var(--md-space-7) 0 0;
display: grid;
grid-template-columns: 1fr;
gap: var(--md-space-5);
}
.md-press-card {
display: flex;
flex-direction: column;
gap: var(--md-space-3);
padding: var(--md-space-6);
background: var(--md-bg-card);
border: 1px solid var(--md-rule);
border-radius: 8px;
transition: border-color var(--md-dur-fast) var(--md-ease), transform var(--md-dur-fast) var(--md-ease);
}
.md-press-card:hover { border-color: var(--md-accent); transform: translateY(-2px); }
.md-press-card__meta {
font-family: var(--md-font-mono);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--md-accent);
margin: 0;
}
.md-press-card__title {
font-family: var(--md-font-display);
font-size: clamp(22px, 2.6vw, 30px);
font-weight: 500;
line-height: 1.2;
color: var(--md-fg);
margin: 0;
}
.md-press-card__excerpt {
font-family: var(--md-font-sans);
font-size: 16px;
line-height: 1.6;
color: var(--md-fg-soft);
margin: 0;
}
.md-press-card__link {
font-family: var(--md-font-mono);
font-size: 13px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--md-fg);
text-decoration: none;
border-bottom: 1px solid var(--md-accent);
align-self: flex-start;
padding-bottom: 2px;
}
.md-press-card__link:hover { color: var(--md-accent); }
/* ---- Hero trust stamp — corner badge --------------------------------- */
.md-hero__trust-stamp {
position: absolute;
top: var(--md-space-3);
right: var(--md-space-3);
width: 80px;
height: 80px;
z-index: 2;
pointer-events: none;
opacity: 0.95;
filter: drop-shadow(0 4px 12px rgba(15, 17, 21, 0.18));
}
.md-hero__trust-stamp img { width: 100%; height: 100%; display: block; }
@media (max-width: 720px) {
.md-hero__trust-stamp { width: 60px; height: 60px; top: var(--md-space-2); right: var(--md-space-2); }
}
/* End v4.2.0 */
/* =========================================================================
v4.3.0 — Conversion refresh: brighter, denser, safer media composition
========================================================================= */
:root {
--md-bg: #F7F7F5;
--md-bg-soft: #EEEEEB;
--md-bg-card: #ffffff;
--md-bg-deep: #0F1115;
--md-fg: #16171A;
--md-fg-soft: #45474C;
--md-fg-muted: #5E6066;
--md-accent: #D4AF37;
--md-accent-hi: #E3C24E;
--md-accent-deep: #A8842A;
--md-accent-tint: rgba(212, 175, 55, 0.12);
--md-accent-tint-strong: rgba(212, 175, 55, 0.24);
--md-rule: rgba(22, 23, 26, 0.12);
--md-rule-strong: rgba(22, 23, 26, 0.22);
--md-rule-hover: rgba(212, 175, 55, 0.48);
--md-section-y: clamp(44px, 6.4vw, 88px);
}
body {
background:
linear-gradient(90deg, rgba(212, 175, 55, 0.08) 1px, transparent 1px),
linear-gradient(180deg, rgba(15, 17, 21, 0.05) 1px, transparent 1px),
var(--md-bg);
background-size: 44px 44px;
}
.md-container { max-width: 1320px; }
.md-container--narrow { max-width: 980px; }
.md-section { padding-block: var(--md-section-y); }
.md-section--soft { background: #EEEEEB; }
.md-section--deep {
/* Top-left corner glow. Was rgba(.16) over near-black graphite, which composited
to ~rgb(47,42,26) — a muddy olive smudge that did not read as gold. Brighter,
tighter radial gold (E3C24E hover-gold at .30 -> fast falloff) reads as an
intentional gold light source in the corner, not a dead haze. Confined to the
top-left ~38% so centered text areas keep their flat graphite contrast base. */
background:
radial-gradient(120% 90% at 0% 0%, rgba(227, 194, 78, 0.30), rgba(212, 175, 55, 0.10) 22%, transparent 40%),
var(--md-bg-deep);
color: #F7F7F5;
}
.md-section__header {
max-width: 900px;
margin-bottom: clamp(28px, 4vw, 48px);
}
.md-section__header > * + * { margin-top: 12px; }
.md-h1, .md-h2, .md-h3, .md-display { color: var(--md-fg); letter-spacing: 0; }
.md-display { font-size: clamp(42px, 6.6vw, 82px); }
.md-h1 { font-size: clamp(36px, 5.6vw, 68px); }
.md-h2 { font-size: clamp(30px, 4.4vw, 54px); }
.md-lede { color: var(--md-fg-soft); max-width: 70ch; }
.md-eyebrow { color: #D4AF37; }
.md-section--deep .md-h1,
.md-section--deep .md-h2,
.md-section--deep .md-h3,
.md-section--deep .md-pull-quote__text { color: #F7F7F5; }
.md-section--deep .md-eyebrow,
.md-section--deep .md-pull-quote__attribution { color: #D4AF37; }
/* SITEWIDE dark-section pillar text colors. The .md-pillars__* color rules live in
homepage-journey.css, which only loads on the journey pages — so on the vertical
pages (medical-dental, legal, home-services) the pillar TITLE inherited the dark
graphite body color and rendered graphite-on-graphite (ratio ~1.05, invisible).
This was masked while those reveals were stuck at opacity:0; the sitewide reveal
failsafe exposed it. Defining the colors here (vm50 loads everywhere) fixes it on
every page regardless of which journey/service stylesheet is enqueued. */
.md-section--deep .md-pillars__title { color: #F7F7F5; }
.md-section--deep .md-pillars__num { color: #E3C24E; }
.md-section--deep .md-pillars__body { color: rgba(247, 247, 245, 0.86); }
.md-section--deep .md-pillars__attr { color: rgba(247, 247, 245, 0.72); }
.md-header {
background: rgba(247, 247, 245, 0.92);
border-bottom-color: rgba(22, 23, 26, 0.14);
box-shadow: 0 10px 28px rgba(15, 17, 21, 0.08);
}
.md-header__inner {
min-height: 84px;
padding-block: 10px;
}
.md-header__logo { color: var(--md-fg); min-width: 220px; }
.md-logo svg,
.md-logo-svg {
height: clamp(52px, 5.8vw, 64px);
width: auto;
overflow: visible;
}
.md-header__logo:hover { color: #D4AF37; }
.md-header__cta {
display: inline-flex;
align-items: center;
gap: 12px;
}
.md-hide-mobile { display: none; }
@media (min-width: 1024px) {
.md-hide-mobile { display: inline-flex; }
}
.md-nav__link { color: var(--md-fg-soft); }
.md-nav__link:hover,
.md-nav__item:hover .md-nav__link {
color: var(--md-fg);
background: rgba(212, 175, 55, 0.10);
}
.md-header__cta .md-btn,
.md-header__cta > .md-btn {
background: var(--md-accent);
color: #F7F7F5;
border-radius: 8px;
box-shadow: 0 8px 20px rgba(212, 175, 55, 0.22);
}
.md-btn,
.md-hero__cta,
.md-final-cta--gold__submit,
.md-mobile-menu__cta,
.md-sticky-cta {
border-radius: 8px;
}
.md-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 0 22px;
font-family: var(--md-font-sans);
font-size: 15px;
font-weight: 700;
line-height: 1.1;
border: 1px solid transparent;
transition: transform var(--md-dur-base) var(--md-ease), background var(--md-dur-base) var(--md-ease), border-color var(--md-dur-base) var(--md-ease);
}
.md-btn:hover { transform: translateY(-1px); }
.md-btn--primary {
background: var(--md-accent);
color: #F7F7F5;
box-shadow: 0 12px 24px rgba(212, 175, 55, 0.24);
}
.md-btn--primary:hover { background: var(--md-accent-deep); }
.md-btn--ghost {
background: #ffffff;
color: var(--md-fg);
border-color: var(--md-rule-strong);
}
.md-btn--ghost:hover {
border-color: #D4AF37;
background: #EEEEEB;
}
.md-hero {
padding-block: clamp(48px, 7vw, 94px);
background:
linear-gradient(135deg, rgba(212, 175, 55, 0.18), transparent 32%),
linear-gradient(315deg, rgba(212, 175, 55, 0.14), transparent 38%),
var(--md-bg);
border-bottom-color: rgba(22, 23, 26, 0.12);
overflow: visible;
}
.md-hero::before,
.md-hero__h1::before { display: none; }
.md-hero--split .md-hero__inner--split {
gap: clamp(28px, 5vw, 68px);
align-items: center;
}
@media (min-width: 1024px) {
.md-hero--split .md-hero__inner--split {
grid-template-columns: minmax(0, 0.95fr) minmax(460px, 1.05fr);
}
}
.md-hero__inner-copy { gap: 18px; max-width: 760px; }
.md-hero__eyebrow {
color: #D4AF37;
letter-spacing: 0.12em;
}
.md-hero__eyebrow::before {
width: 34px;
height: 3px;
background: var(--md-accent-hi);
border-radius: 99px;
}
.md-hero__h1 {
color: var(--md-fg);
font-size: clamp(42px, 6.4vw, 78px);
line-height: 1.01;
letter-spacing: 0;
text-wrap: balance;
}
.md-hero__h1 em,
.md-hero__h1 .md-em { color: #D4AF37; }
.md-hero__sub {
color: var(--md-fg-soft);
max-width: 60ch;
}
.md-hero__cta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
padding: 0;
min-height: 0;
background: transparent;
box-shadow: none;
}
.md-hero__cta:hover { background: transparent; }
.md-hero__microproof {
color: var(--md-fg-soft);
letter-spacing: 0.06em;
text-transform: none;
font-size: 13px;
}
.md-hero__microproof::before { background: var(--md-accent-hi); }
.md-hero__portrait {
max-width: 720px;
padding: clamp(12px, 2vw, 18px);
background: #ffffff;
border: 1px solid var(--md-rule);
border-radius: 8px;
box-shadow: 0 24px 60px rgba(15, 17, 21, 0.16);
}
@media (min-width: 1024px) {
.md-hero__portrait { transform: none; justify-self: end; }
}
.md-hero__portrait-img {
aspect-ratio: 16 / 11;
object-fit: contain;
object-position: center;
padding: clamp(8px, 1.4vw, 14px);
background: #0F1115;
border-radius: 6px;
filter: none;
}
.md-hero__portrait-caption {
color: var(--md-fg-soft);
border-left: 4px solid var(--md-accent-hi);
padding-left: 12px;
}
.md-hero__trust-stamp {
top: -16px;
right: -16px;
width: clamp(68px, 8vw, 92px);
height: clamp(68px, 8vw, 92px);
}
.md-live-ledger {
background: #0F1115;
border: 0;
padding-block: 18px;
}
.md-live-ledger__row { padding-inline: 0; }
.md-live-ledger__item {
border-color: rgba(247, 247, 245, 0.16);
padding: 12px 16px;
}
.md-live-ledger__figure {
color: #F7F7F5;
font-weight: 700;
}
.md-live-ledger__figure::before { color: #D4AF37; }
.md-service-card,
.md-asym-feature,
.md-process-steps__step,
.md-first-30-days__card,
.md-faq-cards__card,
.md-press-card {
border-radius: 8px;
background: #ffffff;
box-shadow: 0 12px 30px rgba(15, 17, 21, 0.08);
}
.md-asym-feature {
gap: 20px;
border-color: rgba(22, 23, 26, 0.12);
}
.md-asym-feature__media {
aspect-ratio: 16 / 9;
background: #EEEEEB;
border-radius: 8px;
}
.md-asym-feature__img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 14px;
}
.md-asym-feature__title,
.md-asym-list__title,
.md-industries-list__name,
.md-process-steps__name,
.md-first-30-days__title,
.md-faq-cards__question { color: var(--md-fg); }
.md-asym-feature__summary,
.md-asym-list__summary,
.md-industries-list__summary,
.md-process-steps__body,
.md-first-30-days__body,
.md-faq-cards__answer { color: var(--md-fg-soft); }
.md-asym-feature__num,
.md-asym-list__num,
.md-asym-feature__outcome { color: #D4AF37; }
.md-asym-list__link {
padding: 18px 18px;
border-radius: 8px;
}
.md-asym-list__item { border-top: 0; }
.md-asym-list__item + .md-asym-list__item { margin-top: 8px; }
.md-asym-list__item:last-child { border-bottom: 0; }
.md-asym-list__link:hover {
padding-left: 22px;
background: #ffffff;
box-shadow: 0 10px 26px rgba(15, 17, 21, 0.08);
}
.md-how-we-help__grid,
.md-final-cta__grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(24px, 4vw, 56px);
align-items: start;
}
@media (min-width: 960px) {
.md-how-we-help__grid,
.md-final-cta__grid { grid-template-columns: 1fr 1fr; }
}
.md-how-we-help__copy {
display: flex;
flex-direction: column;
gap: 14px;
}
.md-how-we-help__list {
display: grid;
gap: 12px;
}
.md-how-we-help__bullet {
display: grid;
grid-template-columns: 34px 1fr;
gap: 14px;
align-items: start;
padding: 16px;
background: #ffffff;
border: 1px solid var(--md-rule);
border-radius: 8px;
box-shadow: 0 10px 24px rgba(15, 17, 21, 0.06);
}
.md-how-we-help__check {
width: 34px;
height: 34px;
color: #0F1115;
background: #D4AF37;
}
.md-how-we-help__check svg { width: 18px; height: 18px; }
.md-how-we-help__bullet-text {
color: var(--md-fg);
font-weight: 650;
line-height: 1.45;
}
.md-industries__list,
.md-process__grid,
.md-first30__grid,
.md-faq-cards__grid {
display: grid;
gap: 14px;
}
@media (min-width: 760px) {
.md-process__grid,
.md-first30__grid,
.md-faq-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1120px) {
.md-process__grid,
.md-first30__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.md-industries__row,
.md-process__card,
.md-first30__card,
.md-faq-cards__card {
background: #ffffff;
border: 1px solid var(--md-rule);
border-radius: 8px;
box-shadow: 0 10px 24px rgba(15, 17, 21, 0.07);
}
.md-industries__row {
display: grid;
grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.5fr) auto;
gap: 18px;
align-items: center;
padding: 20px 22px;
}
.md-industries__row:hover {
border-color: var(--md-rule-hover);
transform: translateY(-1px);
}
.md-industries__name {
color: var(--md-fg);
font-family: var(--md-font-display);
font-size: clamp(22px, 2.4vw, 30px);
line-height: 1.12;
}
.md-industries__summary { color: var(--md-fg-soft); line-height: 1.5; }
.md-industries__arrow {
color: var(--md-accent);
font-size: 28px;
}
.md-process__illustration {
max-width: 880px;
margin-bottom: 24px;
opacity: 1;
}
.md-process__card,
.md-first30__card,
.md-faq-cards__card {
padding: clamp(20px, 2.6vw, 30px);
}
.md-process__num,
.md-first30__label {
color: #D4AF37;
font-family: var(--md-font-mono);
font-weight: 800;
}
.md-process__name,
.md-first30__title {
margin: 10px 0 8px;
color: var(--md-fg);
font-family: var(--md-font-display);
font-size: clamp(21px, 2.2vw, 28px);
line-height: 1.16;
}
.md-process__body,
.md-first30__body { color: var(--md-fg-soft); }
.md-process__visual-img {
aspect-ratio: 16 / 10;
object-fit: contain;
background: #0F1115;
padding: 10px;
}
.md-pull-quote-section {
padding-block: clamp(50px, 7vw, 96px);
}
.md-pull-quote__text {
font-size: clamp(34px, 5.4vw, 74px);
letter-spacing: 0;
}
.md-pull-quote__frame {
opacity: 0.35;
}
.md-operator-quote {
max-width: none;
padding-block: clamp(44px, 6vw, 84px);
background: #F1F1EE;
}
.md-operator-quote__figure {
max-width: 1040px;
margin: 0 auto;
}
.md-operator-quote__quote {
color: var(--md-fg);
font-family: var(--md-font-display);
font-size: clamp(27px, 4vw, 50px);
line-height: 1.12;
margin: 0 0 20px;
}
.md-operator-quote__attribution { color: #D4AF37; }
.md-final-cta--gold,
.md-final-cta {
background:
linear-gradient(135deg, rgba(212, 175, 55, 0.20), transparent 34%),
#0F1115;
padding-block: clamp(52px, 7vw, 96px);
}
.md-final-cta--gold::before { display: none; }
.md-final-cta__copy {
display: flex;
flex-direction: column;
gap: 14px;
}
.md-final-cta__h2,
.md-final-cta__lede { color: #F7F7F5; }
.md-final-cta__lede {
font-size: clamp(17px, 1.8vw, 21px);
line-height: 1.55;
}
.md-final-cta__card {
background: #ffffff;
color: var(--md-fg);
border-radius: 8px;
padding: clamp(20px, 3vw, 34px);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.20);
}
.md-page,
.md-single,
.md-section--tight {
padding-block: clamp(44px, 6vw, 84px);
}
.md-page__head,
.md-single__head,
.md-archive-head {
margin-bottom: clamp(22px, 3vw, 38px);
}
.md-prose {
color: var(--md-fg-soft);
font-size: clamp(17px, 1.5vw, 19px);
line-height: 1.72;
}
.md-prose > * + * { margin-top: 1.05em; }
.md-prose h2,
.md-prose h3 {
color: var(--md-fg);
line-height: 1.16;
margin-top: 1.5em;
}
.md-prose a { color: #D4AF37; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.md-single__hero {
margin: 0 0 clamp(24px, 4vw, 44px);
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--md-rule);
}
.md-single__hero img {
width: 100%;
max-height: 520px;
object-fit: cover;
}
.md-single__foot {
margin-top: clamp(30px, 5vw, 58px);
padding-top: 24px;
border-top: 1px solid var(--md-rule);
}
.md-footer {
background: #0F1115;
color: #D4AF37;
padding-block: clamp(44px, 6vw, 76px) 36px;
}
.md-footer__inner {
grid-template-columns: 1fr;
gap: 28px;
}
.md-footer__brand h3 {
color: #F7F7F5;
font-family: var(--md-font-display);
font-size: clamp(28px, 3vw, 40px);
line-height: 1.1;
margin: 0;
}
.md-footer__brand p,
.md-footer__col a { color: #D4AF37; }
.md-footer__col h4 { color: #D4AF37; }
@media (min-width: 960px) {
.md-footer__inner { grid-template-columns: 1.6fr repeat(4, 1fr); }
}
@media (max-width: 760px) {
.md-header__inner { min-height: 76px; padding-inline: 16px; }
.md-header__logo { min-width: 176px; }
.md-logo svg,
.md-logo-svg { height: 48px; }
.md-hero { padding-block: 36px 48px; }
.md-hero__h1 { font-size: clamp(38px, 12vw, 54px); }
.md-hero__cta .md-btn { width: 100%; }
.md-hero__portrait { padding: 10px; }
.md-hero__trust-stamp { top: -10px; right: -8px; }
.md-industries__row {
grid-template-columns: 1fr auto;
}
.md-industries__summary {
grid-column: 1 / -1;
}
}
/* v4.3.1 — second audit pass: mobile nav, archives, landing, internal pages */
.md-mobile-menu {
background: #F7F7F5;
color: var(--md-fg);
}
.md-mobile-section { border-bottom-color: var(--md-rule); }
.md-mobile-section__head { color: var(--md-fg); }
.md-mobile-section__body a { color: var(--md-fg-soft); }
.md-mobile-menu__cta {
background: var(--md-accent);
color: #F7F7F5;
}
.md-nav-toggle__bar { background: var(--md-fg); }
.md-mega {
background: #ffffff;
border-color: var(--md-rule);
box-shadow: 0 24px 64px rgba(15, 17, 21, 0.16);
}
.md-mega__feature {
background: #EEEEEB;
border-color: var(--md-rule);
}
.md-mega__feature-num,
.md-mega__feature-eyebrow,
.md-mega__feature-link,
.md-mega__link:hover .md-mega__link-title { color: #D4AF37; }
.md-sticky-cta {
background: var(--md-accent);
color: #F7F7F5;
box-shadow: 0 14px 34px rgba(212, 175, 55, 0.28);
}
.md-landing {
padding-block: clamp(34px, 5vw, 70px);
}
.md-page__head {
display: flex;
flex-direction: column;
gap: 12px;
max-width: 860px;
}
.md-section__mark {
color: #D4AF37;
font-family: var(--md-font-mono);
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.md-post-list {
display: grid;
gap: 14px;
}
.md-post-list__item { margin: 0; }
.md-post-list__link {
display: grid;
gap: 8px;
padding: clamp(18px, 2.5vw, 28px);
background: #ffffff;
border: 1px solid var(--md-rule);
border-radius: 8px;
box-shadow: 0 10px 24px rgba(15, 17, 21, 0.06);
transition: transform var(--md-dur-base) var(--md-ease), border-color var(--md-dur-base) var(--md-ease);
}
.md-post-list__link:hover {
transform: translateY(-1px);
border-color: var(--md-rule-hover);
}
.md-post-list__date { color: #D4AF37; }
.md-post-list__excerpt {
color: var(--md-fg-soft);
max-width: 68ch;
}
.md-pagination {
margin-top: clamp(24px, 4vw, 44px);
}
.md-pagination .nav-links {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.md-pagination a,
.md-pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 0 14px;
border: 1px solid var(--md-rule);
border-radius: 8px;
background: #ffffff;
}
.md-pagination .current {
background: var(--md-fg);
color: #F7F7F5;
}
.md-landing .md-container--narrow {
max-width: 1180px;
}
.md-landing .md-prose {
display: grid;
grid-template-columns: 1fr;
gap: clamp(20px, 4vw, 48px);
align-items: start;
}
.md-landing .md-prose > * {
margin-top: 0;
}
.md-landing form,
.md-landing .md-consultation-form,
.md-landing .md-form {
background: #ffffff;
border: 1px solid var(--md-rule);
border-radius: 8px;
padding: clamp(20px, 3vw, 34px);
box-shadow: 0 18px 42px rgba(15, 17, 21, 0.12);
}
body { padding-bottom: 74px; }
@media (min-width: 960px) {
.md-landing .md-prose {
grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.8fr);
}
}
@media (min-width: 1024px) {
body { padding-bottom: 0; }
}
/* v4.3.2 — header cascade cleanup and landing distraction reduction */
.md-header__cta {
height: auto;
padding: 0;
background: transparent;
color: inherit;
border-radius: 0;
box-shadow: none;
}
.md-header__cta:hover {
background: transparent;
}
.custom-logo-link img,
.md-logo img {
width: auto;
max-width: min(240px, 52vw);
max-height: clamp(48px, 5.8vw, 64px);
}
.md-nav-toggle__bar {
position: relative;
}
.md-nav-toggle__bar::before,
.md-nav-toggle__bar::after {
content: "";
position: absolute;
left: 0;
width: 24px;
height: 2px;
background: currentColor;
border-radius: 1px;
}
.md-nav-toggle__bar::before { top: -8px; }
.md-nav-toggle__bar::after { top: 8px; }
.md-nav-toggle[aria-expanded="true"] .md-nav-toggle__bar {
background: transparent;
}
.md-nav-toggle[aria-expanded="true"] .md-nav-toggle__bar::before {
transform: translateY(8px) rotate(45deg);
}
.md-nav-toggle[aria-expanded="true"] .md-nav-toggle__bar::after {
transform: translateY(-8px) rotate(-45deg);
}
.page-template-template-landing .md-nav,
.page-template-template-landing .md-header__cta .md-btn,
.page-template-template-landing .md-footer__col,
.page-template-template-landing .md-sticky-cta {
display: none;
}
.page-template-template-landing .md-header__inner {
justify-content: center;
}
.page-template-template-landing .md-footer__inner {
grid-template-columns: 1fr;
}
.page-template-template-landing .md-footer__brand {
max-width: 780px;
margin-inline: auto;
text-align: center;
}
/* =========================================================================
v4.3.0 — Layout/overflow + responsive polish (round 1 fixes)
Appended 2026-05-17 — append only, do not rewrite earlier rules.
========================================================================= */
/* Global horizontal-scroll guard. Originally set overflow-x: clip on body,
but that BREAKS position: sticky on every descendant (header included).
Browser implementations still treat non-visible overflow on body as a
scroll container that defeats sticky. Move the clip to a non-ancestor
layer instead — main content can contain its own overflow without
killing the sticky header. (Brian-reported 2026-05-18.) */
html, body { max-width: 100vw; }
main.wp-block-group { overflow-x: clip; }
/* Source-order fix: earlier rules set .md-btn { display:inline-flex } AFTER
.md-hide-mobile { display:none }, with equal specificity, so the desktop
header CTA stayed visible on mobile and overflowed the 390px viewport by
~60px. Lock the utility with !important — it's the contract for the class. */
.md-hide-mobile { display: none !important; }
@media (min-width: 1024px) {
.md-hide-mobile { display: inline-flex !important; }
}
/* Mobile-only: ensure main has padding-bottom so the fixed sticky CTA never
covers final-section content (form submit buttons, footer links). */
@media (max-width: 1023.98px) {
body { padding-bottom: 88px; }
}
/* =========================================================================
v4.5.0 — Homepage dead-space bug: section element was grid, container was
child #1, column #2 stayed empty.
Earlier rules at line 196 (.md-how-we-help) and 232 (.md-faq-cards) gave
the SECTION element `display:grid; grid-template-columns: 1fr 1fr`. The
section's only child is the .md-container wrapper, so column 2 was empty
and the entire right half of those sections was blank. Override the
section to block; the actual 2-col grid lives on `__grid` (already
defined at line 1128 and 1172). Apply to homepage and any other page
that uses these section classes.
========================================================================= */
section.md-how-we-help,
section.md-faq-cards {
display: block !important;
grid-template-columns: none !important;
}
/* FAQ grid: 6 cards at the homepage. 2-col on tablet, 3-col on desktop.
Without 3-col, each card spans ~600px and reads as a half-empty card. */
@media (min-width: 1120px) {
.md-faq-cards__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* First-30-days cards: card 4 contains a dashboard image so it's taller
than cards 1-3. Stretch all cards to equal height so the row reads as
a deliberate quartet, not three short cards next to a tall one. */
.md-first30__grid { align-items: stretch; }
.md-first30__card {
display: flex;
flex-direction: column;
height: 100%;
}
.md-first30__body { flex: 1 1 auto; }
/* Same equalization for FAQ + service cards. */
.md-faq-cards__grid { align-items: stretch; }
.md-faq-cards__card { height: 100%; }
/* =========================================================================
v4.5.0 — Consultation form (homepage variant)
Previous CSS only scoped `.md-form` styles under `.md-landing`, so on the
homepage the form fell back to inline-default browser rendering: labels
floated next to inputs, the email input was half-width and clipped values
mid-character. Add a sitewide rule keyed on `.md-form--consultation`.
========================================================================= */
.md-form--consultation {
display: grid;
grid-template-columns: 1fr;
gap: var(--md-space-4);
background: #ffffff;
border: 1px solid var(--md-rule);
border-radius: 12px;
padding: clamp(22px, 3vw, 32px);
box-shadow: 0 18px 42px rgba(15, 17, 21, 0.12);
}
.md-form--consultation .md-field {
display: flex;
flex-direction: column;
gap: 6px;
margin: 0;
}
.md-form--consultation .md-field__label {
display: block;
font-family: var(--md-font-mono, "JetBrains Mono", ui-monospace, monospace);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--md-fg-muted, #5E6066);
}
.md-form--consultation .md-field__input,
.md-form--consultation select.md-field__input {
width: 100%;
min-height: 48px;
padding: 12px 14px;
background: #F7F7F5;
border: 1px solid var(--md-rule-strong, #E3E4E2);
border-radius: 8px;
font-family: var(--md-font-sans);
font-size: 16px;
line-height: 1.4;
color: var(--md-fg);
appearance: none;
-webkit-appearance: none;
transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
/* Placeholder color — explicit rule. Absent the rule, browsers default to ~#767676 which gives 4.37:1 on bone (fails). */
.md-form--consultation .md-field__input::placeholder,
.md-form--consultation textarea.md-field__input::placeholder {
color: #5E6066; /* 4.7:1 on #F7F7F5 — WCAG AA normal text */
opacity: 1; /* Firefox defaults to 0.54 placeholder opacity which would crush contrast */
}
.md-form--consultation .md-field__input:focus,
.md-form--consultation select.md-field__input:focus {
outline: 2px solid var(--md-accent, #D4AF37);
outline-offset: 2px;
border-color: var(--md-accent, #D4AF37);
background: #ffffff;
box-shadow: 0 0 0 4px #ffffff, 0 0 0 6px rgba(212, 175, 55, 0.65); /* WCAG 2.2 SC 1.4.11 — visible ring (was 0.18 opacity = 1.14:1 FAIL) */
}
.md-form--consultation select.md-field__input {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 38px;
}
.md-form--consultation .md-field__hint {
margin: 0;
font-family: var(--md-font-mono, "JetBrains Mono", ui-monospace, monospace);
font-size: 12px;
letter-spacing: 0.04em;
color: var(--md-fg-muted, #5E6066);
}
.md-form--consultation .md-btn--primary {
justify-self: start;
min-height: 52px;
padding: 0 28px;
font-size: 16px;
}
.md-form--consultation .md-form__response {
font-size: 14px;
line-height: 1.55;
padding: 12px 14px;
border-radius: 8px;
background: rgba(15, 17, 21, 0.06);
border: 1px solid var(--md-rule);
}
.md-form--consultation .md-form__response[hidden] { display: none; }
@media (min-width: 560px) {
.md-form--consultation {
grid-template-columns: 1fr 1fr;
}
.md-form--consultation .md-field:nth-of-type(3),
.md-form--consultation .md-field__hint,
.md-form--consultation .md-btn--primary,
.md-form--consultation .md-form__response {
grid-column: 1 / -1;
}
}
/* =========================================================================
v4.8.0 — Mega menu polish + footer banner CTA
The mega menu now opens as a polished editorial dropdown card with a soft
triangular pointer to the trigger, a slide-down animation, and clearer
typographic hierarchy. Service icons (via CSS-rendered glyphs) hint at
each link so the menu reads at a glance.
========================================================================= */
/* MEGA MENU: re-assert the overlay positioning the v4.x regression broke -- */
@media (min-width: 1024px) {
.md-nav__item--mega { position: relative; }
.md-mega {
position: absolute !important;
top: 100% !important;
left: 50% !important;
transform: translateX(-50%) translateY(-6px);
width: min(1040px, 92vw);
margin-top: 10px;
background: #ffffff;
border: 1px solid rgba(15, 17, 21, 0.10);
border-radius: 14px;
box-shadow:
0 24px 48px rgba(15, 17, 21, 0.12),
0 8px 16px rgba(15, 17, 21, 0.08),
0 0 0 1px rgba(212, 175, 55, 0.06) inset;
opacity: 0;
pointer-events: none;
visibility: hidden;
transition:
opacity 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
visibility 0s linear 220ms;
z-index: 110;
}
.md-mega::before {
content: "";
position: absolute;
top: -7px;
left: 50%;
width: 14px;
height: 14px;
background: #ffffff;
border-top: 1px solid rgba(15, 17, 21, 0.10);
border-left: 1px solid rgba(15, 17, 21, 0.10);
transform: translateX(-50%) rotate(45deg);
border-top-left-radius: 3px;
}
/* Invisible bridge so the cursor can cross the gap between trigger and
menu without re-triggering the close. */
.md-mega::after {
content: "";
position: absolute;
top: -16px;
left: 0;
right: 0;
height: 16px;
}
.md-nav__item--mega:hover .md-mega,
.md-nav__item--mega:focus-within .md-mega,
.md-nav__item--mega .md-mega:hover {
display: block;
opacity: 1;
pointer-events: auto;
visibility: visible;
transform: translateX(-50%) translateY(0);
transition:
opacity 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
visibility 0s;
}
/* Trigger active-state when its mega is open: underline + accent color */
.md-nav__item--mega:hover .md-nav__link,
.md-nav__item--mega:focus-within .md-nav__link {
color: var(--md-accent);
background: var(--md-accent-tint);
}
.md-nav__caret {
transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
display: inline-block;
font-size: 9px;
}
.md-nav__item--mega:hover .md-nav__caret,
.md-nav__item--mega:focus-within .md-nav__caret {
transform: rotate(180deg);
}
}
/* MEGA MENU interior --------------------------------------------------------*/
.md-mega__inner {
display: grid;
grid-template-columns: 1fr 1fr 0.9fr;
gap: 28px 36px;
padding: 28px;
}
.md-mega__inner--two { grid-template-columns: 1.1fr 1fr; }
.md-mega__col {
display: flex;
flex-direction: column;
gap: 4px;
}
.md-mega__col-head {
font-family: var(--md-font-mono);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--md-accent);
padding-bottom: 12px;
border-bottom: 1px solid rgba(15, 17, 21, 0.10);
margin: 0 0 8px;
}
.md-mega__list {
display: flex;
flex-direction: column;
gap: 2px;
}
.md-mega__link {
display: grid;
grid-template-columns: 36px 1fr;
gap: 12px;
align-items: start;
padding: 12px;
margin: 0 -12px;
border-radius: 10px;
text-decoration: none;
color: var(--md-fg);
transition: background 180ms ease, transform 180ms ease;
position: relative;
}
.md-mega__link::before {
content: "";
grid-row: 1 / span 2;
align-self: center;
width: 32px;
height: 32px;
border-radius: 8px;
background: var(--md-accent-tint);
color: var(--md-accent);
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--md-font-mono);
font-size: 13px;
font-weight: 700;
transition: background 180ms ease, transform 180ms ease;
}
/* Icon glyphs per service. Using monospace numerals as a clean editorial
stand-in until real SVGs are produced. */
.md-mega__link[href*="seo"]::before { content: "S"; }
.md-mega__link[href*="google-ads"]::before { content: "G"; }
.md-mega__link[href*="facebook-ads"]::before { content: "M"; }
.md-mega__link[href*="ai-automation"]::before { content: "A"; }
.md-mega__link[href*="crm-development"]::before { content: "C"; }
.md-mega__link[href*="digital-marketing"]::before{ content: "F"; }
.md-mega__link[href*="healthcare"]::before { content: "H"; }
.md-mega__link[href*="legal"]::before { content: "L"; }
.md-mega__link[href*="home-services"]::before { content: "R"; }
.md-mega__link[href*="real-estate"]::before { content: "E"; }
.md-mega__link[href*="founders"]::before { content: "T"; }
.md-mega__link[href*="engagements"]::before { content: "$"; }
.md-mega__link[href*="questions"]::before { content: "?"; }
.md-mega__link[href*="about"]:not([href*="founders"])::before { content: "M"; }
.md-mega__link:hover {
background: var(--md-bg-soft);
transform: translateX(2px);
}
.md-mega__link:hover::before {
background: var(--md-accent);
color: #0F1115;
}
.md-mega__link-title {
display: block;
font-family: var(--md-font-sans);
font-size: 15px;
font-weight: 600;
color: var(--md-fg);
letter-spacing: -0.005em;
margin: 0 0 2px;
transition: color 180ms ease;
}
.md-mega__link:hover .md-mega__link-title { color: var(--md-accent); }
.md-mega__link-desc {
display: block;
font-family: var(--md-font-sans);
font-size: 12.5px;
line-height: 1.5;
color: var(--md-fg-muted);
}
/* Feature column (right side) ----------------------------------------------*/
.md-mega__feature {
position: relative;
display: flex;
flex-direction: column;
gap: 14px;
padding: 22px;
background: linear-gradient(155deg, var(--md-bg-soft) 0%, rgba(212, 175, 55, 0.08) 100%);
border: 1px solid rgba(212, 175, 55, 0.22);
border-radius: 12px;
overflow: hidden;
}
.md-mega__feature::after {
content: "";
position: absolute;
top: -40px;
right: -40px;
width: 140px;
height: 140px;
background: radial-gradient(circle, rgba(212, 175, 55, 0.18) 0%, transparent 70%);
pointer-events: none;
}
.md-mega__feature-eyebrow {
font-family: var(--md-font-mono);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--md-accent);
}
.md-mega__feature-num {
font-family: var(--md-font-display);
font-size: 48px;
font-weight: 500;
line-height: 1;
color: var(--md-fg);
letter-spacing: -0.02em;
font-style: italic;
}
.md-mega__feature-body {
font-family: var(--md-font-sans);
font-size: 13.5px;
line-height: 1.55;
color: var(--md-fg-soft);
}
.md-mega__feature-link {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: auto;
padding-top: 6px;
font-family: var(--md-font-sans);
font-size: 13px;
font-weight: 600;
color: var(--md-accent);
text-decoration: none;
transition: gap 180ms ease, color 180ms ease;
}
.md-mega__feature-link:hover {
gap: 10px;
color: var(--md-accent-hi);
}
/* FOOTER: pre-columns CTA banner -------------------------------------------*/
.md-footer__cta-banner {
display: grid;
grid-template-columns: 1fr;
gap: 18px;
align-items: center;
padding: 28px;
margin-bottom: 36px;
background: linear-gradient(135deg, rgba(212, 175, 55, 0.10) 0%, rgba(247, 247, 245, 0.04) 100%);
border: 1px solid rgba(212, 175, 55, 0.22);
border-radius: 14px;
}
@media (min-width: 760px) {
.md-footer__cta-banner {
grid-template-columns: minmax(0, 1.4fr) minmax(260px, auto);
gap: 36px;
padding: 32px 36px;
align-items: center;
}
}
.md-footer__cta-eyebrow {
font-family: var(--md-font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #D4AF37;
margin: 0 0 6px;
}
.md-footer__cta-title {
font-family: var(--md-font-display);
font-size: clamp(22px, 2.6vw, 32px);
font-weight: 500;
line-height: 1.18;
color: #F1F1EE;
margin: 0 0 6px;
letter-spacing: -0.015em;
}
.md-footer__cta-title em { font-style: italic; color: #D4AF37; }
.md-footer__cta-sub {
font-family: var(--md-font-sans);
font-size: 14.5px;
line-height: 1.55;
color: rgba(241, 241, 238, 0.78);
margin: 0;
max-width: 56ch;
}
.md-footer__cta-buttons {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
@media (min-width: 760px) {
.md-footer__cta-buttons {
align-items: flex-end;
text-align: right;
}
}
.md-footer__cta-buttons .md-btn--primary {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 22px;
background: var(--md-accent);
color: var(--md-bg-deep);
font-family: var(--md-font-sans);
font-size: 15px;
font-weight: 600;
border-radius: 10px;
text-decoration: none;
transition: background 180ms ease, transform 180ms ease;
}
.md-footer__cta-buttons .md-btn--primary:hover {
background: #D4AF37;
transform: translateY(-1px);
}
.md-footer__cta-secondary {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 0;
font-family: var(--md-font-mono);
font-size: 12.5px;
letter-spacing: 0.06em;
color: rgba(241, 241, 238, 0.80);
text-decoration: none;
border-bottom: 1px solid rgba(212, 175, 55, 0.28);
transition: color 180ms ease, border-color 180ms ease;
}
.md-footer__cta-secondary:hover {
color: #D4AF37;
border-bottom-color: #D4AF37;
}
/* FOOTER columns: stronger visual hierarchy --------------------------------*/
.md-footer__col-head {
font-family: var(--md-font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--md-accent);
margin: 0 0 14px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(247, 247, 245, 0.10);
}
.md-footer__col ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.md-footer__col li { margin: 0; }
.md-footer__col a {
display: inline-flex;
align-items: center;
padding: 6px 0;
font-family: var(--md-font-sans);
font-size: 14px;
color: rgba(241, 241, 238, 0.86);
text-decoration: none;
transition: color 180ms ease, padding-left 180ms ease;
}
.md-footer__col a:hover {
color: #D4AF37;
padding-left: 6px;
}
.md-footer__brand-statement {
font-family: var(--md-font-display);
font-style: italic;
font-size: 20px;
line-height: 1.35;
color: #F1F1EE;
margin: 0;
max-width: 32ch;
}
.md-footer__brand p:not(.md-footer__brand-statement) {
font-family: var(--md-font-sans);
font-size: 13.5px;
line-height: 1.6;
color: rgba(241, 241, 238, 0.74);
margin: 14px 0 0;
}
.md-footer__meta {
margin-top: 36px;
padding-top: 24px;
border-top: 1px solid rgba(247, 247, 245, 0.10);
}
.md-footer__meta p {
font-family: var(--md-font-mono);
font-size: 11.5px;
letter-spacing: 0.08em;
color: var(--md-fg-muted);
margin: 0;
}
/* MOBILE menu: bigger heading typography + opening transition --------------*/
@media (max-width: 1023.98px) {
.md-mega { display: none !important; }
}
/* =========================================================================
v4.9.0 — Related-analysis blocks on industry and service pages
Lists 2-3 contextual links to recently published cluster posts, sitting
just above the final-CTA so it intercepts buyers who finished reading the
pillar but are not yet ready for the consult.
========================================================================= */
.md-related-section {
padding-block: clamp(48px, 7vw, 96px);
}
.md-related__grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 760px) {
.md-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1120px) {
.md-related__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.md-related__item { margin: 0; }
.md-related__link {
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
padding: 22px 24px;
background: #ffffff;
border: 1px solid var(--md-rule);
border-radius: 12px;
text-decoration: none;
color: inherit;
transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
border-color 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
position: relative;
}
.md-related__link::after {
content: "→";
position: absolute;
top: 22px;
right: 24px;
color: var(--md-accent);
font-size: 18px;
transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.md-related__link:hover {
transform: translateY(-2px);
box-shadow: 0 18px 38px rgba(15, 17, 21, 0.10);
border-color: var(--md-accent-tint-strong);
}
.md-related__link:hover::after { transform: translateX(4px); }
.md-related__link-title {
display: block;
font-family: var(--md-font-display);
font-size: 18px;
font-weight: 500;
line-height: 1.32;
color: var(--md-fg);
letter-spacing: -0.005em;
margin-right: 32px;
}
.md-related__link-desc {
display: block;
font-family: var(--md-font-sans);
font-size: 14px;
line-height: 1.55;
color: var(--md-fg-muted);
}
/* Blog post body inside .md-prose: tighten table styling, image captions,
and lists so the editorial voice reads cleanly with the new cluster posts. */
.md-prose h2 { margin-top: 1.6em; margin-bottom: 0.6em; scroll-margin-top: 96px; }
.md-prose h3 { margin-top: 1.4em; margin-bottom: 0.4em; scroll-margin-top: 96px; }
.md-prose p + p { margin-top: 0.9em; }
.md-prose ul, .md-prose ol { margin-block: 1em; padding-left: 1.4em; }
.md-prose li { margin-block: 0.4em; }
.md-prose a { color: var(--md-accent); border-bottom: 1px solid var(--md-accent-tint-strong); }
.md-prose a:hover { color: var(--md-accent-hi); border-bottom-color: var(--md-accent); }
/* =========================================================================
v4.10.0 — Auto table of contents on cluster posts
Server-rendered