/* ==========================================================================
   MERCER & BLACKWELL LLP — GLOBAL STYLESHEET  (v2 — moodboard-aligned)
   WordPress-compatible. All selectors prefixed "mb-" to avoid theme collisions.
   Design system: Navy / Gold / Paper — synthesized from client moodboards:
   premium navy+gold authority (board 1), data-forward consulting layout
   language (board 2 "Advisory"), stat bars / process steps / dark service
   cards (board 3) — adapted for an elite, global, Fortune-500-serving firm.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTS
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Fustat:wght@400;500;600;700;800&family=Public+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* --------------------------------------------------------------------------
   2. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Color — Navy / Gold / Paper system */
  --mb-navy-950:#0B1128;
  --mb-navy-900:#101B3D;
  --mb-navy-800:#16234C;
  --mb-navy-700:#212F5C;
  --mb-navy-600:#37457A;

  --mb-gold-500:#C9A227;
  --mb-gold-400:#D9BB4F;
  --mb-gold-300:#E8D48B;
  --mb-gold-100:#F6EFD6;

  --mb-paper:#F7F8FB;
  --mb-paper-dim:#EEF1F7;
  --mb-line:#E1E5EE;
  --mb-line-on-navy:#2B385F;

  --mb-text-ink:#16203A;
  --mb-text-muted:#5B6478;
  --mb-text-on-navy:#F5F7FB;
  --mb-text-on-navy-soft:#C7CEE6;
  --mb-text-on-navy-muted:#9AA3BE;

  --mb-white:#FFFFFF;
  --mb-success:#1E7A4C;
  --mb-error:#B3261E;
  --mb-star:#E3A008;

  /* Typography */
  --mb-font-display:'Fustat', 'Public Sans', -apple-system, sans-serif;
  --mb-font-body:'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mb-font-mono:'IBM Plex Mono', 'Courier New', monospace;

  --mb-fs-xs:0.75rem;
  --mb-fs-sm:0.875rem;
  --mb-fs-base:1rem;
  --mb-fs-md:1.125rem;
  --mb-fs-lg:1.375rem;
  --mb-fs-xl:1.75rem;
  --mb-fs-2xl:2.25rem;
  --mb-fs-3xl:3rem;
  --mb-fs-4xl:3.75rem;
  --mb-fs-stat:3rem;

  /* Spacing scale */
  --mb-sp-1:4px; --mb-sp-2:8px; --mb-sp-3:12px; --mb-sp-4:16px; --mb-sp-5:24px;
  --mb-sp-6:32px; --mb-sp-7:48px; --mb-sp-8:64px; --mb-sp-9:96px; --mb-sp-10:128px;

  /* Layout */
  --mb-container-max:1200px;
  --mb-container-narrow:800px;
  --mb-radius-sm:6px;
  --mb-radius-md:12px;
  --mb-radius-lg:20px;
  --mb-header-h:84px;

  /* Motion */
  --mb-ease:cubic-bezier(0.4,0,0.2,1);
  --mb-speed-fast:150ms;
  --mb-speed-base:250ms;
  --mb-speed-slow:450ms;

  /* Shadow */
  --mb-shadow-sm:0 1px 3px rgba(11,17,40,0.08);
  --mb-shadow-md:0 12px 32px rgba(11,17,40,0.12);
  --mb-shadow-lg:0 24px 64px rgba(11,17,40,0.24);
  --mb-shadow-gold:0 10px 28px rgba(201,162,39,0.28);
}

/* --------------------------------------------------------------------------
   3. RESET
   -------------------------------------------------------------------------- */
.mb-site *, .mb-site *::before, .mb-site *::after{ box-sizing:border-box; }
.mb-site{ margin:0; padding:0; }
.mb-site ul, .mb-site ol{ margin:0; padding:0; list-style:none; }
.mb-site img, .mb-site svg{ max-width:100%; display:block; }
.mb-site a{ text-decoration:none; } /* color intentionally NOT set here — .mb-site a{color} has higher
  specificity (element+class) than single-class component rules like .mb-nav__link{color}, which was
  silently overriding them back to the dark body-text color even on navy backgrounds. Every anchor in
  this system carries its own color-bearing class (.mb-nav__link, .mb-btn--*, .mb-footer a, etc.), so
  removing the reset's color declaration lets those rules win as intended without a specificity fight. */
.mb-site button{ font:inherit; cursor:pointer; background:none; border:none; }
.mb-site input, .mb-site textarea, .mb-site select{ font:inherit; }
.mb-site h1,.mb-site h2,.mb-site h3,.mb-site h4,.mb-site h5,.mb-site h6,
.mb-site p,.mb-site figure{ margin:0; }

