/* ── Global CSS isolation ── */
#msc-navbar,#msc-mobile-menu,#msc-panel-overlay,#msc-skip-link{
  all:initial;
  box-sizing:border-box;
}
#msc-navbar *:not(svg):not(svg *),#msc-navbar *::before,#msc-navbar *::after,
#msc-mobile-menu *:not(svg):not(svg *),#msc-mobile-menu *::before,#msc-mobile-menu *::after{
  all:unset;
  box-sizing:border-box;
}

#msc-navbar,#msc-mobile-menu,#msc-panel-overlay{
  --msc-dark-brown:#3B2F26;--msc-brown-mid:#5C4A3A;--msc-gold:#D6AD60;
  --msc-copper:#B26E3C;--msc-taupe:#A8957A;--msc-cream:#EFE4C8;
  --msc-cream-light:#FAF6EE;--msc-cream-border:#DDD0B0;
  --msc-font-heading:'Playfair Display',Georgia,serif;
  --msc-font-sub:'Source Sans Pro',sans-serif;
  --msc-font-body:'Source Serif Pro',Georgia,serif;
  --msc-nav-height:5.125rem;
  --msc-ease:0.28s cubic-bezier(0.4,0,0.2,1);
}

/* ── Body offset for fixed navbar ── */
body{
  padding-top: var(--msc-nav-actual-height, 5.125rem) !important;
}
/* ── Bricks Builder Compatibility ── */
#brx-header, .brxe-header, header.bricks-header, [data-brx-component="header"] {
  display: none !important;
}
body:has(#brx-content){
  padding-top: 0 !important;
}
#brx-content {
  padding-top: var(--msc-nav-actual-height, var(--msc-nav-height)) !important;
}

#msc-navbar{
  position:fixed !important;top:0 !important;left:0 !important;right:0 !important;
  width:100% !important;z-index:99998 !important;
  height:var(--msc-nav-height) !important;
  background:rgba(250,246,238,0.95) !important;
  backdrop-filter:blur(16px) !important;-webkit-backdrop-filter:blur(16px) !important;
  box-shadow:0 1px 0 rgba(168,149,122,0.3),0 4px 28px rgba(59,47,38,0.06) !important;
  transition:height var(--msc-ease),background var(--msc-ease),box-shadow var(--msc-ease) !important;
  display:flex !important;align-items:center !important;
  margin:0 !important;padding:0 !important;
}
#msc-navbar::after{
  content:'' !important;position:absolute !important;
  bottom:0 !important;left:8% !important;right:8% !important;height:1px !important;
  background:linear-gradient(90deg,transparent,rgba(214,173,96,0.5),transparent) !important;
  pointer-events:none !important;
}
#msc-navbar.msc-scrolled{
  height:4.125rem !important;background:rgba(250,246,238,0.99) !important;
  box-shadow:0 1px 0 rgba(168,149,122,0.35),0 8px 36px rgba(59,47,38,0.09) !important;
}

#msc-navbar .msc-nav-container{
  width:100% !important;padding:0 clamp(1.25rem, 3vw, 3rem) !important;
  display:flex !important;align-items:center !important;
  justify-content:space-between !important;gap:clamp(0.5rem, 1.5vw, 1.5rem) !important;
}

#msc-navbar .msc-logo{
  display:flex !important;align-items:center !important;
  text-decoration:none !important;flex-shrink:1 !important;min-width:0 !important;
  cursor:pointer !important;line-height:0 !important;
}
#msc-navbar .msc-logo-img{
  display:block !important;width:auto !important;
  max-width:clamp(6rem, 9vw, 10rem) !important;height:clamp(2.25rem, 3vw, 3.25rem) !important;
  object-fit:contain !important;object-position:left center !important;
  transition:opacity var(--msc-ease),transform var(--msc-ease) !important;
}
#msc-navbar .msc-logo:hover .msc-logo-img{opacity:0.78 !important;transform:translateY(-1px) !important;}
#msc-navbar.msc-scrolled .msc-logo-img{height:2.625rem !important;}

#msc-navbar .msc-nav-links{
  display:flex !important;align-items:center !important;
  gap:0 !important;margin:0 !important;padding:0 !important;
  flex:1 1 auto !important;justify-content:space-evenly !important;
  min-width:0 !important;
}
#msc-navbar .msc-nav-links li{
  display:block !important;margin:0 !important;padding:0 !important;
  position:relative !important;
  flex-shrink:1 !important;min-width:0 !important;
}
#msc-navbar .msc-nav-links li a{
  display:inline-flex !important;align-items:center !important;gap:5px !important;
  font-family:var(--msc-font-heading) !important;
  font-size:clamp(0.7rem, 0.9vw, 1.05rem) !important;font-weight:700 !important;font-style:italic !important;
  color:var(--msc-brown-mid) !important;
  text-decoration:none !important;letter-spacing:0.03em !important;text-transform:none !important;
  padding:0.5625rem clamp(0.375rem, 0.8vw, 1rem) !important;border-radius:3px !important;
  white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;
  max-width:100% !important;cursor:pointer !important;
  background-image:linear-gradient(var(--msc-copper),var(--msc-copper)) !important;
  background-size:0% 1px !important;background-repeat:no-repeat !important;
  background-position:center bottom 1px !important;
  transition:color var(--msc-ease),background-size var(--msc-ease),background-color var(--msc-ease) !important;
}
#msc-navbar .msc-nav-links li a:hover{
  color:var(--msc-copper) !important;
  background-size:70% 1px !important;
  background-color:rgba(178,110,60,0.05) !important;
}

#msc-navbar .msc-nav-links li.msc-has-dropdown>a::before{
  content:'' !important;position:absolute !important;
  bottom:-6px !important;left:0 !important;right:0 !important;
  height:8px !important;background:transparent !important;
}
#msc-navbar .msc-nav-links li.msc-has-dropdown>a::after{
  content:'' !important;display:inline-block !important;
  width:4px !important;height:4px !important;
  border-inline-end:1.2px solid currentColor !important;
  border-bottom:1.2px solid currentColor !important;
  transform:rotate(45deg) translateY(-2px) !important;
  flex-shrink:0 !important;opacity:0.7 !important;
  transition:transform var(--msc-ease),opacity var(--msc-ease) !important;
}
#msc-navbar .msc-nav-links li.msc-has-dropdown:hover>a::after{
  transform:rotate(-135deg) translateY(2px) !important;opacity:1 !important;
}

