/* ── nav-overrides.css ── */

/* ═══════════════════════════════════════════════════════════
   FIX 1: FOUC guard — topbar 3-zone grid (must be first rule)
   ═══════════════════════════════════════════════════════════ */
.nav-util-inner {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  justify-items: unset !important;
}

/* Override main.min.css mobile collapse to 1fr at ALL breakpoints */
@media (min-width: 0px) {
  .nav-util-inner {
    grid-template-columns: 1fr auto 1fr !important;
  }
}
@media (max-width: 9999px) {
  .nav-util-inner {
    grid-template-columns: 1fr auto 1fr !important;
  }
}

.util-left  { justify-self: start  !important; text-align: left   !important; }
.util-center{ justify-self: center !important; text-align: center !important; }
.util-right { justify-self: end    !important; text-align: right  !important; }

/* === Utility bar — cream (matches logo zone), muted text === */
.nav-util {
  background: var(--mc-cream, #F5F0E8) !important;
  /* PART 3: internal hairline between util strip and the menu row below */
  border-bottom: 0.5px solid var(--mc-border, rgba(13, 31, 51, 0.10)) !important;
  height: 34px;
  overflow: visible !important;
  /* must be block (not grid) so the inner .wrap centres via margin:auto,
     landing on the same axis as .nav-inner → coords lock above the logo */
  display: block !important;
}
/* util .wrap inherits the standard .wrap gutter/max-width so the centre
   column aligns to .nav-inner's centre → coords lock above the logo */
.nav-util > .wrap {
  height: 34px;
  overflow: visible !important;
  max-width: var(--max, 1320px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* 3-zone grid: left extreme | center | right extreme */
.nav-util-inner {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  height: 34px;
  width: 100% !important;
  font-family: var(--mono) !important;
  position: relative !important;
}
.nav-util-left, .util-left,
.nav-util-inner > .util-left,
.nav-util-inner > .nav-util-left {
  justify-self: start !important;
  color: var(--mc-text-muted, rgba(13, 31, 51, 0.55)) !important;
  white-space: nowrap;
  font-family: var(--mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}
.nav-util-center, .util-center,
.nav-util-inner > .util-center,
.nav-util-inner > .nav-util-center {
  position: static !important;
  transform: none !important;
  left: auto !important;
  text-align: center;
  justify-self: center !important;
  color: var(--mc-text-muted, rgba(13, 31, 51, 0.55)) !important;
  white-space: nowrap;
  font-family: var(--mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}
/* right cell intentionally empty — holds the centre axis (lang moved to menu row) */
.nav-util-right, .util-right {
  justify-self: end !important;
}
.nav-util-right::before {
  content: "" !important;
  display: none !important;
  margin: 0 !important;
}

/* === Header: cream logo zone === */
header.nav,
header#nav,
header.nav.is-scrolled,
header#nav.is-scrolled {
  /* Match logo PNG background (#F7F1E5) exactly — no seam logo↔nav */
  background: #F7F1E5 !important;
  /* Refined delimiter at rest: a fine low-opacity gold hairline (drawn as a
     1px box-shadow so it adds no layout height) + a very soft drop shadow, so
     the bar stays distinct even when the content below is also pale
     (Contact, article body). Deepens slightly on scroll. */
  border-bottom: none !important;
  box-shadow: 0 1px 0 rgba(122,92,28,0.22), 0 6px 18px -12px rgba(13,31,51,0.12) !important;
  overflow: visible !important;
  transition: box-shadow .3s ease, padding .3s ease;
}
header.nav.is-scrolled,
header#nav.is-scrolled {
  border-bottom: none !important;
  box-shadow: 0 1px 0 rgba(122,92,28,0.30), 0 10px 30px -18px rgba(13,31,51,0.18) !important;
}
/* Remove the utility-bar hairline — the borderless look is line-free. */
.nav-top { border-bottom: none !important; }
.nav-inner,
.wrap.nav-inner {
  background: transparent !important;
  padding-top: 16px !important;
  padding-bottom: 0 !important;
  overflow: visible !important;
}

/* === Nav row: split grid — links | logo | links === */
/* Shares 1fr auto 1fr + the .wrap gutter with .nav-util-inner so the
   centre column (logo) sits on the same axis as the coordinates above. */
.nav-row {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  flex-direction: unset !important;
  align-items: center !important;
  justify-content: unset !important;
  padding: 8px 0 14px !important;
  gap: clamp(20px, 3vw, 48px) !important;
  width: 100%;
}
.nav.is-scrolled .nav-row {
  padding: 4px 0 10px !important;
  gap: clamp(20px, 3vw, 48px) !important;
}

/* === Logo — centred column === */
.brand {
  grid-column: 2 !important;
  justify-self: center !important;
  justify-content: center !important;
  width: auto !important;
  margin: 0 !important;
  text-decoration: none;
  flex-shrink: 0;
}
.nav.is-scrolled .brand { margin: 0 !important; }
.brand picture {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* CLAUDE.md locked logo size: height 78px desktop, width auto */
.brand img,
.brand picture img {
  width: auto !important;
  height: 78px !important;
  max-width: none !important;
  display: block !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
  /* logo bg is opaque #F7F1E5 — light/cream rendering locked, never alter */
  mix-blend-mode: normal !important;
  transition: height 0.3s ease !important;
}
.nav.is-scrolled .brand img,
.nav.is-scrolled .brand picture img {
  width: auto !important;
  height: 56px !important;
  transform: none !important;
}

/* === Nav links: cream zone, navy text, gold hover — flank the logo === */
nav.nav-links {
  background: transparent !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: clamp(20px, 2.4vw, 40px) !important;
  align-items: center;
  display: flex !important;
}
.nav-links--left  { grid-column: 1 !important; justify-self: end   !important; }
.nav-links--right { grid-column: 3 !important; justify-self: start !important; }
.nav-links a,
.nav-dropdown-btn {
  font-family: var(--sans) !important;
  font-size: 11px !important;
  letter-spacing: 0.20em !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: var(--navy, #0d1f33) !important;
  white-space: nowrap;
  opacity: 1;
}
.nav-links a:hover,
.nav-dropdown-btn:hover {
  color: var(--mc-gold, #7A5C1C) !important;
  opacity: 1 !important;
}
.nav-links a.is-active {
  color: var(--navy, #0d1f33) !important;
}

/* Desktop ≥ 1101px — split grid active */
@media (min-width: 1101px) {
  .burger { display: none !important; }
  nav.nav-links { display: flex !important; }
}

/* Tablet + Mobile ≤ 1100px — collapse to logo-left / burger-right row */
@media (max-width: 1100px) {
  .nav-row {
    display: flex !important;
    grid-template-columns: none !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 0 10px !important;
    gap: 0 !important;
  }
  .brand {
    grid-column: auto !important;
    justify-self: auto !important;
    margin: 0 !important;
  }
  .brand img,
  .brand picture img { width: auto !important; height: 52px !important; }
  .nav.is-scrolled .brand img,
  .nav.is-scrolled .brand picture img { width: auto !important; height: 44px !important; }
  nav.nav-links { display: none !important; }
  .burger {
    display: flex !important;
    position: static !important;
    transform: none !important;
  }
}

/* Mobile ≤ 768px — centred logo, burger pinned right */
@media (max-width: 768px) {
  .nav-util-center, .util-center { display: none !important; }
  .nav-row {
    justify-content: center !important;
    position: relative !important;
  }
  .brand { margin: 0 auto !important; }
  /* E2: larger, more present centred mobile logo */
  .brand img,
  .brand picture img { width: auto !important; height: 62px !important; }
  .nav.is-scrolled .brand img,
  .nav.is-scrolled .brand picture img { width: auto !important; height: 50px !important; }
  .burger {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
}

/* Mobile ≤ 719px — drop the util strip entirely; reclaim above-the-fold.
   Coords live in the overlay bottom; "PRIVATE ADVISORY" is in the logo lockup.
   Header's own padding supplies the breathing room the strip used to give. */
@media (max-width: 719px) {
  .nav-util { display: none !important; }
  .nav-inner,
  .wrap.nav-inner { padding-top: clamp(14px, 3vh, 22px) !important; }
}

@media (max-width: 480px) {
  .nav-util-left, .util-left { display: none !important; }
}

/* === Burger: navy lines on cream === */
.burger-line {
  background: var(--navy, #0d1f33) !important;
}

/* === Hide legacy details-based lang-switcher (now in navUtil lang-dropdown) === */
.lang-switcher { display: none !important; }

/* === Lang dropdown — now the LAST item in the right nav group (cream zone) === */
.nav-links--right .lang-dropdown { position: relative !important; }
.lang-dropdown-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 2px 4px !important;
  background: none !important;
  border: none !important;
  cursor: pointer;
  color: var(--navy, #0d1f33) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  font-family: var(--sans);
}
.lang-dropdown-btn:hover {
  color: var(--mc-gold, #7A5C1C) !important;
}
.lang-dropdown-btn .lang-current {
  color: inherit !important;
}
.lang-dropdown-btn .ld-globe {
  color: var(--mc-gold, #7A5C1C) !important;
  opacity: 1 !important;
  width: 13px !important;
  height: 13px !important;
}
.lang-dropdown-btn .ld-chev {
  color: currentColor !important;
  opacity: 0.7 !important;
}
.lang-dropdown-panel {
  z-index: 200 !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  background: var(--mc-white, #FDFCFA) !important;
  border: 1px solid rgba(18, 32, 51, 0.14) !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 32px -8px rgba(13,31,51,0.22), 0 2px 8px rgba(13,31,51,0.08) !important;
  min-width: 76px !important;
  padding: 4px !important;
  overflow: hidden !important;
}
.lang-dropdown-panel a {
  color: var(--navy-60, #566878) !important;
  padding: 6px 12px !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-align: center !important;
  text-transform: uppercase !important;
  transition: color .15s ease, background .15s ease !important;
}
.lang-dropdown-panel a.is-on {
  color: var(--gold) !important;
  font-weight: 600 !important;
}
.lang-dropdown-panel a:hover {
  color: var(--mc-gold, #7A5C1C) !important;
  background: rgba(122,92,28,0.10) !important;
}

/* ═══════════════════════════════════════════════════════════
   PART 4: FAQ meridian divider — match insights rhythm exactly.
   gap(a) ABOVE: .faq-jump uses padding-bottom:48px, which ADDS to
   the divider's 2.75rem top margin (→ ~92px). Insights' filter uses
   a margin that COLLAPSES with it (→ 48px). Zero the divider's top
   margin on FAQ → identical 48px above on both pages.
   gap(b) BELOW: insights = divider 44px margin-bottom + insights-grid
   padding-top 28px = 72px. FAQ's first .faq-group has no top spacing,
   so the default 44px under-shoots. Set margin-bottom 72px → 72px on
   both pages.
   ═══════════════════════════════════════════════════════════ */
#faq .mc-divider { margin-top: 0 !important; margin-bottom: 72px !important; }

/* === Desktop nav dropdown panel === */
.nav-dropdown.is-open .nav-dropdown-panel {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}
.nav-dropdown.is-open .nav-dropdown-chevron {
  transform: rotate(180deg);
}
.nav-dropdown-chevron {
  transition: transform 0.2s ease;
}

/* === Page hero: reduce top gap after tall nav === */
/* === Page hero: consistent form across all pages === */
.page-hero {
  padding-top: clamp(40px, 5vh, 56px) !important;
  padding-bottom: clamp(32px, 4vh, 48px) !important;
  border-bottom: 0.5px solid var(--mc-border) !important;
  background: var(--mc-cream) !important;
}
.breadcrumb {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--mc-gold) !important;
  opacity: 0.8;
  margin-bottom: 18px !important;
}
.breadcrumb a { color: var(--mc-gold) !important; }
.breadcrumb a:hover { color: var(--mc-navy) !important; }
.page-hero h1 {
  font-family: var(--serif) !important;
  font-size: clamp(30px, 4vw, 58px) !important;
  font-weight: 300 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.018em !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  color: var(--mc-navy) !important;
}
.page-hero .tagline,
.page-hero .page-hero-sub {
  font-family: var(--serif) !important;
  font-size: clamp(15px, 1.5vw, 20px) !important;
  font-weight: 400 !important;
  font-style: italic !important;
  color: var(--mc-navy) !important;
  opacity: 0.65;
  line-height: 1.55 !important;
  max-width: 62ch !important;
  margin-top: 14px !important;
}

/* Page hero: tighter on mobile, uniform across all pages */
@media (max-width: 768px) {
  .page-hero {
    padding-top: 32px !important;
    padding-bottom: 28px !important;
  }
  .page-hero h1 { font-size: clamp(26px, 7vw, 36px) !important; }
  .breadcrumb { margin-bottom: 14px !important; }
}

/* === Footer === */
.footer-logo {
  filter: brightness(0) invert(1) !important;
  width: 130px !important;
  height: auto !important;
  display: block;
}
.footer-brand,
.footer-brand picture,
.footer-logo {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
footer .footer-col h3 {
  color: var(--mc-gold, #7A5C1C) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
  margin-bottom: 18px;
}
footer .footer-col a,
footer .footer-col ul li a {
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 14.5px !important;
  line-height: 2.1;
  letter-spacing: 0.02em;
}
footer .footer-col a:hover,
footer .footer-col ul li a:hover {
  color: var(--mc-white) !important;
}
footer .footer-bot,
footer .footer-bot p,
footer .footer-bot span,
footer small {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 12.5px !important;
}
/* Footer text legibility — larger + higher contrast (all footers) */
footer .footer-brand p.copy {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.62) !important;
  max-width: 240px !important;
}
footer .footer-coords {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.42) !important;
  letter-spacing: 0.1em !important;
}
footer .footer-cnt-label {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  letter-spacing: 0.1em !important;
}
footer .footer-cnt-val,
footer .footer-cnt-row a {
  font-size: 14.5px !important;
  color: rgba(255, 255, 255, 0.82) !important;
}
footer .footer-legal-links a {
  font-size: 11px !important;
  color: rgba(200, 168, 75, 0.75) !important;
}
footer .footer-legal-links a:hover { color: var(--mc-gold) !important; }

/* === Cards: consistent gold border + subtle depth === */
.svc {
  border: 1px solid var(--mc-bronze-muted) !important;
  border-left: 2px solid var(--mc-gold) !important;
  box-shadow: 0 2px 12px rgba(14, 26, 44, 0.06) !important;
}
.svc:hover {
  box-shadow: 0 8px 32px rgba(14, 26, 44, 0.10) !important;
  border-color: rgba(200, 168, 75, 0.55) !important;
}
.risk-card {
  border: 0.5px solid var(--mc-border) !important;
  border-left: 1px solid var(--mc-gold) !important;
  box-shadow: none !important;
}
.insight-card {
  border: 0.5px solid var(--mc-border) !important;
  border-left: 1px solid var(--mc-gold) !important;
  box-shadow: none !important;
}
.insight-card:hover {
  box-shadow: 0 6px 24px rgba(14, 26, 44, 0.10) !important;
}
/* === Service pillar cards — premium editorial style === */
.svc-pillars-grid {
  gap: clamp(16px, 2vw, 24px) !important;
}
.svc-pillar-card {
  position: relative !important;
  background: var(--mc-white, #FDFCFA) !important;
  border: 0.5px solid var(--mc-border) !important;
  border-left: 0.5px solid var(--mc-border) !important;
  border-radius: 2px !important;
  box-shadow: 0 1px 2px rgba(13, 31, 51, 0.03) !important;
  padding: clamp(28px, 3vw, 40px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 14px !important;
  text-align: left !important;
  transition: transform 0.28s ease, box-shadow 0.32s ease, border-color 0.3s ease !important;
}
/* Editorial gold accent — short top rule replacing the left bar */
.svc-pillar-card::before {
  content: "" !important;
  display: block !important;
  width: 34px !important;
  height: 2px !important;
  background: var(--mc-gold) !important;
  margin: 0 0 2px 0 !important;
  flex: none !important;
}
.svc-pillar-card h3,
.svc-pillar-card .pillar-title {
  font-family: var(--serif) !important;
  font-size: clamp(19px, 1.5vw, 22px) !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  color: var(--mc-navy) !important;
  margin: 0 !important;
}
.svc-pillar-card p,
.svc-pillar-card .pillar-body {
  font-family: var(--sans) !important;
  font-size: 15px !important;
  line-height: 1.72 !important;
  color: var(--mc-text-muted, rgba(13, 31, 51, 0.62)) !important;
  margin: 0 !important;
}
.svc-pillar-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 32px rgba(13, 31, 51, 0.09) !important;
  border-color: var(--mc-gold-muted, rgba(200, 168, 75, 0.35)) !important;
}
@media (max-width: 768px) {
  .svc-pillars-grid { gap: 16px !important; }
  .svc-pillar-card {
    padding: 28px 24px !important;
    gap: 12px !important;
  }
  .svc-pillar-card p,
  .svc-pillar-card .pillar-body { font-size: 14.5px !important; }
}
/* Pillar cards on navy sections keep warm tones */
.section-navy .svc-pillar-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: var(--mc-border-warm) !important;
}
.section-navy .svc-pillar-card h3 { color: var(--mc-cream) !important; }
.section-navy .svc-pillar-card p { color: var(--mc-text-warm) !important; }

/* === Why Us cards — premium editorial refresh (scoped to beat main.css) === */
.why-us-full .why-us-cards {
  border: 0 !important;
  background: transparent !important;
  gap: clamp(14px, 1.6vw, 20px) !important;
}
.why-us-full .why-us-card {
  position: relative !important;
  background: var(--mc-white, #FDFCFA) !important;
  border: 0.5px solid var(--mc-border) !important;
  border-radius: 2px !important;
  box-shadow: 0 1px 2px rgba(13, 31, 51, 0.03) !important;
  padding: clamp(28px, 2.6vw, 38px) !important;
  transition: transform 0.28s ease, box-shadow 0.32s ease, border-color 0.3s ease !important;
}
.why-us-full .why-us-card-num {
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-size: 16px !important;
  letter-spacing: 0.02em !important;
  color: var(--mc-gold) !important;
  margin-bottom: 14px !important;
}
.why-us-full .why-us-card h3 {
  font-family: var(--serif) !important;
  font-size: clamp(18px, 1.6vw, 21px) !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  color: var(--mc-navy) !important;
  margin: 0 0 12px 0 !important;
}
.why-us-full .why-us-card p {
  font-family: var(--sans) !important;
  font-size: 15px !important;
  line-height: 1.72 !important;
  color: var(--mc-text-muted, rgba(13, 31, 51, 0.62)) !important;
  margin: 0 !important;
}
.why-us-full .why-us-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 32px rgba(13, 31, 51, 0.09) !important;
  border-color: var(--mc-gold-muted, rgba(200, 168, 75, 0.35)) !important;
}
.ccard {
  border: 0.5px solid var(--mc-border) !important;
  border-left: 1px solid var(--mc-gold) !important;
  box-shadow: none !important;
}

/* === Hero CTA: premium button === */
.hero-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 32px !important;
  background: var(--navy, #0d1f33) !important;
  border: 1px solid var(--navy, #0d1f33) !important;
  border-bottom: 1px solid var(--navy, #0d1f33) !important;
  color: var(--mc-cream) !important;
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  position: relative !important;
  overflow: hidden !important;
  transition: gap 0.25s ease, background 0.3s ease, border-color 0.3s ease !important;
  margin-top: clamp(28px, 4vh, 52px) !important;
}
.hero-cta::after {
  content: "" !important;
  position: absolute !important;
  bottom: 11px !important;
  left: 32px !important;
  right: 52px !important;
  height: 1px !important;
  background: var(--mc-gold, #7A5C1C) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform 0.35s ease !important;
}
.hero-cta:hover {
  gap: 20px !important;
  background: var(--navy-deep, #0d1f33) !important;
  border-color: var(--navy-deep, #0d1f33) !important;
  border-bottom-color: var(--navy-deep, #0d1f33) !important;
}
.hero-cta:hover::after {
  transform: scaleX(1) !important;
}
.hero-cta .arr {
  color: var(--mc-gold, #7A5C1C) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  transform: none !important;
  flex-shrink: 0 !important;
}

/* === FIX 3A — Hero CTA mobile: full-width, text visible === */
@media (max-width: 719px) {
  .hero-cta {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: visible !important;
    padding: 14px 24px !important;
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    background: transparent !important;
    border: 1px solid rgba(122,92,28,0.35) !important;
    border-radius: 0 !important;
    color: var(--mc-gold) !important;
    margin-top: 28px !important;
  }
  .hero-cta::after { display: none !important; }
  .hero-cta .arr {
    font-size: 14px !important;
    color: var(--mc-gold) !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   FIX 2: Hero images — panoramic 3:1 (desktop) / 2:1 (mobile)
   Overrides fixed height on .insights-hero, .faq-levada,
   .about-figure-inner via !important (inline <style> loads first)
   ═══════════════════════════════════════════════════════════ */
.insights-hero,
.faq-levada,
.about-figure-inner {
  aspect-ratio: 3 / 1 !important;
  width: 100% !important;
  height: auto !important;
  min-height: unset !important;
  overflow: hidden !important;
  position: relative !important;
}
.insights-hero img,
.faq-levada img,
.about-figure-inner img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 30% !important;
}
@media (max-width: 768px) {
  .insights-hero,
  .faq-levada,
  .about-figure-inner {
    aspect-ratio: 2 / 1 !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   FIX 4A: Mobile nav overlay — hairlines ONLY between top-level
   items; sub-menu reads as a nested group (indent + ghost rule),
   no per-row lines. Kills the "ruled-paper" busy look.
   ═══════════════════════════════════════════════════════════ */
.mobile-nav-links a,
.mobile-nav-sub-toggle {
  font-weight: 500 !important;
  letter-spacing: 0.10em !important;
  font-size: 18px !important;
  padding: 18px 0 !important;
}
/* one hairline per top-level row — carried by the <li>, not the link,
   so the Advisory line lands below its whole expanded group */
.mobile-nav-links > li {
  border-bottom: 0.5px solid rgba(13,31,51,0.10) !important;
}
.mobile-nav-links > li:last-child {
  border-bottom: none !important;
}
.mobile-nav-links a {
  border-bottom: none !important;
}

/* Nested Advisory sub-menu — indented, ghost left-rule, no row lines */
.mobile-nav-sub {
  border: none !important;
  border-left: 0.5px solid rgba(13,31,51,0.12) !important;
  margin: 2px 0 14px !important;
  padding: 2px 0 2px 20px !important;
}
.mobile-nav-sub li {
  border: none !important;
}
.mobile-nav-sub a {
  padding: 13px 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--mc-text-muted, rgba(13,31,51,0.62)) !important;
}

/* ═══════════════════════════════════════════════════════════
   FIX 4B: Mobile language selector — only active item in gold
   ═══════════════════════════════════════════════════════════ */
.mobile-nav-lang a {
  color: var(--mc-text-muted, rgba(13,31,51,0.55)) !important;
  font-size: 14px !important;
  letter-spacing: 0.12em !important;
  font-weight: 400 !important;
}
.mobile-nav-lang a.is-on {
  color: var(--mc-gold) !important;
  font-weight: 500 !important;
}

/* ═══════════════════════════════════════════════════════════
   FIX 5: Why Us cards — mobile horizontal padding
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .why-us-section, .svc-whyus-band,
  [class*="why-us"], [class*="whyus"] {
    padding-left:  20px !important;
    padding-right: 20px !important;
  }
  .why-us-card, .whyus-card, [class*="why-card"] {
    padding:       24px 20px !important;
    margin-bottom: 12px      !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   FIX 6: Comparison bars — halved height on mobile
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .comparison-bar-row, .bar-row,
  [class*="agency-bar"], [class*="mc-bar"],
  [class*="compass-bar"], [class*="std-bar"] {
    height:     22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   FIX 7: Compass divider — equidistant padding
   Hero before: zero bottom gap; Why section after: 48px top
   ═══════════════════════════════════════════════════════════ */
/* PART 12: equidistant — same gap above (pills→divider) and below (divider→next) */
.compass-divider-wrap, .compass-divider,
[class*="section-divider"] {
  padding-top:    clamp(28px,4vh,40px) !important;
  padding-bottom: clamp(28px,4vh,40px) !important;
  margin-top:     0    !important;
  margin-bottom:  0    !important;
}
@media (max-width: 768px) {
  .compass-divider-wrap, .compass-divider,
  [class*="section-divider"] {
    padding-top:    clamp(20px,5vw,30px) !important;
    padding-bottom: clamp(20px,5vw,30px) !important;
  }
}
.hero {
  padding-bottom: 0 !important;
  margin-bottom:  0 !important;
}
/* divider's own symmetric padding provides the gap — don't let the next
   block add a second top gap (would break equidistance) */
.compass-divider + .section,
.compass-divider + * {
  padding-top: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   (legacy FIX labels — kept below)
   ═══════════════════════════════════════════════════════════ */
/* === FIX 4 — WhatsApp button: force navy/gold === */
.wa-float {
  background: var(--mc-navy, #0D1F33) !important;
  border: 1px solid var(--mc-gold, #7A5C1C) !important;
  color: var(--mc-gold, #7A5C1C) !important;
}
.wa-float svg {
  fill: currentColor !important;
}
.wa-float:hover {
  background: var(--mc-gold, #7A5C1C) !important;
  color: var(--mc-navy, #0D1F33) !important;
}

/* ═══════════════════════════════════════════════════════════
   FIX 1: Why Us cards — full-width grid on mobile
   Actual classes: .why-us-cards / .why-us-card
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .why-us-full {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .why-us-full .why-us-cards {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .why-us-full .why-us-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    padding: 26px 22px !important;
    border: 0.5px solid var(--mc-border) !important;
    border-radius: 2px !important;
  }
  /* override main.css nth-child mobile dividers — every card is its own tile */
  .why-us-full .why-us-card:nth-child(1),
  .why-us-full .why-us-card:nth-child(2),
  .why-us-full .why-us-card:last-child {
    border: 0.5px solid var(--mc-border) !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   FIX 2: Journey comparison bars — halved height on mobile
   Actual class: .why-us-full .jcell (height 44px desktop)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .why-us-full .jcell {
    height:     22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    line-height: 22px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   FIX 3: Homepage hero — reduce height on mobile
   Actual class: .hero (min-height:92vh desktop)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* stacked photo-band design owns hero sizing now; no forced aspect-ratio */
  .hero {
    min-height: 0 !important;
    aspect-ratio: auto !important;
    max-height: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   About — ledger ("What we are / What we are not"):
   Remove gold top border, vertical divider, mute labels
   Gold top borders from main.css lines 3976-3977
   ═══════════════════════════════════════════════════════════ */
.about-ledger-col--pos {
  border-top: none !important;
}
.about-ledger-col--neg {
  border-top: none !important;
}
.about-ledger-col + .about-ledger-col {
  border-left: none !important;
  padding-left: clamp(32px, 4vw, 56px) !important;
}
.about-ledger-label {
  color: var(--mc-text-muted, rgba(13,31,51,0.55)) !important;
}
.about-ledger-label .sym {
  color: var(--mc-gold) !important;
}
@media (max-width: 768px) {
  .about-ledger-col + .about-ledger-col {
    border-top: none !important;
    padding-left: 0 !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   v14 FIX A: Ultra-wide content width
   .wrap caps at 1320px (--max). On very wide viewports give
   content slightly more room so it doesn't look stranded.
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 1600px) {
  .wrap {
    max-width: 1440px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   v14 FIX B: Journey bars — guarantee identical height
   Standard-agency (.jtrack) and Madeira-Compass (.jtrack--mc)
   rows must match exactly. Source sets both .jcell to 36px;
   this is an explicit equalizer so neither track can drift.
   8px gap between the two bars is intentional spacing.
   ═══════════════════════════════════════════════════════════ */
.why-us-full .jtrack .jcell,
.why-us-full .jtrack--mc .jcell {
  height:     36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
}
.why-us-full .jtrack--mc {
  margin-top: 8px !important;
}
@media (max-width: 768px) {
  .why-us-full .jtrack .jcell,
  .why-us-full .jtrack--mc .jcell {
    height:     22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   v15 — desktop polish & reading-flow refinement
   ═══════════════════════════════════════════════════════════ */

/* ── FIX 1: Nav — refined double-hairline separator ──
   Subtle navy line + 1px gap + gold line. Signals "nav ends here".
   .nav already has position:relative; z-index:50. */
header.nav#nav,
header.nav {
  position: relative;
}
header.nav#nav::after,
header.nav::after {
  /* Double-hairline removed — header is borderless, uses scroll shadow instead. */
  content: none !important;
  display: none !important;
}

/* ── PART 8: Compass divider — hand-drawn 8-point star (lances built in) ──
   The new SVG carries its own tapered lances + terminal dots, so the old
   ::before/::after flanking hairlines are removed to avoid double lines.
   fill="currentColor" → inherits gold from .compass-divider color. */
.compass-divider {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
  color: var(--mc-gold) !important;
}
.compass-divider::before,
.compass-divider::after {
  content: none !important;
  display: none !important;
}
.compass-divider svg {
  width: min(360px, 60%) !important;
  height: auto !important;
  display: block !important;
}

/* ── FIX 3: FAQ accordion — transparent items, hairline rule ──
   Override main.css white-block (.faq-item background:var(--mc-white),
   incl. the !important set inside the prefers-dark media block). */
.faq-item {
  background: transparent !important;
  border: none !important;
  border-bottom: 0.5px solid rgba(13,31,51,0.12) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.faq-q {
  background: transparent !important;
  color: var(--mc-navy, #0D1F33) !important;
}
.faq-a,
.faq-a p {
  background: transparent !important;
  color: rgba(13,31,51,0.70) !important;
}
/* + / × toggle in gold */
.faq-q::after {
  color: var(--mc-gold, #7A5C1C) !important;
}

/* ── FIX 5: FAQ — harmonious filter → divider → content rhythm ── */
.faq-jump {
  margin: 48px 0 0 !important;
}
.faq-group:first-child,
.faq-group-label:first-of-type {
  margin-top: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   UNIFIED HERO (Version A) — full-bleed image + localized
   bottom-left radial scrim + soft text-shadow. One design for
   homepage AND all converted interior heroes (.hero only;
   the 3 skipped service pages keep .page-hero untouched).
   !important throughout to win over async main.min.css.
   ═══════════════════════════════════════════════════════════ */
.hero{
  position:relative !important;
  width:100% !important;
  min-height:0 !important; max-height:none !important; aspect-ratio:auto !important;
  margin:0 !important; padding:0 !important;
  display:block !important;
  overflow:visible !important;
  isolation:auto !important;
  background:var(--mc-navy) !important; /* fallback while image decodes */
}
/* TOP: full-width landscape photo band (page LCP).
   FIXED ASPECT-RATIO (not vh) → the band scales uniformly with viewport width,
   so resizing never re-crops/zooms the photo. ~2.5:1 keeps a comfortable band
   height across 1280–1920 (≈512–768px). object-position tuned per photo below. */
.hero-media{
  position:static !important; inset:auto !important;
  width:100% !important; aspect-ratio:3 / 1 !important; height:auto !important;
  margin:0 !important; z-index:auto !important;
  grid-column:auto !important; grid-row:auto !important; /* kill old two-column grid */
  border-top:2px solid var(--mc-gold) !important; /* gold frame TOP (bottom seam is on .hero-content) */
}
.hero-media picture{display:block !important;width:100% !important;height:100% !important}
.hero-media img{
  width:100% !important; height:100% !important;
  object-fit:cover !important;
  object-position:center 42% !important;
  display:block !important;
}
/* scrim removed — text is no longer over the photo */
.hero-scrim,.page-hero-scrim{display:none !important}
/* BELOW: navy text block, full-width, content-driven height.
   Gold seam hairline (border-top) marks exactly where photo band meets navy —
   defines the band site-wide and fixes blue-on-blue (e.g. Buyer Rep caravela). */
.hero-content{
  position:static !important; z-index:auto !important;
  width:100% !important;
  margin:0 !important;
  padding:clamp(40px,5vh,64px) 0 !important;
  background:var(--mc-navy) !important;
  color:#fff !important;
  display:block !important;
  border-top:1px solid var(--mc-gold) !important; /* the gold seam */
}
.hero-content .wrap{
  max-width:var(--max,1320px) !important;
  margin:0 auto !important;
  padding-left:var(--gutter) !important; padding-right:var(--gutter) !important;
}
/* no text-shadow on the navy block — kill the old overlay shadow */
.hero-content .wrap > *,
.hero-content > *,
.page-hero-content > *,
.hero-eyebrow,.hero h1,.hero-editorial,.hero-sub{
  text-shadow:none !important;
}
.hero-eyebrow{
  font-family:var(--sans) !important; font-size:13px !important;
  font-weight:600 !important; letter-spacing:.28em !important; text-transform:uppercase !important;
  color:var(--mc-gold) !important; margin:0 0 clamp(14px,2vh,22px) !important; display:block !important;
  max-width:42ch !important; white-space:normal !important; text-wrap:balance;
}
.hero h1{
  font-family:var(--serif) !important; font-weight:300 !important;
  font-size:clamp(2rem,4.5vw,3.75rem) !important; line-height:1.06 !important;
  letter-spacing:-.018em !important; color:var(--mc-cream) !important; max-width:20ch !important; margin:0 !important;
}
.hero h1 .it{font-style:italic !important;font-weight:400 !important;color:var(--mc-gold) !important;display:block !important}
/* meridian divider — restrained gold accent, LEFT-aligned, below H1 */
.hero .mc-divider--hero{
  width:100% !important; max-width:220px !important;
  margin:1rem 0 1.1rem 0 !important; display:block !important; height:auto !important;
}
/* editorial accent line — wider measure so it wraps onto fewer lines */
.hero-editorial{
  margin:clamp(10px,1.2vh,14px) 0 0 !important;
  font-family:var(--serif) !important; font-weight:300 !important; font-style:italic !important;
  font-size:clamp(1.25rem,2.2vw,1.85rem) !important; line-height:1.25 !important;
  letter-spacing:-.01em !important; color:var(--mc-text-warm) !important; max-width:64ch !important;
}
.hero-editorial em,.hero-editorial .it{font-style:italic !important;color:var(--mc-gold) !important}
.hero-sub{
  margin:clamp(12px,1.5vh,18px) 0 0 !important; max-width:70ch !important;
  font-family:var(--sans) !important; font-size:clamp(0.95rem,1.4vw,1.075rem) !important;
  line-height:1.6 !important; color:var(--mc-text-warm) !important;
}
.hero-sub strong{color:#fff !important;font-weight:600 !important}
.hero .hero-cta{
  margin-top:clamp(18px,2.4vh,28px) !important; display:inline-flex !important; align-items:center !important;
  gap:10px !important; font-family:var(--sans) !important; font-size:clamp(12px,1.2vw,14px) !important;
  font-weight:500 !important; letter-spacing:.08em !important; text-transform:uppercase !important;
  color:#fff !important; padding:0 0 4px !important; border:0 !important; border-bottom:1px solid var(--mc-gold) !important;
  background:none !important; transition:gap .25s ease !important;
}
.hero .hero-cta:hover{gap:18px !important;background:none !important}
.hero .hero-cta .arr{color:var(--mc-gold) !important;font-size:18px !important;line-height:1 !important}
/* per-page focal point so each subject is framed in the photo band */
.hero--about   .hero-media img{object-position:center 42% !important}
.hero--faq     .hero-media img{object-position:center 50% !important}
.hero--insights .hero-media img{object-position:center 38% !important}
.hero--services .hero-media img{object-position:45% 48% !important}
.hero--buyer  .hero-media img{object-position:center 58% !important}
/* Custom Build + Relocation: full-bleed cover (no contained box / navy
   margins). Focal point tuned so each subject stays framed in the band. */
.hero--reloc  .hero-media img{ object-fit:cover !important; object-position:center 50% !important; }
.hero--custom .hero-media img{ object-fit:cover !important; object-position:center 55% !important; }
@media (max-width:719px){
  /* landscape on a narrow screen is naturally shorter — more room for text below */
  .hero{min-height:0 !important;max-height:none !important;aspect-ratio:auto !important}
  /* narrow screens: ~4:3 band, still aspect-ratio so no re-crop on rotate/resize */
  .hero-media{aspect-ratio:4 / 3 !important;height:auto !important}
  .hero-content{padding:clamp(30px,4.5vh,46px) 0 !important}
  .hero h1{font-size:clamp(2rem,7.2vw,2.5rem) !important;max-width:none !important}
  .hero-editorial{font-size:clamp(18px,5vw,22px) !important;max-width:none !important}
  .hero-sub{max-width:none !important}
  .hero .mc-divider--hero{max-width:180px !important;margin:1rem 0 1.25rem !important}
}

/* ═══════════════════════════════════════════════════════════
   HOMEPAGE split hero (.home-hero) — Round-2 polish
   B) gold seam where photo meets navy panel (vertical desktop,
      horizontal on the mobile column-reverse stack)
   C) shorter navy panel + a little more horizontal room for the copy
   ═══════════════════════════════════════════════════════════ */
.home-hero-panel{
  padding:clamp(32px,4.5vw,68px) clamp(28px,5vw,76px) !important; /* shorter than before */
}
.home-hero-panel-inner{ max-width:600px !important; }
.home-hero .hero-sub{ max-width:56ch !important; } /* fewer lines, still a column */
/* H: gold frame top + bottom of the homepage hero photo */
.home-hero-photo{ border-top:2px solid var(--mc-gold) !important; border-bottom:1px solid var(--mc-gold) !important; }
@media (min-width:900px){
  /* desktop: panel left, photo right → seam on the panel's right edge */
  .home-hero-panel{ border-right:1px solid var(--mc-gold) !important; }
}
@media (max-width:899px){
  /* column-reverse: photo on top, panel below → seam on the panel's top edge */
  .home-hero-panel{ border-top:1px solid var(--mc-gold) !important; }
}

/* ═══════════════════════════════════════════════════════════
   FILTER PILLS — deliberate overflow (item 9)
   Desktop: rows wrap (no clip). Mobile: the FAQ jump row scrolls
   horizontally; add a soft edge-fade so the overflow reads as
   intentional, not an abrupt clip at the right edge.
   ═══════════════════════════════════════════════════════════ */
/* F1: tighter mobile gutter so card blocks use a comfortable full width */
@media (max-width:560px){
  :root{ --gutter:16px !important; }
}
@media (max-width:720px){
  /* mobile: WRAP all pills (no horizontal scroll) so every topic is tappable */
  .faq-jump, .insights-filter{
    flex-wrap:wrap !important;
    overflow-x:visible !important;
    justify-content:center !important;
    -webkit-mask-image:none !important; mask-image:none !important;
    row-gap:8px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   WhatsApp float (D + I)
   D: hidden over the hero, fades in once scrolled past it (.is-revealed
      toggled by nav.js). I: on mobile sit above the sticky CTA bar.
   ═══════════════════════════════════════════════════════════ */
.wa-float{
  transition:opacity .3s ease, transform .2s ease, box-shadow .2s ease !important;
}
@media (max-width:720px){
  /* clear the sticky "Begin a conversation" bar (≈58px) at all mobile widths */
  .wa-float{ bottom:76px !important; }
}