/* --------------------------------------------------------------------------
   4. BASE
   -------------------------------------------------------------------------- */
.mb-site{
  font-family:var(--mb-font-body);
  font-size:var(--mb-fs-base);
  line-height:1.65;
  color:var(--mb-text-ink);
  background:var(--mb-paper);
  -webkit-font-smoothing:antialiased;
}

.mb-site h1,.mb-site h2,.mb-site h3,.mb-site h4,.mb-site h5{
  font-family:var(--mb-font-display);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-0.01em;
  color:var(--mb-navy-900);
}

.mb-h1{ font-size:var(--mb-fs-4xl); font-weight:800; letter-spacing:-0.02em; }
.mb-h2{ font-size:var(--mb-fs-3xl); }
.mb-h3{ font-size:var(--mb-fs-2xl); }
.mb-h4{ font-size:var(--mb-fs-xl); }
.mb-h5{ font-size:var(--mb-fs-md); }

@media (max-width:768px){
  .mb-h1{ font-size:var(--mb-fs-3xl); }
  .mb-h2{ font-size:var(--mb-fs-2xl); }
  .mb-h3{ font-size:var(--mb-fs-xl); }
}

.mb-site a:focus-visible,
.mb-site button:focus-visible,
.mb-site input:focus-visible,
.mb-site textarea:focus-visible,
.mb-site select:focus-visible{
  outline:2px solid var(--mb-gold-500);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  .mb-site *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

/* --------------------------------------------------------------------------
   5. LAYOUT
   -------------------------------------------------------------------------- */
.mb-container{ max-width:var(--mb-container-max); margin:0 auto; padding:0 var(--mb-sp-6); }
.mb-container--narrow{ max-width:var(--mb-container-narrow); }
@media (max-width:600px){ .mb-container{ padding:0 var(--mb-sp-4); } }

.mb-section{ padding:var(--mb-sp-9) 0; }
.mb-section--tight{ padding:var(--mb-sp-7) 0; }
@media (max-width:768px){
  .mb-section{ padding:var(--mb-sp-7) 0; }
  .mb-section--tight{ padding:var(--mb-sp-6) 0; }
}

.mb-section--navy{ background:var(--mb-navy-900); color:var(--mb-text-on-navy); }
.mb-section--navy .mb-h1, .mb-section--navy .mb-h2, .mb-section--navy .mb-h3, .mb-section--navy .mb-h4{ color:var(--mb-text-on-navy); }
.mb-section--navy-deep{ background:radial-gradient(ellipse at top, var(--mb-navy-800) 0%, var(--mb-navy-950) 70%); color:var(--mb-text-on-navy); }
.mb-section--navy-deep .mb-h1, .mb-section--navy-deep .mb-h2{ color:var(--mb-text-on-navy); }
.mb-section--dim{ background:var(--mb-paper-dim); }

.mb-grid{ display:grid; gap:var(--mb-sp-6); }
.mb-grid--2{ grid-template-columns:repeat(2,1fr); }
.mb-grid--3{ grid-template-columns:repeat(3,1fr); }
.mb-grid--4{ grid-template-columns:repeat(4,1fr); }
.mb-grid--6{ grid-template-columns:repeat(6,1fr); }
@media (max-width:900px){
  .mb-grid--3, .mb-grid--4, .mb-grid--6{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .mb-grid--2, .mb-grid--3, .mb-grid--4, .mb-grid--6{ grid-template-columns:1fr; }
}

.mb-flex{ display:flex; }
.mb-flex--between{ justify-content:space-between; align-items:center; }
.mb-flex--center{ justify-content:center; align-items:center; }
.mb-flex--wrap{ flex-wrap:wrap; }
.mb-gap-2{ gap:var(--mb-sp-2); } .mb-gap-3{ gap:var(--mb-sp-3); }
.mb-gap-4{ gap:var(--mb-sp-4); } .mb-gap-5{ gap:var(--mb-sp-5); }

.mb-split{ display:grid; grid-template-columns:1fr 1fr; gap:var(--mb-sp-8); align-items:center; }
@media (max-width:900px){ .mb-split{ grid-template-columns:1fr; gap:var(--mb-sp-6); } }

/* --------------------------------------------------------------------------
   6. EYEBROW LABEL
   -------------------------------------------------------------------------- */
.mb-eyebrow{
  display:inline-flex; align-items:center; gap:var(--mb-sp-2);
  font-family:var(--mb-font-mono); font-size:var(--mb-fs-xs);
  letter-spacing:1.5px; text-transform:uppercase;
  color:var(--mb-gold-500); margin-bottom:var(--mb-sp-4);
}
.mb-eyebrow::before{ content:"//"; color:var(--mb-gold-500); }
.mb-section--navy .mb-eyebrow, .mb-section--navy-deep .mb-eyebrow{ color:var(--mb-gold-400); }

/* --------------------------------------------------------------------------
   7. BUTTONS
   -------------------------------------------------------------------------- */
.mb-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--mb-sp-2);
  padding:14px 30px; font-family:var(--mb-font-body); font-size:var(--mb-fs-sm); font-weight:700;
  letter-spacing:0.2px; border-radius:var(--mb-radius-sm); border:1px solid transparent;
  transition:background var(--mb-speed-base) var(--mb-ease), color var(--mb-speed-base) var(--mb-ease),
             border-color var(--mb-speed-base) var(--mb-ease), transform var(--mb-speed-fast) var(--mb-ease),
             box-shadow var(--mb-speed-base) var(--mb-ease);
}
.mb-btn:active{ transform:translateY(1px); }

