/* Metiri "Ready to get started?" block for pages outside the home page (copied
   from hero.css, which only the Metiri-built pages load). Keep in step with it. */
/* ============================================================
   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}
}