/* Milesy Media — design tokens + shared styles
   Quick agency landing kit. Single CSS file, no build step. */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #0a0a0f;
  --bg-soft:   #11111a;
  --bg-card:   #161624;
  --border:    rgba(255,255,255,0.08);
  --border-2:  rgba(255,255,255,0.14);
  --text:      #f2f2f5;
  --text-dim:  rgba(242,242,245,0.65);
  --text-mute: rgba(242,242,245,0.42);
  --accent:    #ff6b35;        /* milesy orange */
  --accent-2:  #ffb800;        /* milesy amber  */
  --accent-3:  #7c5cff;        /* milesy violet */
  --good:      #34d399;
  --radius:    14px;
  --maxw:      1200px;
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
}
body { min-height: 100vh; display: flex; flex-direction: column; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

.font-display {
  font-family: "Playfair Display", "Georgia", serif;
  letter-spacing: -0.01em;
}
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.muted  { color: var(--text-dim); }
.dim    { color: var(--text-mute); }
.eyebrow { font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent-2); }

/* ─── Buttons ─────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: 10px; font-size: 14px; font-weight: 600;
  transition: transform .15s ease, opacity .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #1a0e00; box-shadow: 0 12px 30px rgba(255,107,53,0.28);
}
.btn-secondary {
  border: 1px solid var(--border-2); color: var(--text); background: rgba(255,255,255,0.02);
}
.btn-secondary:hover { border-color: var(--accent); }
.btn-ghost { color: var(--text-dim); }
.btn-ghost:hover { color: var(--text); }
.btn-block { width: 100%; }
.btn-lg { padding: 14px 24px; font-size: 15px; }

/* ─── Navbar ──────────────────────────────────── */
.nav {
  position: sticky;
  /* Default: nav sits directly under the .mm-stickybar (which is at top:0).
     z-index 65 > stickybar's 60 so the nav-dropdown menus overlay
     the stickybar when opened. */
  top: var(--mm-stickybar-h, 40px);
  z-index: 65;
  /* Solid background — no translucency / blur (cheap to paint, snappy
     even on older devices). */
  background: #0a0a0a;
  background-image: linear-gradient(90deg, #0a0a0a, #1a1208);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(201, 167, 106, 0.18);
  transition: top 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-row { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.brand   { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -0.01em; }
.brand .mark {
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-3) 100%);
  display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 13px;
}
.brand-name  { font-size: 17px; }
.brand-name .a { color: var(--accent); }
.nav-links   { display: flex; align-items: center; gap: 28px; font-size: 14px; color: var(--text-dim); }
.nav-links a:hover { color: var(--text); }
.nav-cta     { display: flex; align-items: center; gap: 12px; }
@media (max-width: 800px) { .nav-links { display: none; } }

/* ─── Hero ────────────────────────────────────── */
.hero { padding: 90px 0 60px; position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -200px;
  background:
    radial-gradient(600px circle at 20% 20%, rgba(255,107,53,0.18), transparent 60%),
    radial-gradient(500px circle at 80% 30%, rgba(124,92,255,0.15), transparent 60%);
  pointer-events: none;
}
.hero-grid {
  position: relative;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center;
}
@media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } }
.hero h1 {
  font-size: clamp(40px, 6vw, 72px); line-height: 1.05; font-weight: 800;
  letter-spacing: -0.025em; margin-top: 18px; margin-bottom: 24px;
}
.hero h1 .accent {
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lead { font-size: 18px; color: var(--text-dim); max-width: 540px; margin-bottom: 32px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-art {
  aspect-ratio: 4/5; border-radius: 22px; position: relative;
  background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1a 100%);
  border: 1px solid var(--border-2); overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.hero-art::before, .hero-art::after { content: ""; position: absolute; border-radius: 50%; filter: blur(40px); }
.hero-art::before { inset: -10% 50% 50% -10%; background: var(--accent); opacity: .35; }
.hero-art::after  { inset: 50% -10% -10% 50%; background: var(--accent-3); opacity: .35; }
.hero-art .stat-card {
  position: absolute; backdrop-filter: blur(8px); background: rgba(22,22,36,0.7);
  border: 1px solid var(--border-2); border-radius: 12px; padding: 14px 18px;
}
.hero-art .stat-card .num { font-size: 28px; font-weight: 800; color: var(--accent-2); }
.hero-art .stat-card .lbl { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-mute); }
.hero-art .s1 { top: 10%; left: 8%; }
.hero-art .s2 { bottom: 16%; right: 10%; }

/* ─── Sections ────────────────────────────────── */
section { padding: 80px 0; }
.section-head { text-align: center; margin-bottom: 50px; }
.section-head h2 { font-size: clamp(28px, 4vw, 44px); font-weight: 800; letter-spacing: -0.02em; margin-top: 10px; }
.section-head p  { color: var(--text-dim); max-width: 600px; margin: 14px auto 0; }

/* Service cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 880px) { .cards { grid-template-columns: 1fr; } }
.card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px; transition: transform .15s ease, border-color .15s ease;
}
.card:hover { transform: translateY(-4px); border-color: var(--accent); }
.card .icon {
  width: 48px; height: 48px; border-radius: 10px; margin-bottom: 18px;
  background: rgba(255,107,53,0.12); color: var(--accent); display: grid; place-items: center;
  font-size: 22px;
}
.card h3 { font-size: 19px; font-weight: 700; margin-bottom: 10px; }
.card p  { color: var(--text-dim); font-size: 14px; }

/* Stats strip */
.stats-strip {
  background: var(--bg-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 50px 0;
}
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; }
@media (max-width: 700px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-num { font-size: 42px; font-weight: 800; color: var(--accent-2); letter-spacing: -0.02em; }
.stat-lbl { font-size: 13px; color: var(--text-dim); margin-top: 6px; }

/* Testimonials */
.quote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 880px) { .quote-grid { grid-template-columns: 1fr; } }
.quote {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px;
}
.quote p { font-size: 17px; line-height: 1.6; margin-bottom: 18px; }
.quote .who { display: flex; align-items: center; gap: 12px; }
.quote .av {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px;
}
.quote .who small { display: block; color: var(--text-mute); font-size: 12px; }

/* CTA */
.cta {
  background: linear-gradient(135deg, rgba(255,107,53,0.12) 0%, rgba(124,92,255,0.10) 100%);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  text-align: center; padding: 80px 24px;
}
.cta h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -0.02em; }
.cta p  { color: var(--text-dim); margin: 16px auto 28px; max-width: 540px; }

/* Footer */
footer {
  padding: 40px 0; border-top: 1px solid var(--border); margin-top: auto;
  font-size: 13px; color: var(--text-mute);
}
.foot-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.foot-row a { color: var(--text-dim); }
.foot-row a:hover { color: var(--text); }

/* ─── Auth pages ──────────────────────────────── */
.auth-shell { flex: 1; display: grid; place-items: center; padding: 60px 24px; position: relative; overflow: hidden; }
.auth-shell::before {
  content: ""; position: absolute; inset: -200px;
  background: radial-gradient(700px circle at 50% 30%, rgba(255,107,53,0.14), transparent 60%);
  pointer-events: none;
}
.auth-card {
  position: relative; width: 100%; max-width: 420px;
  background: var(--bg-card); border: 1px solid var(--border-2);
  border-radius: 18px; padding: 40px 36px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.4);
}
.auth-card h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; margin: 12px 0 8px; }
.auth-card .sub { color: var(--text-dim); font-size: 14px; margin-bottom: 28px; }
.field { margin-bottom: 16px; }
.field label {
  display: block; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-mute); margin-bottom: 8px;
}
.field input {
  width: 100%; background: var(--bg-soft); border: 1px solid var(--border-2);
  color: var(--text); padding: 12px 14px; border-radius: 10px; font-size: 14px;
  transition: border-color .15s ease;
}
.field input:focus { outline: none; border-color: var(--accent); }
.divider {
  display: flex; align-items: center; gap: 10px; margin: 22px 0;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-mute);
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border-2); }

.admin-link {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 12px 14px; border-radius: 10px;
  border: 1px solid rgba(255,184,0,0.35);
  background: rgba(255,184,0,0.08); color: var(--accent-2);
  font-size: 14px; font-weight: 600;
}
.admin-link:hover { background: rgba(255,184,0,0.14); }

.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-mute); font-size: 12px; margin-bottom: 22px;
}
.back-link:hover { color: var(--text); }

.error-box {
  background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.3);
  color: #fca5a5; padding: 10px 12px; border-radius: 8px; font-size: 12px; margin-bottom: 12px;
}

/* ─── Admin dashboard ─────────────────────────── */
.admin-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
@media (max-width: 800px) { .admin-shell { grid-template-columns: 1fr; } .sidebar { display: none; } }
.sidebar {
  background: var(--bg-soft); border-right: 1px solid var(--border); padding: 22px 16px;
}
.sidebar .brand { padding: 0 8px 18px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.side-nav { display: flex; flex-direction: column; gap: 4px; }
.side-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px; color: var(--text-dim); font-size: 14px;
}
.side-nav a:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.side-nav a.active {
  color: var(--text); background: rgba(255,107,53,0.12);
  border: 1px solid rgba(255,107,53,0.25);
}
.side-nav .ico { width: 16px; opacity: .8; }

.workspace { padding: 30px 36px; }
.work-head { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 16px; margin-bottom: 30px; }
.work-head h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.work-head p { color: var(--text-dim); font-size: 14px; }
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 30px; }
@media (max-width: 800px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } }
.kpi {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px;
}
.kpi .lbl { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-mute); }
.kpi .num { font-size: 28px; font-weight: 800; margin-top: 4px; letter-spacing: -0.02em; }
.kpi .delta-up   { color: var(--good);  font-size: 12px; margin-top: 4px; }
.kpi .delta-down { color: #f87171;      font-size: 12px; margin-top: 4px; }

.panel {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px; margin-bottom: 20px;
}
.panel h3 { font-size: 16px; font-weight: 700; margin-bottom: 16px; }
.panel-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
@media (max-width: 880px) { .panel-grid { grid-template-columns: 1fr; } }
.list-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.list-row:last-child { border-bottom: 0; }
.list-row .pri { font-size: 14px; }
.list-row .sec { font-size: 12px; color: var(--text-mute); }
.badge {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  font-size: 11px; letter-spacing: 0.06em;
}
.badge-good { background: rgba(52,211,153,0.12); color: var(--good); }
.badge-warn { background: rgba(255,184,0,0.12); color: var(--accent-2); }
.badge-bad  { background: rgba(248,113,113,0.12); color: #f87171; }

.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 18px; margin-bottom: 24px; border-bottom: 1px solid var(--border);
}
.topbar .crumbs { font-size: 13px; color: var(--text-dim); }
.topbar .who { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.topbar .av {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700;
}

/* ─── Health Check ────────────────────────────── */
.hc-shell { flex: 1; padding: 60px 0 80px; position: relative; overflow: hidden; }
.hc-shell::before {
  content: ""; position: absolute; inset: -200px;
  background:
    radial-gradient(600px circle at 15% 10%, rgba(255,107,53,0.16), transparent 60%),
    radial-gradient(500px circle at 85% 25%, rgba(124,92,255,0.13), transparent 60%);
  pointer-events: none;
}
.hc-shell .container { position: relative; }
.hc-step { animation: hc-fade 280ms ease both; }
@keyframes hc-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Intro */
.hc-intro { max-width: 720px; margin: 40px auto; text-align: center; }
.hc-intro h1 {
  font-size: clamp(36px, 5.5vw, 60px); line-height: 1.05; font-weight: 800;
  letter-spacing: -0.025em; margin: 16px 0 22px;
}
.hc-intro h1 .accent {
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hc-intro .lead { color: var(--text-dim); font-size: 18px; margin-bottom: 32px; }
.hc-bullets {
  display: grid; gap: 10px; margin: 0 auto 36px; max-width: 540px;
  text-align: left; color: var(--text-dim); font-size: 14px;
}
.hc-bullets > div { display: flex; gap: 12px; align-items: flex-start; }
.hc-bullets .dot {
  flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); margin-top: 8px;
  box-shadow: 0 0 0 4px rgba(255,107,53,0.18);
}
.hc-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* Progress */
.hc-progress { max-width: 760px; margin: 20px auto 28px; }
.hc-progress-meta {
  display: flex; justify-content: space-between; font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-mute);
  margin-bottom: 10px;
}
.hc-progress-bar {
  height: 6px; background: rgba(255,255,255,0.06); border-radius: 999px; overflow: hidden;
}
.hc-progress-bar > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
  transition: width .35s ease;
}

/* Question card */
.hc-question-card {
  max-width: 760px; margin: 0 auto; padding: 36px;
  background: var(--bg-card); border: 1px solid var(--border-2);
  border-radius: 18px; box-shadow: 0 30px 60px rgba(0,0,0,0.35);
}
.hc-q-cat {
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--accent-2); margin-bottom: 10px;
}
.hc-q-prompt {
  font-size: clamp(22px, 3vw, 30px); font-weight: 700;
  letter-spacing: -0.015em; line-height: 1.25; margin-bottom: 24px;
}
.hc-q-options { display: grid; gap: 10px; }
.hc-opt {
  display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--border-2); background: rgba(255,255,255,0.02);
  color: var(--text); font-size: 15px;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.hc-opt:hover { border-color: var(--accent); transform: translateY(-1px); }