.mb-btn--primary{ background:var(--mb-gold-500); color:var(--mb-navy-950); }
.mb-btn--primary:hover{ background:var(--mb-gold-400); box-shadow:var(--mb-shadow-gold); }

.mb-btn--outline-navy{ background:transparent; color:var(--mb-navy-900); border-color:var(--mb-navy-900); }
.mb-btn--outline-navy:hover{ background:var(--mb-navy-900); color:var(--mb-text-on-navy); }

.mb-btn--outline-light{ background:transparent; color:var(--mb-text-on-navy); border-color:rgba(245,247,251,0.35); }
.mb-btn--outline-light:hover{ background:var(--mb-text-on-navy); color:var(--mb-navy-900); border-color:var(--mb-text-on-navy); }

.mb-btn--text{ padding:0; color:var(--mb-gold-500); font-weight:700; position:relative; }
.mb-btn--text::after{ content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform var(--mb-speed-base) var(--mb-ease); }
.mb-btn--text:hover::after{ transform:scaleX(1); transform-origin:left; }

/* --------------------------------------------------------------------------
   8. CARDS
   -------------------------------------------------------------------------- */
.mb-card{
  background:var(--mb-white); border:1px solid var(--mb-line); border-radius:var(--mb-radius-md);
  padding:var(--mb-sp-6);
  transition:box-shadow var(--mb-speed-base) var(--mb-ease), border-color var(--mb-speed-base) var(--mb-ease), transform var(--mb-speed-base) var(--mb-ease);
}
.mb-card:hover{ box-shadow:var(--mb-shadow-md); border-color:var(--mb-gold-400); transform:translateY(-3px); }
.mb-card__icon{
  width:52px; height:52px; border-radius:var(--mb-radius-sm); background:var(--mb-gold-100);
  color:var(--mb-gold-500); display:flex; align-items:center; justify-content:center; font-size:22px;
  margin-bottom:var(--mb-sp-4);
}

/* Dark service card — board-3 style navy grid */
.mb-card--dark{
  background:var(--mb-navy-800); border:1px solid var(--mb-navy-700); border-radius:var(--mb-radius-md);
  padding:var(--mb-sp-6); color:var(--mb-text-on-navy);
  transition:background var(--mb-speed-base) var(--mb-ease), transform var(--mb-speed-base) var(--mb-ease);
}
.mb-card--dark:hover{ background:var(--mb-navy-700); transform:translateY(-3px); }
.mb-card--dark .mb-card__icon{ background:rgba(201,162,39,0.14); color:var(--mb-gold-400); }
.mb-card--dark h5{ color:var(--mb-text-on-navy); }
.mb-card--dark p{ color:var(--mb-text-on-navy-muted); }

/* --------------------------------------------------------------------------
   9. STATS BAR
   -------------------------------------------------------------------------- */
.mb-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--mb-sp-6); }
@media (max-width:768px){ .mb-stats{ grid-template-columns:repeat(2,1fr); } }
.mb-stat{ text-align:center; }
.mb-stat__icon{ font-size:22px; color:var(--mb-gold-500); margin-bottom:var(--mb-sp-3); }
.mb-stat__num{ font-family:var(--mb-font-mono); font-size:var(--mb-fs-stat); font-weight:600; color:var(--mb-navy-900); line-height:1; }
.mb-section--navy .mb-stat__num, .mb-section--navy-deep .mb-stat__num{ color:var(--mb-text-on-navy); }
.mb-stat__label{ font-size:var(--mb-fs-sm); color:var(--mb-text-muted); margin-top:var(--mb-sp-2); }
.mb-section--navy .mb-stat__label, .mb-section--navy-deep .mb-stat__label{ color:var(--mb-text-on-navy-muted); }