#msc-navbar .msc-dropdown{
  position:absolute !important;top:100% !important;
  left:50% !important;transform:translateX(-50%) translateY(4px) !important;
  background:var(--msc-cream-light) !important;
  border:1px solid var(--msc-cream-border) !important;
  border-top:2px solid var(--msc-gold) !important;
  min-width:15rem !important;
  padding:0.375rem 0 0.5rem !important;margin:0 !important;
  border-radius:0 0 8px 8px !important;
  opacity:0 !important;pointer-events:none !important;
  transition:opacity var(--msc-ease),transform var(--msc-ease) !important;
  box-shadow:0 16px 48px rgba(59,47,38,0.1),0 4px 12px rgba(59,47,38,0.06) !important;
  z-index:99999 !important;
}
#msc-navbar .msc-nav-links li.msc-has-dropdown:hover .msc-dropdown,
#msc-navbar .msc-nav-links li.msc-has-dropdown.msc-dropdown-open .msc-dropdown{
  opacity:1 !important;pointer-events:all !important;
  transform:translateX(-50%) translateY(0) !important;
}
#msc-navbar .msc-nav-links li.msc-has-dropdown.msc-dropdown-open>a::after{
  transform:rotate(-135deg) translateY(2px) !important;opacity:1 !important;
}
#msc-navbar .msc-dropdown li{display:block !important;margin:0 !important;padding:0 !important;}
#msc-navbar .msc-dropdown li+li{border-top:1px solid rgba(168,149,122,0.15) !important;}
#msc-navbar .msc-dropdown li a{
  display:block !important;
  font-family:var(--msc-font-body) !important;font-size:clamp(0.75rem, 0.9vw, 0.95rem) !important;
  font-weight:700 !important;font-style:normal !important;
  color:var(--msc-dark-brown) !important;text-decoration:none !important;
  letter-spacing:0.01em !important;padding:0.625rem 1.375rem !important;
  white-space:nowrap !important;background-image:none !important;cursor:pointer !important;
  transition:background var(--msc-ease),color var(--msc-ease),padding-left var(--msc-ease) !important;
}
#msc-navbar .msc-dropdown li a:hover{
  background:rgba(214,173,96,0.14) !important;
  color:var(--msc-copper) !important;padding-inline-start:1.875rem !important;
}

#msc-navbar .msc-cta{
  display:inline-flex !important;align-items:center !important;
  font-family:var(--msc-font-sub) !important;font-size:clamp(0.65rem, 0.85vw, 0.9rem) !important;
  font-weight:700 !important;letter-spacing:0.15em !important;text-transform:uppercase !important;
  color:var(--msc-cream-light) !important;background:var(--msc-dark-brown) !important;
  text-decoration:none !important;padding:clamp(0.5rem, 0.7vw, 0.6875rem) clamp(0.75rem, 1.2vw, 1.375rem) !important;
  border-radius:40px !important;white-space:nowrap !important;flex-shrink:1 !important;
  position:relative !important;overflow:hidden !important;cursor:pointer !important;
  box-shadow:0 2px 14px rgba(59,47,38,0.2) !important;
  transition:color var(--msc-ease),transform var(--msc-ease),box-shadow var(--msc-ease) !important;
}
#msc-navbar .msc-cta::before{
  content:'' !important;position:absolute !important;inset:0 !important;
  background:var(--msc-copper) !important;transform:translateX(-101%) !important;
  border-radius:40px !important;transition:transform var(--msc-ease) !important;
}
#msc-navbar .msc-cta span{position:relative !important;z-index:1 !important;}
#msc-navbar .msc-cta:hover{
  color:var(--msc-cream-light) !important;
  box-shadow:0 6px 28px rgba(178,110,60,0.32) !important;transform:translateY(-1px) !important;
}
#msc-navbar .msc-cta:hover::before{transform:translateX(0) !important;}

/* ── Nav actions (IG + search icons) ── */
#msc-navbar .msc-nav-actions{
  display:flex !important;align-items:center !important;gap:0.25rem !important;
  flex-shrink:0 !important;
}
#msc-navbar .msc-icon-btn{
  display:flex !important;align-items:center !important;justify-content:center !important;
  width:2.125rem !important;height:2.125rem !important;
  border-radius:50% !important;cursor:pointer !important;
  transition:background var(--msc-ease) !important;
}
#msc-navbar .msc-icon-btn:hover{
  background:rgba(178,110,60,0.08) !important;
}
#msc-navbar .msc-icon-btn svg{
  display:block !important;width:1.125rem !important;height:1.125rem !important;flex-shrink:0 !important;
}
#msc-navbar .msc-icon-btn svg,
#msc-navbar .msc-icon-btn svg *{
  stroke:#5C4A3A !important;fill:none !important;
  stroke-width:1.5 !important;stroke-linecap:round !important;stroke-linejoin:round !important;
}
#msc-navbar .msc-icon-btn svg circle[stroke="none"]{
  fill:#5C4A3A !important;stroke:none !important;stroke-width:0 !important;
}
#msc-navbar .msc-icon-btn:hover svg,
#msc-navbar .msc-icon-btn:hover svg *{
  stroke:#B26E3C !important;
}
#msc-navbar .msc-icon-btn:hover svg circle[stroke="none"]{
  fill:#B26E3C !important;stroke:none !important;stroke-width:0 !important;
}

