/* ============================================================
   Metiri — site-wide rules. Loaded on every page, including the
   captured template pages that load nothing else of ours.
   ============================================================ */

/* ── Montserrat, the client's brand typeface (self-hosted from the
      files they supplied; woff2, only the weights the site uses) ── */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:300;font-display:swap;src:url(fonts/montserrat-300.woff2) format("woff2");}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/montserrat-400.woff2) format("woff2");}
@font-face{font-family:"Montserrat";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/montserrat-400i.woff2) format("woff2");}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/montserrat-500.woff2) format("woff2");}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/montserrat-600.woff2) format("woff2");}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/montserrat-700.woff2) format("woff2");}

/* Everything uses it. The Framer pages set their typefaces through custom
   properties and inline styles, so the rule needs !important to win; SVG is
   left alone so icons and artwork are untouched. */
html body,
html body *:not(svg):not(svg *){
  font-family:"Montserrat",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif !important;
}

/* ── The Metiri mark in the hero, flush to the left edge ──
      Replaces the template's script "G" (images/metiri-bg-mark.svg). The mark
      starts 56px into its 750px canvas, so the box is pulled left by that
      share to put the mark's flat side on the page edge. */
[data-framer-name="Vector"]:has(img[src*="metiri-bg-mark"]){
  --mw:clamp(230px,24vw,400px);
  left:calc(var(--mw) * -0.0747) !important;
  right:auto !important;
  top:clamp(40px,6vw,96px) !important;
  width:var(--mw) !important;
  height:calc(var(--mw) * 1.4187) !important;
  transform:none !important;
}

/* ── No scroll-in animations (client's request): text and blocks are simply
      there, instead of fading/sliding in as they scroll into view. Framer
      parks these at opacity 0 + translateY(30px) until they enter the
      viewport; once they have animated the inline style no longer matches.
      The grayscale pair is an image hover swap, so it is left alone. ── */
#main [style*="translateY(30px)"]:not([style*="grayscale"]){
  opacity:1 !important;
  transform:none !important;
}
#main [style*="translateX(-50%) translateY(30px)"]:not([style*="grayscale"]){
  transform:translateX(-50%) !important;
}

/* The About paragraph's word-by-word blur reveal: every word shown at once,
   no blur, no transition. The teal highlight words keep their own colour. */
[data-code-component-plugin-id="84d4c1"] span{
  filter:none !important;
  opacity:1 !important;
  transition:none !important;
}
[data-code-component-plugin-id="84d4c1"] span:not([style*="Great Vibes"]){
  color:rgb(5,8,12) !important;
  -webkit-text-fill-color:rgb(5,8,12) !important;
}

/* the template's "Made in Framer / Get it for FREE" badge — not for a client site */
#__framer-badge-container{display:none !important;}
/* …and its floating "Get it for FREE" link to the template seller */
.framer-1oyx3c6-container,
a[href*="framer.link"]{display:none !important;}

/* page margin reset — set here rather than relying on WordPress's inline styles */
html, body{margin:0;}

/* logged in: the header sits under the WordPress admin bar, not behind it */
body:has(#wpadminbar) .mtr-nav{top:32px;}
@media (max-width:782px){ body:has(#wpadminbar) .mtr-nav{top:46px;} }