/* --------------------------------------------------------------------------
   10. PROCESS STEPS
   -------------------------------------------------------------------------- */
.mb-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--mb-sp-6); position:relative; }
@media (max-width:768px){ .mb-steps{ grid-template-columns:1fr; } }
.mb-step{ text-align:center; position:relative; }
.mb-step__badge{
  width:88px; height:88px; border-radius:50%; margin:0 auto var(--mb-sp-4);
  display:flex; align-items:center; justify-content:center;
  background:var(--mb-navy-900); color:var(--mb-gold-400);
  font-family:var(--mb-font-mono); font-size:var(--mb-fs-md); font-weight:600;
  border:2px dashed var(--mb-gold-300);
}
.mb-step__num{ position:absolute; top:-6px; right:calc(50% - 44px); background:var(--mb-gold-500); color:var(--mb-navy-950); font-family:var(--mb-font-mono); font-size:11px; font-weight:700; padding:3px 8px; border-radius:20px; }
.mb-step__connector{ position:absolute; top:44px; left:60%; width:80%; height:1px; border-top:2px dashed var(--mb-line); z-index:-1; }
@media (max-width:768px){ .mb-step__connector{ display:none; } }

/* --------------------------------------------------------------------------
   11. TESTIMONIALS
   -------------------------------------------------------------------------- */
.mb-testimonial{ background:var(--mb-white); border:1px solid var(--mb-line); border-radius:var(--mb-radius-md); padding:var(--mb-sp-6); }
.mb-testimonial__stars{ color:var(--mb-star); font-size:var(--mb-fs-sm); letter-spacing:2px; margin-bottom:var(--mb-sp-3); }
.mb-testimonial__quote{ color:var(--mb-text-ink); font-size:var(--mb-fs-base); margin-bottom:var(--mb-sp-5); }
.mb-testimonial__author{ display:flex; align-items:center; gap:var(--mb-sp-3); }
.mb-avatar{
  width:44px; height:44px; border-radius:50%; background:var(--mb-navy-900); color:var(--mb-gold-400);
  display:flex; align-items:center; justify-content:center; font-family:var(--mb-font-mono); font-weight:600; font-size:var(--mb-fs-sm); flex:none;
}
.mb-avatar--lg{ width:88px; height:88px; font-size:var(--mb-fs-xl); }
.mb-testimonial__name{ font-weight:700; font-size:var(--mb-fs-sm); color:var(--mb-navy-900); }
.mb-testimonial__role{ font-size:var(--mb-fs-xs); color:var(--mb-text-muted); }

/* --------------------------------------------------------------------------
   12. CAROUSEL (dots-based, all slides remain in DOM for SEO/no-JS)
   -------------------------------------------------------------------------- */
.mb-carousel__track{ display:flex; gap:var(--mb-sp-6); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:4px; }
.mb-carousel__track::-webkit-scrollbar{ display:none; }
.mb-carousel__track > *{ scroll-snap-align:start; flex:0 0 auto; width:min(360px,86vw); }
.mb-carousel__dots{ display:flex; justify-content:center; gap:8px; margin-top:var(--mb-sp-5); }
.mb-carousel__dot{ width:8px; height:8px; border-radius:50%; background:var(--mb-line); transition:background var(--mb-speed-base) var(--mb-ease), width var(--mb-speed-base) var(--mb-ease); }
.mb-carousel__dot.is-active{ background:var(--mb-gold-500); width:22px; border-radius:6px; }

/* --------------------------------------------------------------------------
   13. NEWSLETTER / CTA BANNER
   -------------------------------------------------------------------------- */
.mb-banner{ background:var(--mb-navy-900); border-radius:var(--mb-radius-lg); padding:var(--mb-sp-8) var(--mb-sp-7); text-align:center; }
.mb-banner-form{ display:flex; max-width:480px; margin:var(--mb-sp-5) auto 0; gap:0; border-radius:var(--mb-radius-sm); overflow:hidden; }
.mb-banner-form input{ flex:1; border:none; padding:14px 18px; font-size:var(--mb-fs-base); font-family:var(--mb-font-body); }
.mb-banner-form button{ background:var(--mb-gold-500); color:var(--mb-navy-950); font-weight:700; padding:0 24px; display:flex; align-items:center; gap:6px; transition:background var(--mb-speed-base) var(--mb-ease); }
.mb-banner-form button:hover{ background:var(--mb-gold-400); }
@media (max-width:600px){ .mb-banner-form{ flex-direction:column; } .mb-banner-form button{ padding:14px; justify-content:center; } }