/* ── Search bar ── */
#msc-navbar .msc-search-bar{
  position:absolute !important;top:100% !important;left:0 !important;right:0 !important;
  background:var(--msc-cream-light) !important;
  border-top:1px solid var(--msc-cream-border) !important;
  border-bottom:2px solid var(--msc-gold) !important;
  box-shadow:0 12px 36px rgba(59,47,38,0.1) !important;
  padding:1rem 2.5rem !important;
  display:none !important;z-index:1 !important;
}
#msc-navbar .msc-search-bar.msc-open{display:block !important;}
#msc-navbar .msc-search-form{
  max-width:37.5rem !important;margin:0 auto !important;
  display:flex !important;gap:0.625rem !important;
}
#msc-navbar .msc-search-input{
  flex:1 !important;
  font-family:var(--msc-font-body) !important;font-size:1rem !important;
  color:var(--msc-dark-brown) !important;background:#fff !important;
  border:1px solid var(--msc-cream-border) !important;
  border-radius:6px !important;padding:0.625rem 1rem !important;
  outline:none !important;box-shadow:none !important;
  -webkit-appearance:none !important;
}
#msc-navbar .msc-search-input:focus{
  border-color:var(--msc-copper) !important;
  box-shadow:0 0 0 3px rgba(178,110,60,0.12) !important;
}
#msc-navbar .msc-search-submit{
  font-family:var(--msc-font-sub) !important;font-size:0.85rem !important;
  font-weight:600 !important;letter-spacing:0.1em !important;text-transform:uppercase !important;
  color:var(--msc-cream-light) !important;background:var(--msc-dark-brown) !important;
  border:none !important;border-radius:6px !important;
  padding:0.625rem 1.375rem !important;cursor:pointer !important;
  transition:background var(--msc-ease) !important;
}
#msc-navbar .msc-search-submit:hover{background:var(--msc-copper) !important;}

/* ── Mobile menu social ── */
#msc-mobile-menu .msc-mob-social{
  display:flex !important;align-items:center !important;gap:0.75rem !important;
  margin-top:1.25rem !important;padding-top:1rem !important;
  border-top:1px solid rgba(168,149,122,0.2) !important;
}
#msc-mobile-menu .msc-mob-social a{
  display:flex !important;align-items:center !important;gap:0.5rem !important;
  font-family:var(--msc-font-body) !important;font-size:0.9rem !important;
  color:var(--msc-brown-mid) !important;text-decoration:none !important;
  padding:0 !important;cursor:pointer !important;
}
#msc-mobile-menu .msc-mob-social a:hover{color:var(--msc-copper) !important;}
#msc-mobile-menu .msc-mob-social svg{
  display:block !important;width:1.125rem !important;height:1.125rem !important;
}
#msc-mobile-menu .msc-mob-social svg,
#msc-mobile-menu .msc-mob-social svg *{
  stroke:#5C4A3A !important;fill:none !important;
  stroke-width:1.5 !important;stroke-linecap:round !important;stroke-linejoin:round !important;
}
#msc-mobile-menu .msc-mob-social svg circle[stroke="none"]{
  fill:#5C4A3A !important;stroke:none !important;stroke-width:0 !important;
}
#msc-mobile-menu .msc-mob-social a:hover svg,
#msc-mobile-menu .msc-mob-social a:hover svg *{
  stroke:#B26E3C !important;
}
#msc-mobile-menu .msc-mob-social a:hover svg circle[stroke="none"]{
  fill:#B26E3C !important;stroke:none !important;stroke-width:0 !important;
}

#msc-navbar .msc-hamburger{
  display:none !important;flex-direction:column !important;
  justify-content:center !important;gap:5px !important;
  width:2.5rem !important;height:2.5rem !important;
  background:transparent !important;border:1px solid rgba(92,74,58,0.22) !important;
  border-radius:4px !important;cursor:pointer !important;padding:0.5rem !important;
  flex-shrink:0 !important;
  transition:border-color var(--msc-ease),background var(--msc-ease) !important;
}
#msc-navbar .msc-hamburger:hover{
  background:rgba(92,74,58,0.06) !important;border-color:var(--msc-copper) !important;
}
#msc-navbar .msc-hamburger span{
  display:block !important;width:100% !important;height:1.5px !important;
  background:var(--msc-dark-brown) !important;border-radius:2px !important;
  transition:transform var(--msc-ease),opacity var(--msc-ease) !important;
  transform-origin:center !important;
}
#msc-navbar .msc-hamburger.msc-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg) !important;}
#msc-navbar .msc-hamburger.msc-open span:nth-child(2){opacity:0 !important;transform:scaleX(0) !important;}
#msc-navbar .msc-hamburger.msc-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg) !important;}

#msc-panel-overlay{
  position:fixed !important;inset:0 !important;
  background:rgba(59,47,38,0.35) !important;z-index:99996 !important;
  opacity:0 !important;visibility:hidden !important;
  transition:opacity 0.32s cubic-bezier(0.4,0,0.2,1),visibility 0.32s !important;
}
#msc-panel-overlay.msc-panel-open{opacity:1 !important;visibility:visible !important;}

#msc-mobile-menu{
  position:fixed !important;top:0 !important;left:0 !important;
  width:18.75rem !important;max-width:85vw !important;height:100vh !important;
  background:var(--msc-cream-light) !important;
  border-inline-end:1px solid var(--msc-cream-border) !important;
  box-shadow:4px 0 32px rgba(59,47,38,0.14) !important;
  transform:translateX(-100%) !important;
  transition:transform 0.32s cubic-bezier(0.4,0,0.2,1) !important;
  z-index:99997 !important;
  box-sizing:border-box !important;overflow-y:auto !important;overflow-x:hidden !important;
}
#msc-mobile-menu.msc-panel-open{transform:translateX(0) !important;}

#msc-mobile-menu .msc-panel-header{
  display:flex !important;align-items:center !important;
  justify-content:space-between !important;padding:1.25rem 1.5rem 1rem !important;
  border-bottom:1px solid var(--msc-cream-border) !important;
  position:sticky !important;top:0 !important;
  background:var(--msc-cream-light) !important;z-index:1 !important;
}
#msc-mobile-menu .msc-panel-logo{
  font-family:var(--msc-font-heading) !important;font-size:1.05rem !important;
  font-style:italic !important;color:var(--msc-dark-brown) !important;opacity:0.7 !important;
}
#msc-mobile-menu .msc-panel-close{
  width:2rem !important;height:2rem !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  background:none !important;border:1px solid rgba(92,74,58,0.2) !important;
  border-radius:50% !important;cursor:pointer !important;
  color:var(--msc-dark-brown) !important;font-size:1rem !important;line-height:1 !important;
  flex-shrink:0 !important;
}
#msc-mobile-menu .msc-panel-close:hover{
  background:rgba(92,74,58,0.08) !important;
  border-color:var(--msc-copper) !important;color:var(--msc-copper) !important;
}

