/* ============================================================
   Engineering page — "Engineering Services" + Hunter Water
   Built to the client's mockup. Loaded on /engineering/ only;
   reuses the page tokens (--pg-shell). Site standard: star label,
   600-weight navy headings. Hover motion only.
   ============================================================ */
.mtr-es{
  --es-navy:#12333c;
  --es-body:#53656d;
  --es-teal:#008490;
  --es-tile:#e4f3f5;
  --es-line:#dce7e9;
  --es-bg:#f5f9fa;
  position:relative; isolation:isolate; overflow:hidden; overflow:clip;
  background:var(--es-bg); color:var(--es-navy);
  font-family:"Montserrat",ui-sans-serif,system-ui,sans-serif;
}
.mtr-es *,.mtr-es *::before,.mtr-es *::after{box-sizing:border-box;}
.mtr-es__in{position:relative; z-index:1; max-width:1440px; margin:0 auto; padding-inline:clamp(20px,3.8vw,56px);}

/* shared type */
.mtr-es__eyebrow{display:flex; align-items:center; gap:8px; margin:0 0 18px; font-size:15px; font-weight:500; letter-spacing:-.01em; color:#05080c;}
.mtr-es__eyebrow svg{width:14px; height:14px; color:var(--es-teal); flex:none;}
.mtr-page .mtr-es h2{margin:0 0 clamp(18px,1.8vw,26px); font-weight:600 !important; letter-spacing:-.04em; color:var(--es-navy);}
.mtr-es__more{
  display:inline-flex; align-items:center; gap:18px; font-size:16px; font-weight:600;
  color:var(--es-teal); text-decoration:none;
}
.mtr-es__more span{
  display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
  border:1.5px solid var(--es-teal); transition:transform .3s ease, background .3s ease, color .3s ease;
}
.mtr-es__more svg{width:16px; height:16px;}
.mtr-es__more:hover span{transform:translateX(4px); background:var(--es-teal); color:#fff;}

/* ── part 1: services — title left, photo in the top-right corner,
      then the four groups in order, side by side ── */
.mtr-es__top{position:relative; padding:clamp(72px,7vw,120px) 0 clamp(64px,6vw,100px);}
.mtr-es__lead{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); align-items:center;
  gap:clamp(28px,4vw,72px); margin-bottom:clamp(44px,4.4vw,68px);
}
.mtr-es__top h2{font-size:clamp(46px,5.6vw,84px); line-height:1.02; max-width:9ch;}
.mtr-es__rule{display:block; width:56px; height:2px; background:var(--es-teal); margin:0;}
.mtr-es__photo{
  justify-self:end; width:100%; max-width:600px; aspect-ratio:16/10;
  border-radius:22px; overflow:hidden; background:#e6eef0;
  box-shadow:0 30px 60px -40px rgba(18,51,60,.45);
}
.mtr-es__photo img{width:100%; height:100%; object-fit:cover; object-position:55% 60%; display:block; transition:transform 1s cubic-bezier(.2,.7,.2,1);}
.mtr-es__photo:hover img{transform:scale(1.03);}

.mtr-es__grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:start;
  border-top:1px solid var(--es-line); padding-top:clamp(34px,3.2vw,48px);
}
.mtr-es__grp{padding:0 clamp(16px,1.8vw,30px); border-left:1px solid var(--es-line); min-height:100%;}
.mtr-es__grp:first-child{padding-left:0; border-left:0;}
.mtr-es__grp:last-child{padding-right:0;}
.mtr-es__head{display:flex; align-items:center; gap:14px; min-height:clamp(50px,4vw,58px); margin-bottom:clamp(18px,1.6vw,24px);}
.mtr-es__ic{display:grid; place-items:center; flex:none; width:clamp(46px,3.6vw,54px); aspect-ratio:1; border-radius:12px; background:var(--es-tile); color:var(--es-teal);}
.mtr-es__ic svg{width:48%; height:48%;}
.mtr-es h3{margin:0; font-size:clamp(16px,1.3vw,19px); line-height:1.25; letter-spacing:-.02em; font-weight:600; color:var(--es-navy);}
.mtr-es__list{margin:0; padding:0; list-style:none;}
.mtr-es__list li{position:relative; padding-left:20px; margin:0 0 9px; font-size:clamp(14px,1vw,15.5px); line-height:1.45; color:var(--es-body);}
.mtr-es__list li::before{content:""; position:absolute; left:2px; top:.58em; width:6px; height:6px; border-radius:50%; background:var(--es-teal);}