/* --------------------------------------------------------------------------
   14. BLOG / INSIGHT CARDS
   -------------------------------------------------------------------------- */
.mb-post-card{ background:var(--mb-white); border:1px solid var(--mb-line); border-radius:var(--mb-radius-md); overflow:hidden; transition:box-shadow var(--mb-speed-base) var(--mb-ease), transform var(--mb-speed-base) var(--mb-ease); }
.mb-post-card:hover{ box-shadow:var(--mb-shadow-md); transform:translateY(-3px); }
.mb-post-card__img{ aspect-ratio:16/10; object-fit:cover; width:100%; }
.mb-post-card__body{ padding:var(--mb-sp-5); }
.mb-post-card__meta{ display:flex; gap:var(--mb-sp-3); font-size:var(--mb-fs-xs); color:var(--mb-text-muted); margin-bottom:var(--mb-sp-2); font-family:var(--mb-font-mono); }
.mb-post-card__tag{ color:var(--mb-gold-500); font-weight:600; }
.mb-post-card h5{ margin-bottom:var(--mb-sp-3); }

/* --------------------------------------------------------------------------
   15. HEADER
   -------------------------------------------------------------------------- */
.mb-header{ position:sticky; top:0; z-index:100; background:var(--mb-navy-900); border-bottom:1px solid var(--mb-navy-700); height:var(--mb-header-h); transition:box-shadow var(--mb-speed-base) var(--mb-ease); }
.mb-header.is-scrolled{ box-shadow:var(--mb-shadow-md); }
.mb-header__inner{ display:flex; align-items:center; justify-content:space-between; height:100%; gap:var(--mb-sp-5); }

/* Logo — official brand asset (mb-logo-horizontal-navy.svg), inlined directly
   in the markup rather than loaded via <img> so its <text> reliably picks up
   the Fustat webfont already loaded by this stylesheet. Both header and
   footer sit on navy backgrounds sitewide, so the navy-background variant
   is the only one used in the live templates; the other three (mark-only,
   formal full lockup, light-background variant) are documented for
   reference in the style guide and available under /assets/logo/. */
.mb-logo{ display:inline-flex; align-items:center; flex:none; }
.mb-logo svg{ height:34px; width:auto; display:block; }
.mb-logo--footer svg{ height:42px; }
@media (max-width:400px){ .mb-logo svg{ height:28px; } }

.mb-nav{ display:flex; align-items:center; gap:var(--mb-sp-7); }
.mb-nav__link{ font-size:var(--mb-fs-sm); font-weight:600; color:var(--mb-text-on-navy-soft); transition:color var(--mb-speed-base) var(--mb-ease); position:relative; padding:8px 0; white-space:nowrap; }
.mb-nav__link:hover, .mb-nav__link.is-active{ color:var(--mb-text-on-navy); }
.mb-nav__link.is-active::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--mb-gold-500); }

.mb-nav-toggle{ display:none; color:var(--mb-text-on-navy); font-size:20px; flex:none; width:40px; height:40px; align-items:center; justify-content:center; border-radius:8px; }
.mb-nav-toggle:hover{ background:var(--mb-navy-800); }

/* Dropdown / submenu — desktop hover+click, mobile inline accordion */
.mb-nav__dropdown{ position:relative; }
.mb-nav__dropdown-trigger{ display:inline-flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer; }
.mb-nav__caret{ font-size:10px; color:var(--mb-text-on-navy-muted); transition:transform var(--mb-speed-base) var(--mb-ease); }
.mb-nav__dropdown.is-open .mb-nav__caret{ transform:rotate(180deg); }