#msc-mobile-menu .msc-mobile-inner{display:block !important;padding:1rem 1.5rem 2.5rem !important;}
#msc-mobile-menu ul{display:block !important;margin:0 !important;padding:0 !important;}
#msc-mobile-menu ul li{display:block !important;margin:0 !important;padding:0 !important;}
#msc-mobile-menu ul li a,#msc-mobile-menu .msc-mob-parent{
  display:block !important;
  font-family:var(--msc-font-heading) !important;font-size:1.15rem !important;
  font-weight:400 !important;font-style:italic !important;
  color:var(--msc-dark-brown) !important;text-decoration:none !important;
  letter-spacing:0.02em !important;padding:0.875rem 0 !important;
  border-bottom:1px solid rgba(168,149,122,0.2) !important;
  width:100% !important;text-align:start !important;
  cursor:pointer !important;line-height:1.4 !important;
}
#msc-mobile-menu ul>li:first-child>a,
#msc-mobile-menu ul>li:first-child>.msc-mob-parent-row{
  border-top:1px solid rgba(168,149,122,0.2) !important;
}
#msc-mobile-menu ul li a:hover,
#msc-mobile-menu .msc-mob-parent:hover{color:var(--msc-copper) !important;}

#msc-mobile-menu .msc-mob-parent-row{
  display:flex !important;align-items:center !important;box-sizing:border-box !important;
  justify-content:space-between !important;
  border-bottom:1px solid rgba(168,149,122,0.2) !important;
}
#msc-mobile-menu .msc-mob-parent-row .msc-mob-parent{border-bottom:none !important;flex:1 !important;}

#msc-mobile-menu .msc-mob-arrow{
  width:2.75rem !important;height:2.75rem !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  flex-shrink:0 !important;cursor:pointer !important;
}
#msc-mobile-menu .msc-mob-arrow svg{
  transition:transform 0.28s cubic-bezier(0.4,0,0.2,1) !important;
}
#msc-mobile-menu .msc-mob-arrow.msc-open svg{transform:rotate(180deg);}

#msc-mobile-menu .msc-mob-sub{
  display:block !important;
  max-height:0 !important;
  overflow:hidden !important;
  visibility:hidden !important;
  transition:max-height 0.35s cubic-bezier(0.4,0,0.2,1),visibility 0s linear 0.35s !important;
  background:rgba(168,149,122,0.07) !important;
  border-radius:0 0 6px 6px !important;margin:0 !important;padding:0 !important;
}
#msc-mobile-menu .msc-mob-sub.msc-open{
  max-height:62.5rem !important;
  visibility:visible !important;
  transition:max-height 0.35s cubic-bezier(0.4,0,0.2,1),visibility 0s linear 0s !important;
}
#msc-mobile-menu .msc-mob-sub>li{overflow:hidden !important;}
#msc-mobile-menu .msc-mob-sub li a{
  font-family:var(--msc-font-body) !important;font-size:1rem !important;
  font-weight:400 !important;font-style:normal !important;
  color:var(--msc-brown-mid) !important;padding:0.5625rem 0 0.5625rem 1.25rem !important;
  letter-spacing:0.01em !important;border-top:none !important;
  border-bottom:1px solid rgba(168,149,122,0.12) !important;
}
#msc-mobile-menu .msc-mob-sub li a:hover{color:var(--msc-copper) !important;}

#msc-mobile-menu .msc-mob-cta{
  display:block !important;box-sizing:border-box !important;
  margin-top:1.75rem !important;text-align:center !important;cursor:pointer !important;
  font-family:var(--msc-font-sub) !important;font-size:0.85rem !important;
  font-weight:600 !important;letter-spacing:0.15em !important;text-transform:uppercase !important;
  color:var(--msc-cream-light) !important;background:var(--msc-dark-brown) !important;
  text-decoration:none !important;padding:0.875rem 1.25rem !important;
  border-radius:40px !important;
  box-shadow:0 2px 14px rgba(59,47,38,0.18) !important;
}
#msc-mobile-menu .msc-mob-cta:hover{
  background:var(--msc-copper) !important;
}

@media (max-width:960px){
  #msc-navbar .msc-nav-links{display:none !important;}
  #msc-navbar .msc-cta{display:none !important;}
  #msc-navbar .msc-hamburger{display:flex !important;}
}
@media (max-width:480px){
  #msc-navbar .msc-logo-img{height:2.5rem !important;max-width:8.125rem !important;}
  #msc-mobile-menu{width:17.5rem !important;}
  #msc-mobile-menu .msc-mobile-inner{padding:0.875rem 1.25rem 2.25rem !important;}
  #msc-navbar .msc-search-bar{padding:0.75rem 1.25rem !important;}
}

/* ── Skip-to-content link ── */
#msc-skip-link{
  position:fixed !important;top:-100% !important;left:16px !important;
  z-index:99999 !important;
  font-family:var(--msc-font-sub) !important;font-size:0.85rem !important;font-weight:600 !important;
  color:var(--msc-cream-light) !important;background:var(--msc-dark-brown) !important;
  padding:0.625rem 1.25rem !important;border-radius:0 0 6px 6px !important;
  text-decoration:none !important;
  box-shadow:0 4px 16px rgba(59,47,38,0.2) !important;
}
#msc-skip-link:focus{
  top:0 !important;outline:none !important;
}

