/* ============================================================
   Metiri — hero section (drop-in replacement)
   Every rule is scoped to .mtr-hero so nothing leaks into the
   surrounding page. No html/body/* resets.
   ============================================================ */
.mtr-hero{
  padding-top:clamp(66px,6vw,96px);
  --mtr-accent:#26c6da;
  --mtr-rule:rgba(255,255,255,.28);
  --mtr-muted:rgba(255,255,255,.72);
  --mtr-shell:clamp(24px, 4.4vw, 76px);
  --mtr-font:"Montserrat",ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mtr-ease:cubic-bezier(.22,.61,.24,1);

  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  min-height:100svh;
  width:100%;
  overflow:hidden;
  isolation:isolate;
  background:#0b1420;
  font-family:var(--mtr-font);
  color:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  box-sizing:border-box;
}
.mtr-hero *,.mtr-hero *::before,.mtr-hero *::after{box-sizing:border-box}

/* video plate ---------------------------------------------------------- */
.mtr-hero__media{position:absolute; inset:0; z-index:0; overflow:hidden;}
.mtr-hero__video{
  width:100%; height:100%; object-fit:cover; display:block;
  animation:mtrVideoIn 2.6s var(--mtr-ease) .1s both;
}

.mtr-hero__grade{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(0deg, rgba(6,12,20,.70), rgba(6,12,20,.70)),
    linear-gradient(90deg, rgba(5,11,19,.88) 0%, rgba(5,11,19,.55) 38%, rgba(5,11,19,.12) 64%, rgba(5,11,19,.42) 100%),
    linear-gradient(180deg, rgba(5,11,19,.72) 0%, rgba(5,11,19,0) 26%, rgba(5,11,19,0) 62%, rgba(5,11,19,.82) 100%);
}

.mtr-hero__glow{position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden;}
.mtr-hero__glow::before,.mtr-hero__glow::after{
  content:""; position:absolute; border-radius:50%;
  filter:blur(120px);
  animation:mtrGlowIn 2s var(--mtr-ease) .4s both;
}
.mtr-hero__glow::before{
  width:52vw; height:52vw; left:-16vw; top:-14vw;
  background:radial-gradient(circle, rgba(38,198,218,.42), rgba(38,198,218,0) 68%);
}
.mtr-hero__glow::after{
  width:56vw; height:56vw; right:-18vw; bottom:-22vw;
  background:radial-gradient(circle, rgba(27,111,140,.5), rgba(11,20,32,0) 70%);
}
.mtr-hero__vignette{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  box-shadow:inset 0 0 190px 60px rgba(5,11,19,.9);
}

/* blurred glass arrow -------------------------------------------------- */
.mtr-hero__arrow{
  position:absolute; z-index:2; pointer-events:none;
  top:50%; right:-14%;
  width:min(62vw, 1120px);
  aspect-ratio:1 / 1.32;
  -webkit-backdrop-filter:blur(18px) saturate(115%);
  backdrop-filter:blur(18px) saturate(115%);
  background:linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.03) 52%, rgba(38,198,218,.12));
  border-left:1px solid rgba(255,255,255,.30);
  -webkit-clip-path:polygon(0% 0%, 46% 0%, 100% 50%, 46% 100%, 0% 100%, 54% 50%);
  clip-path:polygon(0% 0%, 46% 0%, 100% 50%, 46% 100%, 0% 100%, 54% 50%);
  animation:mtrArrowIn 1.8s var(--mtr-ease) .45s both;
}
.mtr-hero__arrow--echo{
  animation:mtrArrowEchoIn 1.8s var(--mtr-ease) .3s both;
  right:2%; width:min(46vw, 800px);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  background:linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,0) 60%);
  border-left:1px solid rgba(255,255,255,.08);
  transition-delay:.2s;
}

/* entrance ------------------------------------------------------------- */
.mtr-hero [data-mtr-fade]{
  animation:mtrFadeUp .9s var(--mtr-ease) var(--d,0s) both;
}

.mtr-hero .mtr-ln{display:block; overflow:hidden; padding-bottom:.04em;}
.mtr-hero .mtr-ln__i{
  display:block;
  animation:mtrLineUp 1.15s var(--mtr-ease) var(--d,0s) both;
}

/* body ----------------------------------------------------------------- */
.mtr-hero__body{
  position:relative; z-index:3;
  flex:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:40px;
  /* top padding clears the site's floating navigation */
  padding:clamp(16px,2vh,32px) var(--mtr-shell) clamp(30px,5.2vh,70px);
}
.mtr-hero__left{display:flex; flex-direction:column;}

