/* Meridian BI — shared stylesheet
   Rebuilt from live WordPress (Kadence theme) content, Day 166.
   Brand colours preserved as-is: primary blue #0066CC, navy #0A1628.
*/

:root {
  --mbi-blue: #0066CC;
  --mbi-blue-dark: #0052a3;
  --mbi-navy: #0A1628;
  --mbi-text: #374151;
  --mbi-text-light: #666666;
  --mbi-muted: #6B7280;
  --mbi-border: #E5E7EB;
  --mbi-bg-soft: #F9FAFB;
  --mbi-white: #ffffff;
  --mbi-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --mbi-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--mbi-font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--mbi-text);
  background: var(--mbi-bg-soft);
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--mbi-blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- Header ---------- */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--mbi-border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header-inner {
  max-width: 1290px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 80px;
}
.brand img {
  max-width: 220px;
  display: block;
}
.main-nav { display: flex; align-items: center; }
.main-nav > ul {
  list-style: none;
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  align-items: center;
}
.sub-menu { list-style: none; margin: 0; }
.main-nav > ul > li { position: relative; }
.main-nav a {
  display: inline-block;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--mbi-navy);
  font-weight: 500;
  font-size: 15px;
  position: relative;
}
.main-nav > ul > li > a::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 2px;
  background: var(--mbi-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--mbi-ease);
}
.main-nav > ul > li > a:hover::after,
.main-nav > ul > li > a:focus-visible::after,
.main-nav > ul > li.open > a::after {
  transform: scaleX(1);
}
.main-nav > ul > li > a:hover,
.main-nav > ul > li > a:focus-visible {
  color: var(--mbi-blue);
}
.has-dropdown > a { display: inline-flex; align-items: center; gap: 4px; }
.has-dropdown svg { width: 12px; height: 12px; transition: transform 0.2s var(--mbi-ease); }
.has-dropdown.open svg { transform: rotate(180deg); }
.sub-menu {
  list-style: none;
  margin: 0;
  padding: 8px;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: #fff;
  border: 1px solid var(--mbi-border);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(10, 22, 40, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s var(--mbi-ease), transform 0.2s var(--mbi-ease), visibility 0.2s;
}
.has-dropdown.open .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Hover/focus reveal is DESKTOP-ONLY (min-width gate below) — on mobile a lingering
   :hover state after tapping the hamburger (cursor position coincides with the drawer's
   first item once it slides in) would otherwise pop the submenu open unintentionally.
   Mobile always uses the explicit .open class toggled by tap (see main.js). */
@media (min-width: 861px) {
  .has-dropdown:hover svg, .has-dropdown:focus-within svg { transform: rotate(180deg); }
  .has-dropdown:hover .sub-menu,
  .has-dropdown:focus-within .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}
.sub-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--mbi-text);
}
.sub-menu a::after { display: none; }
.sub-menu a:hover, .sub-menu a:focus-visible { background: var(--mbi-bg-soft); color: var(--mbi-blue); }

.menu-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
}
.menu-toggle svg { width: 24px; height: 24px; color: var(--mbi-navy); }