/* ── Active page indicators ── */
#msc-navbar .msc-nav-links li.msc-current>a{
  color:var(--msc-copper) !important;
  background-size:70% 1px !important;
}
#msc-navbar .msc-nav-links li.msc-current-ancestor>a{
  color:var(--msc-copper) !important;
}
#msc-navbar .msc-dropdown li.msc-current>a{
  color:var(--msc-copper) !important;
  background:rgba(214,173,96,0.14) !important;
  padding-inline-start:1.625rem !important;
}
#msc-mobile-menu li.msc-current>a{
  color:var(--msc-copper) !important;
}
#msc-mobile-menu li.msc-current-ancestor>.msc-mob-parent-row .msc-mob-parent{
  color:var(--msc-copper) !important;
}

/* ── Keyboard focus-visible ── */
#msc-navbar .msc-nav-links li a:focus-visible,
#msc-navbar .msc-cta:focus-visible,
#msc-navbar .msc-logo:focus-visible,
#msc-navbar .msc-icon-btn:focus-visible,
#msc-navbar .msc-search-input:focus-visible,
#msc-navbar .msc-search-submit:focus-visible,
#msc-navbar .msc-hamburger:focus-visible{
  outline:2px solid var(--msc-copper) !important;
  outline-offset:2px !important;
}
#msc-navbar .msc-dropdown li a:focus-visible{
  outline:2px solid var(--msc-copper) !important;
  outline-offset:-2px !important;
}
#msc-mobile-menu a:focus-visible,
#msc-mobile-menu button:focus-visible{
  outline:2px solid var(--msc-copper) !important;
  outline-offset:2px !important;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion:reduce){
  #msc-navbar,#msc-navbar *,#msc-navbar *::before,#msc-navbar *::after,
  #msc-mobile-menu,#msc-mobile-menu *,
  #msc-panel-overlay{
    transition:none !important;animation:none !important;
  }
}

body.admin-bar #msc-navbar{top:32px !important;}
@media screen and (max-width:782px){
  body.admin-bar #msc-navbar{top:46px !important;}
}

/* ── Mega panel ────────────────────────────────────────────────────────────
 * Services and Tools open a full-width panel instead of a narrow column. The
 * panel IS a .msc-dropdown, so the existing controller drives it unchanged:
 * hover, .msc-dropdown-open, Escape, focus-out and click-outside all already
 * bind to .msc-has-dropdown > a[aria-haspopup]. No JS shipped with this.
 *
 * Everything is declared explicitly. #msc-navbar descendants inherit
 * `all:unset`, so display, colour and spacing have no defaults to fall back on.
 * Positioned fixed rather than absolute so the panel spans the viewport
 * regardless of the <li> it hangs from, and because the controller reparents
 * the navbar to <body> on load.
 *
 * ⛔ No backdrop-filter anywhere in here. A full-viewport blur over the advert
 * stack is what hung the phone on tap (#17); the dim alone is the backdrop.
 */
#msc-navbar .msc-dropdown.msc-dropdown--mega{
 position:fixed !important;left:0 !important;right:0 !important;
 top:var(--msc-nav-height) !important;transform:translateY(4px) !important;
 width:auto !important;max-width:none !important;min-width:0 !important;
 display:block !important;
 background:var(--msc-cream-light) !important;
 border-top:1px solid var(--msc-cream-border) !important;
 border-bottom:1px solid var(--msc-cream-border) !important;
 box-shadow:0 14px 34px -18px rgba(59,47,38,0.34) !important;
 padding:2rem clamp(1.25rem,5vw,4rem) 2.25rem !important;
 opacity:0 !important;pointer-events:none !important;
 transition:opacity var(--msc-ease),transform var(--msc-ease) !important;
 z-index:99995 !important;
}
#msc-navbar.msc-scrolled .msc-dropdown.msc-dropdown--mega{ top:4.125rem !important; }
#msc-navbar .msc-nav-links li.msc-has-dropdown:hover .msc-dropdown--mega,
#msc-navbar .msc-nav-links li.msc-has-dropdown.msc-dropdown-open .msc-dropdown--mega{
 opacity:1 !important;pointer-events:all !important;transform:translateY(0) !important;
}

/* ⛔ THE HOVER BRIDGE — without it the rule above is unreachable by a mouse.
 * The panel is pinned to the BOTTOM OF THE BAR (top:var(--msc-nav-height)),
 * while the <li> whose :hover drives it is only as tall as its own label and
 * is vertically centred in that bar. So the panel begins ~21-25px BELOW the
 * element that keeps it open. The cursor crosses that strip on its way down,
 * :hover is lost, and the rule above flips the panel to opacity:0 AND
 * pointer-events:none. Carrying on downwards does NOT recover it: the panel is
 * switched off, not merely fading, so it cannot take the pointer back.
 * Measured on the live site 2026-09-14: a 19px dead strip on the Astro pages,
 * 15.5px on the flat ones. The older bridge, li.msc-has-dropdown>a::before, is
 * 8px tall at bottom:-6px and covers 6px of it — it was sized for the narrow
 * dropdown, which has no gap at all.
 *
 * The height is DERIVED, never a magic number. The list is centred in the bar,
 * so the space beneath the <li> is half of whatever the bar has spare. That
 * lands exact on both delivery paths despite their different root font sizes
 * (25px at 17px root, 21.5px at 16px), and re-derives itself if the bar height
 * or the label font ever change.
 *
 * Matches the narrow dropdown too, deliberately: the <li> carries no class
 * separating the mega items, and :has() would be the only way to reach one.
 * Safe there because that dropdown sits at top:100% with no gap, so the strip
 * overlaps its first item and LOSES the hit test to it — .msc-dropdown carries
 * z-index:99999 against this pseudo-element's auto. Verified by hit test on
 * the live page, not by reasoning about the cascade.
 *
 * Below 960px .msc-nav-links is display:none, so none of this renders on a
 * phone; the mobile menu is a different control entirely.
 */