.mb-nav__dropdown-panel{
  position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%) translateY(6px);
  background:var(--mb-navy-800); border:1px solid var(--mb-navy-700); border-radius:var(--mb-radius-md);
  padding:8px; min-width:200px; box-shadow:var(--mb-shadow-lg);
  opacity:0; visibility:hidden;
  transition:opacity var(--mb-speed-base) var(--mb-ease), transform var(--mb-speed-base) var(--mb-ease), visibility var(--mb-speed-base);
}
.mb-nav__dropdown:hover .mb-nav__dropdown-panel,
.mb-nav__dropdown:focus-within .mb-nav__dropdown-panel,
.mb-nav__dropdown.is-open .mb-nav__dropdown-panel{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
.mb-nav__dropdown-link{ display:block; padding:10px 14px; border-radius:6px; font-size:var(--mb-fs-sm); font-weight:500; color:var(--mb-text-on-navy); }
.mb-nav__dropdown-link:hover{ background:var(--mb-navy-700); color:var(--mb-gold-400); }

@media (max-width:960px){
  .mb-nav{ display:none; position:absolute; top:var(--mb-header-h); left:0; right:0; background:var(--mb-navy-900); flex-direction:column; align-items:stretch; gap:0; border-top:1px solid var(--mb-navy-700); max-height:calc(100vh - var(--mb-header-h)); overflow-y:auto; }
  .mb-nav.is-open{ display:flex; }
  .mb-nav__link{ width:100%; padding:var(--mb-sp-4) var(--mb-sp-6); }
  .mb-nav__link.is-active::after{ display:none; }
  .mb-nav__cta{ margin:var(--mb-sp-4) var(--mb-sp-6); }
  .mb-nav-toggle{ display:flex; }

  .mb-nav__dropdown-trigger{ width:100%; justify-content:space-between; padding:var(--mb-sp-4) var(--mb-sp-6); }
  .mb-nav__dropdown-panel{
    position:relative; transform:none; opacity:1; visibility:visible; box-shadow:none; border:none; border-radius:0;
    background:var(--mb-navy-800); padding:0; min-width:0; display:none;
  }
  .mb-nav__dropdown.is-open .mb-nav__dropdown-panel{ display:block; }
  .mb-nav__dropdown-link{ padding:var(--mb-sp-3) var(--mb-sp-6) var(--mb-sp-3) calc(var(--mb-sp-6) + 12px); border-radius:0; }
}

/* --------------------------------------------------------------------------
   16. FOOTER
   -------------------------------------------------------------------------- */
.mb-footer{ background:var(--mb-navy-950); color:var(--mb-text-on-navy-muted); padding:var(--mb-sp-9) 0 var(--mb-sp-6); }
.mb-footer a{ color:var(--mb-text-on-navy-muted); transition:color var(--mb-speed-fast) var(--mb-ease); }
.mb-footer a:hover{ color:var(--mb-text-on-navy); }
.mb-footer h5{ color:var(--mb-gold-400); font-family:var(--mb-font-mono); font-size:var(--mb-fs-xs); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:var(--mb-sp-4); font-weight:600; }
.mb-footer__grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:var(--mb-sp-7); padding-bottom:var(--mb-sp-8); border-bottom:1px solid var(--mb-navy-700); }
.mb-footer__link{ display:block; padding:var(--mb-sp-2) 0; font-size:var(--mb-fs-sm); }
.mb-footer__bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:var(--mb-sp-6); font-size:var(--mb-fs-xs); flex-wrap:wrap; gap:var(--mb-sp-3); }
.mb-social{ display:flex; gap:var(--mb-sp-4); }
.mb-social a{ width:36px; height:36px; border-radius:50%; border:1px solid var(--mb-navy-700); display:flex; align-items:center; justify-content:center; font-size:var(--mb-fs-sm); transition:border-color var(--mb-speed-base) var(--mb-ease), background var(--mb-speed-base) var(--mb-ease); }
.mb-social a:hover{ border-color:var(--mb-gold-500); background:rgba(201,162,39,0.1); }

@media (max-width:900px){ .mb-footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){
  .mb-footer__grid{ grid-template-columns:1fr; gap:var(--mb-sp-6); }
  .mb-footer__bottom{ flex-direction:column; align-items:flex-start; }
}

/* --------------------------------------------------------------------------
   17. FORMS
   -------------------------------------------------------------------------- */
.mb-field{ margin-bottom:var(--mb-sp-5); }
.mb-label{ display:block; font-size:var(--mb-fs-sm); font-weight:700; margin-bottom:var(--mb-sp-2); color:var(--mb-navy-900); }
.mb-section--navy .mb-label, .mb-section--navy-deep .mb-label{ color:var(--mb-text-on-navy); }
.mb-input, .mb-textarea, .mb-select{
  width:100%; padding:13px 16px; border:1px solid var(--mb-line); background:var(--mb-white);
  border-radius:var(--mb-radius-sm); font-size:var(--mb-fs-base); color:var(--mb-text-ink);
  transition:border-color var(--mb-speed-base) var(--mb-ease);
}
.mb-input:focus, .mb-textarea:focus, .mb-select:focus{ border-color:var(--mb-gold-500); outline:none; }
.mb-textarea{ resize:vertical; min-height:120px; }
.mb-field__hint{ font-size:var(--mb-fs-xs); color:var(--mb-text-muted); margin-top:var(--mb-sp-2); }
.mb-field__error{ font-size:var(--mb-fs-xs); color:var(--mb-error); margin-top:var(--mb-sp-2); display:none; }
.mb-field.has-error .mb-input, .mb-field.has-error .mb-textarea, .mb-field.has-error .mb-select{ border-color:var(--mb-error); }
.mb-field.has-error .mb-field__error{ display:block; }