.hc-opt.is-selected {
  border-color: var(--accent);
  background: linear-gradient(90deg, rgba(255,107,53,0.10), rgba(255,184,0,0.05));
}
.hc-opt-dot {
  flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--border-2); position: relative;
}
.hc-opt.is-selected .hc-opt-dot { border-color: var(--accent); }
.hc-opt.is-selected .hc-opt-dot::after {
  content: ""; position: absolute; inset: 3px;
  border-radius: 50%; background: var(--accent);
}
.hc-nav { max-width: 760px; margin: 22px auto 0; justify-content: space-between; }
.hc-nav .btn:disabled { opacity: 0.4; cursor: not-allowed; }
.hc-nav .btn:disabled:hover { transform: none; }

/* Building */
.hc-building { text-align: center; padding: 80px 0; }
.hc-building h2 { font-size: 28px; font-weight: 800; margin: 22px 0 8px; letter-spacing: -0.02em; }
.hc-spinner {
  width: 48px; height: 48px; border-radius: 50%; margin: 0 auto;
  border: 3px solid rgba(255,255,255,0.08);
  border-top-color: var(--accent);
  animation: hc-spin 0.9s linear infinite;
}
@keyframes hc-spin { to { transform: rotate(360deg); } }

/* Results */
.hc-results-head { text-align: center; max-width: 700px; margin: 0 auto 40px; }
.hc-results-head h1 {
  font-size: clamp(34px, 5vw, 52px); font-weight: 800; letter-spacing: -0.025em;
  margin: 12px 0 14px;
}

.hc-score-band {
  display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: center;
  background: var(--bg-card); border: 1px solid var(--border-2);
  border-radius: 18px; padding: 30px; margin-bottom: 40px;
}
@media (max-width: 700px) { .hc-score-band { grid-template-columns: 1fr; text-align: center; } }
.hc-score-ring {
  width: 200px; height: 200px; border-radius: 50%; padding: 8px;
  background:
    conic-gradient(var(--accent) 0%, var(--accent-2) 62%, rgba(255,255,255,0.08) 62%);
  display: grid; place-items: center; margin: 0 auto;
}
.hc-score-ring .ring-inner {
  width: 100%; height: 100%; border-radius: 50%;
  background: var(--bg); display: grid; place-items: center;
}
.hc-score-ring .num { font-size: 56px; font-weight: 800; letter-spacing: -0.03em; color: var(--accent-2); }
.hc-score-ring .lbl { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-mute); }
.hc-score-summary h3 { font-size: 22px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.01em; }
.hc-score-summary p { margin-bottom: 14px; }
.hc-score-tags { display: flex; gap: 8px; flex-wrap: wrap; }

