@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap');

/*
===============================================================================
QUANTARIA SHARED NAVIGATION STYLES
===============================================================================
Purpose
  Provides the common desktop/mobile header, primary navigation, Services
  dropdown and Contact Us navigation treatment used across the website.

Maintenance guide
  1. Design tokens / font import are defined first.
  2. Header and top-level navigation rules follow.
  3. Services dropdown rules control positioning, alignment and hover states.
  4. Responsive rules are kept near the end.
  5. v109 aligns the dropdown's text column below the Services trigger.

Important
  Several page files contain older page-specific styles. These shared rules use
  intentionally specific selectors and !important where necessary to provide a
  consistent final navigation appearance without rewriting legacy page CSS.
===============================================================================
*/

:root{
  --home-nav-height:78px;
  --home-nav-bg:#F8F6F2;
  --home-nav-espresso:#2E1A16;
  --home-nav-gold:#DAA520;
  --home-nav-alt:#F2EFE9;
  --home-nav-font:'DM Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

/* Shared navigation copied from the current homepage visual system. */
header.topbar,
header.topbar.is-scrolled,
header.topbar:hover{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  height:var(--home-nav-height) !important;
  min-height:var(--home-nav-height) !important;
  z-index:3000 !important;
  background:var(--home-nav-bg) !important;
  border:0 !important;
  border-bottom:1px solid rgba(46,26,22,.10) !important;
  box-shadow:0 2px 14px rgba(46,26,22,.05) !important;
  backdrop-filter:none !important;
}

header.topbar .nav-wrap{
  width:100% !important;
  max-width:1280px !important;
  height:100% !important;
  margin:0 auto !important;
  padding:0 42px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:24px !important;
}

header.topbar .logo{
  display:flex !important;
  align-items:center !important;
  flex:0 0 auto !important;
  text-decoration:none !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
header.topbar .logo img,
header.topbar .logo:hover img,
header.topbar.is-scrolled .logo img,
header.topbar:hover .logo img{
  display:block !important;
  height:60px !important;
  max-height:60px !important;
  width:auto !important;
  object-fit:contain !important;
  filter:none !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
  transition:none !important;
}

header.topbar nav{
  display:block !important;
  width:auto !important;
  overflow:visible !important;
}
header.topbar nav > ul{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:36px !important;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
  overflow:visible !important;
}
header.topbar nav > ul > li{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
  overflow:visible !important;
}
header.topbar nav > ul > li > a,
header.topbar.is-scrolled nav > ul > li > a,
header.topbar:hover nav > ul > li > a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  height:auto !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  color:var(--home-nav-espresso) !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  text-decoration:none !important;
  font-family:var(--home-nav-font) !important;
  font-size:15.6px !important;
  font-weight:400 !important;
  font-style:normal !important;
  letter-spacing:.08em !important;
  line-height:1 !important;
  text-transform:none !important;
  white-space:nowrap !important;
  transform:none !important;
  cursor:pointer !important;
}
header.topbar nav > ul > li > a::before,
header.topbar nav > ul > li > a::after{
  content:none !important;
  display:none !important;
}
header.topbar nav > ul > li > a:hover,
header.topbar nav > ul > li > a:focus{
  color:var(--home-nav-espresso) !important;
  background:transparent !important;
  outline:none !important;
  transform:none !important;
}

header.topbar nav > ul > li > a.nav-cta,
header.topbar.is-scrolled nav > ul > li > a.nav-cta,
header.topbar:hover nav > ul > li > a.nav-cta{
  padding:9px 22px !important;
  color:var(--home-nav-espresso) !important;
  background:transparent !important;
  border:1px solid var(--home-nav-espresso) !important;
  border-radius:8px !important;
  box-shadow:none !important;
}
header.topbar nav > ul > li > a.nav-cta:hover,
header.topbar nav > ul > li > a.nav-cta:focus{
  background:var(--home-nav-alt) !important;
  color:var(--home-nav-espresso) !important;
  border-color:var(--home-nav-espresso) !important;
}

/* Services dropdown */
header.topbar .nav-services-dropdown{position:relative !important;overflow:visible !important;}
header.topbar .services-nav-caret{
  display:inline-block !important;
  font-size:.72em !important;
  line-height:1 !important;
  transition:transform .2s ease !important;
}
header.topbar .nav-services-dropdown.is-open > .services-nav-trigger .services-nav-caret{
  transform:rotate(180deg) !important;
}
header.topbar nav ul.services-nav-menu{
  display:none !important;
  position:absolute !important;
  top:calc(100% + 16px) !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:max-content !important;
  min-width:0 !important;
  max-width:calc(100vw - 32px) !important;
  margin:0 !important;
  padding:8px !important;
  list-style:none !important;
  flex-direction:column !important;
  gap:2px !important;
  background:rgba(255,250,240,.99) !important;
  border:1px solid rgba(218,165,32,.42) !important;
  border-radius:14px !important;
  box-shadow:0 18px 45px rgba(46,26,22,.20) !important;
  backdrop-filter:blur(14px) !important;
  z-index:3100 !important;
  overflow:visible !important;
}
header.topbar .nav-services-dropdown.is-open > ul.services-nav-menu{
  display:flex !important;
}
header.topbar nav ul.services-nav-menu::before{
  content:'' !important;
  display:block !important;
  position:absolute !important;
  top:-6px !important;
  left:50% !important;
  width:11px !important;
  height:11px !important;
  transform:translateX(-50%) rotate(45deg) !important;
  background:rgba(255,250,240,.99) !important;
  border-left:1px solid rgba(218,165,32,.42) !important;
  border-top:1px solid rgba(218,165,32,.42) !important;
}
header.topbar nav ul.services-nav-menu > li{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}
header.topbar nav ul.services-nav-menu > li > a{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  width:100% !important;
  min-width:0 !important;
  height:auto !important;
  margin:0 !important;
  padding:10px 18px !important;
  color:var(--home-nav-espresso) !important;
  background:transparent !important;
  border:0 !important;
  border-radius:9px !important;
  box-shadow:none !important;
  text-decoration:none !important;
  font-family:var(--home-nav-font) !important;
  font-size:13px !important;
  font-weight:400 !important;
  font-style:normal !important;
  letter-spacing:.08em !important;
  line-height:1.25 !important;
  text-transform:none !important;
  text-align:left !important;
  white-space:nowrap !important;
  transform:none !important;
}
header.topbar nav ul.services-nav-menu > li > a::before,
header.topbar nav ul.services-nav-menu > li > a::after{
  content:none !important;
  display:none !important;
}
header.topbar nav ul.services-nav-menu > li > a:hover,
header.topbar nav ul.services-nav-menu > li > a:focus{
  color:#F8F4E6 !important;
  background:var(--home-nav-espresso) !important;
  outline:none !important;
  transform:none !important;
}

/* Fixed header offset on standalone pages. */
body.home-nav-subpage{padding-top:var(--home-nav-height) !important;}

@media (max-width:980px){
  :root{--home-nav-height:112px;}
  header.topbar,
  header.topbar.is-scrolled,
  header.topbar:hover{
    height:var(--home-nav-height) !important;
    min-height:var(--home-nav-height) !important;
  }
  header.topbar .nav-wrap{
    padding:5px 12px 7px !important;
    flex-direction:column !important;
    justify-content:center !important;
    gap:4px !important;
  }
  header.topbar .logo img,
  header.topbar .logo:hover img,
  header.topbar.is-scrolled .logo img,
  header.topbar:hover .logo img{
    height:48px !important;
    max-height:48px !important;
  }
  header.topbar nav{
    display:block !important;
    width:100% !important;
    overflow-x:auto !important;
    overflow-y:visible !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
  }
  header.topbar nav::-webkit-scrollbar{display:none !important;}
  header.topbar nav > ul{
    gap:20px !important;
    width:max-content !important;
    min-width:100% !important;
    justify-content:center !important;
    padding:0 8px !important;
  }
  header.topbar nav > ul > li > a,
  header.topbar.is-scrolled nav > ul > li > a,
  header.topbar:hover nav > ul > li > a{
    font-size:13.2px !important;
    padding:8px 0 !important;
  }
  header.topbar nav > ul > li > a.nav-cta,
  header.topbar.is-scrolled nav > ul > li > a.nav-cta,
  header.topbar:hover nav > ul > li > a.nav-cta{
    padding:8px 14px !important;
  }
  header.topbar nav ul.services-nav-menu{
    position:fixed !important;
    top:106px !important;
    left:50% !important;
    transform:translateX(-50%) !important;
  }
}

@media (max-width:640px){
  header.topbar nav > ul{gap:15px !important;justify-content:flex-start !important;}
  header.topbar nav > ul > li > a,
  header.topbar.is-scrolled nav > ul > li > a,
  header.topbar:hover nav > ul > li > a{font-size:12px !important;}
}


/* v109: align Services dropdown text column vertically under the Services trigger */
header.topbar nav ul.services-nav-menu{
  left:-14px !important;
  transform:none !important;
  padding:8px 10px 8px 8px !important;
}
header.topbar nav ul.services-nav-menu::before{
  left:72px !important;
  transform:rotate(45deg) !important;
}
header.topbar nav ul.services-nav-menu > li > a{
  justify-content:flex-start !important;
  text-align:left !important;
  padding:10px 16px 10px 14px !important;
}
@media (max-width:980px){
  header.topbar nav ul.services-nav-menu{
    left:0 !important;
    transform:none !important;
    padding:8px !important;
  }
  header.topbar nav ul.services-nav-menu::before{
    left:50% !important;
    transform:translateX(-50%) rotate(45deg) !important;
  }
  header.topbar nav ul.services-nav-menu > li > a{
    padding:10px 18px !important;
  }
}