/* --------------------------------------------------------------------------
   18. FAQ / ACCORDION
   -------------------------------------------------------------------------- */
.mb-accordion__item{ border-bottom:1px solid var(--mb-line); }
.mb-accordion__trigger{ width:100%; display:flex; justify-content:space-between; align-items:center; text-align:left; padding:var(--mb-sp-5) 0; font-family:var(--mb-font-display); font-weight:700; font-size:var(--mb-fs-md); color:var(--mb-navy-900); }
.mb-accordion__icon{ width:28px; height:28px; border-radius:50%; background:var(--mb-gold-100); color:var(--mb-gold-500); display:flex; align-items:center; justify-content:center; transition:transform var(--mb-speed-base) var(--mb-ease); flex:none; margin-left:var(--mb-sp-4); }
.mb-accordion__item.is-open .mb-accordion__icon{ transform:rotate(45deg); }
.mb-accordion__panel{ max-height:0; overflow:hidden; transition:max-height var(--mb-speed-slow) var(--mb-ease); }
.mb-accordion__panel-inner{ padding-bottom:var(--mb-sp-5); color:var(--mb-text-muted); max-width:70ch; }

/* --------------------------------------------------------------------------
   19. UTILITIES
   -------------------------------------------------------------------------- */
.mb-text-muted{ color:var(--mb-text-muted); }
.mb-text-center{ text-align:center; }
.mb-text-gold{ color:var(--mb-gold-500); }
.mb-mt-0{ margin-top:0; } .mb-mb-0{ margin-bottom:0; }
.mb-mt-3{ margin-top:var(--mb-sp-3); } .mb-mb-3{ margin-bottom:var(--mb-sp-3); }
.mb-mt-5{ margin-top:var(--mb-sp-5); } .mb-mb-5{ margin-bottom:var(--mb-sp-5); }
.mb-mt-6{ margin-top:var(--mb-sp-6); } .mb-mb-6{ margin-bottom:var(--mb-sp-6); }
.mb-max-60{ max-width:60ch; }
.mb-sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.mb-divider{ height:1px; background:var(--mb-line); border:none; margin:var(--mb-sp-7) 0; }
.mb-divider--gold{ height:2px; width:64px; background:var(--mb-gold-500); border:none; margin:var(--mb-sp-4) 0; }

.mb-img-round{ border-radius:var(--mb-radius-lg); }

/* --------------------------------------------------------------------------
   20. FILTER PILLS (Insights category filter, etc.)
   -------------------------------------------------------------------------- */
.mb-filter-pills{ display:flex; gap:var(--mb-sp-3); flex-wrap:wrap; }
.mb-filter-pill{ padding:9px 20px; border-radius:999px; border:1px solid var(--mb-line); background:var(--mb-white); font-size:var(--mb-fs-sm); font-weight:600; color:var(--mb-text-muted); transition:background var(--mb-speed-base) var(--mb-ease), color var(--mb-speed-base) var(--mb-ease), border-color var(--mb-speed-base) var(--mb-ease); }
.mb-filter-pill:hover{ border-color:var(--mb-gold-400); color:var(--mb-navy-900); }
.mb-filter-pill.is-active{ background:var(--mb-navy-900); border-color:var(--mb-navy-900); color:var(--mb-text-on-navy); }

/* --------------------------------------------------------------------------
   21. ARTICLE TABLE (long-form Insights content)
   -------------------------------------------------------------------------- */
.mb-table{ width:100%; border-collapse:collapse; margin-bottom:var(--mb-sp-5); font-size:var(--mb-fs-sm); }
.mb-table th, .mb-table td{ text-align:left; padding:14px 16px; border-bottom:1px solid var(--mb-line); vertical-align:top; }
.mb-table th{ font-family:var(--mb-font-mono); font-size:var(--mb-fs-xs); letter-spacing:0.5px; text-transform:uppercase; color:var(--mb-gold-500); background:var(--mb-paper-dim); }
.mb-table td:first-child, .mb-table th:first-child{ font-weight:600; color:var(--mb-navy-900); width:28%; }
@media (max-width:600px){ .mb-table{ font-size:var(--mb-fs-xs); } .mb-table th, .mb-table td{ padding:10px; } }