#msc-navbar .msc-nav-links li.msc-has-dropdown::after{
 content:'' !important;position:absolute !important;
 top:100% !important;left:0 !important;right:0 !important;
 height:calc((var(--msc-nav-height) - 100%) / 2) !important;
 background:transparent !important;
}
#msc-navbar .msc-dropdown--mega>li{
 display:block !important;border-top:0 !important;
 max-width:78rem !important;margin:0 auto !important;
}
#msc-navbar .msc-mega-grid{
 display:grid !important;
 grid-template-columns:repeat(auto-fit,minmax(190px,1fr)) !important;
 gap:1.75rem 2.25rem !important;align-items:start !important;
}
#msc-navbar .msc-mega-col{ display:block !important; }
/* The discipline marker. Han only — every locale's own labels already carry these
 * terms, so the panel needs no new translated string. Decorative to a screen
 * reader (aria-hidden in the markup); the items beneath carry the real names. */
#msc-navbar .msc-mega-han{
 display:block !important;font-family:var(--msc-font-heading) !important;
 font-size:0.8125rem !important;letter-spacing:0.14em !important;
 color:var(--msc-copper) !important;margin:0 0 0.65rem !important;
 padding:0 0 0.5rem !important;
 border-bottom:1px solid rgba(214,173,96,0.38) !important;line-height:1.3 !important;
}
#msc-navbar .msc-mega-col ul{ display:block !important;margin:0 !important;padding:0 !important; }
#msc-navbar .msc-dropdown .msc-mega-col li+li{ border-top:0 !important; }
#msc-navbar .msc-mega-col li{ display:block !important;margin:0 !important;padding:0 !important;border:0 !important; }
#msc-navbar .msc-mega-col li a{
 display:block !important;font-family:var(--msc-font-body) !important;
 font-size:0.875rem !important;line-height:1.45 !important;
 color:var(--msc-brown-mid) !important;text-decoration:none !important;
 padding:0.4rem 0.5rem 0.4rem 0 !important;border-radius:2px !important;
 transition:color var(--msc-ease),padding-left var(--msc-ease) !important;
 white-space:normal !important;overflow-wrap:anywhere !important;
 text-overflow:clip !important;overflow:visible !important;
}
#msc-navbar .msc-mega-col li a:hover{ color:var(--msc-copper) !important;padding-inline-start:0.4rem !important; }
#msc-navbar .msc-mega-col li a:focus-visible{ outline:2px solid var(--msc-copper) !important;outline-offset:2px !important; }
/* Tian Qi, promoted out of the Tools list. The funnel link 8,616 pages do not carry. */
#msc-navbar .msc-mega-feature{
 display:block !important;margin:1.75rem 0 0 !important;padding:1rem 1.25rem !important;
 background:rgba(214,173,96,0.13) !important;
 border:1px solid rgba(214,173,96,0.42) !important;border-radius:3px !important;
}
#msc-navbar .msc-mega-feature a.msc-mega-feature-link{
 display:inline-block !important;font-family:var(--msc-font-heading) !important;
 font-size:1rem !important;color:var(--msc-dark-brown) !important;
 text-decoration:none !important;padding:0 !important;letter-spacing:0.01em !important;
 white-space:normal !important;overflow-wrap:anywhere !important;
 text-overflow:clip !important;overflow:visible !important;
}
#msc-navbar .msc-mega-feature a.msc-mega-feature-link:hover{ color:var(--msc-copper) !important; }
@media (max-width:960px){
 #msc-navbar .msc-dropdown.msc-dropdown--mega{ display:none !important; }
}
@media (prefers-reduced-motion:reduce){
 #msc-navbar .msc-dropdown.msc-dropdown--mega{ transition:none !important; }
 #msc-navbar .msc-mega-col li a{ transition:none !important; }
}
/* ── Mobile: the same discipline markers inside the accordion ───────────── */
#msc-mobile-menu .msc-mob-sub li.msc-mob-han{
 display:block !important;font-family:var(--msc-font-heading) !important;
 font-size:0.75rem !important;letter-spacing:0.14em !important;
 color:var(--msc-copper) !important;
 padding:0.9rem 1.5rem 0.3rem !important;line-height:1.3 !important;
}
#msc-mobile-menu .msc-mob-sub li.msc-mob-han+li a{ padding-top:0.3rem !important; }

/* ── Corrections the frozen capture predates ───────────────────────────────
 * ⛔ EVERYTHING BELOW MUST STAY INSIDE THIS DELIMITED BLOCK.
 * bin/rebuild-nav-flat.mjs slices this file from "── Mega panel" to
 * "block 3b60c1dde1" and appends the result to the inline <style> of all
 * 8,616 flat pages. A nav rule written ANYWHERE ELSE in this file reaches the
 * 2,227 Astro pages and none of the others — 20.5% of the site — which is
 * exactly how each of the four fixes below came to be true on one path only.
 */

/* 1 · The Tian Qi CTA. Moved here, not written here: it used to sit just above
 *     the Mega panel comment, i.e. one line outside the slice, so all 8,616
 *     flat pages carried `class="msc-nav-tianqi-animated"` and not one byte of
 *     what it means. On mobile that left the paid product's funnel link
 *     pixel-identical to "Zi Wei Dou Shu Calculator", because the accordion
 *     copy has no .msc-mega-feature tile around it to fall back on. */
/* ── Tian Qi CTA — periodic shine + resting glow (Sean 2026) ── */
#msc-navbar .msc-dropdown a.msc-nav-tianqi-animated,
#msc-mobile-menu .msc-mob-sub li a.msc-nav-tianqi-animated{
 position:relative !important;
 background-image:linear-gradient(100deg, transparent 40%, rgba(255,246,226,0.9) 50%, transparent 60%),
 linear-gradient(rgba(214,173,96,0.14), rgba(214,173,96,0.14)) !important;
 background-repeat:no-repeat, no-repeat !important;
 background-size:220% 100%, 100% 100% !important;
 background-position:-150% 0, 0 0 !important;
 box-shadow:inset 0 0 0 1px rgba(214,173,96,0.35) !important;
 animation:msc-nav-tianqi-shine 5s ease-in-out infinite !important;
}
#msc-navbar .msc-dropdown a.msc-nav-tianqi-animated::after,
#msc-mobile-menu .msc-mob-sub li a.msc-nav-tianqi-animated::after{
 content:"" !important; position:absolute !important; left:0.9rem !important; right:0.9rem !important; bottom:0.35rem !important;
 height:2px !important; border-radius:2px !important;
 background:linear-gradient(90deg, transparent, var(--msc-gold), var(--msc-copper), var(--msc-gold), transparent) !important;
 opacity:0.85 !important;
 box-shadow:0 0 6px rgba(214,173,96,0.55) !important;
}
@keyframes msc-nav-tianqi-shine{
 0%{ background-position:-150% 0, 0 0; }
 16%{ background-position:150% 0, 0 0; }
 100%{ background-position:150% 0, 0 0; }
}
@media (prefers-reduced-motion:reduce){
 #msc-navbar .msc-dropdown a.msc-nav-tianqi-animated,
 #msc-mobile-menu .msc-mob-sub li a.msc-nav-tianqi-animated{
 animation:none !important; background-image:linear-gradient(rgba(214,173,96,0.14), rgba(214,173,96,0.14)) !important;
 }
}