@media (max-width: 860px) {
  .main-nav { position: fixed; top: 0; right: -100%; height: 100vh; width: min(320px, 85vw);
    background: #fff; flex-direction: column; align-items: stretch; padding: 24px;
    box-shadow: -12px 0 30px rgba(0,0,0,0.12); transition: right 0.3s var(--mbi-ease); overflow-y: auto; }
  .main-nav.open { right: 0; }
  .main-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav a { padding: 12px 8px; }
  /* .main-nav ul (0,1,1) beats a plain .sub-menu selector (0,1,0), so the display:none default
     below must be qualified via .main-nav to win the specificity fight. */
  .main-nav .sub-menu { position: static; box-shadow: none; border: none; opacity: 1; visibility: visible; transform: none;
    display: none; padding-left: 12px; }
  .main-nav .has-dropdown.open .sub-menu { display: block; }
  .menu-toggle { display: inline-flex; }
  .nav-backdrop { display: none; position: fixed; inset: 0; background: rgba(10,22,40,0.4); z-index: 90; }
  .nav-backdrop.open { display: block; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 8px;
  background: var(--mbi-blue);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s var(--mbi-ease), transform 0.2s var(--mbi-ease), box-shadow 0.2s var(--mbi-ease);
}
.btn:hover, .btn:focus-visible {
  background: var(--mbi-blue-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 102, 204, 0.28);
}
.btn:active { transform: translateY(0); }
.btn-outline {
  background: #fff;
  color: var(--mbi-navy);
  border: 2px solid var(--mbi-border);
}
.btn-outline:hover, .btn-outline:focus-visible {
  border-color: var(--mbi-blue);
  color: var(--mbi-blue);
  background: #fff;
  box-shadow: 0 8px 20px rgba(0, 102, 204, 0.12);
}

/* ---------- Hero cover (video background) ---------- */
.hero-cover {
  position: relative;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  padding: 40px;
}
.hero-cover.hero-sm { min-height: 320px; }
.hero-cover video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-cover .hero-dim {
  position: absolute;
  inset: 0;
  background: var(--mbi-navy);
  opacity: 0.5;
}
.hero-cover .hero-inner {
  position: relative;
  z-index: 1;
  max-width: 840px;
}
.hero-cover h1, .hero-cover h2 {
  color: #fff;
  font-size: 48px;
  margin: 0 0 16px;
  line-height: 1.2;
}
.hero-cover .accent { color: #4d9fff; }
.hero-cover .btn { margin-top: 8px; }

/* ---------- Sections / layout ---------- */
.section { padding: 60px 24px; }
.section-soft { background: var(--mbi-bg-soft); }
.section-narrow { max-width: 900px; margin: 0 auto; }
.section-mid { max-width: 1100px; margin: 0 auto; }
.section-wide { max-width: 1290px; margin: 0 auto; }
.section h2.section-title { text-align: center; font-size: 32px; margin: 0 0 12px; color: var(--mbi-navy); }

/* ---------- Cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
@media (max-width: 860px) { .card-grid { grid-template-columns: 1fr; } }

.card {
  padding: 24px;
  border: 1px solid var(--mbi-border);
  border-radius: 12px;
  background: #fff;
  transition: transform 0.25s var(--mbi-ease), box-shadow 0.25s var(--mbi-ease), border-color 0.25s var(--mbi-ease);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(10, 22, 40, 0.10);
  border-color: rgba(0, 102, 204, 0.35);
}
.card h3 { font-size: 18px; margin: 0 0 8px; }
.card h3 a { text-decoration: none; color: var(--mbi-navy); transition: color 0.2s var(--mbi-ease); }
.card:hover h3 a { color: var(--mbi-blue); }
.card p { color: var(--mbi-text-light); font-size: 14px; margin: 0; }

.quote-card {
  padding: 28px;
  border: 1px solid var(--mbi-border);
  border-left: 4px solid var(--mbi-blue);
  border-radius: 12px;
  background: #fff;
  transition: transform 0.25s var(--mbi-ease), box-shadow 0.25s var(--mbi-ease);
}
.quote-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(10,22,40,0.08); }
.quote-card h3 { font-size: 18px; margin: 0 0 8px; color: var(--mbi-navy); }
.quote-card p { color: var(--mbi-text-light); margin: 0; }
.quote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
@media (max-width: 720px) { .quote-grid { grid-template-columns: 1fr; } }

/* ---------- Services list (services page) ---------- */
.svc-row {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  align-items: center;
  padding: 40px 0;
  border-bottom: 1px solid var(--mbi-border);
}
.svc-row:last-of-type { border-bottom: none; }
.svc-row.reverse { grid-template-columns: 300px 1fr; }
.svc-row.reverse .svc-copy { order: 2; }
.svc-row.reverse .svc-img { order: 1; }
@media (max-width: 720px) {
  .svc-row, .svc-row.reverse { grid-template-columns: 1fr; }
  .svc-row.reverse .svc-copy, .svc-row.reverse .svc-img { order: initial; }
}
.svc-copy strong { display: block; font-size: 22px; color: var(--mbi-navy); margin-bottom: 6px; }
.svc-copy p { margin: 0; color: var(--mbi-text-light); }
.svc-img img {
  border-radius: 12px;
  transition: transform 0.35s var(--mbi-ease), box-shadow 0.35s var(--mbi-ease);
}
.svc-img:hover img { transform: scale(1.03); box-shadow: 0 16px 32px rgba(10,22,40,0.14); }

/* ---------- Dark CTA cover ---------- */
.cta-cover {
  background: var(--mbi-navy);
  padding: 60px 40px;
  text-align: center;
}
.cta-cover h2 { color: #fff; font-size: 32px; margin: 0 0 12px; }
.cta-cover p { color: rgba(255,255,255,0.85); margin: 0 0 24px; }

/* ---------- Logos ticker ---------- */
.mbi-clients { padding: 56px 0; background: #fff; overflow: hidden; }
.mbi-clients-label { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #9CA3AF; margin: 0 0 36px; }
.mbi-logos-outer { overflow: hidden; width: 100%; position: relative; }
.mbi-logos-outer::before, .mbi-logos-outer::after { content: ''; position: absolute; top: 0; width: 120px; height: 100%; z-index: 2; pointer-events: none; }
.mbi-logos-outer::before { left: 0; background: linear-gradient(to right, #fff 0%, transparent 100%); }
.mbi-logos-outer::after { right: 0; background: linear-gradient(to left, #fff 0%, transparent 100%); }
.mbi-logos-track { display: flex; align-items: center; gap: 20px; padding: 0 40px; animation: mbi-scroll 45s linear infinite; width: max-content; }
.mbi-logos-track:hover { animation-play-state: paused; }
.mbi-chip { display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #374151; letter-spacing: .3px; padding: 10px 20px; border: 2px solid var(--mbi-border); border-radius: 8px; white-space: nowrap; flex-shrink: 0; background: #fff; transition: border-color .2s var(--mbi-ease), color .2s var(--mbi-ease); }
.mbi-chip:hover { border-color: var(--mbi-blue); color: var(--mbi-blue); }
@keyframes mbi-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ---------- YouTube feed (static reproduction) ---------- */
.yt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; }
@media (max-width: 860px) { .yt-grid { grid-template-columns: 1fr; } }
.yt-card { display: block; text-decoration: none; border-radius: 10px; overflow: hidden; background: #000;
  position: relative; transition: transform 0.25s var(--mbi-ease), box-shadow 0.25s var(--mbi-ease); }
.yt-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(10,22,40,0.16); }
.yt-thumb-wrap { position: relative; aspect-ratio: 16/9; background: #111; }
.yt-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.yt-play {
  position: absolute; inset: 0; margin: auto; width: 54px; height: 54px;
  background: rgba(255,0,0,0.85); border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.yt-play svg { width: 20px; height: 20px; fill: #fff; margin-left: 3px; }
.yt-title { color: #fff; font-size: 13px; padding: 10px 12px; background: #0A1628; margin: 0; }

/* ---------- About page ---------- */
.about-lead h1 { color: var(--mbi-navy); font-size: 48px; font-weight: 700; margin: 0 0 8px; }
.about-lead h2 { color: var(--mbi-blue); font-size: 22px; font-weight: 500; margin: 0 0 24px; }
.about-lead > p { font-size: 18px; line-height: 1.8; color: var(--mbi-text); margin-bottom: 40px; }
.about-body h2 { color: var(--mbi-navy); font-size: 32px; font-weight: 700; }
.about-body h3, .about-body h4 { color: var(--mbi-navy); }
.about-body h4 { font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.about-body p, .about-body ul { font-size: 17px; line-height: 1.9; color: var(--mbi-text); }
.about-body ul { padding-left: 20px; }
.about-body hr { border: none; border-top: 1px solid var(--mbi-border); margin: 40px 0; }
.about-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding-top: 40px; }
@media (max-width: 640px) { .about-cols { grid-template-columns: 1fr; } }

/* ---------- Contact page ---------- */
.contact-form { max-width: 640px; }
.contact-form label { display: block; margin-bottom: 20px; font-weight: 600; color: var(--mbi-navy); font-size: 14px; }
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%; margin-top: 8px; padding: 12px 14px; border: 1px solid var(--mbi-border); border-radius: 8px;
  font-family: inherit; font-size: 15px; font-weight: 400; color: var(--mbi-text);
  transition: border-color 0.2s var(--mbi-ease), box-shadow 0.2s var(--mbi-ease);
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  outline: none; border-color: var(--mbi-blue); box-shadow: 0 0 0 3px rgba(0,102,204,0.15);
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.form-status { margin-top: 16px; padding: 12px 16px; border-radius: 8px; font-size: 14px; display: none; }
.form-status.ok { display: block; background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.form-status.err { display: block; background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
.connect-links { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.connect-links a {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 8px;
  font-size: 15px; font-weight: 600; text-decoration: none; transition: transform 0.2s var(--mbi-ease), box-shadow 0.2s var(--mbi-ease);
}
.connect-links a:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(10,22,40,0.15); }

/* ---------- Footer ---------- */
.site-footer { background: #fff; border-top: 1px solid var(--mbi-border); padding: 28px 24px; text-align: center; }
.site-footer p { margin: 0; font-size: 14px; color: var(--mbi-muted); }
.site-footer a { text-decoration: none; transition: color 0.2s var(--mbi-ease); }
.site-footer a:hover { color: var(--mbi-blue); }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--mbi-ease), transform 0.6s var(--mbi-ease); }
.reveal.in-view { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .mbi-logos-track { animation: none; }
}

/* ---------- Livechat static mimic (non-functional, flagged) ---------- */
.mbi-chat-static {
  position: fixed; right: 20px; bottom: 20px; z-index: 80;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--mbi-blue); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px rgba(0,102,204,0.35); cursor: default;
  transition: transform 0.2s var(--mbi-ease);
}
.mbi-chat-static:hover { transform: scale(1.06); }
.mbi-chat-static svg { width: 26px; height: 26px; }