/* Fox Digital 3.3.4 — unified site canvas / header geometry
 * One desktop container for every Fox Canvas page prevents the logo, menu,
 * hotline and section edges from jumping left/right between page templates.
 */
:root{
  --fox-site-container:1320px;
  --fox-site-gutter:56px;
}

html,body{
  width:100%;
  max-width:100%;
  overflow-x:clip;
}

/* One canvas width across Home, services, Website design, References, Blog,
   Industry landing pages and contact pages. */
body.fox-canvas .wrap{
  width:min(var(--fox-site-container),calc(100% - var(--fox-site-gutter))) !important;
  max-width:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Header geometry must never inherit a page-specific .wrap rule. */
body.fox-canvas .site-header{
  width:100%;
  left:0;
  right:0;
}
body.fox-canvas .site-header>.wrap.nav{
  width:min(var(--fox-site-container),calc(100% - var(--fox-site-gutter))) !important;
  max-width:none !important;
  min-height:76px;
  height:76px !important;
  margin-inline:auto !important;
  padding-left:0;
  padding-right:0;
  gap:20px !important;
}
body.fox-canvas .site-header .brand{
  flex:0 0 auto;
  gap:8px;
}
body.fox-canvas .site-header .brand img{
  width:50px !important;
  height:50px !important;
  max-width:50px;
  object-fit:contain;
}
body.fox-canvas .site-header .brand b{
  font-size:1.34rem !important;
  line-height:1 !important;
}
body.fox-canvas .site-header .navlinks{
  gap:22px !important;
  font-size:.84rem !important;
  flex:0 1 auto;
  justify-content:center;
  margin-left:auto;
  margin-right:auto;
}
body.fox-canvas .site-header .navlinks>a,
body.fox-canvas .site-header .drop-trigger{
  white-space:nowrap;
}
body.fox-canvas .site-header .navcall{
  flex:0 0 auto;
  min-height:44px;
  padding:10px 16px !important;
  font-size:.82rem !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Footer uses the same left/right alignment as header and content. */
body.fox-canvas .site-footer>.wrap{
  width:min(var(--fox-site-container),calc(100% - var(--fox-site-gutter))) !important;
}

/* Keep editorial reading line comfortable while its outer canvas aligns with
   the rest of the website. */
body.fox-canvas .news-article-inner{
  width:100%;
  max-width:1080px;
  margin-inline:auto;
}

@media(max-width:1180px){
  :root{--fox-site-gutter:40px}
  body.fox-canvas .site-header>.wrap.nav{gap:14px !important}
  body.fox-canvas .site-header .navlinks{gap:13px !important;font-size:.77rem !important}
  body.fox-canvas .site-header .brand img{width:47px !important;height:47px !important;max-width:47px}
  body.fox-canvas .site-header .brand b{font-size:1.25rem !important}
  body.fox-canvas .site-header .navcall{font-size:.76rem !important;padding:9px 12px !important}
}

@media(max-width:1070px){
  body.fox-canvas .site-header .navcall{display:none !important}
  body.fox-canvas .site-header .navlinks{margin-right:0}
}

@media(max-width:760px){
  :root{--fox-site-gutter:28px}
  body.fox-canvas .site-header>.wrap.nav{
    min-height:68px;
    height:68px !important;
    gap:10px !important;
  }
  body.fox-canvas .site-header .brand img{width:44px !important;height:44px !important;max-width:44px}
  body.fox-canvas .site-header .brand b{font-size:1.18rem !important}
  body.fox-canvas .site-header .navlinks{
    left:0;
    right:0;
    width:100%;
    font-size:.9rem !important;
    gap:0 !important;
    margin:0;
  }
}

@media(max-width:390px){
  :root{--fox-site-gutter:22px}
  body.fox-canvas .site-header .brand b{font-size:1.08rem !important}
}

/* v3.3.5 — Flatsome compatibility when wp_footer() is enabled.
 * Fox Canvas uses its own header/menu and intentionally does not load the
 * full Flatsome stylesheet. Flatsome still prints its hidden mobile sidebar
 * through footer hooks; without the parent CSS, that hidden sidebar becomes
 * visible as Search / menu placeholder / Newsletter below the Fox footer.
 */
body.fox-canvas #main-menu.mobile-sidebar,
body.fox-canvas #main-menu.mobile-sidebar.mfp-hide {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Restore the core hidden-state utility that normally comes from Flatsome. */
body.fox-canvas .mfp-hide {
  display: none !important;
}