/* --------------------------------------------------------------------------
   22. HERO & CTA BAND (homepage hero pattern, reusable on any page)
   -------------------------------------------------------------------------- */
.mb-hero{ padding-top:clamp(48px, 5vw + 24px, 108px); padding-bottom:clamp(32px, 4vw, 64px); }
.mb-hero__sub{ margin-top:18px; color:var(--mb-text-on-navy-muted); font-size:clamp(var(--mb-fs-base), 1.6vw, var(--mb-fs-md)); }
.mb-hero__actions{ margin-top:28px; }
/* Single strong primary action; secondary path is a lighter link so there's
   no split-attention between two equally weighted buttons. */
.mb-hero__secondary-link{ display:inline-flex; align-items:center; gap:8px; color:var(--mb-text-on-navy); font-weight:600; font-size:var(--mb-fs-sm); padding:14px 2px; border-bottom:1px solid rgba(245,247,251,0.3); transition:border-color .25s ease, gap .25s ease; }
.mb-hero__secondary-link:hover{ border-color:var(--mb-gold-500); gap:12px; color:var(--mb-gold-400); }
.mb-hero__call{ margin-top:14px; font-size:var(--mb-fs-xs); color:var(--mb-text-on-navy-muted); }
.mb-hero__call a{ color:var(--mb-gold-400); font-weight:600; }
/* Trust strip — proof directly in the hero, not just further down the page. */
.mb-hero-trust{ display:flex; flex-wrap:wrap; gap:var(--mb-sp-5); margin-top:var(--mb-sp-6); padding-top:var(--mb-sp-5); border-top:1px solid var(--mb-navy-700); }
.mb-hero-trust__item{ display:flex; align-items:center; gap:8px; font-size:11px; color:var(--mb-text-on-navy-muted); font-family:var(--mb-font-mono); letter-spacing:0.4px; white-space:nowrap; }
.mb-hero-trust__item i{ color:var(--mb-gold-500); }
/* Controlled image aspect ratio at every breakpoint — never stretches tall
   and pushes the CTA below the fold on narrow single-column layouts. */
.mb-hero__img{ width:100%; aspect-ratio:16/11; object-fit:cover; border-radius:var(--mb-radius-lg); }
@media (min-width:901px){ .mb-hero__img{ aspect-ratio:4/5; } }
/* Scroll cue — small nudge to keep scrolling past the hero. */
.mb-scroll-cue{ display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:clamp(28px,5vw,56px); color:var(--mb-text-on-navy-muted); font-size:10px; letter-spacing:2px; text-transform:uppercase; font-family:var(--mb-font-mono); }
.mb-scroll-cue i{ animation:mbHeroBounce 1.8s ease-in-out infinite; }
@keyframes mbHeroBounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(6px); } }
@media (max-width:600px){ .mb-scroll-cue{ display:none; } } /* not enough vertical room on small phones */

/* Fluid-padding CTA band — use on any full-width closing CTA section. */
.mb-cta-band{ padding-top:clamp(56px, 8vw, 96px); padding-bottom:clamp(56px, 8vw, 96px); }

/* Fluid-padding page-header banner — the breadcrumb/eyebrow/H1 block used
   at the top of every interior page. Replaces a fixed --mb-sp-8 (64px)
   inline padding that didn't shrink on mobile. */
.mb-page-header{ padding-top:clamp(40px, 6vw, 64px); padding-bottom:clamp(40px, 6vw, 64px); }

/* Fluid vertical padding for the Thank You confirmation hero. Vertical only —
   horizontal spacing is left to .mb-container's own responsive padding
   rather than duplicated here (the previous inline shorthand accidentally
   overrode .mb-container's mobile horizontal padding too). */
.mb-confirm-hero{ padding-top:clamp(64px, 10vw, 128px); padding-bottom:clamp(64px, 10vw, 128px); }

/* --------------------------------------------------------------------------
   23. SCROLL REVEAL (progressive enhancement)
   -------------------------------------------------------------------------- */
.mb-reveal{ opacity:1; transform:none; }
.mb-js .mb-reveal{ opacity:0; transform:translateY(16px); transition:opacity var(--mb-speed-slow) var(--mb-ease), transform var(--mb-speed-slow) var(--mb-ease); }
.mb-js .mb-reveal.is-visible{ opacity:1; transform:none; }