/* 2 · A closed panel is not just invisible, it is GONE.
 *     Closing with opacity:0 + pointer-events:none removes a panel from neither
 *     the tab order nor the accessibility tree, so 23 links per page stayed
 *     focusable inside a subtree that never becomes visible — tab off
 *     "Services" and focus disappears for twenty stops, its :focus-visible ring
 *     painted at opacity 0. visibility:hidden fixes both, and is transitioned
 *     at 0s AFTER the fade so the 0.28s close still reads as a fade rather than
 *     a cut; on open it flips instantly. Both panels are declared explicitly
 *     because the mega rule's own transition would otherwise outrank a
 *     single-class selector and cut its fade. */
#msc-navbar .msc-dropdown{
 visibility:hidden !important;
 transition:opacity var(--msc-ease),transform var(--msc-ease),visibility 0s linear 0.28s !important;
}
#msc-navbar .msc-dropdown.msc-dropdown--mega{
 visibility:hidden !important;
 transition:opacity var(--msc-ease),transform var(--msc-ease),visibility 0s linear 0.28s !important;
}
#msc-navbar .msc-nav-links li.msc-has-dropdown:hover .msc-dropdown,
#msc-navbar .msc-nav-links li.msc-has-dropdown.msc-dropdown-open .msc-dropdown,
#msc-navbar .msc-nav-links li.msc-has-dropdown:hover .msc-dropdown--mega,
#msc-navbar .msc-nav-links li.msc-has-dropdown.msc-dropdown-open .msc-dropdown--mega{
 visibility:visible !important;
 transition:opacity var(--msc-ease),transform var(--msc-ease),visibility 0s !important;
}

/* 3 · The body offset — NOT ported, and the reason is the finding.
 *     shared.css:646 carries a documented layout-shift fix: `body{padding-top:
 *     var(--msc-nav-height)}`, with a comment explaining the ~16px jump it
 *     removes. 🚨 IT HAS NEVER DONE ANYTHING. `--msc-nav-height` is declared on
 *     `#msc-navbar, #msc-mobile-menu, #msc-panel-overlay` (line 623). Custom
 *     properties inherit DOWNWARDS, and `body` is those elements' ANCESTOR, so
 *     body never sees the variable, the declaration is invalid at computed-value
 *     time, and the used padding is 0px. Measured: 0px on /about/, and 0px on
 *     `#brx-content` too, for the same reason.
 *
 *     Meanwhile the 8,616 flat pages keep the mechanism that comment condemns —
 *     `var(--msc-nav-actual-height, 5.125rem)`, written by JS after first paint —
 *     and on them it RESOLVES: 82px, measured. So the frozen pages are the ones
 *     with a working offset, and re-declaring the "fixed" rule here replaced a
 *     working 82px with an unresolvable value and zeroed it. That regression was
 *     caught by measuring, having been written and believed first.
 *
 *     ⚖️ The real fix is to hoist --msc-nav-height to :root, which makes the
 *     inert rule live and moves every Astro page's content down by 82px. That is
 *     a visible change on 2,227 pages and Sean's call, not a silent port. Left
 *     alone deliberately; the jump on scroll stands until he rules. */

/* 4 · The search bar outranks the panel it sits under.
 *     #msc-navbar is itself a stacking context, so the panel's z-index:99995
 *     never competed with the bar's 99998 — it only ordered the panel against
 *     its own siblings, and the search bar sat at z-index:1. Open the search,
 *     brush "Services", and an opaque cream panel dropped over the field and
 *     the Search button. Both are absolutely positioned children of the same
 *     context, so one number settles it. */
#msc-navbar .msc-search-bar{ z-index:99996 !important; }

/* 5 · The mobile accordion's headroom. shared.css raised the open cap 62.5rem → 90rem when
 *     the panel grew the Tools accordion from 10 rows to 16; the raise never left this file,
 *     so the 8,616 pages that grew are the ones still capped at 62.5rem. Nothing is clipped
 *     at 16px root today — the worst locale computes to ~931px against a 1000px cap — but the
 *     margin is 7%, the failure mode is a silent overflow:hidden clip of the last rows, and
 *     one larger default font is all it takes. Re-declared so both paths carry the same
 *     number, which is also what test/nav-parity.test.js now grades on both. */
#msc-mobile-menu .msc-mob-sub.msc-open{ max-height:90rem !important; }

/* 6 · "Tools" answers a click, and it costs no JavaScript.
 *     Its trigger is `href="#" onclick="return false"` — there is no /tools/ page — so it
 *     opened on hover and on nothing else. A pointer that CLICKS it got nothing at all, while
 *     `cursor:pointer` promised otherwise, and a touch device ≥960px (an iPad in landscape,
 *     where the mega panel is the navigation and the hamburger is not) could not reach the
 *     nine tools from the bar at all.
 *
 *     ⚖️ The obvious fix is a click handler, and it was the wrong one: the controller is
 *     inlined 10,822 times across two drifted variants and is the one block this repo
 *     deliberately never rewrites. `:focus-within` buys the same behaviour with no script.
 *     Clicking or tapping the trigger focuses it — `onclick="return false"` stops the jump to
 *     `#` without stopping the focus — so the panel opens and stays until focus leaves, and
 *     clicking anywhere else closes it. It lands on the KEYBOARD path for free as well:
 *     focus anywhere inside a panel now holds it open, which is what the controller's
 *     `.msc-dropdown-open` was doing alone.
 *
 *     Declared for both panel shapes because each carries its own open transform — the narrow
 *     one is centred with translateX(-50%), the mega one is not — and inheriting the wrong one
 *     would slide the panel half its width off its trigger. */
