/* ============================================================
   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{
  --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:"Plus Jakarta Sans", 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 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:"Geist","Geist Placeholder",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:"Geist","Geist Placeholder",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:"Geist","Geist Placeholder",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:"Geist","Geist Placeholder",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:"Geist","Geist Placeholder","Plus Jakarta Sans",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:"Geist","Geist Placeholder","Plus Jakarta Sans",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}
}