/* ── part 2: Hunter Water ─────────────────────────────────── */
.mtr-es__hw{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); position:relative; background:#f7fbfc;}
.mtr-es__hwmedia{position:relative; overflow:hidden; min-height:clamp(420px,40vw,600px); border-radius:0 26px 0 0;}
.mtr-es__hwmedia img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1s cubic-bezier(.2,.7,.2,1);}
.mtr-es__hwmedia:hover img{transform:scale(1.03);}
.mtr-es__hwmedia::after{content:""; position:absolute; inset:0; background:linear-gradient(20deg,rgba(5,16,22,.78) 0%,rgba(5,16,22,.25) 38%,rgba(5,16,22,0) 60%);}
.mtr-es__hwcap{
  position:absolute; z-index:1; left:clamp(22px,3.4vw,50px); bottom:clamp(26px,3.4vw,48px); margin:0;
  font-size:11.5px; line-height:2; font-weight:500; letter-spacing:.38em; color:#fff;
}
.mtr-es__hwcap::before{content:""; display:block; width:44px; height:2px; background:#fff; margin-bottom:18px;}
.mtr-es__hwbody{position:relative; overflow:hidden; padding:clamp(48px,5vw,84px) clamp(22px,4.4vw,72px) clamp(40px,4vw,64px);}
.mtr-es__hwbody::before{
  content:""; position:absolute; z-index:0; right:-18%; top:-22%; width:62%; aspect-ratio:1; pointer-events:none;
  background:url(../../images/metiri-contours.svg) no-repeat center/contain; opacity:.16;
}
.mtr-es__hwbody > *{position:relative; z-index:1;}
.mtr-es__hw h2{font-size:clamp(32px,3.4vw,50px); line-height:1.08; max-width:18ch;}
.mtr-es__tags{margin:0 0 clamp(18px,1.6vw,24px); font-size:clamp(14px,1.1vw,16.5px); letter-spacing:.04em; color:#5f7178;}
.mtr-es__hwbody > p:not(.mtr-es__eyebrow):not(.mtr-es__tags):not(.mtr-es__sig){margin:0 0 16px; max-width:66ch; font-size:clamp(14.5px,1.05vw,16px); line-height:1.65; color:var(--es-body);}
.mtr-es__hwfoot{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-top:clamp(26px,2.6vw,40px);}
.mtr-es__sig{margin:0; display:flex; align-items:center; gap:18px; font-size:10.5px; line-height:2; letter-spacing:.34em; color:#71858c; text-align:right;}
.mtr-es__sig::after{content:""; width:32px; height:2px; background:var(--es-teal); flex:none;}

/* ── tablet: groups two by two ── */
@media (max-width:1180px){
  .mtr-es__grid{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:clamp(34px,4vw,48px);}
  .mtr-es__grp:nth-child(odd){padding-left:0; border-left:0;}
  .mtr-es__grp:nth-child(even){padding-right:0;}
  .mtr-es__grp:nth-child(n+3){padding-top:clamp(30px,3.6vw,42px); border-top:1px solid var(--es-line);}
}
@media (max-width:1024px){
  .mtr-es__hw{grid-template-columns:1fr;}
  .mtr-es__hwmedia{border-radius:0; min-height:clamp(300px,62vw,460px);}
}
/* ── phone: title, photo, then each group in turn ── */
@media (max-width:760px){
  .mtr-es__lead{grid-template-columns:1fr;}
  .mtr-es__photo{justify-self:stretch; max-width:none; border-radius:18px;}
  .mtr-es__top h2{max-width:none;}
}
@media (max-width:640px){
  .mtr-es__top{padding-top:clamp(48px,12vw,64px);}
  .mtr-es__grid{grid-template-columns:1fr; border-top:0; padding-top:0;}
  .mtr-es__grp,.mtr-es__grp:nth-child(n){padding:0; border-left:0; border-top:0;}
  .mtr-es__grp + .mtr-es__grp{padding-top:28px; margin-top:28px; border-top:1px solid var(--es-line);}
  .mtr-es__hwfoot{flex-direction:column; align-items:flex-start;}
  .mtr-es__sig{text-align:left;}
}
@media (prefers-reduced-motion:reduce){
  .mtr-es__more span,.mtr-es__hwmedia img,.mtr-es__photo img{transition:none;}
}

/* Hunter Water accreditation badge, moved down from the page hero into this
   section; on the light ground it takes the section's own colours */
.mtr-es .mtr-badge--light{
  margin-top:0; background:#fff; border-color:var(--es-line);
  -webkit-backdrop-filter:none; backdrop-filter:none;
  box-shadow:0 14px 30px -24px rgba(18,51,60,.35);
}
.mtr-es .mtr-badge--light span{color:var(--es-navy);}