.hc-pillars-head { font-size: 22px; font-weight: 700; margin-bottom: 18px; letter-spacing: -0.01em; }
.hc-pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 50px; }
@media (max-width: 800px) { .hc-pillars { grid-template-columns: 1fr; } }
.hc-pillar {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
  transition: border-color .15s ease, transform .15s ease;
}
.hc-pillar:hover { transform: translateY(-2px); border-color: var(--border-2); }
.hc-pillar-head {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; margin-bottom: 14px;
}
.hc-pillar-icon {
  width: 44px; height: 44px; border-radius: 10px;
  background: rgba(255,107,53,0.10); color: var(--accent);
  display: grid; place-items: center; font-size: 20px;
}
.hc-pillar-cat { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.hc-pillar-score { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.hc-pillar-bar {
  height: 6px; border-radius: 999px; background: rgba(255,255,255,0.06); overflow: hidden;
  margin-bottom: 12px;
}
.hc-pillar-bar > span { display: block; height: 100%; transition: width .6s ease; }
.hc-pillar-good .hc-pillar-bar > span { background: linear-gradient(90deg, var(--good), #6ee7b7); }
.hc-pillar-warn .hc-pillar-bar > span { background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
.hc-pillar-bad  .hc-pillar-bar > span { background: linear-gradient(90deg, #f87171, #fca5a5); }
.hc-pillar-good { border-color: rgba(52,211,153,0.25); }
.hc-pillar-warn { border-color: rgba(255,184,0,0.22); }
.hc-pillar-bad  { border-color: rgba(248,113,113,0.25); }
.hc-pillar-note { font-size: 13px; }

/* Top recommendations */
.hc-recos { margin-bottom: 50px; }
.hc-recos h2 { font-size: 22px; font-weight: 700; margin-bottom: 18px; letter-spacing: -0.01em; }
.hc-reco-list { list-style: none; display: grid; gap: 12px; }
.hc-reco-list li {
  display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: start;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px;
}
.reco-rank {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 36px; font-weight: 800; line-height: 1;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hc-reco-list h4 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }

/* Final CTA */
.hc-cta {
  text-align: center; padding: 50px 30px;
  background: linear-gradient(135deg, rgba(255,107,53,0.14) 0%, rgba(124,92,255,0.10) 100%);
  border: 1px solid var(--border-2); border-radius: 18px;
}
.hc-cta h2 { font-size: clamp(26px, 4vw, 36px); font-weight: 800; letter-spacing: -0.02em; margin: 8px 0; }
.hc-cta p { color: var(--text-dim); margin: 12px auto 24px; max-width: 560px; }
.hc-cta-actions { justify-content: center; }

/* ─── Mobile responsive pass ─────────────────── */
@media (max-width: 720px) {
  .container { padding: 0 18px; }
  section { padding: 56px 0; }
  .hero { padding: 56px 0 40px; }
  .hero h1 { font-size: clamp(32px, 8vw, 44px); margin-bottom: 18px; }
  .hero p.lead { font-size: 16px; margin-bottom: 24px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; }
  .nav-row { height: 60px; }
  .nav-cta { gap: 6px; }
  .nav-cta .btn { padding: 8px 12px; font-size: 12px; }
  .nav-cta .btn-ghost { display: none; }
  .section-head { margin-bottom: 32px; }
  .section-head h2 { font-size: clamp(24px, 6vw, 32px); }
  .stats-grid { gap: 18px; }
  .stat-num { font-size: 32px; }
  .stat-lbl { font-size: 12px; }
  .quote { padding: 22px; }
  .quote p { font-size: 15px; }
  .cta { padding: 56px 18px; }
  .cta h2 { font-size: clamp(24px, 6vw, 30px); }
  .foot-row { flex-direction: column; align-items: flex-start; gap: 10px; font-size: 12px; }
  .auth-card { padding: 28px 22px; border-radius: 14px; }
  .auth-card h1 { font-size: 22px; }

  /* Process / VSL / services sections */
  .mm-process-grid, .mm-services-grid { grid-template-columns: 1fr !important; }
  .mm-vsl-card { grid-template-columns: 1fr !important; }
  .mm-vsl-frame { aspect-ratio: 16/9; min-height: 0; }
}

/* ─── New milesy sections (process / VSL / services) ─── */
.mm-section-head h2 { font-size: clamp(28px, 4vw, 44px); }

/* Process strip (5 steps) */
.mm-process { padding: 70px 0; }
.mm-process-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
}
@media (max-width: 1000px) { .mm-process-grid { grid-template-columns: repeat(2, 1fr); } }
.mm-process-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px;
  transition: border-color .15s ease, transform .15s ease;
  display: block; color: var(--text);
}
.mm-process-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.mm-process-num {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 32px; font-weight: 800; line-height: 1; margin-bottom: 12px;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mm-process-card h3 { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 6px; }
.mm-process-card p { font-size: 13px; color: var(--text-dim); line-height: 1.6; }

/* VSL slot */
.mm-vsl { padding: 70px 0; }
.mm-vsl-card {
  display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center;
  background: var(--bg-card); border: 1px solid var(--border-2);
  border-radius: 22px; padding: 36px;
}
.mm-vsl-card h2 { font-size: clamp(28px, 4vw, 38px); font-weight: 800; letter-spacing: -0.02em; margin: 8px 0 14px; }
.mm-vsl-card p { color: var(--text-dim); font-size: 15px; line-height: 1.6; margin-bottom: 22px; }
.mm-vsl-frame {
  position: relative; aspect-ratio: 16/9; border-radius: 16px;
  background:
    linear-gradient(135deg, #1a1a2e, #0f0f1a),
    radial-gradient(circle at 30% 30%, rgba(255,107,53,0.3), transparent 60%);
  border: 1px solid var(--border-2); overflow: hidden;
  display: grid; place-items: center; cursor: pointer;
  transition: border-color .15s ease;
}
.mm-vsl-frame:hover { border-color: var(--accent); }
.mm-vsl-play {
  width: 84px; height: 84px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: grid; place-items: center; color: #1a0e00; font-size: 30px;
  box-shadow: 0 10px 30px rgba(255,107,53,0.5);
  transition: transform .2s ease;
}
.mm-vsl-frame:hover .mm-vsl-play { transform: scale(1.08); }
.mm-vsl-meta {
  position: absolute; bottom: 14px; left: 14px;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(6px);
  padding: 6px 12px; border-radius: 999px;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-dim);
}

/* Services grid */
.mm-services { padding: 70px 0; }
.mm-services-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
@media (max-width: 900px) { .mm-services-grid { grid-template-columns: 1fr; } }
.mm-service {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px;
  display: flex; flex-direction: column;
  transition: border-color .15s ease, transform .15s ease;
}
.mm-service:hover { border-color: var(--accent); transform: translateY(-3px); }
.mm-service-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: rgba(124,92,255,0.12); color: var(--accent-3);
  display: grid; place-items: center; font-size: 22px; margin-bottom: 14px;
}
.mm-service h3 { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 6px; }
.mm-service > p { font-size: 13px; color: var(--text-dim); line-height: 1.6; margin-bottom: 14px; flex: 1; }
.mm-service-list {
  list-style: none; margin: 0; padding: 14px 0 0;
  border-top: 1px solid var(--border);
}
.mm-service-list li {
  font-size: 12px; color: var(--text-dim); padding: 4px 0;
  display: flex; gap: 8px; align-items: center;
}
.mm-service-list li::before {
  content: "→"; color: var(--accent); font-weight: 700;
}
.mm-service-tier {
  display: inline-block; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent-2); margin-bottom: 8px;
}

/* Trust strip */
.mm-trust {
  padding: 50px 0; background: var(--bg-soft);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.mm-trust-row {
  display: flex; justify-content: space-around; align-items: center;
  gap: 22px; flex-wrap: wrap; opacity: 0.8;
  font-size: 13px; color: var(--text-mute);
  letter-spacing: 0.12em; text-transform: uppercase;
}
.mm-trust-row strong { color: var(--text); font-weight: 700; }


/* ─── R008 Marketing overhaul — Incubator visual register ─────────── */

/* Sticky thin top bar — persistent HC CTA */
.mm-stickybar {
  background: linear-gradient(90deg, #0a0a0a, #1a1208);
  border-bottom: 1px solid rgba(201, 167, 106, 0.18);
  color: #D4B888;
  font-size: 13px;
  position: sticky;
  top: 0;
  z-index: 60; /* above .nav (50) so the seam reads as one stacked unit */
  /* Trapezoid clip activates only when body.mm-scrolled fires —
     full-width top edge (touching the nav above), 40% wide at bottom,
     producing the diagonal connector wedges. */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition:
    top 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    clip-path 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Scrolled — stickybar slides UNDER the nav.
   Shape: rectangle anchored to the LEFT page edge, with the right end
   curving up into a pill/half-stadium so it visually meets the nav. */
body.mm-scrolled .nav { top: 0; }
body.mm-stickybar-centered, /* placeholder so transition picks up margin */
body.mm-scrolled .mm-stickybar {
  top: 70px; /* nav-row height */
  width: 70%;
  margin-left: auto;
  margin-right: auto; /* centered */
  clip-path: none;
  border-bottom: none;
  border-radius: 0 0 999px 999px; /* both top corners square; bottom corners curve into a pill */
  box-shadow: 0 6px 18px -8px rgba(20, 18, 14, 0.45);
}
body.mm-scrolled .mm-stickybar-row {
  max-width: 100%;
  padding-left: 44px;  /* clears the bottom-left pill curve so the 🩺 icon isn't clipped */
  padding-right: 44px; /* mirrors the right side breathing room */
  transition:
    max-width 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    padding 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.mm-stickybar {
  transition:
    top 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    width 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    margin 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    border-radius 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 900px) {
  body.mm-scrolled .mm-stickybar {
    width: 100%;
    border-radius: 0;
  }
}
.mm-stickybar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}
.mm-stickybar-icon { font-size: 16px; }
.mm-stickybar-text { flex: 1; color: #C9A76A; }
.mm-stickybar-text strong { color: #D4B888; }
.mm-stickybar-cta {
  background: #C9A76A;
  color: #1a1208;
  padding: 6px 14px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}
.mm-stickybar-cta:hover { background: #D4B888; }
@media (max-width: 720px) {
  .mm-stickybar-text { display: none; }
}

/* Hero — cover-banner variant matching Incubator §15d */
.mm-hero-cover {
  position: relative;
  padding: 96px 0 72px;
  background: #050402;
  color: #E9E5DA;
  overflow: hidden;
}
.mm-hero-cover-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.85)),
    radial-gradient(circle at 30% 30%, #3a2a14 0%, #1a1208 45%, #050402 100%);
  background-size: cover;
  z-index: 0;
}
.mm-hero-cover-inner { position: relative; z-index: 1; max-width: 880px; }
.mm-hero-eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #C9A76A;
  margin-bottom: 18px;
}
.mm-hero-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 56px;
  line-height: 1.05;
  font-weight: 800;
  margin: 0 0 20px;
  color: #E9E5DA;
}
.mm-hero-title .accent { color: #D4B888; }
.mm-hero-lead {
  color: #C9C0AE;
  font-size: 18px;
  line-height: 1.55;
  max-width: 700px;
  margin: 0 0 28px;
}
.mm-hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.mm-hero-footnote {
  color: #8A8377;
  font-size: 13px;
  margin: 12px 0 0;
}
.mm-hero-footnote a { color: #D4B888; }
@media (max-width: 720px) {
  .mm-hero-title { font-size: 38px; }
  .mm-hero-cover { padding: 64px 0 48px; }
}

/* Audiences — 3-card "How it works" */
.mm-audiences { padding: 88px 0; background: #f9f7f1; }
.mm-audiences-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 36px;
}
.mm-audience {
  background: #fff;
  border: 1px solid #e6e1d4;
  border-radius: 14px;
  padding: 28px 24px;
  position: relative;
}
.mm-audience-icon { font-size: 28px; margin-bottom: 8px; }
.mm-audience-tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8E7340;
  background: rgba(201, 167, 106, 0.12);
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.mm-audience h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 22px;
  margin: 0 0 12px;
}
.mm-audience-list {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  font-size: 14px;
  color: #4a4538;
}
.mm-audience-list li {
  padding: 6px 0 6px 22px;
  position: relative;
}
.mm-audience-list li:before {
  content: "✦";
  color: #C9A76A;
  position: absolute;
  left: 0;
  top: 6px;
}
@media (max-width: 900px) { .mm-audiences-grid { grid-template-columns: 1fr; } }

/* Dark text on light-bg sections (cream bg + white cards) — global --text is near-white */
.mm-audiences .section-head h2,
.mm-audiences .mm-audience h3,
.mm-founding .section-head h2,
.mm-founding .mm-founding-col h3 { color: #1f1a14; }
.mm-audiences .section-head p,
.mm-audiences .mm-audience > p,
.mm-founding .section-head p,
.mm-founding .mm-founding-card > p { color: #4a4538; }

/* What Aqua replaces — comparison strip */
.mm-replaces { padding: 88px 0; background: #0F0F0F; color: #E9E5DA; }
.mm-replaces .section-head h2,
.mm-replaces .section-head .eyebrow,
.mm-replaces .section-head p { color: #E9E5DA; }
.mm-replaces .section-head .eyebrow { color: #C9A76A; }
.mm-replaces .section-head p { color: #8A8377; }
.mm-replaces-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: stretch;
  margin-top: 32px;
}
.mm-replaces-col {
  background: #161616;
  border: 1px solid #2A2A2A;
  border-radius: 14px;
  padding: 24px;
}
.mm-replaces-col--after {
  border-color: #8E7340;
  background: linear-gradient(180deg, #1a1208, #0F0F0F);
}
.mm-replaces-col-head {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 14px;
  color: #8A8377;
}
.mm-replaces-col-head--after { color: #C9A76A; }
.mm-replaces-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
  font-size: 14px;
}
.mm-replaces-col li {
  padding: 8px 12px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
}
.mm-replaces-col--after li { background: rgba(201, 167, 106, 0.08); }
.mm-replaces-arrow {
  align-self: center;
  font-size: 32px;
  color: #C9A76A;
}
.mm-replaces-note { margin: 14px 0 18px; font-size: 13px; color: #8A8377; }
@media (max-width: 760px) {
  .mm-replaces-grid { grid-template-columns: 1fr; }
  .mm-replaces-arrow { transform: rotate(90deg); justify-self: center; }
}

/* Founding clients — testimonials honesty placeholder */
.mm-founding { padding: 88px 0; background: #f9f7f1; }
.mm-founding-card {
  background: #fff;
  border: 1px solid #e6e1d4;
  border-radius: 16px;
  padding: 32px;
  margin-top: 32px;
}
.mm-founding-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.mm-founding-col h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 20px;
  margin: 0 0 12px;
}
.mm-founding-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  color: #4a4538;
}
.mm-founding-col li {
  padding: 8px 0 8px 22px;
  position: relative;
}
.mm-founding-col li:before {
  content: "✓";
  color: #5a7a3a;
  position: absolute;
  left: 0;
}
.mm-founding-cta {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #e6e1d4;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 760px) { .mm-founding-row { grid-template-columns: 1fr; } }

/* ─── R014 nav Industries dropdown ─── */
.nav-dropdown { position: relative; display: inline-block; }
.nav-dropdown-toggle { cursor: pointer; }
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid #e6e1d4;
  border-radius: 10px;
  padding: 6px 0;
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  z-index: 100;
  display: none;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a {
  display: block;
  padding: 8px 14px;
  text-decoration: none;
  color: #1a1a1a;
  font-size: 14px;
}
.nav-dropdown-menu a:hover { background: rgba(201,167,106,0.12); color: #8E7340; }

/* ─── R026 Mobile-responsive audit fixes ─── */
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .nav-row { flex-wrap: wrap; gap: 10px; }
  .nav-cta { width: 100%; display: flex; gap: 8px; flex-wrap: wrap; }
  .nav-cta .btn { flex: 1; text-align: center; min-height: 36px; }

  /* Hero typography breathes. */
  .mm-hero-title { font-size: 32px; line-height: 1.1; }
  .mm-hero-cover { padding: 48px 0 36px; }
  .mm-hero-actions { flex-direction: column; gap: 8px; }
  .mm-hero-actions .btn { width: 100%; }

  /* Audiences + replaces + founding 1-col already collapsed at 760-880; tighten padding here. */
  .mm-audiences, .mm-replaces, .mm-founding { padding: 56px 0; }
  .section-head h2 { font-size: 24px; }

  /* Sticky bar text mostly hidden under 720px already; ensure CTA fills well. */
  .mm-stickybar-cta { font-size: 12px; padding: 6px 10px; }

  /* Touch-target floor on every primary-ish button. */
  .btn { min-height: 44px; }
}

/* T4 unify-fix — Health Check (and future quiz tools) embedded
   inside SiteShell. iframe fills viewport minus nav/footer. */
.mm-hc-frame-shell {
  width: 100%;
  background: #0a0a0a;
  margin: 0;
  padding: 0;
}
.mm-hc-frame {
  display: block;
  width: 100%;
  min-height: calc(100vh - 56px - 64px - 80px); /* viewport − stickybar − nav − footer */
  border: 0;
  background: #0a0a0a;
}

/* ─── Auth surfaces · premium redesign 2026-05-07 ─────────────── */
.mm-auth-shell {
  min-height: calc(100vh - 56px - 64px - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 20px 96px;
  background:
    radial-gradient(ellipse 60% 40% at 0% 30%, rgba(201, 167, 106, 0.08), transparent 70%),
    radial-gradient(ellipse 50% 35% at 100% 70%, rgba(110, 175, 175, 0.07), transparent 70%),
    #FAF7EE;
}
.mm-auth-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  width: 100%;
  max-width: 1080px;
  align-items: center;
}
@media (min-width: 880px) {
  .mm-auth-split {
    grid-template-columns: 1.05fr 1fr;
    gap: 64px;
  }
}

.mm-auth-brand-panel {
  display: none;
  padding: 8px 0;
  max-width: 460px;
}
@media (min-width: 880px) {
  .mm-auth-brand-panel { display: block; }
}
.mm-auth-brand-eyebrow {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #B89254;
  font-weight: 700;
  margin-bottom: 24px;
  padding: 6px 14px;
  background: rgba(201, 167, 106, 0.10);
  border: 1px solid rgba(201, 167, 106, 0.25);
  border-radius: 999px;
}
.mm-auth-brand-headline {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 18px;
  color: #14120E;
  font-weight: 500;
}
.mm-auth-brand-tagline {
  font-size: 16px;
  line-height: 1.55;
  color: #4A4439;
  margin: 0 0 28px;
  max-width: 32ch;
}
.mm-auth-brand-points {
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  color: #6B635A;
}
.mm-auth-brand-points li {
  position: relative;
  padding-left: 18px;
}
.mm-auth-brand-points li::before {
  content: "·";
  position: absolute;
  left: 4px;
  color: #C9A76A;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
}
.mm-auth-brand-foot {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8A8377;
}

.mm-auth-card {
  width: 100%;
  max-width: 480px;
  background: #FFF;
  border: 1px solid rgba(20, 18, 14, 0.07);
  border-radius: 18px;
  padding: 40px 36px 30px;
  box-shadow:
    0 1px 2px rgba(20, 18, 14, 0.04),
    0 24px 64px -16px rgba(20, 18, 14, 0.14);
  margin: 0 auto;
}
.mm-signup-picker { max-width: 760px; }
.mm-dev-card { max-width: 880px; border-color: rgba(201, 167, 106, 0.5); }
.mm-auth-card-head { text-align: center; margin-bottom: 26px; position: relative; }
.mm-auth-card-head h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.012em;
  margin: 6px 0 8px;
  color: #14120E;
  font-weight: 500;
}
.mm-auth-card-head p { color: #6B635A; font-size: 14px; margin: 0; }
.mm-auth-back {
  position: absolute; top: -8px; left: 0;
  font-size: 12px; color: #8A8377; text-decoration: none;
}
.mm-auth-back:hover { color: #C9A76A; }
.mm-auth-foot {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(20, 18, 14, 0.06);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-size: 13px; color: #6B635A;
}
.mm-auth-foot a { color: #C9A76A; text-decoration: none; font-weight: 600; }
.mm-auth-foot a:hover { text-decoration: underline; }

.mm-dev-bypass {
  font-size: 11px;
  letter-spacing: 0.04em;
  background: rgba(20, 18, 14, 0.04);
  border: 1px solid rgba(20, 18, 14, 0.08);
  padding: 6px 12px;
  border-radius: 999px;
  color: #6B635A !important;
  font-weight: 500;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.mm-dev-bypass:hover { background: rgba(20, 18, 14, 0.08); border-color: rgba(20, 18, 14, 0.14); text-decoration: none !important; }

/* ─── Login form internals ─────────────────────────────────────── */
.mm-auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}
.mm-input-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}
.mm-input-label > span { color: #4A4439; font-weight: 500; }
.mm-input-label > span > .mm-input-label-aside { color: #8A8377; font-weight: 400; }
.mm-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(20, 18, 14, 0.14);
  border-radius: 10px;
  background: #FDFCF8;
  font-size: 15px;
  color: #14120E;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.mm-input:focus {
  outline: none;
  border-color: #C9A76A;
  background: #FFF;
  box-shadow: 0 0 0 3px rgba(201, 167, 106, 0.18);
}
.mm-btn-primary {
  width: 100%;
  padding: 13px 20px;
  border-radius: 10px;
  background: #14120E;
  color: #FFF;
  font-size: 15px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  margin-top: 4px;
}
.mm-btn-primary:hover:not(:disabled) {
  background: #2A2520;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(20, 18, 14, 0.18);
}
.mm-btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }
.mm-btn-google {
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid rgba(20, 18, 14, 0.12);
  background: #FFF;
  font-size: 14px;
  font-weight: 500;
  color: #14120E;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.mm-btn-google:hover { background: #FAF7EE; border-color: rgba(20, 18, 14, 0.22); }
.mm-or-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(20, 18, 14, 0.4);
}
.mm-or-divider::before,
.mm-or-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(20, 18, 14, 0.08);
}
.mm-form-error {
  font-size: 13px;
  color: #B91C1C;
  background: rgba(185, 28, 28, 0.05);
  border: 1px solid rgba(185, 28, 28, 0.15);
  padding: 10px 12px;
  border-radius: 8px;
}
.mm-form-success {
  font-size: 13px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: #065F46;
  padding: 10px 12px;
  border-radius: 8px;
  line-height: 1.5;
}
.mm-form-success a { color: #065F46; font-weight: 600; }
.mm-form-link {
  text-align: center;
  font-size: 13px;
  color: #6B635A;
  margin-top: 2px;
}
.mm-form-link a, .mm-form-link button {
  color: #C9A76A;
  font-weight: 600;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font: inherit;
}
.mm-form-link a:hover, .mm-form-link button:hover { text-decoration: underline; }
.mm-form-toggle {
  margin-top: 4px;
  text-align: center;
  font-size: 12px;
  color: rgba(20, 18, 14, 0.55);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mm-form-toggle:hover { color: #14120E; }

/* ─── Topbar profile menu ──────────────────────────────────────── */
.mm-profile-menu { position: relative; }
.mm-profile-menu summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 4px;
  border: 1px solid rgba(20, 18, 14, 0.1);
  border-radius: 999px;
  background: #FFF;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  user-select: none;
}
.mm-profile-menu summary::-webkit-details-marker { display: none; }
.mm-profile-menu summary:hover { background: #FAF7EE; border-color: rgba(20, 18, 14, 0.18); }
.mm-profile-menu[open] summary { background: #FAF7EE; border-color: #C9A76A; }
.mm-profile-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 999px;
  background: #14120E;
  color: #FFF;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
/* R036 — image variant of the avatar (data URL profile picture) */
.mm-profile-avatar-img {
  display: inline-block;
  width: 28px; height: 28px;
  border-radius: 999px;
  object-fit: cover;
  background: #14120E;
  border: 1px solid rgba(20, 18, 14, 0.12);
  flex: 0 0 auto;
}
/* Tightened ProfileMenu (2026-05-08) — when the topbar carries the
   tenant-switcher in the title slot, the right cluster gets
   crowded. Hide the display name on the trigger; identity is in
   the popover. The avatar circle + caret is the trigger. */
.mm-profile-display {
  display: none !important;
}
.mm-profile-menu summary {
  padding: 4px 8px 4px 4px;
  gap: 4px;
}
.mm-profile-menu summary .mm-profile-avatar,
.mm-profile-menu summary .mm-profile-avatar-img {
  width: 30px;
  height: 30px;
  font-size: 12px;
}
.mm-profile-display-fallback {
  display: none;
  font-size: 13px;
  color: #14120E;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mm-profile-caret { font-size: 10px; color: #8A8377; }
.mm-profile-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: #FFF;
  border: 1px solid rgba(20, 18, 14, 0.08);
  border-radius: 12px;
  box-shadow:
    0 1px 2px rgba(20, 18, 14, 0.04),
    0 16px 40px -12px rgba(20, 18, 14, 0.18);
  padding: 6px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}
.mm-profile-pop-head {
  padding: 10px 12px 12px;
  border-bottom: 1px solid rgba(20, 18, 14, 0.06);
  margin-bottom: 4px;
}
.mm-profile-pop-name {
  font-weight: 600;
  color: #14120E;
  font-size: 14px;
  line-height: 1.3;
  word-break: break-word;
}
.mm-profile-pop-email {
  color: #6B635A;
  font-size: 12px;
  margin-top: 2px;
  word-break: break-word;
}
.mm-profile-pop-role {
  display: inline-block;
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #B89254;
  font-weight: 700;
  padding: 3px 8px;
  background: rgba(201, 167, 106, 0.10);
  border: 1px solid rgba(201, 167, 106, 0.25);
  border-radius: 999px;
}
.mm-profile-pop-list {
  display: flex;
  flex-direction: column;
  padding: 2px 0;
}
.mm-profile-pop-out {
  border-top: 1px solid rgba(20, 18, 14, 0.06);
  padding-top: 4px;
  margin: 4px 0 0;
}
.mm-profile-pop-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  color: #14120E;
  text-decoration: none;
  font-size: 13px;
  line-height: 1.2;
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.mm-profile-pop-item:hover { background: #FAF7EE; }
.mm-profile-pop-item > span:first-child { flex: 0 0 auto; opacity: 0.7; font-size: 14px; }
.mm-profile-pop-signout { color: #B91C1C; }
.mm-profile-pop-signout:hover { background: rgba(185, 28, 28, 0.06); }

/* ─── Dev POV picker buttons ─── */
.mm-dev-eyebrow {
  display: inline-block;
  background: rgba(201, 167, 106, 0.15);
  color: #B89254;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 10px;
  font-weight: 700;
}
.mm-pov-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 8px;
}
@media (min-width: 640px) {
  .mm-pov-list { grid-template-columns: 1fr 1fr; }
}
.mm-pov-list form { margin: 0; height: 100%; }
.mm-pov-list form > button { height: 100%; }
.mm-pov-btn {
  width: 100%; text-align: left;
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 18px;
  background: #FAF7EE;
  border: 1px solid rgba(20, 18, 14, 0.1);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
}
.mm-pov-btn:hover {
  border-color: #C9A76A;
  background: #FFF;
  transform: translateY(-1px);
}
.mm-pov-btn-title { font-weight: 600; color: #14120E; font-size: 15px; }
.mm-pov-btn-sub { font-size: 12px; color: #8A8377; }
.mm-pov-btn-landing { font-size: 11px; color: #C9A76A; margin-top: 2px; font-family: ui-monospace, monospace; }

/* ─── Signup role grid ─── */
.mm-role-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 6px;
}
@media (max-width: 600px) {
  .mm-role-grid { grid-template-columns: 1fr; }
}
.mm-role-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 22px 20px;
  background: #FAF7EE;
  border: 1.5px solid rgba(20, 18, 14, 0.08);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: all 0.15s ease;
}
.mm-role-card.is-available { background: #FFF; border-color: rgba(201, 167, 106, 0.3); }
.mm-role-card:hover {
  border-color: #C9A76A;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(20, 18, 14, 0.06);
}
.mm-role-badge {
  position: absolute; top: 14px; right: 14px;
  font-size: 10px;
  background: rgba(20, 18, 14, 0.06);
  color: #6B635A;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}
.mm-role-card.is-available .mm-role-badge {
  background: rgba(34, 139, 91, 0.12);
  color: #228B5B;
}
.mm-role-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 18px;
  color: #14120E;
  padding-right: 70px;
}
.mm-role-sub {
  font-size: 13px;
  color: #6B635A;
  line-height: 1.5;
}
.mm-role-cta {
  font-size: 13px;
  color: #C9A76A;
  font-weight: 600;
  margin-top: 6px;
}

/* ─── T4 unify-fix · Mega-menu (Resources nav dropdown) ──── */
.nav-dropdown-mega { position: static; }
.nav-mega-menu {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
  margin-top: 4px;
  width: min(960px, calc(100vw - 40px));
  background: #FFF;
  border: 1px solid rgba(20, 18, 14, 0.1);
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 24px 60px rgba(20, 18, 14, 0.12);
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 28px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 50;
}
.nav-dropdown-mega:hover .nav-mega-menu,
.nav-dropdown-mega:focus-within .nav-mega-menu {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.nav-mega-col { display: flex; flex-direction: column; gap: 6px; }
.nav-mega-heading {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8A8377;
  font-weight: 700;
  margin-bottom: 6px;
}
.nav-mega-col a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: background 0.1s ease;
}
.nav-mega-col a:hover { background: #FAF7EE; }
.nav-mega-col a strong {
  font-size: 14px;
  color: #14120E;
  font-weight: 600;
}
.nav-mega-col a em {
  font-style: normal;
  font-size: 12px;
  color: #6B635A;
  line-height: 1.4;
}
@media (max-width: 900px) {
  .nav-mega-menu { grid-template-columns: 1fr; width: min(420px, calc(100vw - 40px)); }
}

/* ─── Resources hub page ──── */
.mm-resources-shell { background: #FAF7EE; padding-bottom: 80px; }
.mm-resources-hero {
  background: linear-gradient(180deg, #FFF 0%, #FAF7EE 100%);
  padding: 80px 0 56px;
  text-align: center;
  border-bottom: 1px solid rgba(20, 18, 14, 0.06);
}
.mm-resources-hero .eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #C9A76A;
  font-weight: 700;
  margin-bottom: 14px;
}
.mm-resources-hero h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(36px, 6vw, 56px);
  margin: 0 0 16px;
  color: #14120E;
}
.mm-resources-hero p {
  max-width: 600px;
  margin: 0 auto;
  color: #6B635A;
  font-size: 17px;
  line-height: 1.55;
}
.mm-resources-group { margin-top: 56px; }
.mm-resources-group h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 24px;
  color: #14120E;
  margin: 0 0 20px;
}
.mm-resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.mm-resource-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 22px;
  background: #FFF;
  border: 1.5px solid rgba(20, 18, 14, 0.08);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: all 0.15s ease;
  min-height: 220px;
}
.mm-resource-card:hover {
  border-color: #C9A76A;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(20, 18, 14, 0.08);
}
.mm-resource-icon { font-size: 32px; line-height: 1; }
.mm-resource-status {
  position: absolute;
  top: 18px; right: 18px;
  font-size: 10px;
  background: rgba(20, 18, 14, 0.06);
  color: #6B635A;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}
.mm-resource-card.is-live .mm-resource-status {
  background: rgba(34, 139, 91, 0.12);
  color: #228B5B;
}
.mm-resource-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 20px;
  color: #14120E;
}
.mm-resource-sub {
  font-size: 14px;
  color: #6B635A;
  line-height: 1.5;
  flex: 1;
}
.mm-resource-cta {
  font-size: 13px;
  color: #C9A76A;
  font-weight: 600;
  margin-top: 6px;
}

/* ─── T4 unify-fix · Resource Finder (search + filter) ──── */
.mm-finder-wrap { padding: 40px 0 80px; }
.mm-finder { max-width: 880px; margin: 0 auto; }
.mm-finder-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FFF;
  border: 1.5px solid rgba(20, 18, 14, 0.1);
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 6px 20px rgba(20, 18, 14, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mm-finder-bar:focus-within {
  border-color: #C9A76A;
  box-shadow: 0 8px 28px rgba(201, 167, 106, 0.18);
}
.mm-finder-icon { font-size: 18px; opacity: 0.7; }
.mm-finder-input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 16px;
  color: #14120E;
  font-family: inherit;
  min-width: 0;
}
.mm-finder-input::placeholder { color: #8A8377; }
.mm-finder-clear {
  background: rgba(20, 18, 14, 0.06);
  border: 0;
  border-radius: 6px;
  width: 26px; height: 26px;
  cursor: pointer;
  color: #6B635A;
  font-size: 13px;
}
.mm-finder-clear:hover { background: rgba(20, 18, 14, 0.12); }

.mm-finder-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.mm-finder-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1.5px solid rgba(20, 18, 14, 0.1);
  background: #FFF;
  border-radius: 20px;
  font-size: 13px;
  color: #6B635A;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s ease;
}
.mm-finder-chip:hover { border-color: #C9A76A; color: #14120E; }
.mm-finder-chip.is-on {
  background: #14120E;
  border-color: #14120E;
  color: #FFF;
}
.mm-finder-chip-count {
  background: rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 11px;
}
.mm-finder-chip.is-on .mm-finder-chip-count {
  background: rgba(255, 255, 255, 0.18);
  color: #FFF;
}

.mm-finder-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 4px 12px;
  font-size: 13px;
  color: #6B635A;
  border-bottom: 1px solid rgba(20, 18, 14, 0.06);
  margin-bottom: 24px;
}
.mm-finder-reset {
  background: transparent;
  border: 0;
  color: #C9A76A;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
}
.mm-finder-reset:hover { color: #8E7340; }

.mm-finder-empty {
  text-align: center;
  padding: 60px 20px;
  background: #FAF7EE;
  border-radius: 14px;
  border: 1px dashed rgba(20, 18, 14, 0.12);
}
.mm-finder-empty p { margin: 0 0 8px; color: #14120E; font-size: 16px; }
.mm-finder-empty p.muted { color: #6B635A; font-size: 14px; }
.mm-finder-empty a { color: #C9A76A; }

.mm-finder-group { margin-top: 32px; }
.mm-finder-group:first-child { margin-top: 0; }
.mm-finder-group h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 22px;
  margin: 0 0 14px;
  color: #14120E;
  font-weight: 600;
}
.mm-finder-group-count {
  font-family: ui-sans-serif, system-ui;
  font-size: 13px;
  color: #8A8377;
  font-weight: 400;
}
.mm-finder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.mm-finder-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 18px;
  background: #FFF;
  border: 1.5px solid rgba(20, 18, 14, 0.08);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: all 0.15s ease;
  min-height: 180px;
}
.mm-finder-card:hover {
  border-color: #C9A76A;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(20, 18, 14, 0.06);
}
.mm-finder-card-status {
  position: absolute;
  top: 14px; right: 14px;
  font-size: 10px;
  background: rgba(20, 18, 14, 0.06);
  color: #6B635A;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}
.mm-finder-card.is-live .mm-finder-card-status {
  background: rgba(34, 139, 91, 0.12);
  color: #228B5B;
}
.mm-finder-card-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 17px;
  color: #14120E;
  padding-right: 80px;
  line-height: 1.3;
}
.mm-finder-card-excerpt {
  font-size: 13px;
  color: #6B635A;
  line-height: 1.5;
  flex: 1;
}
.mm-finder-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}
.mm-finder-tag {
  font-size: 10px;
  background: rgba(201, 167, 106, 0.1);
  color: #8E7340;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.02em;
}

/* T4 R002 — Resource sub-page tools (seo-audit / site-speed / a11y) */
.mm-tool-shell { padding: 96px 0 120px; }
.mm-tool-head { max-width: 720px; margin: 24px 0 48px; }
.mm-tool-head h1 { font-size: 2.4rem; margin: 8px 0 12px; }
.mm-tool-head p { color: var(--muted, #c8c8d2); line-height: 1.5; }
.mm-tool { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 28px; max-width: 820px; }
.mm-tool-form label { display:block; font-weight:600; margin-bottom:8px; font-size:.92rem; letter-spacing:.02em; }
.mm-tool-row { display:flex; gap:12px; flex-wrap:wrap; }
.mm-tool-row input { flex:1 1 280px; padding:12px 14px; border-radius:8px; border:1px solid rgba(255,255,255,.18); background:#0e0e14; color:#f2f2f5; font:inherit; }
.mm-tool-row input:focus { outline:2px solid #C9A76A; outline-offset:1px; }
.mm-tool-row button { flex:0 0 auto; }
.mm-tool-caption { color: var(--muted, #c8c8d2); font-size:.88rem; margin-top:12px; line-height:1.5; }
.mm-tool-result { margin-top:32px; border-top:1px solid rgba(255,255,255,.08); padding-top:24px; }
.mm-tool-result-head h2 { font-size:1.2rem; margin:6px 0; word-break:break-all; color:#f2f2f5; }
.mm-tool-band { font-size:1rem; margin:12px 0 16px; }
.mm-tool-note { background:rgba(201,167,106,.08); border-left:3px solid #C9A76A; padding:10px 14px; margin:12px 0; font-size:.9rem; line-height:1.5; }
.mm-tool-checks { list-style:none; padding:0; margin:18px 0 0; }
.mm-tool-checks li { display:grid; grid-template-columns: 28px 1fr; align-items:start; gap:8px 14px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.06); }
.mm-tool-checks li[data-pass="true"]  .mm-tool-check-mark { color:#7CDFA7; }
.mm-tool-checks li[data-pass="false"] .mm-tool-check-mark { color:#E27D7D; }
.mm-tool-check-mark { font-weight:700; font-size:1.05rem; }
.mm-tool-check-label { font-weight:600; }
.mm-tool-check-detail { grid-column:2; color: var(--muted, #c8c8d2); font-size:.85rem; }
.mm-tool-stats { list-style:none; padding:0; margin:18px 0 0; display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:14px; }
.mm-tool-stats li { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:10px; padding:14px 16px; }
.mm-tool-stat-label { display:block; color: var(--muted, #c8c8d2); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; }
.mm-tool-stat-val { font-size:1.4rem; font-weight:700; color:#f2f2f5; }
.mm-tool-footer { margin-top:36px; color: var(--muted, #c8c8d2); font-size:.92rem; max-width:720px; line-height:1.55; }

/* ─── Topbar tenant switcher (agency-name title button) ─────────── */
.mm-tenant-switcher { position: relative; min-width: 0; }
.mm-tenant-switcher summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 4px 8px;
  border: 1px solid rgba(20, 18, 14, 0.08);
  border-radius: 10px;
  background: #FFF;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  user-select: none;
  max-width: 320px;
}
.mm-tenant-switcher summary::-webkit-details-marker { display: none; }
.mm-tenant-switcher summary:hover { background: #FAF7EE; border-color: rgba(20, 18, 14, 0.18); }
.mm-tenant-switcher[open] summary { background: #FAF7EE; border-color: #C9A76A; }
.mm-tenant-swatch {
  display: inline-block;
  width: 16px; height: 16px;
  border-radius: 5px;
  border: 1px solid rgba(20, 18, 14, 0.12);
  flex: 0 0 auto;
}
.mm-tenant-label { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.mm-tenant-name { font-size: 14px; font-weight: 600; color: #14120E; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-tenant-sub { font-size: 11px; color: #6B635A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-tenant-caret { color: #8A8377; font-size: 11px; }
.mm-tenant-pop {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 280px;
  background: #FFF; border: 1px solid rgba(20, 18, 14, 0.08); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(20, 18, 14, 0.04), 0 16px 40px -12px rgba(20, 18, 14, 0.18);
  padding: 6px; z-index: 50; font-size: 13px;
}
.mm-tenant-pop-head { padding: 8px 10px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: #8A8377; font-weight: 600; }
.mm-tenant-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; background: none; border: none; border-radius: 8px; cursor: pointer; text-align: left; font: inherit; color: #14120E; }
.mm-tenant-row:hover:not(:disabled) { background: #FAF7EE; }
.mm-tenant-row:disabled { opacity: 0.55; cursor: not-allowed; }
.mm-tenant-row-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-tenant-tick { color: #B89254; font-weight: 700; }
.mm-tenant-divider { height: 1px; background: rgba(20, 18, 14, 0.06); margin: 6px 4px; }
.mm-tenant-add-trigger { color: #B89254; font-weight: 600; }
.mm-tenant-plus { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; background: rgba(201, 167, 106, 0.12); border: 1px dashed rgba(201, 167, 106, 0.4); border-radius: 5px; font-weight: 700; color: #B89254; font-size: 11px; flex: 0 0 auto; }
.mm-tenant-add-form { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px 10px; }
.mm-tenant-add-label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.mm-tenant-add-label > span { color: #4A4439; font-weight: 500; }
.mm-tenant-add-input { width: 100%; padding: 8px 10px; border: 1px solid rgba(20, 18, 14, 0.14); border-radius: 8px; background: #FDFCF8; font-size: 13px; color: #14120E; }
.mm-tenant-add-input:focus { outline: none; border-color: #C9A76A; background: #FFF; box-shadow: 0 0 0 3px rgba(201, 167, 106, 0.18); }
.mm-tenant-add-actions { display: flex; justify-content: flex-end; gap: 8px; }
.mm-tenant-add-cancel { padding: 6px 10px; background: none; border: none; color: #6B635A; font-size: 12px; cursor: pointer; border-radius: 6px; }
.mm-tenant-add-cancel:hover { background: rgba(20, 18, 14, 0.05); color: #14120E; }
.mm-tenant-add-submit { padding: 6px 12px; background: #14120E; color: #FFF; border: none; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; }
.mm-tenant-add-submit:hover:not(:disabled) { background: #2A2520; }
.mm-tenant-add-submit:disabled { opacity: 0.55; cursor: not-allowed; }
.mm-tenant-error { margin: 6px 10px 4px; font-size: 12px; color: #B91C1C; background: rgba(185, 28, 28, 0.05); border: 1px solid rgba(185, 28, 28, 0.15); padding: 6px 8px; border-radius: 6px; }

/* 2026-05-08 — ProfileMenu becomes a pure circle (no pill, no caret).
   Click opens existing dropdown. Tenant switcher gets glassmorphic
   pressed state. */
.mm-profile-menu summary {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  border-radius: 999px;
  gap: 0 !important;
}
.mm-profile-menu summary:hover { background: transparent !important; }
.mm-profile-menu[open] summary { background: transparent !important; border: none !important; }
.mm-profile-menu summary .mm-profile-avatar,
.mm-profile-menu summary .mm-profile-avatar-img {
  width: 34px !important;
  height: 34px !important;
  font-size: 13px;
  box-shadow: 0 1px 2px rgba(20, 18, 14, 0.08), 0 4px 12px -4px rgba(20, 18, 14, 0.18);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.mm-profile-menu summary:hover .mm-profile-avatar,
.mm-profile-menu summary:hover .mm-profile-avatar-img {
  box-shadow: 0 1px 2px rgba(20, 18, 14, 0.1), 0 6px 16px -4px rgba(20, 18, 14, 0.22);
  transform: translateY(-1px);
}
.mm-profile-menu[open] summary .mm-profile-avatar,
.mm-profile-menu[open] summary .mm-profile-avatar-img {
  box-shadow: 0 0 0 3px rgba(201, 167, 106, 0.35);
}

/* Glassmorphic tenant switcher — frosted backdrop on hover/open */
.mm-tenant-switcher summary {
  border-radius: 14px;
  transition: background 0.2s ease, border-color 0.2s ease, backdrop-filter 0.2s ease, box-shadow 0.2s ease;
}
.mm-tenant-switcher summary:hover {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-color: rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 1px 2px rgba(20, 18, 14, 0.04), 0 8px 24px -8px rgba(20, 18, 14, 0.18);
}
.mm-tenant-switcher[open] summary {
  background: rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-color: rgba(201, 167, 106, 0.55) !important;
  box-shadow: 0 1px 2px rgba(20, 18, 14, 0.04), 0 12px 32px -10px rgba(20, 18, 14, 0.22);
}
.mm-tenant-pop {
  background: rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
}

/* ─── 2026-05-09 — Million-dollar motion system ─── */

/* === 1. AQUA PORTAL SPLASH ============================================ */
.mm-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: radial-gradient(ellipse at 50% 40%, #1A1208 0%, #050505 60%, #000 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  animation: mm-splash-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.mm-splash-out {
  animation: mm-splash-out 0.6s cubic-bezier(0.6, 0, 0.4, 1) both;
  pointer-events: none;
}
.mm-splash-glow {
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 50% 50%, rgba(212, 184, 136, 0.18) 0%, transparent 50%);
  animation: mm-splash-glow 2.4s ease-in-out infinite;
  filter: blur(24px);
}
.mm-splash-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  z-index: 1;
}
.mm-splash-mark {
  animation:
    mm-splash-mark-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) both,
    mm-splash-mark-float 3.6s ease-in-out 0.9s infinite;
  filter: drop-shadow(0 8px 32px rgba(212, 184, 136, 0.35));
}
.mm-splash-wordmark {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #FAF7EE;
  opacity: 0;
  animation: mm-splash-fade 0.8s 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.mm-splash-accent {
  background: linear-gradient(135deg, #D4B888 0%, #8B6F3D 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-left: 2px;
}
.mm-splash-tag {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(212, 184, 136, 0.65);
  font-weight: 600;
  opacity: 0;
  animation: mm-splash-fade 0.8s 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.mm-splash-progress {
  width: 120px;
  height: 2px;
  background: rgba(212, 184, 136, 0.12);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 14px;
  opacity: 0;
  animation: mm-splash-fade 0.8s 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.mm-splash-progress span {
  display: block;
  height: 100%;
  width: 30%;
  background: linear-gradient(90deg, transparent 0%, #D4B888 50%, transparent 100%);
  animation: mm-splash-bar 1.4s linear infinite;
}

@keyframes mm-splash-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes mm-splash-out {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.04); pointer-events: none; visibility: hidden; }
}
@keyframes mm-splash-glow {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}
@keyframes mm-splash-mark-in {
  0% { opacity: 0; transform: scale(0.6) rotate(-12deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes mm-splash-mark-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes mm-splash-fade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes mm-splash-bar {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(450%); }
}

/* === 2. PAGE MOUNT / EXIT — ULTRA FAST ===============================
   Content always paints fully visible from first byte. No mount fade,
   no exit fade — eliminates any risk of a blank/no-CSS page if the
   `mm-page-leaving` class ever gets stuck across a navigation. */
.mm-page-content { opacity: 1; }
.mm-stickybar, .nav, footer { opacity: 1; }

/* === 3. SCROLL-REVEAL — quick + decisive ============================= */
[data-mm-reveal] {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-mm-reveal].mm-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* Stagger children when a parent is revealed */
[data-mm-reveal].mm-revealed > * {
  animation: mm-stagger-in 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}
[data-mm-reveal].mm-revealed > *:nth-child(1) { animation-delay: 0.02s; }
[data-mm-reveal].mm-revealed > *:nth-child(2) { animation-delay: 0.04s; }
[data-mm-reveal].mm-revealed > *:nth-child(3) { animation-delay: 0.06s; }
[data-mm-reveal].mm-revealed > *:nth-child(4) { animation-delay: 0.08s; }
[data-mm-reveal].mm-revealed > *:nth-child(5) { animation-delay: 0.10s; }
[data-mm-reveal].mm-revealed > *:nth-child(6) { animation-delay: 0.12s; }

@keyframes mm-stagger-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === 4. MICRO-INTERACTIONS ============================================ */
/* Buttons get a subtle squish + glow on press */
.btn {
  transition:
    transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease !important;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.985); }
.btn-primary:hover {
  box-shadow: 0 6px 20px -6px rgba(201, 167, 106, 0.5), 0 1px 2px rgba(20, 18, 14, 0.1);
}

/* Nav link hover — animated underline */
.nav-links a {
  position: relative;
  transition: color 0.2s ease;
}
.nav-links > a::after,
.nav-dropdown-toggle::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1.5px;
  background: linear-gradient(90deg, #C9A76A, #D4B888);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 999px;
}
.nav-links > a:hover::after,
.nav-dropdown:hover .nav-dropdown-toggle::after,
.nav-dropdown:focus-within .nav-dropdown-toggle::after,
.nav-dropdown:not(.nav-dropdown-mega):has(.nav-dropdown-menu:hover) .nav-dropdown-toggle::after { transform: scaleX(1); }

/* Project / role / 404 / pov cards — refined hover lift already exists; add
   a brand-color glow halo on hover */
.mm-project-card:hover,
.mm-role-card:hover,
.mm-pov-btn:hover,
.mm-404-card:hover {
  box-shadow:
    0 12px 36px -12px rgba(20, 18, 14, 0.22),
    0 0 0 1px rgba(201, 167, 106, 0.25);
}

/* === 5. REDUCED MOTION ============================================== */
@media (prefers-reduced-motion: reduce) {
  .mm-splash, .mm-splash-glow, .mm-splash-mark,
  .mm-splash-wordmark, .mm-splash-tag, .mm-splash-progress,
  .mm-splash-progress span,
  .mm-page-content, .mm-stickybar, .nav, footer,
  [data-mm-reveal] {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ─── 2026-05-09 — Floating "M" chatbot launcher (top-left) ─── */

.mm-chat {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 9000;
  font-family: var(--brand-font-body, "Inter", system-ui, sans-serif);
  /* Hidden by default — only appears when the nav has been folded away
     via the side-tab. Clicking it restores the nav. */
  display: none;
}
body.mm-nav-side-folded .mm-chat {
  display: block;
  /* Delayed + slower so it appears to "catch" the side-tab as it flies in. */
  animation: mm-chat-appear 0.9s 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes mm-chat-appear {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; transform: scale(1); }
}
.mm-chat-launcher {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  padding: 0;
  background: linear-gradient(135deg, #D4B888 0%, #8B6F3D 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.92),
    0 4px 14px -2px rgba(20, 18, 14, 0.35),
    0 12px 32px -8px rgba(212, 184, 136, 0.45);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease;
}
.mm-chat-launcher:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 1),
    0 6px 18px -2px rgba(20, 18, 14, 0.4),
    0 16px 40px -8px rgba(212, 184, 136, 0.6);
}
.mm-chat[data-open="true"] .mm-chat-launcher {
  transform: scale(0.94);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 1),
    0 0 0 5px rgba(212, 184, 136, 0.35),
    0 4px 14px -2px rgba(20, 18, 14, 0.35);
}
.mm-chat-mark {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 24px;
  font-weight: 700;
  color: #14120E;
  line-height: 1;
  letter-spacing: -0.02em;
}
.mm-chat-pulse {
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  border: 2px solid rgba(212, 184, 136, 0.55);
  animation: mm-chat-pulse 2.4s ease-out infinite;
  pointer-events: none;
}
.mm-chat[data-open="true"] .mm-chat-pulse { animation: none; opacity: 0; }
@keyframes mm-chat-pulse {
  0%   { transform: scale(1); opacity: 0.7; }
  70%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}

.mm-chat-panel {
  position: absolute;
  top: 60px;
  left: 0;
  width: min(340px, calc(100vw - 40px));
  background: #FFF;
  color: #14120E;
  border-radius: 18px;
  border: 1px solid rgba(20, 18, 14, 0.06);
  box-shadow:
    0 1px 2px rgba(20, 18, 14, 0.06),
    0 24px 64px -16px rgba(20, 18, 14, 0.32);
  overflow: hidden;
  animation: mm-chat-pop 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes mm-chat-pop {
  from { opacity: 0; transform: translateY(-8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.mm-chat-panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 18px 16px;
  background: linear-gradient(135deg, #FAF7EE 0%, #FFF 100%);
  border-bottom: 1px solid rgba(20, 18, 14, 0.06);
  position: relative;
}
.mm-chat-panel-head::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #C9A76A 0%, #B89254 100%);
}
.mm-chat-panel-mark {
  width: 38px; height: 38px;
  border-radius: 999px;
  background: linear-gradient(135deg, #D4B888 0%, #8B6F3D 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  color: #14120E;
  flex: 0 0 auto;
  box-shadow: 0 2px 6px -2px rgba(20, 18, 14, 0.2);
}
.mm-chat-panel-title {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.mm-chat-panel-sub {
  font-size: 12px;
  color: #6B635A;
  margin-top: 1px;
}

.mm-chat-panel-list {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.mm-chat-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: background 0.12s ease;
}
.mm-chat-row:hover { background: #FAF7EE; }
.mm-chat-row-icon {
  font-size: 17px;
  width: 24px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.mm-chat-row > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mm-chat-row strong { font-size: 13.5px; font-weight: 600; color: #14120E; }
.mm-chat-row em {
  font-style: normal;
  font-size: 11.5px;
  color: #8A8377;
  line-height: 1.35;
}
.mm-chat-panel-foot {
  padding: 12px 16px 14px;
  border-top: 1px solid rgba(20, 18, 14, 0.06);
  font-size: 11px;
  color: #8A8377;
  text-align: center;
  letter-spacing: 0.01em;
}

@media (max-width: 540px) {
  .mm-chat { top: 14px; left: 14px; }
  .mm-chat-launcher { width: 46px; height: 46px; }
  .mm-chat-mark { font-size: 21px; }
}

/* ─── 2026-05-09 — Nav collapse toggle (center bottom of nav) ─── */

/* Position context for the absolute toggle — and let the toggle visually
   bleed below the bar without being clipped. */
.mm-stickybar { position: sticky; overflow: visible; }

.mm-nav-collapse {
  position: absolute;
  left: 50%;
  /* Centered on the stickybar's bottom edge — half inside, half overlapping
     the nav below. Hidden until the user has scrolled past the threshold
     (body.mm-scrolled), since the bar's only morphed/centered state needs
     the collapse affordance. */
  bottom: -13px;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(201, 167, 106, 0.45);
  background: linear-gradient(180deg, #1a1208 0%, #0a0a0a 100%);
  color: #D4B888;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 80; /* above stickybar (60) and nav (65) */
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 4px 12px -2px rgba(0, 0, 0, 0.4);
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    bottom 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    top 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.mm-nav-collapse:hover {
  color: #FFF;
  border-color: rgba(201, 167, 106, 0.7);
  transform: translateX(-50%) translateY(-1px);
}
/* Visibility — strict.
   - Default: completely invisible (opacity 0 + visibility hidden so
     even children can't trigger ancestor hover that would re-show it).
   - On stickybar :hover: fades in.
   - In the morphed/scrolled centered pill state: always visible. */
.mm-nav-collapse {
  visibility: hidden;
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    bottom 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    top 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.28s ease,
    visibility 0s linear 0.28s; /* delay hide until fade completes */
}
body.mm-scrolled .mm-stickybar:hover .mm-nav-collapse {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    bottom 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    top 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.28s ease,
    visibility 0s linear 0s; /* show immediately when becoming visible */
}
.mm-nav-collapse svg { transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.mm-nav-collapse[data-collapsed="true"] svg { transform: rotate(180deg); }

/* Collapsed state — the stickybar smoothly collapses upward (translate
   + opacity + max-height) while the nav slides up to top: 0 in sync.
   No `display: none` so the transition is fully visible. */
body.mm-nav-collapsed .mm-stickybar {
  transform: translateY(-100%);
  opacity: 0;
  max-height: 0;
  pointer-events: none;
  border-bottom-color: transparent;
}
body.mm-nav-collapsed .nav { top: 0; }

.mm-stickybar {
  max-height: 80px; /* generous ceiling so the natural height isn't constrained */
  overflow: visible;
  transform-origin: top center;
  transition:
    background 0.5s ease,
    color 0.5s ease,
    border-color 0.7s cubic-bezier(0.6, 0, 0.4, 1),
    transform 1.1s cubic-bezier(0.6, 0, 0.35, 1),
    opacity 0.6s cubic-bezier(0.6, 0, 0.4, 1),
    max-height 1.1s cubic-bezier(0.6, 0, 0.35, 1),
    top 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Once collapsed, hide overflow so the chevron tab doesn't peek out. */
body.mm-nav-collapsed .mm-stickybar { overflow: hidden; }
.nav {
  transition:
    background 0.4s ease,
    color 0.4s ease,
    border-color 0.4s ease,
    top 0.5s cubic-bezier(0.6, 0, 0.4, 1),
    transform 0.55s cubic-bezier(0.6, 0, 0.4, 1);
}

/* Re-expand chevron — small inline button inside the nav-cta cluster,
   sitting next to the theme switcher. Only renders when stickybar is
   collapsed. Brings the stickybar back. */
.mm-nav-expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  margin-left: 4px;
  border-radius: 999px;
  border: 1px solid rgba(201, 167, 106, 0.45);
  background: linear-gradient(180deg, #1a1208 0%, #0a0a0a 100%);
  color: #D4B888;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.18s ease, border-color 0.18s ease;
  animation: mm-nav-expand-in 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.mm-nav-expand:hover {
  color: #FFF;
  border-color: rgba(201, 167, 106, 0.75);
  transform: translateY(1px);
}
@keyframes mm-nav-expand-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.85); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Side-tab — circular drawer handle hanging off the bottom-right of
   the nav. Hidden by default. Appears ONLY when:
     1) the stickybar is collapsed (body.mm-nav-collapsed), AND
     2) the nav is being hovered.
   Folds the nav off-screen on click. */
.mm-nav-side-tab {
  position: absolute;
  right: 24px;
  bottom: -14px;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(201, 167, 106, 0.5);
  background: linear-gradient(180deg, #1a1208 0%, #0a0a0a 100%);
  color: #D4B888;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 70;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 6px 14px -3px rgba(0, 0, 0, 0.45);
  /* Hidden by default — fades in only when nav is hovered + stickybar
     is in collapsed state. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.22s ease,
    opacity 0.28s ease,
    visibility 0s linear 0.28s;
}
body.mm-nav-collapsed .nav:hover .mm-nav-side-tab {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.22s ease,
    opacity 0.28s ease,
    visibility 0s linear 0s;
}
.mm-nav-side-tab:hover {
  color: #FFF;
  border-color: rgba(201, 167, 106, 0.85);
  transform: translateY(1px);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 8px 18px -3px rgba(0, 0, 0, 0.55);
}
.mm-nav-side-tab svg { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }

/* Default: chevrons visible, M hidden. */
.mm-nav-side-tab-mark {
  display: none;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: 24px;
  color: #14120E;
  line-height: 1;
  letter-spacing: -0.02em;
}
.mm-nav-side-tab-chev { display: block; }

/* When folded — body.mm-nav-side-folded — three things happen:
   1. The nav slides off-screen to the LEFT.
   2. The hide-the-stickybar bar is gone (it's already hidden via mm-nav-collapsed).
   3. The tab itself fixes to top-left, morphs into the gold M chatbot
      circle (replacing the FloatingChat M for the duration). */
body.mm-nav-side-folded .nav {
  transform: translateX(-104%) scale(0.96);
  opacity: 0;
  filter: blur(3px);
  pointer-events: none;
  border-bottom-color: transparent;
}
.nav {
  transform-origin: left center;
  transition:
    background 0.5s ease,
    color 0.5s ease,
    border-color 0.5s ease,
    top 0.7s cubic-bezier(0.6, 0, 0.35, 1),
    transform 1.2s cubic-bezier(0.6, 0, 0.35, 1),
    opacity 0.85s cubic-bezier(0.6, 0, 0.4, 1),
    filter 0.7s cubic-bezier(0.6, 0, 0.4, 1);
}

body.mm-nav-side-folded .mm-nav-side-tab {
  position: fixed;
  top: 20px;
  left: 20px;
  right: auto;
  bottom: auto;
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, #D4B888 0%, #8B6F3D 100%);
  border: none;
  color: #14120E;
  z-index: 9100; /* sits above FloatingChat */
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.92),
    0 4px 14px -2px rgba(20, 18, 14, 0.35),
    0 12px 32px -8px rgba(212, 184, 136, 0.45);
}
body.mm-nav-side-folded .mm-nav-side-tab .mm-nav-side-tab-chev { display: none; }
body.mm-nav-side-folded .mm-nav-side-tab .mm-nav-side-tab-mark { display: inline-block; }

/* When nav folds, the side tab flies across the screen toward the
   top-left M circle — converging into it like a "swallow into the
   chatbot" animation. Position fixes to the viewport so we can
   animate top/left/width/height/background freely. */
body.mm-nav-side-folded .mm-nav-side-tab {
  position: fixed;
  top: 20px;
  left: 20px;
  right: auto;
  bottom: auto;
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, #D4B888 0%, #8B6F3D 100%);
  border-color: transparent;
  color: #14120E;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.6);
  transition:
    top 1.2s cubic-bezier(0.6, 0, 0.35, 1),
    left 1.2s cubic-bezier(0.6, 0, 0.35, 1),
    right 1.2s cubic-bezier(0.6, 0, 0.35, 1),
    bottom 1.2s cubic-bezier(0.6, 0, 0.35, 1),
    width 1.2s cubic-bezier(0.6, 0, 0.35, 1),
    height 1.2s cubic-bezier(0.6, 0, 0.35, 1),
    background 0.9s ease 0.25s,
    border-color 0.6s ease,
    transform 1.2s cubic-bezier(0.6, 0, 0.35, 1),
    opacity 1.05s ease 0.55s;  /* fade out late so the travel is visible */
}

/* Smooth all the geometry changes. */
.mm-nav-side-tab {
  transition:
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.22s ease,
    width 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    height 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    top 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    left 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    right 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    bottom 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.5s ease,
    border-radius 0.5s ease;
}

@media (max-width: 540px) {
  .mm-nav-side-tab { right: 14px; width: 26px; height: 26px; }
  body.mm-nav-side-folded .mm-nav-side-tab { width: 46px; height: 46px; top: 14px; left: 14px; }
  body.mm-nav-side-folded .mm-nav-side-tab .mm-nav-side-tab-mark { font-size: 21px; }
}

/* ─── 2026-05-09 — Marketing auth widget (sign in / profile circle) ─── */

.mm-auth { position: relative; display: inline-flex; align-items: center; }
.mm-auth-loading {
  width: 32px; height: 32px; border-radius: 999px;
  background: rgba(255,255,255,0.06);
  display: inline-block;
}
.mm-auth-signin { /* original Sign in link styling preserved via .btn .btn-ghost */ }

.mm-auth-circle {
  width: 32px; height: 32px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #1F1B14 0%, #14120E 100%);
  color: #FFF;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, 0.9),
    0 1px 3px rgba(20, 18, 14, 0.18),
    0 4px 10px -2px rgba(20, 18, 14, 0.18);
  transition: box-shadow 0.18s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.mm-auth-circle:hover {
  box-shadow:
    0 0 0 1.5px #FFF,
    0 0 0 4px rgba(201, 167, 106, 0.18),
    0 2px 6px rgba(20, 18, 14, 0.2);
}
.mm-auth[data-open="true"] .mm-auth-circle {
  box-shadow: 0 0 0 1.5px #FFF, 0 0 0 4px rgba(201, 167, 106, 0.55);
}

.mm-auth-pop {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 240px;
  background: #FFF;
  color: #14120E;
  border: 1px solid rgba(20, 18, 14, 0.06);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(20, 18, 14, 0.06),
    0 24px 56px -16px rgba(20, 18, 14, 0.32);
  z-index: 100;
  animation: mm-auth-pop-in 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes mm-auth-pop-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.mm-auth-pop-head {
  padding: 16px 18px 14px;
  background: linear-gradient(135deg, #FAF7EE 0%, #FFF 100%);
  border-bottom: 1px solid rgba(20, 18, 14, 0.06);
  position: relative;
}
.mm-auth-pop-head::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #C9A76A 0%, #B89254 100%);
}
.mm-auth-pop-name { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.mm-auth-pop-email { font-size: 12px; color: #6B635A; margin-top: 3px; word-break: break-word; }
.mm-auth-pop-role {
  display: inline-block;
  margin-top: 10px;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #B89254;
  font-weight: 700;
  padding: 3px 8px;
  background: rgba(201, 167, 106, 0.10);
  border: 1px solid rgba(201, 167, 106, 0.25);
  border-radius: 999px;
}
.mm-auth-pop-list { padding: 6px; display: flex; flex-direction: column; }
.mm-auth-pop-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: 8px;
  color: #14120E;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: inherit;
  transition: background 0.1s ease;
}
.mm-auth-pop-item:hover { background: #FAF7EE; }
.mm-auth-pop-item > span:first-child { font-size: 15px; width: 18px; text-align: center; opacity: 0.85; }
.mm-auth-pop-portal {
  background: rgba(201, 167, 106, 0.08);
  font-weight: 600;
  color: #8E7340;
}
.mm-auth-pop-portal:hover { background: rgba(201, 167, 106, 0.16); }
.mm-auth-pop-out {
  border-top: 1px solid rgba(20, 18, 14, 0.06);
  padding: 4px 6px 6px;
  margin: 0;
}
.mm-auth-pop-signout { color: #B91C1C; }
.mm-auth-pop-signout:hover { background: rgba(185, 28, 28, 0.06); }

/* ─── 2026-05-09 — Theme switcher (circle in topbar) ─── */

.mm-theme-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}
.mm-theme-trigger {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  padding: 0;
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, 0.85),
    0 1px 3px rgba(20, 18, 14, 0.22),
    0 4px 12px -3px rgba(20, 18, 14, 0.28);
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease;
}
.mm-theme-trigger:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, 0.95),
    0 0 0 4px rgba(201, 167, 106, 0.22),
    0 2px 6px rgba(20, 18, 14, 0.25);
}
.mm-theme-trigger-ring {
  position: absolute;
  inset: 4px;
  border-radius: 999px;
  border: 1.5px dashed rgba(255, 255, 255, 0.55);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.mm-theme-switcher:hover .mm-theme-trigger-ring,
.mm-theme-trigger[aria-expanded="true"] .mm-theme-trigger-ring { opacity: 1; }

.mm-theme-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: #FFF;
  color: #14120E;
  border: 1px solid rgba(20, 18, 14, 0.08);
  border-radius: 14px;
  padding: 8px;
  box-shadow:
    0 1px 2px rgba(20, 18, 14, 0.06),
    0 24px 56px -16px rgba(20, 18, 14, 0.32);
  z-index: 100;
  animation: mm-theme-pop-in 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes mm-theme-pop-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.mm-theme-pop-head {
  padding: 8px 12px 6px;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8A8377;
  font-weight: 700;
}
.mm-theme-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  background: none;
  border: none;
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: #14120E;
  transition: background 0.12s ease;
}
.mm-theme-row:hover { background: #FAF7EE; }
.mm-theme-row[data-active="true"] { background: rgba(201, 167, 106, 0.08); }
.mm-theme-row-swatch {
  width: 22px; height: 22px;
  border-radius: 7px;
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(20, 18, 14, 0.12), 0 1px 2px rgba(20, 18, 14, 0.08);
}
.mm-theme-row-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.mm-theme-row-label { font-size: 13.5px; font-weight: 600; }
.mm-theme-row-hint { font-size: 11.5px; color: #8A8377; }
.mm-theme-row-tick { color: #C9A76A; font-weight: 700; margin-left: auto; }

/* ─── Theme overrides ─── */

/* Daylight — cream surface, gold accents, light marketing chrome */
html[data-mm-theme="light"] {
  --bg: #FAF7EE;
  --bg-soft: #FFF;
  --bg-card: #FFF;
  --border: rgba(20, 18, 14, 0.08);
  --border-2: rgba(20, 18, 14, 0.14);
  --text: #14120E;
  --text-dim: rgba(20, 18, 14, 0.7);
  --text-mute: rgba(20, 18, 14, 0.5);
  --accent: #C9A76A;
  --accent-2: #B89254;
  --accent-3: #8B6F3D;
}
html[data-mm-theme="light"] .mm-stickybar,
html[data-mm-theme="light"] .nav {
  background: linear-gradient(90deg, #FFF 0%, #FAF7EE 100%) !important;
  color: #14120E;
  border-bottom-color: rgba(201, 167, 106, 0.35) !important;
}
html[data-mm-theme="light"] .mm-stickybar-text,
html[data-mm-theme="light"] .mm-stickybar-text strong { color: #14120E; }
html[data-mm-theme="light"] .mm-stickybar-contact,
html[data-mm-theme="light"] .mm-stickybar-cta { color: #14120E; }
html[data-mm-theme="light"] .mm-stickybar-cta { background: #14120E; color: #FAF7EE; }

/* Aqua — teal + sky, the Aqua Portal brand on the marketing site */
html[data-mm-theme="aqua"] {
  --bg: #03171F;
  --bg-soft: #062029;
  --bg-card: #0A2A36;
  --border: rgba(125, 211, 252, 0.14);
  --border-2: rgba(125, 211, 252, 0.22);
  --text: #E0F2FE;
  --text-dim: rgba(224, 242, 254, 0.7);
  --text-mute: rgba(224, 242, 254, 0.45);
  --accent: #7DD3FC;
  --accent-2: #38BDF8;
  --accent-3: #0E7490;
}
html[data-mm-theme="aqua"] .mm-stickybar,
html[data-mm-theme="aqua"] .nav {
  background: linear-gradient(90deg, #03171F 0%, #0A2A36 100%) !important;
  border-bottom-color: rgba(125, 211, 252, 0.22) !important;
}
html[data-mm-theme="aqua"] .mm-stickybar-text { color: #7DD3FC; }
html[data-mm-theme="aqua"] .mm-stickybar-text strong { color: #E0F2FE; }
html[data-mm-theme="aqua"] .mm-stickybar-cta { background: #7DD3FC; color: #03171F; }

/* Noir — pure black + bone white, minimal */
html[data-mm-theme="noir"] {
  --bg: #000;
  --bg-soft: #0a0a0a;
  --bg-card: #111;
  --border: rgba(255, 255, 255, 0.12);
  --border-2: rgba(255, 255, 255, 0.2);
  --text: #FAFAF7;
  --text-dim: rgba(250, 250, 247, 0.7);
  --text-mute: rgba(250, 250, 247, 0.45);
  --accent: #FAFAF7;
  --accent-2: #DDD;
  --accent-3: #888;
}
html[data-mm-theme="noir"] .mm-stickybar,
html[data-mm-theme="noir"] .nav {
  background: #000 !important;
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}
html[data-mm-theme="noir"] .mm-stickybar-text { color: #DDD; }
html[data-mm-theme="noir"] .mm-stickybar-text strong { color: #FFF; }
html[data-mm-theme="noir"] .mm-stickybar-cta { background: #FFF; color: #000; }

/* Smooth surface transitions when switching themes */
.mm-stickybar, .nav, body {
  transition:
    background 0.4s ease,
    color 0.4s ease,
    border-color 0.4s ease;
}

/* ─── 2026-05-09 — Nav dropdown grace delay ─────────────────────────
   Dropdowns stay open for ~1s after the mouse leaves (so the user
   has time to move down into them). If the user hovers ANOTHER
   dropdown in the meantime, the old one snaps closed immediately so
   they don't overlap. */
/* Industries-style standard dropdown ONLY — the Resources mega menu
   keeps its original behavior (defined earlier in this file). We
   exclude .nav-dropdown-mega here via :not(). */
.nav-dropdown:not(.nav-dropdown-mega) .nav-dropdown-menu {
  display: block !important;     /* override the existing display:none */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition:
    opacity 0.35s ease,
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 1s;     /* delayed hide */
}
.nav-dropdown:not(.nav-dropdown-mega):hover .nav-dropdown-menu,
.nav-dropdown:not(.nav-dropdown-mega):focus-within .nav-dropdown-menu,
.nav-dropdown:not(.nav-dropdown-mega) .nav-dropdown-menu:hover {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
  /* Delay the show ~180ms so the gold underline draws in first, then
     the menu eases down underneath it. */
  transition:
    opacity 0.4s ease 0.18s,
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.18s,
    visibility 0s linear 0s;
}
/* If a different standard .nav-dropdown is being hovered, snap the
   others closed (the mega menu is unaffected). */
.nav:has(.nav-dropdown:not(.nav-dropdown-mega):hover) .nav-dropdown:not(.nav-dropdown-mega):not(:hover):not(:focus-within) .nav-dropdown-menu {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-4px);
  transition:
    opacity 0.18s ease,
    visibility 0s linear 0.18s;
}

/* Resources mega menu — generous 2s grace period after hover-out so
   elderly visitors have time to reach it. The original opacity/
   visibility transitions in the existing rules use the standard
   :hover/focus-within fade — here we extend the visibility hide-delay
   AND delay pointer-events so the menu stays clickable during grace. */
.nav-mega-menu {
  pointer-events: auto !important;     /* always interactive while visible */
  transition:
    opacity 1.6s ease 0.4s,            /* fade out slowly, starts after 0.4s */
    visibility 0s linear 2s !important; /* hide after the full 2s grace */
}
.nav-dropdown-mega:hover .nav-mega-menu,
.nav-dropdown-mega:focus-within .nav-mega-menu,
.nav-mega-menu:hover {
  pointer-events: auto !important;
  transition:
    opacity 0.2s ease,
    visibility 0s linear 0s !important; /* show immediately */
}
/* If the Industries (or any other standard) dropdown is being hovered,
   the mega menu vanishes INSTANTLY — no fade, no delay. */
.nav:has(.nav-dropdown:not(.nav-dropdown-mega):hover) .nav-mega-menu {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: none !important;
}
/* And the reverse — if the Resources mega menu is being hovered, any
   standard dropdown panel snaps closed instantly. Clear intent wins. */
.nav:has(.nav-dropdown-mega:hover) .nav-dropdown:not(.nav-dropdown-mega):not(:hover):not(:focus-within) .nav-dropdown-menu {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: none !important;
}

/* ─── 2026-05-09 — Per-route chrome rules ─── */

/* On /health-check: keep the nav as-is, but remove the redundant HC
   CTA from the stickybar and any chevron handles (collapse/expand/side).
   Visitors are already on the funnel — don't push them sideways. */
body.mm-on-health-check .mm-stickybar-cta,
body.mm-on-health-check .mm-nav-collapse,
body.mm-on-health-check .mm-nav-expand,
body.mm-on-health-check .mm-nav-side-tab {
  display: none !important;
}

/* ─── 2026-05-09 — Inline contacts inside the leaky-customer stickybar ─── */

.mm-stickybar-contacts {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid rgba(201, 167, 106, 0.22);
}
.mm-stickybar-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  color: rgba(212, 184, 136, 0.7);
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease, transform 0.18s cubic-bezier(0.16,1,0.3,1);
}
.mm-stickybar-contact:hover {
  color: #FFF;
  background: rgba(212, 184, 136, 0.12);
  transform: translateY(-1px);
}
.mm-stickybar-contact svg { display: block; }

@media (max-width: 720px) {
  .mm-stickybar-contacts { gap: 0; margin-left: 6px; padding-left: 6px; }
  .mm-stickybar-contact { width: 20px; height: 20px; }
}

/* ─── 2026-05-09 — Projects / case-studies page ─── */

.mm-projects { background: #FAF7EE; padding-bottom: 80px; }

.mm-projects-hero {
  background: linear-gradient(180deg, #FFF 0%, #FAF7EE 100%);
  padding: 80px 24px 56px;
  text-align: center;
  border-bottom: 1px solid rgba(20, 18, 14, 0.06);
}
.mm-projects-hero .eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #C9A76A;
  font-weight: 700;
  margin-bottom: 14px;
}
.mm-projects-hero h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(34px, 5vw, 52px);
  margin: 0 0 16px;
  color: #14120E;
  letter-spacing: -0.02em;
}
.mm-projects-hero p {
  max-width: 580px;
  margin: 0 auto;
  color: #6B635A;
  font-size: 16px;
  line-height: 1.55;
}

.mm-projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 24px;
  margin-top: 48px;
}
@media (max-width: 480px) {
  .mm-projects-grid { grid-template-columns: 1fr; }
}

.mm-project-card {
  --mm-project-accent: #C9A76A;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 26px;
  background: #FFF;
  border: 1px solid rgba(20, 18, 14, 0.08);
  border-radius: 16px;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  overflow: hidden;
}
.mm-project-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--mm-project-accent);
  opacity: 0.85;
}
.mm-project-card:hover {
  border-color: var(--mm-project-accent);
  transform: translateY(-3px);
  box-shadow: 0 16px 40px -16px rgba(20, 18, 14, 0.18);
}

.mm-project-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mm-project-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8A8377;
  font-weight: 600;
}
.mm-project-dot { color: rgba(20, 18, 14, 0.25); }

.mm-project-status {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid;
}
.mm-project-status-live {
  color: #228B5B;
  background: rgba(34, 139, 91, 0.08);
  border-color: rgba(34, 139, 91, 0.3);
}
.mm-project-status-completed {
  color: #6B635A;
  background: rgba(20, 18, 14, 0.05);
  border-color: rgba(20, 18, 14, 0.12);
}
.mm-project-status-in-progress {
  color: #B89254;
  background: rgba(201, 167, 106, 0.1);
  border-color: rgba(201, 167, 106, 0.3);
}

.mm-project-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 4px 0 0;
  color: #14120E;
}
.mm-project-client {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #14120E;
}
.mm-project-swatch {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 4px;
  background: var(--mm-project-accent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}
.mm-project-summary {
  margin: 0;
  color: #4A4439;
  font-size: 14px;
  line-height: 1.55;
}

.mm-project-outcomes {
  list-style: none;
  padding: 16px;
  margin: 4px 0 0;
  background: #FAF7EE;
  border: 1px solid rgba(20, 18, 14, 0.06);
  border-radius: 10px;
  display: grid;
  gap: 10px;
}
.mm-project-outcomes li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 4px 12px;
}
.mm-project-delta {
  grid-column: 1;
  grid-row: 1 / span 2;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--mm-project-accent);
  letter-spacing: -0.02em;
  align-self: center;
  min-width: 64px;
}
.mm-project-metric {
  grid-column: 2;
  grid-row: 1;
  font-size: 13px;
  font-weight: 600;
  color: #14120E;
}
.mm-project-detail {
  grid-column: 2;
  grid-row: 2;
  font-size: 12px;
  color: #8A8377;
}

.mm-project-services {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mm-project-chip {
  font-size: 11.5px;
  font-weight: 500;
  color: #4A4439;
  background: rgba(20, 18, 14, 0.04);
  padding: 4px 10px;
  border-radius: 999px;
}

.mm-project-link {
  align-self: flex-start;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mm-project-accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.mm-project-link:hover { color: #14120E; }

.mm-projects-cta {
  margin-top: 64px;
  padding: 48px 32px;
  background: #14120E;
  color: #FAF7EE;
  border-radius: 20px;
  text-align: center;
}
.mm-projects-cta h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(24px, 3.5vw, 34px);
  margin: 0 0 10px;
  color: #FFF;
  letter-spacing: -0.015em;
}
.mm-projects-cta p {
  margin: 0 auto 24px;
  max-width: 520px;
  color: rgba(250, 247, 238, 0.75);
  font-size: 15px;
  line-height: 1.55;
}
.mm-projects-cta-row {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* ─── 2026-05-09 — Dedicated 404 page ─── */

.mm-404 {
  position: relative;
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(201, 167, 106, 0.10) 0%, transparent 60%),
    linear-gradient(180deg, #FFF 0%, #FAF7EE 100%);
  overflow: hidden;
}
.mm-404::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(20, 18, 14, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 18, 14, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, #000 0%, transparent 75%);
  pointer-events: none;
}

.mm-404-inner {
  position: relative;
  max-width: 640px;
  text-align: center;
  z-index: 1;
}

.mm-404-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: #B89254;
  background: rgba(201, 167, 106, 0.10);
  border: 1px solid rgba(201, 167, 106, 0.28);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 32px;
}
.mm-404-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: #C9A76A;
  box-shadow: 0 0 0 4px rgba(201, 167, 106, 0.18);
}

.mm-404-numerals {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(120px, 22vw, 220px);
  line-height: 0.9;
  font-weight: 600;
  color: #14120E;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, #14120E 0%, #4A4439 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 28px;
  user-select: none;
}
.mm-404-zero {
  position: relative;
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
}
.mm-404-ring {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 12px solid transparent;
  background: linear-gradient(135deg, #C9A76A 0%, #B89254 50%, #14120E 100%) border-box;
  -webkit-mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.mm-404-ring-2 {
  inset: 18%;
  border-width: 6px;
  opacity: 0.4;
  background: linear-gradient(45deg, #C9A76A, transparent) border-box;
}

.mm-404-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #14120E;
  margin: 0 0 14px;
}
.mm-404-sub {
  max-width: 480px;
  margin: 0 auto 40px;
  font-size: 15px;
  line-height: 1.6;
  color: #6B635A;
}

.mm-404-grid {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 560px;
}
@media (max-width: 520px) {
  .mm-404-grid { grid-template-columns: 1fr; }
}
.mm-404-card {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 12px;
  padding: 16px 18px;
  background: #FFF;
  border: 1px solid rgba(20, 18, 14, 0.08);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  text-align: left;
}
.mm-404-card:hover {
  border-color: #C9A76A;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -12px rgba(20, 18, 14, 0.18);
}
.mm-404-card-label {
  grid-column: 1;
  grid-row: 1;
  font-size: 14.5px;
  font-weight: 600;
  color: #14120E;
}
.mm-404-card-hint {
  grid-column: 1;
  grid-row: 2;
  font-size: 12px;
  color: #8A8377;
}
.mm-404-card-arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 18px;
  color: #C9A76A;
  opacity: 0.55;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.mm-404-card:hover .mm-404-card-arrow {
  opacity: 1;
  transform: translateX(4px);
}

.mm-404-foot {
  margin: 36px 0 0;
  font-size: 13px;
  color: #8A8377;
}
.mm-404-foot a {
  color: #B89254;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 167, 106, 0.4);
}
.mm-404-foot a:hover { color: #14120E; border-bottom-color: #14120E; }

/* ─── 2026-05-09 — Profile + Tenant switcher redesign (Vercel-style) ─── */

/* Tenant switcher trigger — compact chip, bigger swatch, hide subtitle inline */
.mm-tenant-switcher summary {
  padding: 5px 10px 5px 6px !important;
  gap: 8px !important;
  max-width: 240px;
  font-weight: 500;
}
.mm-tenant-switcher summary .mm-tenant-swatch {
  width: 20px; height: 20px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(20, 18, 14, 0.12);
  border: none;
}
.mm-tenant-switcher summary .mm-tenant-name {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.mm-tenant-switcher summary .mm-tenant-sub { display: none; }
.mm-tenant-switcher summary .mm-tenant-caret {
  font-size: 10px;
  opacity: 0.55;
  margin-left: 2px;
}

/* Tenant pop — wider, richer rows, color-tinted active state */
.mm-tenant-pop {
  min-width: 300px;
  padding: 8px !important;
  border-radius: 14px !important;
  box-shadow:
    0 1px 2px rgba(20, 18, 14, 0.06),
    0 24px 56px -16px rgba(20, 18, 14, 0.28) !important;
}
.mm-tenant-pop-head {
  padding: 10px 12px 8px !important;
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
}
.mm-tenant-row {
  padding: 9px 10px !important;
  gap: 12px !important;
  border-radius: 10px !important;
  font-weight: 500;
  transition: background 0.12s ease;
}
.mm-tenant-row .mm-tenant-swatch {
  width: 24px; height: 24px;
  border-radius: 7px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(20, 18, 14, 0.1);
  border: none;
}
.mm-tenant-row[data-active="true"] {
  background: rgba(201, 167, 106, 0.08);
}
.mm-tenant-row[data-active="true"] .mm-tenant-row-name {
  font-weight: 600;
  color: #14120E;
}
.mm-tenant-tick {
  color: #C9A76A !important;
  font-size: 13px;
}
.mm-tenant-divider {
  margin: 6px 8px !important;
  background: rgba(20, 18, 14, 0.08) !important;
}
.mm-tenant-add-trigger {
  color: #6B635A !important;
  font-weight: 500 !important;
}
.mm-tenant-add-trigger:hover { color: #B89254 !important; }
.mm-tenant-plus {
  width: 24px; height: 24px;
  border-radius: 7px;
  font-size: 14px;
}

/* Profile circle — slightly larger ring on hover, brand-tinted ring on open */
.mm-profile-menu summary .mm-profile-avatar,
.mm-profile-menu summary .mm-profile-avatar-img {
  width: 32px !important;
  height: 32px !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: linear-gradient(135deg, #1F1B14 0%, #14120E 100%) !important;
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, 0.9),
    0 1px 3px rgba(20, 18, 14, 0.18),
    0 4px 10px -2px rgba(20, 18, 14, 0.18) !important;
}
.mm-profile-menu summary:hover .mm-profile-avatar,
.mm-profile-menu summary:hover .mm-profile-avatar-img {
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, 0.9),
    0 0 0 4px rgba(201, 167, 106, 0.18),
    0 2px 6px rgba(20, 18, 14, 0.2) !important;
  transform: none !important;
}
.mm-profile-menu[open] summary .mm-profile-avatar,
.mm-profile-menu[open] summary .mm-profile-avatar-img {
  box-shadow:
    0 0 0 1.5px #FFF,
    0 0 0 4px rgba(201, 167, 106, 0.55) !important;
}

/* Profile pop — wider, gradient header band, polished rows */
.mm-profile-pop {
  min-width: 280px !important;
  padding: 0 !important;
  border-radius: 14px !important;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(20, 18, 14, 0.06),
    0 24px 56px -16px rgba(20, 18, 14, 0.28) !important;
  background: #FFF !important;
}
.mm-profile-pop-head {
  background: linear-gradient(135deg, #FAF7EE 0%, #FFF 100%);
  padding: 16px 16px 14px !important;
  border-bottom: 1px solid rgba(20, 18, 14, 0.06) !important;
  margin-bottom: 0 !important;
  position: relative;
}
.mm-profile-pop-head::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #C9A76A 0%, #B89254 100%);
}
.mm-profile-pop-name {
  font-size: 14.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}
.mm-profile-pop-email {
  font-size: 12px !important;
  margin-top: 3px !important;
}
.mm-profile-pop-role {
  margin-top: 10px !important;
  font-size: 9.5px !important;
}
.mm-profile-pop-list {
  padding: 6px !important;
}
.mm-profile-pop-item {
  padding: 9px 11px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500;
  gap: 11px !important;
  transition: background 0.1s ease;
}
.mm-profile-pop-item > span:first-child {
  font-size: 15px !important;
  width: 18px;
  text-align: center;
  opacity: 0.85 !important;
}
.mm-profile-pop-out {
  padding: 4px 6px 6px !important;
  margin: 0 !important;
}