.mtr-hero__rail{
  position:absolute; z-index:4; left:calc(var(--mtr-shell) - 6px); top:34%;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.mtr-hero__rail .n{font-size:13px; color:var(--mtr-muted); letter-spacing:.08em;}
.mtr-hero__rail .l{
  width:2px; height:120px;
  background:linear-gradient(180deg,var(--mtr-accent),rgba(38,198,218,0));
  transform-origin:top;
  animation:mtrDraw 1.1s var(--mtr-ease) 1.05s both;
}

.mtr-hero__title{
  margin:0; padding:0; border:0; max-width:14ch;
  font-family:var(--mtr-font);
  font-weight:600;
  font-size:clamp(40px, 7.1vw, 124px);
  line-height:.93;
  letter-spacing:-.035em;
  color:#fff;
  text-shadow:0 18px 60px rgba(0,0,0,.42);
  text-transform:none;
}
.mtr-hero__title .amp{font-weight:400; color:rgba(255,255,255,.9); padding-right:.06em;}

.mtr-hero__lede{margin:clamp(46px,9vh,104px) 0 0; max-width:34ch;}
.mtr-hero__lede .mark{display:flex; align-items:center; gap:14px; margin-bottom:16px;}
.mtr-hero__lede .mark svg{width:16px; height:16px; flex:none; opacity:.95}
.mtr-hero__lede .mark i{display:block; width:74px; height:1px; background:var(--mtr-rule);}
.mtr-hero__lede p{
  margin:0; font-family:var(--mtr-font);
  font-size:clamp(15px,1.15vw,18px); line-height:1.62; color:rgba(255,255,255,.86); font-weight:400;
}

.mtr-hero__aside{
  justify-self:end;
  display:flex; flex-direction:column; align-items:flex-start;
  gap:clamp(30px,3.6vw,58px);
  padding-bottom:6px;
}
.mtr-hero__coords{
  position:absolute; z-index:4; top:30%; right:var(--mtr-shell);
  text-align:right; font-size:12.5px; line-height:1.55;
  color:var(--mtr-muted); letter-spacing:.04em;
}
.mtr-hero__coords .l{
  width:1px; height:110px; background:var(--mtr-rule); margin:14px 0 0 auto;
  transform-origin:top;
  animation:mtrDraw 1.1s var(--mtr-ease) 1.15s both;
}

.mtr-hero__services{list-style:none; margin:0; padding:0; display:grid; gap:clamp(10px,1.1vw,17px);}
.mtr-hero__services li{display:flex; align-items:baseline; gap:16px; margin:0;}
.mtr-hero__services .n{font-size:14px; color:rgba(255,255,255,.55); font-variant-numeric:tabular-nums; min-width:34px;}
.mtr-hero__services .t{font-size:clamp(17px,1.5vw,23px); font-weight:500; letter-spacing:-.01em; color:#fff;}

.mtr-hero__cta{display:inline-flex; align-items:center; gap:18px; text-decoration:none; color:#fff; cursor:pointer;}
.mtr-hero__cta .ring{
  width:clamp(52px,4.4vw,64px); aspect-ratio:1; border-radius:50%;
  border:1px solid rgba(255,255,255,.55);
  display:grid; place-items:center;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:background .28s var(--mtr-ease), border-color .28s var(--mtr-ease), transform .28s var(--mtr-ease);
}
.mtr-hero__cta .ring svg{width:20px; height:20px; transition:transform .28s var(--mtr-ease);}
.mtr-hero__cta .label{font-size:clamp(15px,1.2vw,18px); font-weight:500;}
.mtr-hero__cta:hover .ring{background:var(--mtr-accent); border-color:var(--mtr-accent); transform:translateX(3px);}
.mtr-hero__cta:hover .ring svg{transform:translateX(2px);}

.mtr-hero__cue{
  position:absolute; z-index:4; left:50%; bottom:18px; transform:translateX(-50%);
  width:24px; height:38px; border:1px solid rgba(255,255,255,.35); border-radius:14px;
  display:grid; justify-items:center; padding-top:7px;
}
.mtr-hero__cue i{
  display:block; width:3px; height:7px; border-radius:2px; background:rgba(255,255,255,.85);
  animation:mtrCue 1.9s var(--mtr-ease) infinite;
}
@keyframes mtrCue{0%{transform:translateY(0);opacity:0}30%{opacity:1}70%{transform:translateY(11px);opacity:0}100%{opacity:0}}

/* responsive ----------------------------------------------------------- */
@media (max-width:1100px){
  .mtr-hero__rail,.mtr-hero__coords{display:none}
  .mtr-hero__arrow{right:-24%}
  }
@media (max-width:860px){
  .mtr-hero__body{grid-template-columns:1fr; gap:34px; padding-bottom:44px;}
  .mtr-hero__aside{justify-self:start; gap:28px;}
  .mtr-hero__title{font-size:clamp(34px,9.4vw,60px); max-width:none}
  .mtr-hero__lede{max-width:42ch; margin-top:clamp(30px,5vh,52px)}
  .mtr-hero__cue{display:none}
}

@media (prefers-reduced-motion:reduce){
  .mtr-hero__video{display:none}
  .mtr-hero [data-mtr-fade],.mtr-hero .mtr-ln__i,.mtr-hero__arrow{transition:none !important}
  .mtr-hero [data-mtr-fade]{opacity:1; transform:none}
  .mtr-hero .mtr-ln__i{transform:none}
  .mtr-hero__arrow{opacity:1; transform:translateY(-50%)}
  .mtr-hero__rail .l,.mtr-hero__coords .l{transform:scaleY(1); transition:none}
  .mtr-hero__cue i{animation:none}
}

/* ── topbar (this section supplies the site header for the hero) ── */
.mtr-hero__top{
  position:relative; z-index:4;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px;
  padding:clamp(20px,2.6vw,34px) var(--mtr-shell);
}
.mtr-hero__top .brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:#fff;}
.mtr-hero__top .brand svg{width:38px; height:38px; display:block; flex:none;}
.mtr-hero__top .brand img.mtr-brandmark{height:clamp(26px,2.4vw,34px); width:auto; display:block;}
.mtr-hero__top .brand span{font-size:clamp(22px,2vw,30px); font-weight:700; letter-spacing:-.02em; color:#fff;}
.mtr-hero__top .based{justify-self:center; font-size:14px; color:var(--mtr-muted); white-space:nowrap;}
.mtr-hero__top .based b{color:#fff; font-weight:500;}
.mtr-hero__top .links{justify-self:end; display:flex; align-items:center; gap:clamp(20px,2.4vw,40px);}
.mtr-hero__top .links a{color:#fff; text-decoration:none; font-size:15px; font-weight:500; opacity:.92;}
.mtr-hero__top .links a:hover{opacity:1}
.mtr-hero__top .links a sup{font-size:10px; opacity:.6; font-weight:400; margin-left:2px;}
.mtr-hero__top .burger{display:flex; flex-direction:column; gap:5px; margin-left:8px; background:none; border:0; cursor:pointer; padding:4px;}
.mtr-hero__top .burger i{display:block; width:26px; height:2px; background:#fff; border-radius:2px;}

/* the hero body no longer needs to clear a floating nav */

@media (max-width:860px){
  .mtr-hero__top .based{display:none}
  .mtr-hero__top .links a{display:none}
  .mtr-hero__top{grid-template-columns:1fr auto}
  .mtr-hero__top .links{gap:0}
}

/* ── the Framer hero and navigation this section replaces ── */
[data-framer-name="Hero Section"],
[data-framer-name="Get It Button"],
[data-framer-name="Navigation"],
[data-framer-name="Navigation - Tablet"],
[data-framer-name="Navigation - Phone"]{display:none !important}

/* ── self-starting entrance keyframes (no JS, nothing to interfere with) ── */
@keyframes mtrVideoIn{from{opacity:0;transform:scale(1.12)}to{opacity:1;transform:scale(1.04)}}
@keyframes mtrGlowIn{from{opacity:0}to{opacity:.55}}
@keyframes mtrArrowIn{from{opacity:0;transform:translate(6%,-50%)}to{opacity:1;transform:translate(0,-50%)}}
@keyframes mtrArrowEchoIn{from{opacity:0;transform:translate(6%,-50%)}to{opacity:.6;transform:translate(0,-50%)}}
@keyframes mtrFadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes mtrLineUp{from{transform:translateY(104%)}to{transform:translateY(0)}}
@keyframes mtrDraw{from{transform:scaleY(0)}to{transform:scaleY(1)}}

@media (prefers-reduced-motion:reduce){
  .mtr-hero__video,.mtr-hero__glow::before,.mtr-hero__glow::after,.mtr-hero__arrow,
  .mtr-hero [data-mtr-fade],.mtr-hero .mtr-ln__i,.mtr-hero__rail .l,.mtr-hero__coords .l{
    animation:none !important; opacity:1 !important; transform:none !important;
  }
  .mtr-hero__arrow{transform:translateY(-50%) !important}
  .mtr-hero__video{display:none}
}

/* ── contact card: the single avatar slot now carries the whole team stack ──
   The slot is a fixed circle with overflow:hidden, so it must be reshaped to the
   strip's aspect ratio (1188x240) or it clips after the second face. */
[data-framer-name="Avatar Info"]{
  width:auto !important;
  height:clamp(30px,3.2vw,42px) !important;
  aspect-ratio:1188 / 240 !important;
  overflow:visible !important;
  border-radius:0 !important;
  flex:0 0 auto !important;
}
[data-framer-name="Avatar"]{
  position:relative !important;
  width:100% !important;
  height:100% !important;
  overflow:visible !important;
  border-radius:0 !important;
  flex:0 0 auto !important;
}
[data-framer-name="Avatar"] > div{
  width:100% !important;
  height:100% !important;
  border-radius:0 !important;
  overflow:visible !important;
}
[data-framer-name="Avatar"] img{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:contain !important;
  object-position:left center !important;
  border-radius:0 !important;
}
/* let the pill grow to fit the wider avatar strip */
[data-framer-name="Contact CTA"],
[data-framer-name="Contact CTA - Phone"]{
  width:auto !important;
  max-width:none !important;
}

/* ── the team stack expands as it scrolls into view (desktop + mobile) ──
   Opt-in: the script adds .mtr-av-anim, so with no JS the strip is simply visible. */
[data-framer-name="Avatar Info"].mtr-av-anim{
  clip-path:inset(0 100% 0 0);
  transform:translateX(-6px);
}
[data-framer-name="Avatar Info"].mtr-av-anim.mtr-av-in{
  clip-path:inset(0 0 0 0);
  transform:translateX(0);
  transition:clip-path 1.05s cubic-bezier(.22,.61,.24,1), transform 1.05s cubic-bezier(.22,.61,.24,1);
}
@media (prefers-reduced-motion:reduce){
  [data-framer-name="Avatar Info"].mtr-av-anim,
  [data-framer-name="Avatar Info"].mtr-av-anim.mtr-av-in{
    clip-path:none; transform:none; transition:none;
  }
}

/* ── services cards: drop the template's leftover decorative vectors ──
   (the arrow, marker and rocket that used to sit inside the old illustrations
   and now overlap the Metiri service artwork) */
img[src*="ux3d5re26bvq1hmy6hfouzawtha"],
img[src*="njnhkgaayhw1zsodx71zt6bwuca"],
img[src*="q7x7muondp0b9sngreqqnmmw"],
[data-framer-name="Vector Wrap"]{
  display:none !important;
}

/* ── About reveal: the highlighted words ──
   The component marks its highlighted words by switching them to a script face,
   with no colour option — so re-style those spans as the body font in Metiri teal. */
[data-framer-name="Text Reveal ID"] span[style*="Great Vibes"],
#text-reveal span[style*="Great Vibes"],
span[style*="Great Vibes"]{
  font-family:"Montserrat",ui-sans-serif,system-ui,sans-serif !important;
  color:#008490 !important;
  -webkit-text-fill-color:#008490 !important;
  font-size:inherit !important;
  line-height:inherit !important;
  font-weight:600 !important;
}

/* ── "Meet the Team" pill in Metiri teal (the white arrow disc is untouched) ── */
.framer-1nwirgp-container a,
.framer-1nwirgp-container a:hover{
  background-color:#008490 !important;
}

/* ── project titles: use the site typeface, not the template's script face ── */
[data-framer-name="Project Item LG"] [style*="Great Vibes"],
[data-framer-name*="Project Item"] [style*="Great Vibes"],
[data-framer-name="Project Section"] [style*="Great Vibes"]{
  font-family:"Montserrat",ui-sans-serif,system-ui,sans-serif !important;
  font-style:normal !important;
}

/* ── the template's script face is not part of this brand: use the body font ── */
[style*="Great Vibes"]{
  font-family:"Montserrat",ui-sans-serif,system-ui,sans-serif !important;
  font-style:normal !important;
}

/* ══ projects section: Metiri palette on the dark ground ══
   #3fc9dc is the teal lifted for legibility on near-black; #008490 is too dark here. */
[data-framer-name="Services Section"] .framer-iqlwrw h3,
[data-framer-name="Services Section"] [data-framer-name="Number"] h3{
  /* the numbers shipped in an italic serif — match the rest of the site */
  font-family:"Montserrat",ui-sans-serif,system-ui,sans-serif !important;
  font-style:normal !important;
  font-variant:normal !important;
  letter-spacing:-0.01em !important;
  color:#3fc9dc !important;
  -webkit-text-fill-color:#3fc9dc !important;
}
/* accent word in the section heading */
[data-framer-name="Services Section"] [style*="Great Vibes"]{
  color:#3fc9dc !important;
  -webkit-text-fill-color:#3fc9dc !important;
}
/* the eyebrow star + the card's service icon */
[data-framer-name="Services Section"] [data-framer-name="Pre Title Wrap"] svg path{fill:#3fc9dc !important;}
[data-framer-name="Services Section"] [data-framer-name="Icon Wrap"] img,
[data-framer-name="Services Section"] [data-framer-name="Icon"] img{
  filter:brightness(0) saturate(100%) invert(72%) sepia(46%) saturate(1000%) hue-rotate(140deg) brightness(95%) contrast(92%) !important;
}
/* feature bullet dots */
[data-framer-name="Services Section"] [data-framer-name="Feature List"] svg path,
[data-framer-name="Services Section"] [data-framer-name="Feature List"] [class*="dot"]{fill:#3fc9dc !important;}

/* "View all projects" pill in brand teal with white label */
.framer-17rk2k5-container a,
.framer-17rk2k5-container a:hover{background-color:#008490 !important;}
.framer-17rk2k5-container a p,
.framer-17rk2k5-container a h1,.framer-17rk2k5-container a h2,
.framer-17rk2k5-container a h3,.framer-17rk2k5-container a span{
  color:#fff !important;-webkit-text-fill-color:#fff !important;
}

/* ── client-logo wall removed (template content, not Metiri's) ── */
[data-framer-name="Grid Client"]{display:none !important;}

/* ── service-area block: drop the template's product thumbnails and let the
      location copy carry the section ── */
[data-framer-name="Gallery List"]{display:none !important;}   /* thumbnails only — keep the CTA label above them */

/* ── service-area block: the display type was auto-sized for the template's
      shorter words ("Ideas" / "Execution"). "Hunter" / "Central Coast" are
      longer, so the heading is set smaller in the bundle — rebalance the
      ampersand and the stagger around it. ── */
@media (min-width:1200px){
  .framer-cxo9a0 .framer-19bgjvl{gap:96px !important;}
  .framer-cxo9a0 .framer-i5zgua{padding-top:100px !important;}
  .framer-cxo9a0 .framer-zyk0aj{
    width:158px !important;
    height:143px !important;
    right:-118px !important;
    top:14px !important;
  }
}
@media (min-width:810px) and (max-width:1199.98px){
  .framer-cxo9a0 .framer-zyk0aj{width:150px !important;height:136px !important;right:-72px !important;}
}

/* ============================================================
   Metiri — "Ready to get started?" CTA + locations band.
   Replaces the template's Ideas/Execution block. The markup ships
   outside #main (React's root) and hero.js moves it into position.
   ============================================================ */
.mtr-cta{
  --cta-deep:#0d4e51;
  --cta-teal:#0b7d78;
  --cta-arrow:#0a6f6b;
  --cta-ink:#12333c;
  --cta-body:#4f636a;
  --cta-paper:#ffffff;
  --cta-font:"Montserrat",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  width:100%;
  font-family:var(--cta-font);
  -webkit-font-smoothing:antialiased;
  box-sizing:border-box;
}
.mtr-cta *,.mtr-cta *::before,.mtr-cta *::after{box-sizing:border-box}

/* ── light block ─────────────────────────────────────────── */
.mtr-cta__top{
  position:relative;
  overflow:hidden;
  background:var(--cta-paper);
  padding:clamp(56px,6.4vw,92px) clamp(24px,5vw,72px) clamp(58px,6vw,84px);
  display:flex; flex-direction:column; align-items:center;
}

.mtr-cta__contours{
  position:absolute; left:-4%; top:50%; transform:translateY(-50%);
  width:min(48%,660px); height:118%;
  color:rgba(11,125,120,.16);
  pointer-events:none;
}

/* survey crosshair */
.mtr-cta__cross{
  position:absolute; left:clamp(30px,10vw,150px); top:50%;
  width:44px; height:44px; margin-top:-22px;
  color:rgba(11,125,120,.55);
  pointer-events:none;
}
.mtr-cta__cross svg{width:100%;height:100%;display:block}
.mtr-cta__cross i{position:absolute; background:none; border-color:currentColor;}
.mtr-cta__cross i.h{
  left:-58px; right:-58px; top:50%; height:0;
  border-top:1px dashed currentColor; opacity:.55;
}
.mtr-cta__cross i.v{
  top:-58px; bottom:-58px; left:50%; width:0;
  border-left:1px dashed currentColor; opacity:.55;
}

/* angled photo panel */
.mtr-cta__panel{
  position:absolute; top:0; right:0;
  width:clamp(260px,31%,470px);
  height:min(78%,300px);
  -webkit-clip-path:polygon(35% 0,100% 0,100% 100%,0 100%);
  clip-path:polygon(35% 0,100% 0,100% 100%,0 100%);
  pointer-events:none;
}
.mtr-cta__panel img{width:100%;height:100%;object-fit:cover;display:block}
.mtr-cta__wash{
  position:absolute; inset:0;
  background:linear-gradient(62deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.30) 26%,rgba(255,255,255,0) 52%);
}
.mtr-cta__slash{
  position:absolute; left:-30px; bottom:0;
  width:clamp(12px,1.3vw,20px); height:62%;
  background:var(--cta-teal);
  transform:skewX(-30.6deg);
  transform-origin:bottom center;
}

/* copy */
.mtr-cta__inner{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  max-width:760px;
}
.mtr-cta__eyebrow{
  margin:0 0 clamp(18px,2vw,28px);
  display:flex; align-items:center; gap:14px;
  font-size:12px; font-weight:600; letter-spacing:.19em; text-transform:uppercase;
  color:var(--cta-teal);
}
.mtr-cta__eyebrow i{display:block; width:34px; height:1.5px; background:currentColor; flex:none;}

.mtr-cta__title{
  margin:0;
  font-size:clamp(32px,4.5vw,62px);
  line-height:1.08;
  font-weight:700;
  letter-spacing:-.025em;
  color:var(--cta-ink);
}
.mtr-cta__title span{color:var(--cta-teal)}

.mtr-cta__sub{
  margin:clamp(14px,1.6vw,22px) 0 0;
  font-size:clamp(15px,1.3vw,19px);
  line-height:1.6;
  color:var(--cta-body);
  max-width:52ch;
}

/* the site's standard button component, reused verbatim */
.mtr-cta__btn-wrap{
  margin-top:clamp(24px,2.8vw,38px);
  display:flex; justify-content:center;
}
.mtr-cta__btn-wrap a{text-decoration:none}
@media (max-width:809.98px){
  /* the phone variant's metrics — React isn't here to swap the variant class */
  .mtr-cta__btn-wrap .framer-qq40zq{padding-left:16px !important; gap:10px !important;}
  .mtr-cta__btn-wrap [data-framer-name="Icon Wrapper"]{width:30px !important; height:30px !important;}
}

/* People · Places · Progress */
.mtr-cta__tag{
  position:absolute; right:clamp(24px,3.2vw,54px); bottom:clamp(20px,2.4vw,34px);
  z-index:2; margin:0;
  display:flex; align-items:center; gap:16px;
  font-size:11px; font-weight:600; letter-spacing:.19em; text-transform:uppercase;
  color:var(--cta-teal);
}
.mtr-cta__tag i{display:block; width:30px; height:1.5px; background:currentColor; flex:none;}
.mtr-cta__tag span{white-space:nowrap}

/* ── responsive ──────────────────────────────────────────── */
@media (max-width:1100px){
  .mtr-cta__panel{width:34%; height:min(70%,240px)}
  .mtr-cta__cross{left:24px}
}
@media (max-width:860px){
  .mtr-cta__panel,.mtr-cta__tag,.mtr-cta__cross{display:none}
  .mtr-cta__contours{width:70%; opacity:.75}
  .mtr-cta__pin i{width:clamp(50px,18vw,110px)}
  .mtr-cta__locs li{padding:0 12px; font-size:15px}
}
@media (max-width:600px){
  /* dividers can't survive wrapping — set the locations as a tidy two-up list */
  .mtr-cta__locs{
    display:grid; grid-template-columns:1fr 1fr;
    gap:14px 0; width:100%; max-width:330px;
  }
  .mtr-cta__locs li{padding:0; text-align:center;}
  .mtr-cta__locs li + li::before{display:none}
}
@media (max-width:520px){
  .mtr-cta__eyebrow{font-size:11px; letter-spacing:.15em}
  .mtr-cta__band-label{font-size:11.5px; letter-spacing:.18em}
}

/* the template block this replaces */
section.framer-cxo9a0{display:none !important;}

/* ============================================================
   Template sections removed from the home page.
   ============================================================ */
section.framer-1riyhfi,      /* project carousel — Pulse UI / Echo Studio */
section.framer-1mx2s0m,      /* "Plan brand Deserves better" bento */
section.framer-1r5nl56,      /* "Metrics that Prove value" counters */
section.framer-1jiccih{      /* "Proof that Speaks volumes" bento */
  display:none !important;
}

/* the pricing block goes; the testimonial that shares its section stays */
section.framer-26ckbd [data-framer-name="Section Title"],
section.framer-26ckbd [data-framer-name="Grid Pricing"]{display:none !important;}

/* footer: template wordmark and the build credits */
footer img[src*="ot5icekjtwft1ypozcylheexmg"]{display:none !important;}
footer .framer-17gqtou{display:none !important;}   /* "Designed by Webestica, Powered by Framer" */

/* ============================================================
   "Where we work" — supplied map artwork, full-bleed, with the eight
   service areas labelled and their dots lit. Pin coordinates were read
   off the artwork itself, so everything stays locked to the dots.
   ============================================================ */
.mtr-map{
  position:relative; overflow:hidden;
  background:#fff;          /* the artwork's own ground is white — it just continues */
  padding:0;
}
.mtr-map__inner{position:relative; width:100%;}

/* ── copy, laid over the artwork's empty left third ── */
.mtr-map__copy{
  position:absolute; z-index:4;
  /* the artwork's content begins at 31% — the copy stays clear of it */
  left:3.2%; top:50%; transform:translateY(-50%);
  width:25.5%;
}
.mtr-map__eyebrow{
  margin:0 0 clamp(14px,1.5vw,22px);
  display:flex; align-items:center; gap:14px;
  font-size:clamp(10.5px,.82vw,12px); font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:#4a6068;
}
.mtr-map__eyebrow i{display:block; width:clamp(22px,2.4vw,38px); height:1.5px; background:var(--cta-teal,#0b7d78); flex:none;}
.mtr-map__title{
  margin:0; font-weight:600;
  font-size:clamp(19px,2.05vw,34px); line-height:1.15; letter-spacing:-.025em;
  color:#12333c;
}
.mtr-map__title em{font-style:normal; color:#0f9a94;}
.mtr-map__lede{
  margin:clamp(12px,1.5vw,24px) 0 0;
  font-size:clamp(11.5px,.92vw,16px); line-height:1.6; color:#5b6f76;
}
.mtr-map__rule{
  display:block; width:clamp(34px,3.6vw,56px); height:2px;
  margin:clamp(16px,2vw,32px) 0 clamp(10px,1.2vw,18px);
  background:var(--cta-teal,#0b7d78);
}
.mtr-map__tag{
  margin:0; display:flex; flex-wrap:wrap; gap:clamp(10px,1.5vw,22px);
  font-size:clamp(9.5px,.78vw,11.5px); font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:#6a7f86;
}

/* ── artwork ── */
.mtr-map__figure{width:100%;}
.mtr-map__art{position:relative; width:100%;}
.mtr-map__art img{width:100%; height:auto; display:block;}

/* ── the glow under each dot: a breathing halo and an expanding ring ── */
.mtr-map__glow{position:absolute; z-index:1; width:0; height:0; pointer-events:none; color:#0fa3b0;}
.mtr-map__glow::before,.mtr-map__glow::after{
  content:""; position:absolute; left:0; top:0; border-radius:50%;
  transform:translate(-50%,-50%);
}
.mtr-map__glow::before{
  width:clamp(40px,4.6vw,72px); height:clamp(40px,4.6vw,72px);
  background:radial-gradient(circle, rgba(15,163,176,.62) 0%, rgba(15,163,176,.26) 36%, rgba(15,163,176,0) 70%);
  filter:blur(1.5px);
  animation:mtrBreathe 3.4s ease-in-out infinite;
}
.mtr-map__glow::after{
  width:clamp(14px,1.5vw,22px); height:clamp(14px,1.5vw,22px);
  border:1.5px solid rgba(15,163,176,.75);
  animation:mtrRing 3.4s cubic-bezier(.22,.61,.24,1) infinite;
}
.mtr-map__glow:nth-of-type(2)::before,.mtr-map__glow:nth-of-type(2)::after{animation-delay:.45s}
.mtr-map__glow:nth-of-type(3)::before,.mtr-map__glow:nth-of-type(3)::after{animation-delay:.9s}
.mtr-map__glow:nth-of-type(4)::before,.mtr-map__glow:nth-of-type(4)::after{animation-delay:1.35s}
.mtr-map__glow:nth-of-type(5)::before,.mtr-map__glow:nth-of-type(5)::after{animation-delay:1.8s}
.mtr-map__glow:nth-of-type(6)::before,.mtr-map__glow:nth-of-type(6)::after{animation-delay:2.25s}
.mtr-map__glow:nth-of-type(7)::before,.mtr-map__glow:nth-of-type(7)::after{animation-delay:2.7s}
.mtr-map__glow:nth-of-type(8)::before,.mtr-map__glow:nth-of-type(8)::after{animation-delay:3.15s}
@keyframes mtrBreathe{
  0%,100%{opacity:.7; transform:translate(-50%,-50%) scale(.88)}
  50%{opacity:1; transform:translate(-50%,-50%) scale(1.18)}
}
@keyframes mtrRing{
  0%{opacity:.85; transform:translate(-50%,-50%) scale(.55)}
  75%{opacity:0; transform:translate(-50%,-50%) scale(3.1)}
  100%{opacity:0; transform:translate(-50%,-50%) scale(3.1)}
}

/* ── labels: the dot is in the artwork, the label sits beside it ── */
.mtr-map__pin{
  position:absolute; z-index:3;
  padding:5px 11px; border-radius:999px; white-space:nowrap;
  background:#fff; color:#12857f;
  font-size:clamp(9px,.86vw,14px); font-weight:500; letter-spacing:-.01em;
  box-shadow:0 1px 3px rgba(16,52,66,.07), 0 6px 18px rgba(16,52,66,.14);
}
.mtr-map__pin--right{transform:translate(clamp(14px,1.5vw,24px),-50%);}
.mtr-map__pin--left{transform:translate(calc(-100% - clamp(14px,1.5vw,24px)),-50%);}
.mtr-map__pin::before{
  content:""; position:absolute; top:50%; width:clamp(6px,.7vw,11px); height:1.5px;
  background:currentColor; opacity:.28;
}
.mtr-map__pin--right::before{right:100%;}
.mtr-map__pin--left::before{left:100%;}

.mtr-map__legend{display:none;}

/* ── responsive ── */
@media (max-width:1024px){
  /* the artwork's empty left third is too narrow to hold the copy here */
  .mtr-map{padding:clamp(36px,5vw,52px) clamp(20px,4vw,40px) 0;}
  .mtr-map__copy{
    position:static; transform:none; width:100%; max-width:640px;
    margin:0 auto clamp(18px,3vw,30px);
  }
  .mtr-map{padding-bottom:clamp(28px,4vw,44px);}
  .mtr-map__pin{padding:4px 8px; font-size:clamp(9px,1.7vw,12px);}
  /* room either side so the outermost labels stay on the artwork */
  .mtr-map__figure{width:calc(100% - clamp(52px,13vw,120px)); margin:0 auto;}
}
@media (max-width:900px){
  /* Eight labels can't sit beside their dots on a map this small without
     crowding — below here they read as a legend under the artwork instead. */
  .mtr-map__figure{width:100%;}
  .mtr-map__pin{display:none;}
  .mtr-map__legend{
    list-style:none; margin:clamp(14px,3vw,22px) 0 0; padding:0;
    display:flex; flex-wrap:wrap; justify-content:center; gap:8px clamp(6px,1.6vw,10px);
  }
  .mtr-map__legend li{
    display:inline-flex; align-items:center; gap:7px;
    padding:6px 12px; border-radius:999px;
    background:#fff; color:#12857f;
    font-size:clamp(11px,2.6vw,13.5px); font-weight:500;
    box-shadow:0 1px 2px rgba(16,52,66,.05), 0 4px 12px rgba(16,52,66,.10);
  }
  .mtr-map__legend li::before{content:""; width:8px; height:8px; border-radius:50%; background:currentColor;}
}
@media (max-width:520px){
  .mtr-map__legend li{padding:5px 10px}
  .mtr-map__tag{gap:12px}
}
@media (prefers-reduced-motion:reduce){
  .mtr-map__glow::before,.mtr-map__glow::after{animation:none}
  .mtr-map__glow::after{opacity:.5; transform:translate(-50%,-50%) scale(1.6)}
}

/* ============================================================
   Metiri — FAQ. Two columns under a centred header; the open
   answer tints teal, the rest sit as white cards. <details name>
   keeps one item open at a time with no script.
   ============================================================ */
.mtr-faq{
  --faq-ink:#0f2f44;
  --faq-teal:#1b8a86;
  --faq-body:#4f6470;
  --faq-line:#e2ebee;
  --faq-font:"Montserrat",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  position:relative; overflow:hidden; width:100%;
  background:linear-gradient(180deg,#f7fafb 0%,#f3f8f9 100%);
  font-family:var(--faq-font);
  -webkit-font-smoothing:antialiased;
  padding:clamp(56px,6.2vw,96px) clamp(24px,5vw,72px) clamp(64px,7vw,110px);
  box-sizing:border-box;
}
.mtr-faq *,.mtr-faq *::before,.mtr-faq *::after{box-sizing:border-box}
.mtr-faq__contours{position:absolute; pointer-events:none; color:rgba(27,138,134,.13);}
.mtr-faq__contours--tr{right:-14%; top:-22%; width:min(52%,720px); height:auto;}
.mtr-faq__contours--bl{left:-16%; bottom:-30%; width:min(44%,600px); height:auto;}
.mtr-faq__inner{position:relative; z-index:1; max-width:1360px; margin:0 auto;}

/* ── header ── */
.mtr-faq__head{text-align:center; margin:0 auto clamp(34px,4vw,60px); max-width:760px;}
.mtr-faq__eyebrow{
  margin:0 0 clamp(14px,1.6vw,22px);
  display:inline-flex; align-items:center; gap:14px;
  font-size:clamp(10.5px,.82vw,12px); font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--faq-teal);
}
.mtr-faq__eyebrow i{display:block; width:34px; height:1.5px; background:currentColor; opacity:.7;}
.mtr-faq__title{
  margin:0; font-weight:700;
  font-size:clamp(36px,4.6vw,66px); line-height:1.04; letter-spacing:-.03em;
  color:var(--faq-ink);
}
.mtr-faq__title span{color:var(--faq-teal)}
.mtr-faq__sub{
  margin:clamp(14px,1.6vw,22px) auto 0; max-width:60ch;
  font-size:clamp(15px,1.2vw,18px); line-height:1.6; color:var(--faq-body);
}

/* ── two columns ── */
.mtr-faq__grid{
  display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:clamp(32px,4.6vw,72px); align-items:start;
}

/* left column */
.mtr-faq__side{position:relative;}
.mtr-faq__kicker{
  margin:0 0 clamp(18px,2vw,28px);
  display:flex; align-items:flex-start; gap:16px;
  font-size:clamp(10.5px,.8vw,12px); font-weight:600; letter-spacing:.22em; line-height:1.7;
  text-transform:uppercase; color:#1f4d5c;
}
.mtr-faq__kicker i{display:block; width:34px; height:1.5px; margin-top:.55em; background:var(--faq-teal); flex:none;}
.mtr-faq__h3{
  margin:0; font-weight:600;
  font-size:clamp(28px,3.1vw,46px); line-height:1.1; letter-spacing:-.03em;
  color:var(--faq-ink);
}
.mtr-faq__h3 span{color:var(--faq-teal)}
.mtr-faq__lede{
  margin:clamp(16px,1.8vw,26px) 0 0; max-width:36ch;
  font-size:clamp(15px,1.2vw,18px); line-height:1.6; color:var(--faq-body);
}

.mtr-faq__art{position:relative; margin-top:clamp(28px,3.2vw,48px); padding-right:32%;}
.mtr-faq__art img{
  display:block; width:100%; height:auto; max-width:400px;
  /* the supplied panel already carries its angled edge and glass echo */
}
.mtr-faq__cross{
  position:absolute; right:14%; top:22%;
  width:38px; height:38px; color:var(--faq-teal); opacity:.75;
}
.mtr-faq__cross svg{width:100%; height:100%; display:block;}
.mtr-faq__cross i{position:absolute;}
.mtr-faq__cross i.h{left:-70px; right:-70px; top:50%; height:0; border-top:1px dashed currentColor; opacity:.5;}
.mtr-faq__cross i.v{top:-70px; bottom:-70px; left:50%; width:0; border-left:1px dashed currentColor; opacity:.5;}
.mtr-faq__tag{
  position:absolute; right:0; bottom:-6px; margin:0;
  font-size:clamp(10.5px,.8vw,12px); font-weight:600; letter-spacing:.22em; line-height:1.9;
  text-transform:uppercase; color:#1f4d5c;
}
.mtr-faq__tag i{display:block; width:30px; height:1.5px; background:var(--faq-teal); margin-bottom:12px;}

/* right column — the accordion */
.mtr-faq__list{display:flex; flex-direction:column; gap:12px;}
.mtr-faq__item{
  background:#fff; border:1px solid var(--faq-line); border-radius:10px;
  box-shadow:0 1px 2px rgba(15,47,68,.03), 0 6px 18px rgba(15,47,68,.04);
  transition:background .25s ease, border-color .25s ease;
}
.mtr-faq__item[open]{background:#e9f5f3; border-color:#b9dfda;}
.mtr-faq__item summary{
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; gap:18px;
  padding:clamp(14px,1.3vw,18px) clamp(16px,1.6vw,22px);
}
.mtr-faq__item summary::-webkit-details-marker{display:none}
.mtr-faq__item summary:focus-visible{outline:2px solid var(--faq-teal); outline-offset:3px; border-radius:10px;}

.mtr-faq__ic{
  position:relative; flex:none; width:30px; height:30px; border-radius:50%;
  background:#e6f3f1; border:1px solid #cfe6e3; color:var(--faq-teal);
  transition:background .25s ease, border-color .25s ease;
}
.mtr-faq__ic::before,.mtr-faq__ic::after{
  content:""; position:absolute; left:50%; top:50%; background:currentColor; border-radius:1px;
  transform:translate(-50%,-50%);
}
.mtr-faq__ic::before{width:12px; height:1.8px;}
.mtr-faq__ic::after{width:1.8px; height:12px; transition:transform .25s ease, opacity .2s ease;}
.mtr-faq__item[open] .mtr-faq__ic{background:var(--faq-teal); border-color:var(--faq-teal); color:#fff;}
.mtr-faq__item[open] .mtr-faq__ic::after{transform:translate(-50%,-50%) rotate(90deg); opacity:0;}

.mtr-faq__q{
  flex:1; font-size:clamp(15px,1.15vw,17.5px); font-weight:600; letter-spacing:-.01em;
  line-height:1.35; color:var(--faq-ink);
}
.mtr-faq__chev{flex:none; width:20px; height:20px; color:#2b4a55; transition:transform .3s ease;}
.mtr-faq__chev svg{width:100%; height:100%; display:block;}
.mtr-faq__item[open] .mtr-faq__chev{transform:rotate(180deg)}

.mtr-faq__a{padding:0 clamp(16px,1.6vw,22px) clamp(16px,1.5vw,20px) calc(clamp(16px,1.6vw,22px) + 48px);}
.mtr-faq__a p{
  margin:0; font-size:clamp(14px,1.05vw,16px); line-height:1.65; color:var(--faq-body);
  animation:mtrFaqIn .35s ease both;
}
@keyframes mtrFaqIn{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}}

/* ── responsive ── */
@media (max-width:1024px){
  .mtr-faq__grid{grid-template-columns:1fr; gap:clamp(30px,5vw,48px);}
  .mtr-faq__side{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:28px; align-items:center;}
  .mtr-faq__kicker,.mtr-faq__h3,.mtr-faq__lede{grid-column:1}
  .mtr-faq__art{grid-column:2; grid-row:1 / span 3; margin-top:0;}
  .mtr-faq__lede{max-width:none}
}
@media (max-width:680px){
  .mtr-faq__side{grid-template-columns:1fr}
  .mtr-faq__art{grid-column:1; grid-row:auto; margin-top:24px; padding-right:28%;}
  .mtr-faq__cross{right:8%}
  .mtr-faq__item summary{gap:14px}
  .mtr-faq__a{padding-left:calc(clamp(16px,1.6vw,22px) + 44px)}
}
@media (prefers-reduced-motion:reduce){
  .mtr-faq__a p{animation:none}
  .mtr-faq__chev,.mtr-faq__ic,.mtr-faq__ic::after,.mtr-faq__item{transition:none}
}

/* the template footer this replaces */
#main footer:not(.mtr-foot){display:none !important;}

/* ============================================================
   Metiri — site footer. Replaces the template's.
   ============================================================ */
.mtr-foot{
  --ft-ink:#eaf2f4;
  --ft-dim:#8fa3ad;
  --ft-teal:#3fc9dc;
  --ft-line:rgba(255,255,255,.10);
  --ft-font:"Montserrat",ui-sans-serif,system-ui,-apple-system,sans-serif;

  position:relative; overflow:hidden; width:100%;
  font-family:var(--ft-font); color:var(--ft-ink);
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(58% 70% at 14% 6%, rgba(63,201,220,.09), rgba(63,201,220,0) 62%),
    radial-gradient(50% 60% at 88% 88%, rgba(27,111,140,.14), rgba(27,111,140,0) 66%),
    linear-gradient(165deg,#0d1720 0%,#080e14 52%,#05090d 100%);
  padding:clamp(48px,5.4vw,84px) clamp(24px,5vw,72px) clamp(28px,3vw,40px);
  box-sizing:border-box;
}
.mtr-foot *,.mtr-foot *::before,.mtr-foot *::after{box-sizing:border-box}
.mtr-foot__wm{
  position:absolute; right:-3%; top:8%; width:min(30%,380px);
  color:rgba(120,180,196,.055); pointer-events:none;
}
.mtr-foot__wm svg{width:100%; height:auto; display:block;}
.mtr-foot__inner{position:relative; z-index:1; max-width:1360px; margin:0 auto;}

/* ── top grid ── */
.mtr-foot__grid{
  display:grid;
  /* the newsletter column is gone — the client has no newsletter */
  grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(28px,3.4vw,56px);
  padding-bottom:clamp(34px,4vw,56px);
}
.mtr-foot__col{position:relative; padding-left:clamp(18px,2.4vw,40px); border-left:1px solid var(--ft-line);}
.mtr-foot__col h3{
  margin:0 0 clamp(14px,1.6vw,22px);
  font-size:clamp(14px,1.08vw,16.5px); font-weight:400; letter-spacing:-.01em; color:var(--ft-dim);
}
.mtr-foot__col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:clamp(10px,1.2vw,15px);}
.mtr-foot__col a{
  color:var(--ft-ink); text-decoration:none;
  font-size:clamp(14px,1.05vw,16px); line-height:1.45;
  transition:color .2s ease;
}
.mtr-foot__col a:hover{color:var(--ft-teal)}

/* newsletter */
.mtr-foot__eyebrow{
  margin:0 0 clamp(12px,1.4vw,18px);
  font-size:clamp(10.5px,.82vw,12px); font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ft-teal);
}
.mtr-foot__title{
  margin:0; font-weight:500;
  font-size:clamp(26px,2.7vw,40px); line-height:1.18; letter-spacing:-.025em; color:#fff;
}
.mtr-foot__title span{color:var(--ft-teal)}
.mtr-foot__lede{
  margin:clamp(12px,1.4vw,18px) 0 0; max-width:42ch;
  font-size:clamp(14px,1.05vw,16px); line-height:1.6; color:var(--ft-dim);
}
.mtr-foot__form{
  margin-top:clamp(18px,2.2vw,30px);
  display:flex; align-items:center; gap:10px;
  max-width:520px; padding:8px 8px 8px clamp(16px,1.6vw,24px);
  border:1px solid var(--ft-line); border-radius:12px;
  background:rgba(255,255,255,.035);
  transition:border-color .25s ease, background .25s ease;
}
.mtr-foot__form:focus-within{border-color:rgba(63,201,220,.55); background:rgba(255,255,255,.06);}
.mtr-foot__form input{
  flex:1; min-width:0; border:0; background:none; outline:none;
  color:#fff; font-family:inherit; font-size:clamp(14px,1.05vw,16px); padding:12px 0;
}
.mtr-foot__form input::placeholder{color:#7c8f99}
.mtr-foot__form button{
  flex:none; width:44px; height:44px; border-radius:50%; border:0; cursor:pointer;
  background:var(--ft-teal); color:#062028;
  display:grid; place-items:center;
  transition:transform .25s ease, background .25s ease;
}
.mtr-foot__form button svg{width:20px; height:20px;}
.mtr-foot__form button:hover{background:#5fdcec; transform:translateX(2px);}
.mtr-foot__note{margin:12px 0 0; min-height:1.2em; font-size:13.5px; color:var(--ft-teal);}

/* social + contact rows */
.mtr-foot__social a,.mtr-foot__contact li{display:flex; align-items:center; gap:14px;}
.mtr-foot__contact li{gap:14px}
.mtr-foot__social .ic,.mtr-foot__contact .ic{
  flex:none; width:38px; height:38px; border-radius:9px;
  display:grid; place-items:center;
  background:rgba(63,201,220,.13); color:var(--ft-teal);
}
.mtr-foot__contact .ic{background:none; width:26px; height:26px; border-radius:0;}
.mtr-foot__social .ic svg{width:20px; height:20px}
.mtr-foot__contact .ic svg{width:21px; height:21px}
.mtr-foot__contact a{line-height:1.45}

/* ── base bar ── */
.mtr-foot__base{
  display:flex; align-items:center; gap:clamp(20px,3vw,48px);
  padding-top:clamp(24px,2.6vw,36px);
}
.mtr-foot__logo{display:flex; align-items:center; gap:14px; text-decoration:none; flex:none;}
.mtr-foot__logo svg{width:clamp(38px,3.4vw,52px); height:auto; display:block;}
.mtr-foot__logo img{height:clamp(34px,3vw,46px); width:auto; display:block;}
.mtr-foot__logo span{font-size:clamp(26px,2.4vw,36px); font-weight:500; letter-spacing:-.02em; color:#fff;}
.mtr-foot__hr{flex:1; height:1px; background:var(--ft-line);}
.mtr-foot__legal{flex:none; text-align:right;}
.mtr-foot__legal p{margin:0; font-size:clamp(12.5px,.95vw,14.5px); line-height:1.75; color:var(--ft-dim);}
.mtr-foot__legal a{color:var(--ft-dim); text-decoration:none; transition:color .2s ease;}
.mtr-foot__legal a:hover{color:var(--ft-teal)}
.mtr-foot__legal i{font-style:normal; padding:0 10px; opacity:.5;}

/* ── responsive ── */
@media (max-width:1024px){
  .mtr-foot__grid{grid-template-columns:1fr 1fr; row-gap:clamp(28px,4vw,40px);}
  .mtr-foot__news{grid-column:1 / -1;}
  .mtr-foot__col:nth-of-type(2){padding-left:0; border-left:0;}
}
@media (max-width:680px){
  .mtr-foot__grid{grid-template-columns:1fr}
  .mtr-foot__col{padding-left:0; border-left:0; padding-top:24px; border-top:1px solid var(--ft-line);}
  .mtr-foot__wm{width:52%; right:-12%; top:auto; bottom:12%;}
  .mtr-foot__base{flex-wrap:wrap; gap:20px;}
  .mtr-foot__hr{display:none}
  .mtr-foot__legal{text-align:left; flex:1 0 100%;}
}
@media (prefers-reduced-motion:reduce){
  .mtr-foot__form,.mtr-foot__form button,.mtr-foot__col a,.mtr-foot__legal a{transition:none}
}

/* ============================================================
   Metiri — gallery. Mosaic pages of up to eight, filtered by
   category. Arrows and dots appear only when a filter needs
   more than one page.
   ============================================================ */
.mtr-gal{
  --gl-ink:#0f2f44;
  --gl-teal:#1b8a86;
  --gl-body:#4f6470;
  position:relative; overflow:hidden; width:100%;
  background:linear-gradient(180deg,#eef6fa 0%,#f4f9fb 100%);
  font-family:"Montserrat",ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding:clamp(50px,5.6vw,84px) clamp(20px,3.4vw,52px) clamp(48px,5vw,76px);
  box-sizing:border-box;
}
.mtr-gal *,.mtr-gal *::before,.mtr-gal *::after{box-sizing:border-box}
.mtr-gal__contours{position:absolute; pointer-events:none; color:rgba(27,138,134,.10);}
.mtr-gal__contours--tl{left:-14%; top:-26%; width:min(46%,620px);}
.mtr-gal__contours--tr{right:-12%; top:-18%; width:min(40%,540px);}
.mtr-gal__inner{position:relative; z-index:1; max-width:1500px; margin:0 auto;}

/* header */
.mtr-gal__head{text-align:center; max-width:760px; margin:0 auto clamp(24px,2.8vw,38px);}
.mtr-gal__eyebrow{
  margin:0 0 clamp(12px,1.4vw,18px);
  display:inline-flex; align-items:center; gap:14px;
  font-size:clamp(10.5px,.82vw,12px); font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gl-teal);
}
.mtr-gal__eyebrow i{display:block; width:34px; height:1.5px; background:currentColor; opacity:.75;}
.mtr-gal__title{
  margin:0; font-weight:700;
  font-size:clamp(30px,3.9vw,56px); line-height:1.08; letter-spacing:-.03em; color:var(--gl-ink);
}
.mtr-gal__title span{color:var(--gl-teal)}
.mtr-gal__sub{
  margin:clamp(12px,1.4vw,18px) auto 0; max-width:58ch;
  font-size:clamp(14.5px,1.15vw,17px); line-height:1.6; color:var(--gl-body);
}
.mtr-gal__tag{
  position:absolute; right:0; top:4px; margin:0; z-index:2;
  display:flex; flex-direction:column; gap:4px;
  font-size:clamp(9.5px,.76vw,11px); font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:#8aa0a8; text-align:left;
}
.mtr-gal__tag i{display:block; width:34px; height:1.5px; background:var(--gl-teal); margin-bottom:8px;}

/* filter chips */
.mtr-gal__chips{
  margin-top:clamp(18px,2.2vw,30px);
  display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(8px,1vw,14px);
}
.mtr-gal__chip{
  cursor:pointer; font-family:inherit;
  padding:clamp(9px,.9vw,13px) clamp(18px,1.8vw,28px);
  border-radius:999px; border:1px solid #cfe0e4;
  background:transparent; color:var(--gl-ink);
  font-size:clamp(13px,1vw,15px); font-weight:500; letter-spacing:-.01em;
  transition:background .22s ease, color .22s ease, border-color .22s ease;
}
.mtr-gal__chip:hover{border-color:var(--gl-teal); color:var(--gl-teal);}
.mtr-gal__chip.is-on{background:var(--gl-teal); border-color:var(--gl-teal); color:#fff;}
.mtr-gal__chip:focus-visible{outline:2px solid var(--gl-teal); outline-offset:3px;}

/* stage */
.mtr-gal__stage{position:relative;}
.mtr-gal__viewport{overflow:hidden;}
.mtr-gal__track{display:flex;}

/* Without the script this is simply a responsive grid — the page never
   depends on JS to show the photos. */
.mtr-gal__track:not(.is-paged){
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:clamp(10px,1vw,16px);
}
.mtr-gal__track:not(.is-paged) .mtr-gal__item{height:clamp(200px,20vw,300px);}

.mtr-gal__page{
  flex:0 0 100%; min-width:100%;
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:clamp(10px,1vw,16px); align-content:start;
}
.mtr-gal__item{
  margin:0; overflow:hidden; border-radius:12px;
  background:#dde8ec; grid-column:span 3;
  box-shadow:0 1px 2px rgba(15,47,68,.05), 0 10px 26px rgba(15,47,68,.09);
}
.mtr-gal__item img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s cubic-bezier(.22,.61,.24,1);}
.mtr-gal__item:hover img{transform:scale(1.05);}
.mtr-gal__item--tall{height:clamp(210px,24.5vw,356px);}
.mtr-gal__item--short{height:clamp(150px,15vw,216px);}
.mtr-gal__item[hidden]{display:none;}

/* arrows + dots */
.mtr-gal__arrow{
  position:absolute; top:50%; z-index:3; transform:translateY(-50%);
  width:clamp(38px,3.2vw,46px); height:clamp(38px,3.2vw,46px);
  border-radius:50%; border:1px solid #d7e5e9; cursor:pointer;
  background:#fff; color:var(--gl-ink);
  display:grid; place-items:center;
  box-shadow:0 4px 16px rgba(15,47,68,.13);
  transition:background .2s ease, color .2s ease, opacity .2s ease;
}
.mtr-gal__arrow svg{width:20px; height:20px;}
.mtr-gal__arrow--prev{left:calc(-1 * clamp(14px,1.6vw,26px)); transform:translate(-50%,-50%);}
.mtr-gal__arrow--next{right:calc(-1 * clamp(14px,1.6vw,26px)); transform:translate(50%,-50%);}
.mtr-gal__arrow:hover{background:var(--gl-teal); color:#fff; border-color:var(--gl-teal);}
.mtr-gal__arrow[disabled]{opacity:.35; cursor:default;}
.mtr-gal__arrow[hidden],.mtr-gal__dots[hidden]{display:none !important;}

.mtr-gal__dots{
  display:flex; justify-content:center; gap:9px;
  margin-top:clamp(18px,2vw,28px);
}
.mtr-gal__dots button{
  width:9px; height:9px; padding:0; border-radius:50%; border:0; cursor:pointer;
  background:#c2d5da; transition:background .2s ease, transform .2s ease;
}
.mtr-gal__dots button.is-on{background:var(--gl-teal); transform:scale(1.15);}

/* responsive */
@media (max-width:1100px){
  .mtr-gal__tag{display:none}
}
@media (max-width:760px){
  .mtr-gal__arrow--prev{left:6px; transform:translateY(-50%);}
  .mtr-gal__arrow--next{right:6px; transform:translateY(-50%);}
  .mtr-gal__item--tall{height:clamp(170px,42vw,240px);}
  .mtr-gal__item--short{height:clamp(130px,30vw,180px);}
}
@media (prefers-reduced-motion:reduce){
  .mtr-gal__item img,.mtr-gal__chip,.mtr-gal__arrow{transition:none}
}

/* ============================================================
   Metiri — gallery. Mosaic pages of up to eight, filtered by
   category. Arrows and dots appear only when a filter needs
   more than one page.
   ============================================================ */
.mtr-gal{
  --gl-ink:#0f2f44;
  --gl-teal:#1b8a86;
  --gl-body:#4f6470;
  position:relative; overflow:hidden; width:100%;
  background:linear-gradient(180deg,#eef6fa 0%,#f4f9fb 100%);
  font-family:"Montserrat",ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding:clamp(50px,5.6vw,84px) clamp(20px,3.4vw,52px) clamp(48px,5vw,76px);
  box-sizing:border-box;
}
.mtr-gal *,.mtr-gal *::before,.mtr-gal *::after{box-sizing:border-box}
.mtr-gal__contours{position:absolute; pointer-events:none; color:rgba(27,138,134,.10);}
.mtr-gal__contours--tl{left:-14%; top:-26%; width:min(46%,620px);}
.mtr-gal__contours--tr{right:-12%; top:-18%; width:min(40%,540px);}
.mtr-gal__inner{position:relative; z-index:1; max-width:1500px; margin:0 auto;}

/* header */
.mtr-gal__head{text-align:center; max-width:760px; margin:0 auto clamp(24px,2.8vw,38px);}
.mtr-gal__eyebrow{
  margin:0 0 clamp(12px,1.4vw,18px);
  display:inline-flex; align-items:center; gap:14px;
  font-size:clamp(10.5px,.82vw,12px); font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gl-teal);
}
.mtr-gal__eyebrow i{display:block; width:34px; height:1.5px; background:currentColor; opacity:.75;}
.mtr-gal__title{
  margin:0; font-weight:700;
  font-size:clamp(30px,3.9vw,56px); line-height:1.08; letter-spacing:-.03em; color:var(--gl-ink);
}
.mtr-gal__title span{color:var(--gl-teal)}
.mtr-gal__sub{
  margin:clamp(12px,1.4vw,18px) auto 0; max-width:58ch;
  font-size:clamp(14.5px,1.15vw,17px); line-height:1.6; color:var(--gl-body);
}
.mtr-gal__tag{
  position:absolute; right:0; top:4px; margin:0; z-index:2;
  display:flex; flex-direction:column; gap:4px;
  font-size:clamp(9.5px,.76vw,11px); font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:#8aa0a8; text-align:left;
}
.mtr-gal__tag i{display:block; width:34px; height:1.5px; background:var(--gl-teal); margin-bottom:8px;}

/* filter chips */
.mtr-gal__chips{
  margin-top:clamp(18px,2.2vw,30px);
  display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(8px,1vw,14px);
}
.mtr-gal__chip{
  cursor:pointer; font-family:inherit;
  padding:clamp(9px,.9vw,13px) clamp(18px,1.8vw,28px);
  border-radius:999px; border:1px solid #cfe0e4;
  background:transparent; color:var(--gl-ink);
  font-size:clamp(13px,1vw,15px); font-weight:500; letter-spacing:-.01em;
  transition:background .22s ease, color .22s ease, border-color .22s ease;
}
.mtr-gal__chip:hover{border-color:var(--gl-teal); color:var(--gl-teal);}
.mtr-gal__chip.is-on{background:var(--gl-teal); border-color:var(--gl-teal); color:#fff;}
.mtr-gal__chip:focus-visible{outline:2px solid var(--gl-teal); outline-offset:3px;}

/* stage */
.mtr-gal__stage{position:relative;}
.mtr-gal__viewport{overflow:hidden;}
.mtr-gal__track{display:flex;}

/* Without the script this is simply a responsive grid — the page never
   depends on JS to show the photos. */
.mtr-gal__track:not(.is-paged){
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:clamp(10px,1vw,16px);
}
.mtr-gal__track:not(.is-paged) .mtr-gal__item{height:clamp(200px,20vw,300px);}

.mtr-gal__page{
  flex:0 0 100%; min-width:100%;
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:clamp(10px,1vw,16px); align-content:start;
}
.mtr-gal__item{
  margin:0; overflow:hidden; border-radius:12px;
  background:#dde8ec; grid-column:span 3;
  box-shadow:0 1px 2px rgba(15,47,68,.05), 0 10px 26px rgba(15,47,68,.09);
}
.mtr-gal__item img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s cubic-bezier(.22,.61,.24,1);}
.mtr-gal__item:hover img{transform:scale(1.05);}
.mtr-gal__item--tall{height:clamp(210px,24.5vw,356px);}
.mtr-gal__item--short{height:clamp(150px,15vw,216px);}
.mtr-gal__item[hidden]{display:none;}

/* arrows + dots */
.mtr-gal__arrow{
  position:absolute; top:50%; z-index:3; transform:translateY(-50%);
  width:clamp(38px,3.2vw,46px); height:clamp(38px,3.2vw,46px);
  border-radius:50%; border:1px solid #d7e5e9; cursor:pointer;
  background:#fff; color:var(--gl-ink);
  display:grid; place-items:center;
  box-shadow:0 4px 16px rgba(15,47,68,.13);
  transition:background .2s ease, color .2s ease, opacity .2s ease;
}
.mtr-gal__arrow svg{width:20px; height:20px;}
.mtr-gal__arrow--prev{left:calc(-1 * clamp(14px,1.6vw,26px)); transform:translate(-50%,-50%);}
.mtr-gal__arrow--next{right:calc(-1 * clamp(14px,1.6vw,26px)); transform:translate(50%,-50%);}
.mtr-gal__arrow:hover{background:var(--gl-teal); color:#fff; border-color:var(--gl-teal);}
.mtr-gal__arrow[disabled]{opacity:.35; cursor:default;}
.mtr-gal__arrow[hidden],.mtr-gal__dots[hidden]{display:none !important;}

.mtr-gal__dots{
  display:flex; justify-content:center; gap:9px;
  margin-top:clamp(18px,2vw,28px);
}
.mtr-gal__dots button{
  width:9px; height:9px; padding:0; border-radius:50%; border:0; cursor:pointer;
  background:#c2d5da; transition:background .2s ease, transform .2s ease;
}
.mtr-gal__dots button.is-on{background:var(--gl-teal); transform:scale(1.15);}

/* responsive */
@media (max-width:1100px){
  .mtr-gal__tag{display:none}
}
@media (max-width:760px){
  .mtr-gal__arrow--prev{left:6px; transform:translateY(-50%);}
  .mtr-gal__arrow--next{right:6px; transform:translateY(-50%);}
  .mtr-gal__item--tall{height:clamp(170px,42vw,240px);}
  .mtr-gal__item--short{height:clamp(130px,30vw,180px);}
}
@media (prefers-reduced-motion:reduce){
  .mtr-gal__item img,.mtr-gal__chip,.mtr-gal__arrow{transition:none}
}

/* the template's contact block this replaces */

/* ============================================================
   Metiri — contact. Video behind, enquiry form in front.
   ============================================================ */
.mtr-contact{
  --ct-teal:#3fc9dc;
  --ct-ink:#0f2f44;
  position:relative; overflow:hidden; width:100%;
  font-family:"Montserrat",ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding:clamp(56px,6vw,96px) clamp(20px,5vw,72px) clamp(60px,6.4vw,104px);
  box-sizing:border-box; background:#08131a;
}
.mtr-contact *,.mtr-contact *::before,.mtr-contact *::after{box-sizing:border-box}
.mtr-contact__media{position:absolute; inset:0; z-index:0; overflow:hidden;}
.mtr-contact__video{width:100%; height:100%; object-fit:cover; display:block;}
.mtr-contact__grade{
  position:absolute; inset:0;
  background:
    linear-gradient(0deg,rgba(6,16,22,.72),rgba(6,16,22,.72)),
    linear-gradient(180deg,rgba(6,16,22,.86) 0%,rgba(6,16,22,.42) 32%,rgba(6,16,22,.55) 72%,rgba(6,16,22,.9) 100%);
}
.mtr-contact__inner{position:relative; z-index:1; max-width:1240px; margin:0 auto;}

/* header */
.mtr-contact__head{text-align:center; max-width:720px; margin:0 auto clamp(28px,3.2vw,46px);}
.mtr-contact__eyebrow{
  margin:0 0 clamp(12px,1.4vw,18px);
  display:inline-flex; align-items:center; gap:14px;
  font-size:clamp(10.5px,.82vw,12px); font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ct-teal);
}
.mtr-contact__eyebrow i{display:block; width:34px; height:1.5px; background:currentColor; opacity:.75;}
.mtr-contact__title{
  margin:0; font-weight:700; color:#fff;
  font-size:clamp(32px,4.2vw,60px); line-height:1.06; letter-spacing:-.03em;
}
.mtr-contact__title span{color:var(--ct-teal)}
.mtr-contact__sub{
  margin:clamp(12px,1.4vw,20px) auto 0; max-width:56ch;
  font-size:clamp(14.5px,1.15vw,17px); line-height:1.6; color:rgba(233,244,247,.78);
}

/* layout */
.mtr-contact__grid{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(24px,3vw,52px); align-items:start;
}
.mtr-contact__card{
  background:#fff; border-radius:16px;
  padding:clamp(22px,2.4vw,38px);
  box-shadow:0 10px 40px rgba(4,14,20,.32);
}
.mtr-contact__note{
  margin:0 0 18px; padding:12px 16px; border-radius:9px;
  background:#e9f5f3; color:#0f6b66; font-size:14.5px; line-height:1.5;
}
.mtr-contact__note[data-tone="bad"]{background:#fdecec; color:#a3352f;}
.mtr-contact__hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

.mtr-contact__field{margin-bottom:clamp(14px,1.5vw,20px);}
.mtr-contact__label{
  display:block; margin-bottom:9px;
  font-size:clamp(11px,.86vw,12.5px); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ct-ink);
}
.mtr-contact__label b{color:#c0453c; font-weight:700; margin-left:2px;}
.mtr-contact__pair{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.mtr-contact__form input[type=text],
.mtr-contact__form input[type=email],
.mtr-contact__form input[type=tel],
.mtr-contact__form textarea{
  width:100%; font-family:inherit;
  font-size:clamp(14px,1.05vw,15.5px); color:var(--ct-ink);
  padding:13px 15px; border:1px solid #dbe6ea; border-radius:8px;
  background:#fff; outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.mtr-contact__form textarea{resize:vertical; min-height:132px; line-height:1.6;}
.mtr-contact__form input::placeholder,
.mtr-contact__form textarea::placeholder{color:#9bacb4}
.mtr-contact__form textarea::placeholder{font-style:italic}
.mtr-contact__form input:focus,
.mtr-contact__form textarea:focus{border-color:var(--ct-teal); box-shadow:0 0 0 3px rgba(63,201,220,.18);}
.mtr-contact__hint{margin:0 0 10px; font-size:14px; color:#5f7480;}

/* file drop */
.mtr-contact__drop{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  padding:clamp(22px,2.6vw,36px); cursor:pointer;
  border:1px dashed #cddbe1; border-radius:10px; background:#fbfdfd;
  transition:border-color .2s ease, background .2s ease;
}
.mtr-contact__drop:hover,.mtr-contact__drop.is-over{border-color:var(--ct-teal); background:#f2fbfc;}
.mtr-contact__droptext{font-size:clamp(14px,1.05vw,16px); color:#5f7480;}
.mtr-contact__pick{
  padding:11px 26px; border-radius:999px;
  background:#008490; color:#fff; font-size:15px; font-weight:600;
}
.mtr-contact__drop input[type=file]{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;}
.mtr-contact__files{margin:10px 0 0; font-size:13.5px; color:#5f7480;}

.mtr-contact__submit{
  margin-top:clamp(6px,1vw,12px);
  display:inline-flex; align-items:center; gap:14px; cursor:pointer;
  padding:14px 18px 14px 28px; border:0; border-radius:999px;
  background:#008490; color:#fff; font-family:inherit;
  font-size:clamp(15px,1.15vw,16.5px); font-weight:600;
  transition:background .22s ease, transform .22s ease;
}
.mtr-contact__submit svg{width:20px; height:20px;}
.mtr-contact__submit:hover{background:#0f6b73; transform:translateX(2px);}

/* aside */
.mtr-contact__aside{color:#e9f4f7; padding-top:clamp(4px,1vw,14px);}
.mtr-contact__aside h3{
  margin:0 0 clamp(14px,1.6vw,20px);
  font-size:clamp(16px,1.3vw,19px); font-weight:600; letter-spacing:-.015em; color:#fff;
}
.mtr-contact__h3b{margin-top:clamp(26px,3vw,40px) !important;}
.mtr-contact__rows{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px;}
.mtr-contact__rows li{display:flex; align-items:flex-start; gap:14px;}
.mtr-contact__rows .ic{flex:none; width:26px; height:26px; color:var(--ct-teal);}
.mtr-contact__rows .ic svg{width:100%; height:100%; display:block;}
.mtr-contact__rows a{
  color:#e9f4f7; text-decoration:none; line-height:1.5;
  font-size:clamp(15px,1.15vw,17px); transition:color .2s ease;
}
.mtr-contact__rows a:hover{color:var(--ct-teal)}
.mtr-contact__bullets{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px;}
.mtr-contact__bullets li{
  position:relative; padding-left:22px;
  font-size:clamp(14.5px,1.1vw,16px); line-height:1.55; color:rgba(233,244,247,.8);
}
.mtr-contact__bullets li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:7px; height:7px; border-radius:50%; background:var(--ct-teal);
}

/* responsive */
@media (max-width:900px){
  .mtr-contact__grid{grid-template-columns:1fr; gap:clamp(24px,4vw,36px);}
  .mtr-contact__aside{order:-1}
  .mtr-contact__h3b{margin-top:24px !important}
}
@media (max-width:520px){
  .mtr-contact__pair{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .mtr-contact__video{display:none}
  .mtr-contact__submit,.mtr-contact__drop,.mtr-contact__form input,.mtr-contact__form textarea{transition:none}
}

/* the template's team block — removed */
#main section[data-framer-name="Team Section"]{display:none !important;}

/* buttons whose links are still to come read as buttons, not links */
.mtr-hero__cta[role="button"],
.mtr-cta__btn-wrap a:not([href]),
a[data-mtr-nolink]{cursor:default;}

/* ============================================================
   Floating "call now" — slides in once the hero is behind you.
   ============================================================ */
.mtr-call{
  position:fixed; z-index:70; right:clamp(16px,2vw,28px); bottom:clamp(16px,2vw,28px);
  display:inline-flex; align-items:center; gap:14px;
  padding:10px 22px 10px 10px; border-radius:999px;
  background:#008490; color:#fff; text-decoration:none;
  font-family:"Montserrat",ui-sans-serif,system-ui,sans-serif;
  box-shadow:0 6px 18px rgba(0,74,82,.28), 0 18px 44px rgba(0,74,82,.30);
  opacity:0; visibility:hidden;
  transform:translateY(22px) scale(.94);
  transition:opacity .45s cubic-bezier(.22,.61,.24,1), transform .45s cubic-bezier(.22,.61,.24,1), visibility .45s;
}
.mtr-call.is-on{opacity:1; visibility:visible; transform:none;}
.mtr-call:hover{background:#0f6b73;}
.mtr-call:active{transform:scale(.97);}
.mtr-call__ic{
  position:relative; z-index:1; flex:none;
  width:44px; height:44px; border-radius:50%;
  background:#fff; color:#008490;
  display:grid; place-items:center;
}
.mtr-call__ic svg{width:21px; height:21px; animation:mtrRingShake 2.6s ease-in-out infinite;}
.mtr-call__txt{display:flex; flex-direction:column; line-height:1.2;}
.mtr-call__txt b{font-size:15px; font-weight:600; letter-spacing:-.01em;}
.mtr-call__txt i{font-style:normal; font-size:13px; opacity:.82;}
.mtr-call__pulse{
  position:absolute; left:10px; top:50%; width:44px; height:44px; margin-top:-22px;
  border-radius:50%; background:#fff; opacity:.5;
  animation:mtrCallPulse 2.4s cubic-bezier(.22,.61,.24,1) infinite;
}
@keyframes mtrCallPulse{
  0%{transform:scale(.8); opacity:.5}
  70%{transform:scale(1.9); opacity:0}
  100%{transform:scale(1.9); opacity:0}
}
@keyframes mtrRingShake{
  0%,72%,100%{transform:rotate(0)}
  76%{transform:rotate(-13deg)}
  80%{transform:rotate(11deg)}
  84%{transform:rotate(-9deg)}
  88%{transform:rotate(7deg)}
  92%{transform:rotate(-4deg)}
}
@media (max-width:620px){
  .mtr-call{right:12px; bottom:12px; gap:11px; padding:8px 18px 8px 8px;}
  .mtr-call__ic{width:40px; height:40px;}
  .mtr-call__pulse{left:8px; width:40px; height:40px; margin-top:-20px;}
  .mtr-call__txt b{font-size:14px}
  .mtr-call__txt i{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .mtr-call{transition:opacity .2s ease}
  .mtr-call__pulse,.mtr-call__ic svg{animation:none}
  .mtr-call__pulse{display:none}
}

/* emphasis inside the client quotes */
.mtr-hl{color:#3fc9dc !important; -webkit-text-fill-color:#3fc9dc !important;}

/* ============================================================
   The template's contact block, adapted: no stock portrait, and
   room for the fields the script adds to its form.
   ============================================================ */
section.framer-D5s31 [data-framer-name="Avatar"]{display:none !important;}
.mtr-xtra{margin-top:14px;}
.mtr-xtra__file{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  padding:20px; cursor:pointer; text-align:center;
  border:1px dashed #cddbe1; border-radius:8px; background:#fbfdfd;
  transition:border-color .2s ease, background .2s ease;
}
.mtr-xtra__file:hover,.mtr-xtra__file.is-over{border-color:#008490; background:#f2fbfc;}
.mtr-xtra__file span{font-size:14px; color:#5f7480;}
.mtr-xtra__file b{
  padding:9px 22px; border-radius:999px; background:#008490; color:#fff;
  font-size:14px; font-weight:600;
}
.mtr-xtra__file input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;}
.mtr-xtra__names{margin:8px 0 0; font-size:13px; color:#5f7480;}
.mtr-xtra__note{
  margin:0 0 14px; padding:11px 15px; border-radius:8px;
  background:#e9f5f3; color:#0f6b66; font-size:14px; line-height:1.5;
}
.mtr-xtra__note[data-tone="bad"]{background:#fdecec; color:#a3352f;}


/* ============================================================
   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}
}

/* A template marquee ("Title List") sits wider than the viewport and nothing
   clips it, which gave the page a sideways scroll on phones. `clip` contains
   it without creating a scroll container, so sticky/smooth scrolling is safe. */
#main{overflow-x:clip;}
@supports not (overflow-x:clip){ #main{overflow-x:hidden;} }


/* the contact heading's script word in brand teal (it carries the script
   face through a Framer style preset, not an inline font) */
#main section[data-framer-name^="CTA Section"] .framer-styles-preset-tzydfo{
  color:#3fc9dc !important;
  -webkit-text-fill-color:#3fc9dc !important;
  --framer-text-color:#3fc9dc !important;
}

/* ============================================================
   Metiri — About section (client feedback, Sep 2026)
   ============================================================ */

/* ── The template's placeholder co-ordinates (they point at Hanoi).
      Hidden rather than deleted: the text is re-rendered from a bundle. ── */
.framer-h0lqg3{display:none !important}

/* ── Watermark: the Metiri symbol, as it sits on the client's letterhead.
      Sits in the empty space under the paragraph, bleeding off the left edge.
      metiri-watermark.svg is the symbol pre-rotated, so no transform here. ── */
#about-us{position:relative; isolation:isolate; overflow:hidden;}
#about-us::before{
  content:"";
  position:absolute; z-index:-1;
  left:clamp(-190px,-7vw,-30px);
  top:clamp(90px,11vw,200px);
  width:clamp(420px,52vw,900px);
  aspect-ratio:2000.04/1199.13;
  background:url(../../images/metiri-watermark.svg) no-repeat center/contain;
  opacity:.09;
  pointer-events:none;
}
@media (max-width:809.98px){
  #about-us::before{width:clamp(320px,88vw,560px); opacity:.07;}
}

/* ── The paragraph reveals in one pass once the section is in view, rather
      than tracking the scroll position. The component rewrites colour and
      blur on every scroll frame, so hero.js tags each word .mtr-typed and
      these rules — being !important — outrank its inline styles. ── */
[data-code-component-plugin-id="84d4c1"] span.mtr-typed{
  filter:blur(0) !important;
  transition:color .34s ease-out, filter .34s ease-out !important;
}
[data-code-component-plugin-id="84d4c1"] span.mtr-typed:not([style*="Great Vibes"]){
  color:rgb(5,8,12) !important;
  -webkit-text-fill-color:rgb(5,8,12) !important;
}

/* ============================================================
   Metiri — home page trims (client feedback, Sep 2026)
   ============================================================ */

/* ── About: close the gap under the hero. ──
      The paragraph sat in a 768px scroll-track with the text sticky inside
      it, which is what made it unroll as you scrolled and left the white
      space underneath. Collapsing the track does both jobs at once. */
#about-us{padding-top:clamp(36px,4vw,56px) !important;}
.framer-zeexks{height:auto !important; min-height:0 !important;}
.framer-y1rmsj-container{position:static !important;}

/* ── About: blocks the client asked to drop, so "Meet the Team" rises to sit
      directly under the paragraph. ── */
.framer-2bjhas,   /* review score badges (4.9/5, 4.0/5) */
.framer-vyf5k5,   /* office photo + "Discuss your projects" card */
.framer-1g4gzi1{  /* "We're not just consultants — we're surveyors…" */
  display:none !important;
}

/* ── Projects: dropped at the client's request (too hard to keep current).
      "Why Metiri?" shares this section, so only the projects half goes. ── */
.framer-1sr2mlf{display:none !important}

/* ── Core Services: the template's headline goes; the eyebrow stays. ── */
.framer-if0k98{display:none !important}

/* ── Gallery: removed at the client's request. Hidden rather than deleted so
      the FAQ block, which anchors itself after #gallery, still lands. ── */
.mtr-gal{display:none !important}

/* ── "Where we work" now closes the page. It was built inside the CTA section,
      so its new wrapper carries the type stack it used to inherit. ── */
.mtr-map-tail{
  display:block; width:100%; box-sizing:border-box; background:#fff;
  font-family:"Montserrat",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ── Core Services: a plain vertical stack. ──
      The template ran a heading down each side of the cards, pinned in place,
      with a 650px "Empty Space" block giving them room to scroll past. The
      client asked for the effect to go, so the two headings, the spacer and
      the pinning all go with it; the cards simply stack. */
#main section.framer-3zy91u [data-framer-name="Step Content"] > [data-framer-name="Title List"],
#main section.framer-3zy91u [data-framer-name="Step Content"] > [data-framer-name="Title"],
#main section.framer-3zy91u [data-framer-name="Step List"] > [data-framer-name="Empty Space"]{
  display:none !important;
}
#main section.framer-3zy91u [data-framer-name="Pre Title Wrap"]{position:static !important;}
#main section.framer-3zy91u [data-framer-name="Step Content"]{justify-content:center !important;}

/* ── Core Services: three across on desktop, stacked on phones. ── */
@media (min-width:810px){
  #main section.framer-3zy91u [data-framer-name="Step Content"]{width:100% !important;}
  #main section.framer-3zy91u [data-framer-name="Step List"]{
    flex:1 1 auto !important; flex-direction:row !important;
    align-items:stretch !important; gap:24px !important;
    width:100% !important; max-width:none !important;
  }
  #main section.framer-3zy91u [data-framer-name="Step Item Wrap"]{
    flex:1 1 0 !important; width:auto !important; max-width:none !important; min-width:0 !important;
  }
  #main section.framer-3zy91u [data-framer-name="Step Item"]{height:100% !important;}
}

/* ============================================================
   Metiri — blog roundup ("Explore our Latest journal") in the
   site's own style: navy type, teal accent word, teal pill
   ============================================================ */
#main section[data-framer-name^="Blog Section"] h2,
#main section[data-framer-name^="Blog Section"] h3,
#main section[data-framer-name^="Blog Section"] h4{
  color:#12333c !important;
  -webkit-text-fill-color:#12333c !important;
  --framer-text-color:#12333c !important;
  font-weight:600 !important;
}
/* the accent word (template script preset), like "Project" above it */
#main section[data-framer-name^="Blog Section"] .framer-styles-preset-tzydfo{
  color:#008490 !important;
  -webkit-text-fill-color:#008490 !important;
  --framer-text-color:#008490 !important;
}
/* eyebrow star */
#main section[data-framer-name^="Blog Section"] [data-framer-name="Pre Title Wrap"] svg path{fill:#008490 !important;}
/* "View all blogs" pill */
#main section[data-framer-name^="Blog Section"] a[data-framer-name^="Button"],
#main section[data-framer-name^="Blog Section"] a[data-framer-name^="Button"]:hover{
  background-color:#008490 !important;
}

/* ============================================================
   Metiri — "Start your Project today" section: same heading
   weight as the rest of the site, brand buttons
   ============================================================ */
#main section[data-framer-name^="CTA Section"] h2{
  font-weight:600 !important;
}
/* Submit */
#main section[data-framer-name^="CTA Section"] .framer-16klr79-container button,
#main section[data-framer-name^="CTA Section"] .framer-16klr79-container button:hover{
  background-color:#008490 !important;
}
/* "Book a discovery call": teal arrow disc on the white pill */
#main section[data-framer-name^="CTA Section"] .framer-rnlx2d-container [data-framer-name="BG"]{
  background-color:#008490 !important;
}

/* ── About: team pill beside "Meet the Team" ── */
.mtr-teamrow{
  flex-direction:row !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  align-items:center !important;
  gap:16px !important;
}
.mtr-teampill{
  display:inline-flex; align-items:center; gap:14px;
  padding:7px 22px 7px 8px;
  background:#fff; border-radius:999px;
  box-shadow:0 1px 2px rgba(18,51,60,.06), 0 6px 18px rgba(18,51,60,.07);
  color:#12333c; text-decoration:none;
  transition:box-shadow .2s ease, transform .2s ease;
}
.mtr-teampill:hover{box-shadow:0 2px 4px rgba(18,51,60,.08), 0 10px 26px rgba(18,51,60,.12); transform:translateY(-1px);}
.mtr-teampill__faces{display:block; height:40px; width:auto; aspect-ratio:1188/240;}
.mtr-teampill__txt{display:flex; flex-direction:column; line-height:1.25; text-align:left;}
.mtr-teampill__t{font-size:16px; font-weight:600; color:#12333c;}
.mtr-teampill__n{font-size:14px; font-weight:500; color:#5b6b72;}
@media (max-width:480px){
  .mtr-teampill{gap:10px; padding:6px 16px 6px 6px;}
  .mtr-teampill__faces{height:28px;}
  .mtr-teampill__t{font-size:14px; white-space:nowrap;}
  .mtr-teampill__n{font-size:13px;}
}

/* ── Why Metiri: "Get in Touch" (the hero button, duplicated) ── */
.mtr-why-slot{
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:clamp(28px,3vw,44px) !important;
}
.mtr-why-slot > :not(.mtr-why-cta){
  align-self:stretch !important;
  width:auto !important;
  max-width:100% !important;
  flex:0 0 auto !important;
}
.mtr-why-cta{--mtr-accent:#26c6da; --mtr-ease:cubic-bezier(.22,.61,.24,1); font-family:"Montserrat",ui-sans-serif,system-ui,sans-serif;}

/* ── "Start your Project today" enquiry section: removed from the home page
      (client, Sep 2026) — the form lives on the Contact page ── */
#main section[data-framer-name^="CTA Section"]{display:none !important;}

/* ============================================================
   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;}

/* ── the template's blog roundup gives way to the Metiri one (#mtr-blog, blog.css) ── */
#main section[data-framer-name^="Blog Section"]{display:none !important;}

/* ── "Our Core Services" cards are links (hero.js) ── */
#main section[data-framer-name^="Step Section"] [data-framer-name="Step Item Wrap"]{
  cursor:pointer; transition:transform .3s ease, box-shadow .3s ease; border-radius:20px;
}
#main section[data-framer-name^="Step Section"] [data-framer-name="Step Item Wrap"]:hover{
  transform:translateY(-4px); box-shadow:0 22px 44px -28px rgba(18,51,60,.35);
}
#main section[data-framer-name^="Step Section"] [data-framer-name="Step Item Wrap"]:focus-visible{
  outline:2px solid #3fc9dc; outline-offset:4px;
}

/* ── 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;}
}