/* Metiri header for the template pages (copied from hero.css, which only the
   Metiri-built pages load). Keep in step with the header blocks there. */
/* ============================================================
   Sticky site header. Transparent over the hero, solid once the
   page scrolls. Desktop dropdowns; a slide-down panel on mobile.
   ============================================================ */
.mtr-nav{
  position:fixed; top:0; left:0; right:0; z-index:80;
  font-family:"Montserrat",ui-sans-serif,system-ui,sans-serif;
  transition:background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
.mtr-nav.is-stuck{
  background:rgba(8,16,22,.86);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  backdrop-filter:blur(16px) saturate(130%);
  box-shadow:0 1px 0 rgba(255,255,255,.07), 0 10px 30px rgba(3,10,15,.34);
}
.mtr-nav__in{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  max-width:1560px; margin:0 auto;
  padding:clamp(14px,1.6vw,22px) clamp(20px,4.4vw,72px);
  transition:padding .3s ease;
}
.mtr-nav.is-stuck .mtr-nav__in{padding-top:clamp(10px,1.1vw,14px); padding-bottom:clamp(10px,1.1vw,14px);}
.mtr-nav__brand{display:flex; align-items:center; text-decoration:none; flex:none;}
.mtr-nav__brand img{height:clamp(34px,3.1vw,44px); width:auto; display:block;}

.mtr-nav__menu > ul{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:clamp(16px,2vw,36px);
}
.mtr-nav__menu li{position:relative;}
.mtr-nav__item{
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:0; padding:6px 0; cursor:default;
  color:#fff; font-family:inherit; font-size:15px; font-weight:500; letter-spacing:-.01em;
  opacity:.92; text-decoration:none; white-space:nowrap;
  transition:opacity .2s ease, color .2s ease;
}
.mtr-nav__toggle{cursor:pointer;}
.mtr-nav__item:hover{opacity:1; color:#3fc9dc;}
.mtr-nav__item svg{width:15px; height:15px; transition:transform .25s ease;}
.mtr-nav__has:hover .mtr-nav__toggle svg,
.mtr-nav__toggle[aria-expanded="true"] svg{transform:rotate(180deg);}

.mtr-nav__sub{
  position:absolute; left:-18px; top:100%;
  list-style:none; margin:0; padding:10px;
  min-width:232px; border-radius:12px;
  background:rgba(10,19,26,.95);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 20px 44px rgba(3,10,15,.44);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
}
.mtr-nav__has:hover .mtr-nav__sub,
.mtr-nav__has:focus-within .mtr-nav__sub,
.mtr-nav__toggle[aria-expanded="true"] + .mtr-nav__sub{opacity:1; visibility:visible; transform:none;}
.mtr-nav__sub a{
  display:block; padding:10px 14px; border-radius:8px;
  color:rgba(233,244,247,.9); text-decoration:none; font-size:14.5px; cursor:default;
  transition:background .18s ease, color .18s ease;
}
.mtr-nav__sub a:hover{background:rgba(63,201,220,.13); color:#3fc9dc;}

.mtr-nav__burger{
  display:none; flex-direction:column; gap:5px; cursor:pointer;
  background:none; border:0; padding:6px;
}
.mtr-nav__burger i{display:block; width:24px; height:2px; background:#fff; border-radius:2px; transition:transform .28s ease, opacity .22s ease;}
.mtr-nav__burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg);}
.mtr-nav__burger[aria-expanded="true"] i:nth-child(2){opacity:0;}
.mtr-nav__burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mtr-nav__panel{
  display:none; overflow:hidden;
  background:rgba(8,16,22,.97);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border-top:1px solid rgba(255,255,255,.08);
  max-height:0; transition:max-height .38s cubic-bezier(.22,.61,.24,1);
}
.mtr-nav__panel.is-open{max-height:78vh; overflow-y:auto;}
.mtr-nav__panel ul{list-style:none; margin:0; padding:8px clamp(20px,5vw,36px) 22px;}
.mtr-nav__panel > ul > li{border-bottom:1px solid rgba(255,255,255,.07);}
.mtr-nav__panel > ul > li:last-child{border-bottom:0}
.mtr-nav__panel a,.mtr-nav__panel .mtr-nav__toggle{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  padding:15px 0; background:none; border:0; cursor:default;
  color:#fff; font-family:inherit; font-size:16.5px; font-weight:500; text-decoration:none; text-align:left;
}
.mtr-nav__panel .mtr-nav__toggle{cursor:pointer}
.mtr-nav__panel .mtr-nav__toggle svg{width:17px; height:17px; transition:transform .25s ease;}
.mtr-nav__panel .mtr-nav__toggle[aria-expanded="true"] svg{transform:rotate(180deg);}
.mtr-nav__panel .mtr-nav__sub{
  position:static; opacity:1; visibility:visible; transform:none;
  background:none; border:0; box-shadow:none; backdrop-filter:none;
  min-width:0; padding:0 0 10px; max-height:0; overflow:hidden;
  transition:max-height .32s cubic-bezier(.22,.61,.24,1);
}
.mtr-nav__panel .mtr-nav__toggle[aria-expanded="true"] + .mtr-nav__sub{max-height:280px;}
.mtr-nav__panel .mtr-nav__sub a{padding:11px 0 11px 16px; font-size:15px; color:rgba(233,244,247,.78);}

@media (max-width:960px){
  .mtr-nav__menu{display:none}
  .mtr-nav__burger{display:flex}
  .mtr-nav__panel{display:block}
}
@media (prefers-reduced-motion:reduce){
  .mtr-nav,.mtr-nav__in,.mtr-nav__sub,.mtr-nav__panel,.mtr-nav__burger i{transition:none}
}

/* ============================================================
   Header glass + scroll behaviour
   The glass lives on a ::before layer, never on the header itself: an
   element with backdrop-filter becomes the backdrop for everything inside
   it, so the phone menu inside the header couldn't blur the page (and
   swapping the filter over is what made it flash see-through on open).
   ============================================================ */
html body .mtr-nav{
  background:transparent !important; box-shadow:none !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
.mtr-nav::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:rgba(8,16,22,.55);
  -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 1px 0 rgba(255,255,255,.07), 0 10px 30px rgba(3,10,15,.28);
  opacity:0; transition:opacity .35s ease, background .35s ease;
}
/* scrolled: frosted */
.mtr-nav.is-stuck::before{opacity:1;}
/* light pages start with a near-solid bar, turning frosted once scrolled */
body:has(.mtr-ab) .mtr-nav::before,
body:has(.mtr-faqpage) .mtr-nav::before{opacity:1;}
body:has(.mtr-ab) .mtr-nav:not(.is-stuck)::before,
body:has(.mtr-faqpage) .mtr-nav:not(.is-stuck)::before{background:rgba(8,16,22,.94);}
/* phone menu open: one sheet of glass behind bar + menu, on at once */
.mtr-nav:has(.mtr-nav__panel.is-open)::before{
  opacity:1 !important; background:rgba(8,16,22,.74) !important; transition:none;
  -webkit-backdrop-filter:blur(22px) saturate(140%); backdrop-filter:blur(22px) saturate(140%);
}
.mtr-nav__panel{background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none;}

/* ── On scroll the bar gathers into a floating rounded pill (all sizes) ── */
@media all{
  .mtr-nav__in{
    max-width:min(1560px,100%);
    border:1px solid transparent; border-radius:0;
    transition:max-width .6s cubic-bezier(.22,.61,.24,1), margin .6s cubic-bezier(.22,.61,.24,1),
               padding .6s cubic-bezier(.22,.61,.24,1), border-radius .6s cubic-bezier(.22,.61,.24,1),
               background .4s ease, border-color .4s ease, box-shadow .4s ease;
  }
  .mtr-nav__brand img{transition:height .5s cubic-bezier(.22,.61,.24,1);}
  .mtr-nav.is-stuck::before,
  body:has(.mtr-ab) .mtr-nav.is-stuck::before,
  body:has(.mtr-faqpage) .mtr-nav.is-stuck::before{opacity:0;}
  .mtr-nav.is-stuck .mtr-nav__in{
    max-width:min(1100px, calc(100% - 48px));
    margin-top:14px; padding:8px 8px 8px 24px !important; border-radius:999px;
    background:rgba(8,16,22,.46);
    -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
    border-color:rgba(255,255,255,.10);
    box-shadow:0 14px 40px rgba(3,10,15,.32);
  }
  .mtr-nav.is-stuck .mtr-nav__brand img{height:30px;}
  /* Contact becomes the white pill at the end, like the reference */
  .mtr-nav__menu > ul > li:last-child .mtr-nav__item{
    padding:6px 0; border-radius:999px;
    transition:background .4s ease, color .4s ease, padding .5s cubic-bezier(.22,.61,.24,1);
  }
  .mtr-nav.is-stuck .mtr-nav__menu > ul > li:last-child .mtr-nav__item{
    background:#fff; color:#0b1420; opacity:1; padding:11px 22px;
  }
  .mtr-nav.is-stuck .mtr-nav__menu > ul > li:last-child .mtr-nav__item:hover{background:#3fc9dc; color:#0b1420;}
}
@media (prefers-reduced-motion:reduce){
  .mtr-nav::before,.mtr-nav__in,.mtr-nav__brand img{transition:none !important;}
}

/* phones: a slimmer pill with a little side margin */
@media (max-width:960px){
  .mtr-nav.is-stuck .mtr-nav__in{
    max-width:calc(100% - 24px); margin-top:10px;
    padding:7px 8px 7px 18px !important;
  }
  .mtr-nav.is-stuck .mtr-nav__brand img{height:26px;}
}
/* menu open: back to one full-width sheet of glass, no pill */
.mtr-nav:has(.mtr-nav__panel.is-open) .mtr-nav__in{
  max-width:100% !important; margin-top:0 !important; border-radius:0 !important;
  background:transparent !important; border-color:transparent !important; box-shadow:none !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
.mtr-nav:has(.mtr-nav__panel.is-open) .mtr-nav__brand img{height:clamp(34px,3.1vw,44px);}

/* nav: anything that goes somewhere shows the hand cursor */
.mtr-nav a[href], .mtr-nav button, .mtr-nav__sub a[href], .mtr-nav__panel a[href]{cursor:pointer !important;}

/* template pages open on a light banner: start with the solid bar, not a clear one */
.mtr-nav::before{opacity:1;}
.mtr-nav:not(.is-stuck)::before{background:rgba(8,16,22,.94);}
/* the template's own navigation */
#main header[data-framer-name^="Navigation"],
#main [data-framer-name^="Navigation"]{display:none !important;}

/* ── Services sub-bar: on a service page, the other services sit in a row
      under the nav, the current one outlined (inc/wp-integration.php) ── */
.mtr-nav__subbar{display:none;}
@media (min-width:961px){
  .mtr-nav__subbar{
    display:block; max-width:1560px; margin:0 auto;
    padding:0 clamp(20px,4.4vw,72px) 14px;
    transition:margin .6s cubic-bezier(.22,.61,.24,1), padding .6s cubic-bezier(.22,.61,.24,1), background .4s ease;
  }
  .mtr-nav__subbar ul{list-style:none; margin:0; padding:0; display:flex; justify-content:flex-end; gap:8px;}
  .mtr-nav__subbar a{
    display:inline-block; padding:8px 18px; border-radius:999px; border:1.5px solid transparent;
    color:rgba(255,255,255,.86); font-size:14.5px; font-weight:500; letter-spacing:-.01em; text-decoration:none;
    cursor:pointer; transition:color .2s ease, border-color .2s ease, background .2s ease;
  }
  .mtr-nav__subbar a:hover{color:#3fc9dc;}
  .mtr-nav__subbar a.is-current{border-color:#3fc9dc; color:#fff; background:rgba(63,201,220,.08);}
  .mtr-nav__has.is-current > .mtr-nav__item{color:#3fc9dc; opacity:1;}
  /* scrolled: the row becomes its own small glass pill under the main one */
  .mtr-nav.is-stuck .mtr-nav__subbar{
    width:max-content; max-width:none; margin:8px max(24px, calc((100% - 1100px) / 2)) 0 auto; padding:5px;
    border-radius:999px; border:1px solid rgba(255,255,255,.10);
    background:rgba(8,16,22,.46);
    -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
    box-shadow:0 10px 30px rgba(3,10,15,.25);
  }
  .mtr-nav.is-stuck .mtr-nav__subbar a{padding:6px 16px; font-size:13.5px;}
}

/* sub-bar: the same glass pill at the top of the page as when scrolled,
   right-aligned under the menu (it read as loose text over the photo) */
@media (min-width:961px){
  .mtr-nav__subbar{
    width:max-content; max-width:none; padding:5px; border-radius:999px;
    margin:2px max(clamp(20px,4.4vw,72px), calc((100% - 1560px) / 2 + clamp(20px,4.4vw,72px))) 14px auto;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(8,16,22,.42);
    -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
    box-shadow:0 10px 30px rgba(3,10,15,.22);
  }
  .mtr-nav__subbar ul{gap:2px;}
  .mtr-nav__subbar a{padding:7px 18px; font-size:14px;}
  .mtr-nav.is-stuck .mtr-nav__subbar{margin:8px max(24px, calc((100% - 1100px) / 2)) 0 auto;}
  .mtr-nav.is-stuck .mtr-nav__subbar a{padding:6px 16px; font-size:13.5px;}
}

/* ── Desktop Services dropdown in the sub-bar's style: a horizontal glass pill
      instead of a box. On pages that already show the sub-bar it's not needed. ── */
@media (min-width:961px){
  .mtr-nav__menu .mtr-nav__sub{
    display:flex; gap:2px; min-width:0; width:max-content; white-space:nowrap;
    left:50%; top:calc(100% + 10px); padding:5px; border-radius:999px;
    translate:-50% 0;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(8,16,22,.62);
    -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
    box-shadow:0 10px 30px rgba(3,10,15,.28);
  }
  .mtr-nav__menu .mtr-nav__sub::before{          /* hover bridge across the gap */
    content:""; position:absolute; left:0; right:0; top:-12px; height:12px;
  }
  .mtr-nav__menu .mtr-nav__sub li{list-style:none;}
  .mtr-nav__menu .mtr-nav__sub a{
    display:inline-block; padding:7px 18px; border-radius:999px; border:1.5px solid transparent;
    font-size:14px; color:rgba(255,255,255,.86); background:none;
  }
  .mtr-nav__menu .mtr-nav__sub a:hover{background:none; color:#3fc9dc; border-color:rgba(63,201,220,.55);}
  /* service pages: the sub-bar is already there */
  .mtr-nav--sub .mtr-nav__menu .mtr-nav__sub{display:none !important;}
  .mtr-nav--sub .mtr-nav__menu .mtr-nav__toggle svg{display:none;}
}