#msc-navbar .msc-nav-links li.msc-has-dropdown:focus-within .msc-dropdown{
 opacity:1 !important;pointer-events:all !important;visibility:visible !important;
 transform:translateX(-50%) translateY(0) !important;
 transition:opacity var(--msc-ease),transform var(--msc-ease),visibility 0s !important;
}
/* 9 · The panel leads with the page its trigger points at.
 *     Clicking "Services" opens a panel that did not list /services/ — the same defect
 *     /about/ had, and the same ruling. ⚖️ No free label existed here (the footer names that
 *     page in 0 of 21 locales, against 21 of 21 for /about/), so Sean chose to reuse the
 *     trigger's own word rather than ship an untranslated one. It therefore reads as the
 *     heading repeated once, and is styled as a lead-in rather than a sixth column so it does
 *     not pretend to be a discipline. Absent on Tools, whose trigger points at "#". */
/*     🪤 Selector weight, not !important. The panel is a DESCENDANT of `.msc-nav-links li`, so
 *     `#msc-navbar .msc-nav-links li a` (0,1,2 + id) matches this link too and out-specifies a
 *     plain `.msc-mega-lead a` (0,1,1 + id) — both being !important settles nothing. Written
 *     first at the lower weight, it rendered in the top-level bar's own brown, upright, with
 *     the bar's hover underline sliding in behind it. Two classes deep is what wins here, and
 *     the inherited gradient and clipping are switched off explicitly rather than hoped away. */
#msc-navbar .msc-dropdown .msc-mega-lead{
 display:block !important;margin:0 0 1.5rem !important;padding:0 !important;
}
#msc-navbar .msc-dropdown .msc-mega-lead a{
 display:inline-block !important;font-family:var(--msc-font-heading) !important;
 font-size:0.9375rem !important;font-style:italic !important;font-weight:700 !important;
 color:var(--msc-copper) !important;text-decoration:none !important;
 letter-spacing:0.02em !important;padding:0 0 0.15rem !important;
 background-image:none !important;background-color:transparent !important;
 overflow:visible !important;text-overflow:clip !important;white-space:normal !important;
 border-radius:0 !important;
 border-bottom:1px solid rgba(178,110,60,0.35) !important;
 transition:color var(--msc-ease),border-color var(--msc-ease) !important;
}
#msc-navbar .msc-dropdown .msc-mega-lead a:hover{
 color:var(--msc-dark-brown) !important;border-bottom-color:var(--msc-dark-brown) !important;
 background-image:none !important;background-color:transparent !important;
}
#msc-navbar .msc-dropdown .msc-mega-lead a:focus-visible{
 outline:2px solid var(--msc-copper) !important;outline-offset:2px !important;
}

/* 8 · The panel's top follows the bar instead of jumping ahead of it.
 *     The bar shrinks 5.125rem → 4.125rem on scroll THROUGH A TRANSITION; the panel's `top`
 *     had no transition, so with a panel open it snapped 17px in one frame and then waited
 *     280ms for the bar to catch up — scrolling down it briefly overlapped the bar it hangs
 *     from, scrolling up it tore away from it. Same easing as the bar, so the two move as one
 *     object. (`top` is a layout property, but only on an already-composited fixed panel and
 *     only during a deliberate 280ms change — the alternative, animating a transform, would
 *     fight the open/close transform this same element already uses.) */
#msc-navbar .msc-dropdown.msc-dropdown--mega{
 transition:opacity var(--msc-ease),transform var(--msc-ease),
            visibility 0s linear 0.28s,top var(--msc-ease) !important;
}
#msc-navbar .msc-nav-links li.msc-has-dropdown:hover .msc-dropdown--mega,
#msc-navbar .msc-nav-links li.msc-has-dropdown.msc-dropdown-open .msc-dropdown--mega,
#msc-navbar .msc-nav-links li.msc-has-dropdown:focus-within .msc-dropdown--mega{
 transition:opacity var(--msc-ease),transform var(--msc-ease),
            visibility 0s,top var(--msc-ease) !important;
}

/* 7 · The Tian Qi tile's shine bar was striking THROUGH its own label.
 *     `a.msc-nav-tianqi-animated::after` is the gold→copper bar, positioned `bottom:0.35rem`.
 *     That was measured for the NARROW dropdown item it used to be, whose link carries
 *     `padding:0.625rem 1.375rem` — 10px of space for a 5.6px offset to sit in. Promoted into
 *     the mega feature tile the link became `display:inline-block` with `padding:0`, so the
 *     same 5.6px lands on the baseline and the bar reads as a strikethrough. Reported by Sean
 *     as "the tian qi banner has its dash cut across it", and he is describing it exactly.
 *
 *     The tile gets room beneath the text and the bar is put under it, spanning the label
 *     rather than inset by the 0.9rem that suited a padded row. Scoped to the tile: the mobile
 *     accordion copy keeps 9px of bottom padding, so its bar already sits clear. */
#msc-navbar .msc-mega-feature a.msc-mega-feature-link{
 padding-bottom:0.5rem !important;
}
#msc-navbar .msc-mega-feature a.msc-mega-feature-link::after{
 left:0 !important;right:0 !important;bottom:0.05rem !important;
}

#msc-navbar .msc-nav-links li.msc-has-dropdown:focus-within .msc-dropdown--mega{
 opacity:1 !important;pointer-events:all !important;visibility:visible !important;
 transform:translateY(0) !important;
 transition:opacity var(--msc-ease),transform var(--msc-ease),visibility 0s !important;
}