/* ============================================================
   /services/ — the template's About Section ("Turning Vision into
   reality" + one square story card) replaced by the three Metiri
   services, each in that square card. Built on the template's
   measurements: #f5f5f5 band, 150px padding, label left / heading
   right, 16px-radius photo cards with a dark foot.
   ============================================================ */
#main section[data-framer-name="About Section"]{display:none !important;}

.mtr-s3{
  position:relative; z-index:2;          /* rides over the sticky gallery above, as the template section did */
  width:100%; align-self:stretch;
  background:#f5f5f5; color:#05080c;
  padding:clamp(80px,10.4vw,150px) 0;
  font-family:"Montserrat",ui-sans-serif,system-ui,sans-serif;
}
.mtr-s3 *,.mtr-s3 *::before,.mtr-s3 *::after{box-sizing:border-box;}
.mtr-s3__in{max-width:1440px; margin:0 auto; padding-inline:clamp(20px,3.8vw,54px);}

.mtr-s3__head{
  display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1fr); gap:24px;
  margin-bottom:clamp(40px,4.2vw,60px);
}
.mtr-s3__eyebrow{
  display:flex; align-items:center; gap:8px; margin:0;
  font-size:16px; font-weight:500; letter-spacing:-.02em; color:#05080c;
}
.mtr-s3__eyebrow svg{width:14px; height:14px; color:#008490; flex:none;}
.mtr-s3 h2{
  margin:0 0 clamp(18px,1.8vw,26px); font-size:clamp(44px,5.8vw,84px); line-height:1.1;
  letter-spacing:-.04em; font-weight:600; color:#12333c;
}
.mtr-s3 h2 em{font-style:normal; color:#008490;}
.mtr-s3__lead{
  margin:0; max-width:60ch; font-size:clamp(15px,1.2vw,17px); line-height:1.7; color:#5b5b5b;
}

.mtr-s3__grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.6vw,24px);}
.mtr-s3__card{
  position:relative; display:block; overflow:hidden; isolation:isolate;
  aspect-ratio:422/447; border-radius:16px; text-decoration:none; color:#fff;
  background:#12333c;
}
.mtr-s3__card img{
  position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1s cubic-bezier(.2,.7,.2,1);
}
.mtr-s3__card::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg,rgba(5,8,12,.94) 0%,rgba(5,8,12,.84) 38%,rgba(5,8,12,.35) 68%,rgba(5,8,12,0) 88%);
}
.mtr-s3__card:hover img{transform:scale(1.05);}
.mtr-s3__cap{position:absolute; z-index:2; left:clamp(22px,3.5vw,50px); right:clamp(22px,3.5vw,50px); bottom:clamp(24px,3.2vw,46px);}
.mtr-s3__cap h3{margin:0 0 10px; font-size:clamp(20px,1.7vw,24px); font-weight:600; letter-spacing:-.02em; line-height:1.2; color:#fff;}
.mtr-s3__cap p{margin:0 0 18px; font-size:clamp(14px,1.1vw,16px); line-height:1.5; color:rgba(255,255,255,.82);}
.mtr-s3__more{
  display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:600; color:#3fc9dc;
}
.mtr-s3__more svg{width:16px; height:16px; transition:transform .3s ease;}
.mtr-s3__card:hover .mtr-s3__more svg{transform:translateX(4px);}

.mtr-s3__foot{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  margin-top:clamp(36px,3.6vw,52px); padding-top:clamp(28px,2.6vw,36px);
  border-top:1px solid rgba(5,8,12,.1);
}
.mtr-s3__foot p{margin:0; max-width:52ch; font-size:clamp(16px,1.35vw,20px); font-weight:500; line-height:1.45; color:#12333c;}
.mtr-s3__btn{
  display:inline-flex; align-items:center; gap:14px; padding:6px 6px 6px 24px;
  border-radius:100px; background:#008490; color:#fff; text-decoration:none;
  font-size:16px; font-weight:500; transition:background .25s ease;
}
.mtr-s3__btn span{
  display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
  background:#fff; color:#05080c; transition:transform .3s ease;
}
.mtr-s3__btn span svg{width:18px; height:18px;}
.mtr-s3__btn:hover{background:#0f6b73;}
.mtr-s3__btn:hover span{transform:translateX(3px);}

@media (max-width:1024px){
  .mtr-s3__head{grid-template-columns:1fr; gap:16px;}
  .mtr-s3__grid{grid-template-columns:1fr 1fr;}
  .mtr-s3__card:last-child{grid-column:span 2; aspect-ratio:16/8;}
}
@media (max-width:640px){
  .mtr-s3__grid{grid-template-columns:1fr;}
  .mtr-s3__card, .mtr-s3__card:last-child{grid-column:auto; aspect-ratio:4/4.3;}
  .mtr-s3__foot{flex-direction:column; align-items:flex-start;}
}
@media (prefers-reduced-motion:reduce){
  .mtr-s3__card img,.mtr-s3__more svg,.mtr-s3__btn span{transition:none;}
}

/* template sections removed from /services/ (client, Sep 2026):
   awards, client logos, full-width photo, template team, enquiry form */
#main section[data-framer-name="Award Section"],
#main section[data-framer-name="Client Section"],
#main section[data-framer-name="Image Section"],
#main section[data-framer-name="Team Section"],
#main section[data-framer-name^="CTA Section"]{display:none !important;}

/* ============================================================
   /services/ banner (replaces the template's "We craft Brands…"),
   with the Metiri site video looping on the right
   ============================================================ */
#main section[data-framer-name="Hero Section"],
#main section[data-framer-name="FAQs Section"]{display:none !important;}

.mtr-svhero{
  position:relative; z-index:2; width:100%; align-self:stretch; overflow:hidden;
  background:#fff; color:#12333c;
  padding:clamp(130px,12vw,190px) 0 clamp(64px,7vw,110px);
  font-family:"Montserrat",ui-sans-serif,system-ui,sans-serif;
}
.mtr-svhero *,.mtr-svhero *::before,.mtr-svhero *::after{box-sizing:border-box;}
.mtr-svhero::before{                       /* the Metiri mark, flush left, as on the other pages */
  content:""; position:absolute; z-index:0; pointer-events:none;
  left:calc(clamp(230px,24vw,400px) * -0.0747); top:clamp(40px,6vw,96px);
  width:clamp(230px,24vw,400px); aspect-ratio:750/1064;
  background:url(../../images/metiri-bg-mark.svg) no-repeat center/contain;
}
.mtr-svhero__in{
  position:relative; z-index:1; max-width:1440px; margin:0 auto; padding-inline:clamp(20px,3.8vw,54px);
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(32px,4vw,72px); align-items:end;
}
.mtr-svhero__eyebrow{
  display:flex; align-items:center; gap:8px; margin:0 0 18px;
  font-size:15px; font-weight:500; letter-spacing:-.01em; color:#05080c;
}
.mtr-svhero__eyebrow svg{width:14px; height:14px; color:#008490; flex:none;}
.mtr-svhero h1{
  margin:0 0 clamp(20px,2vw,30px); max-width:13ch;
  font-size:clamp(44px,6.2vw,96px); line-height:1.04; letter-spacing:-.045em; font-weight:600; color:#12333c;
}
.mtr-svhero h1 em{font-style:normal; color:#008490;}
.mtr-svhero__lead{margin:0 0 clamp(24px,2.4vw,34px); max-width:46ch; font-size:clamp(16px,1.3vw,19px); line-height:1.6; color:#53656d;}
.mtr-svhero__video{
  position:relative; overflow:hidden; border-radius:16px; aspect-ratio:16/10; background:#0b1d2a;
  box-shadow:0 24px 50px -30px rgba(18,51,60,.45);
}
.mtr-svhero__video iframe{                 /* cover the frame; no player chrome to click */
  position:absolute; left:50%; top:50%; width:100%; height:100%; border:0;
  transform:translate(-50%,-50%) scale(1.55); pointer-events:none;
}
@media (max-width:1024px){
  .mtr-svhero__in{grid-template-columns:1fr;}
  .mtr-svhero h1{max-width:none;}
}

/* FAQ label in the site's standard (star + sentence case) */
.mtr-faq__eyebrow--star{display:inline-flex !important; align-items:center; gap:8px; letter-spacing:-.01em !important; text-transform:none !important; font-size:15px !important; color:#05080c !important;}
.mtr-faq__eyebrow--star svg{width:14px; height:14px; color:#008490; flex:none;}
#mtr-svfaq{position:relative; z-index:2; width:100%; align-self:stretch;}

/* "Ready to get started?" after the gallery: rides over the sticky gallery like the other blocks */
#mtr-svcta{position:relative; z-index:2; width:100%; align-self:stretch;}

/* the template's photo gallery — removed from /services/ (Sep 2026).
   Hidden, not deleted: "Ready to get started?" still anchors after it (svc3.js). */
#main section[data-framer-name="Gallery Section"]{display:none !important;}

/* room for the services sub-bar under the header */
@media (min-width:961px){ body:has(.mtr-nav--sub) .mtr-svhero{padding-top:clamp(180px,15vw,230px);} }