/* ============================================================
   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 ─────────────────────────────────────── */
.mtr-es__top{position:relative; padding:clamp(72px,7vw,120px) 0 clamp(56px,5.4vw,90px);}
.mtr-es__photo{                             /* landscape on the right, dissolving on a curve */
  position:absolute; z-index:0; top:0; right:0; pointer-events:none;
  width:60%; height:min(92%,860px);
  -webkit-mask-image:radial-gradient(135% 105% at 100% 22%, #000 52%, rgba(0,0,0,.55) 64%, transparent 76%);
          mask-image:radial-gradient(135% 105% at 100% 22%, #000 52%, rgba(0,0,0,.55) 64%, transparent 76%);
}
.mtr-es__photo img{width:100%; height:100%; object-fit:cover; object-position:60% 40%; display:block;}
.mtr-es__photo::after{                      /* contour lines over the fade */
  content:""; position:absolute; left:-4%; top:10%; width:70%; aspect-ratio:1;
  background:url(../../images/metiri-contours.svg) no-repeat center/contain; opacity:.35;
}
.mtr-es__top h2{font-size:clamp(46px,5.6vw,84px); line-height:1.02; max-width:9ch;}
.mtr-es__intro{margin:0 0 clamp(26px,2.4vw,34px); max-width:54ch; font-size:clamp(15px,1.12vw,17px); line-height:1.6; color:var(--es-body);}
.mtr-es__rule{display:block; width:56px; height:2px; background:var(--es-teal); margin:0 0 clamp(34px,3vw,46px);}

.mtr-es__grid{
  display:grid; column-gap:0; row-gap:clamp(36px,3.4vw,52px);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr) minmax(0,.95fr) minmax(0,.85fr);
  grid-template-areas:
    "storm roads . ."
    "storm earth water card";
  align-items:start;
}
.mtr-es__grp{padding:0 clamp(18px,2vw,32px);}
.mtr-es__grp--storm{grid-area:storm; padding-left:0;}
.mtr-es__grp--roads{grid-area:roads; border-left:1px solid var(--es-line);}
.mtr-es__grp--earth{grid-area:earth; border-left:1px solid var(--es-line);}
.mtr-es__grp--water{grid-area:water; border-left:1px solid var(--es-line);}
.mtr-es__head{display:flex; align-items:center; gap:clamp(14px,1.4vw,22px); margin-bottom:clamp(16px,1.5vw,22px);}
.mtr-es__ic{display:grid; place-items:center; flex:none; width:clamp(50px,4vw,58px); 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(17px,1.4vw,20px); line-height:1.2; 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:22px; margin:0 0 7px; font-size:clamp(14px,1.02vw,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);}
.mtr-es__grp--storm .mtr-es__more{margin-top:clamp(26px,2.4vw,36px);}

.mtr-es__card{                              /* frosted note over the photo */
  grid-area:card; align-self:end; margin-left:clamp(12px,2vw,36px);
  padding:clamp(22px,2vw,32px); border-radius:18px;
  background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.8);
  -webkit-backdrop-filter:blur(14px) saturate(130%); backdrop-filter:blur(14px) saturate(130%);
  box-shadow:0 22px 44px -30px rgba(18,51,60,.35);
}
.mtr-es__card small{display:block; font-size:10.5px; line-height:2; font-weight:500; letter-spacing:.34em; color:#71858c;}
.mtr-es__card i{display:block; width:44px; height:2px; background:var(--es-teal); margin:18px 0 20px;}
.mtr-es__card p{margin:0; font-size:clamp(19px,1.6vw,24px); line-height:1.25; font-weight:600; letter-spacing:-.02em; color:var(--es-navy);}

/* ── 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 ── */
@media (max-width:1180px){
  .mtr-es__photo{width:70%; height:640px;}
  .mtr-es__grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"storm roads" "storm earth" "water card";
  }
  .mtr-es__grp--water{border-left:0; padding-left:0;}
  .mtr-es__card{margin-left:clamp(18px,2vw,32px);}
}
@media (max-width:1024px){
  .mtr-es__hw{grid-template-columns:1fr;}
  .mtr-es__hwmedia{border-radius:0; min-height:clamp(300px,62vw,460px);}
}
/* ── phone ── */
@media (max-width:640px){
  .mtr-es__top{padding-top:0;}
  .mtr-es__photo{position:relative; width:auto; height:clamp(260px,72vw,340px); margin-bottom:28px;
    -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%); mask-image:linear-gradient(180deg,#000 62%,transparent 100%);}
  .mtr-es__photo::after{display:none;}
  .mtr-es__top h2{max-width:none;}
  .mtr-es__grid{grid-template-columns:1fr; grid-template-areas:"storm" "roads" "earth" "water" "card";}
  .mtr-es__grp,.mtr-es__grp--roads,.mtr-es__grp--earth,.mtr-es__grp--water{border-left:0; padding:0;}
  .mtr-es__grp + .mtr-es__grp{padding-top:28px; border-top:1px solid var(--es-line);}
  .mtr-es__card{margin-left:0;}
  .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{transition:none;}
}