/* ============================================================
   Metiri — service pages (Surveying, Engineering, Subdivision …)
   Hand-authored: these pages are built from the client's Word
   document, so the markup is ours and nothing re-renders it.
   Header, footer and call button are shared with the home page
   through hero.css / hero.js.
   ============================================================ */
.mtr-page{
  --pg-ink:#0b1420;
  --pg-body:#53656d;
  --pg-teal:#008490;
  --pg-teal-lt:#2ec4c9;
  --pg-line:rgba(11,20,32,.11);
  --pg-shell:clamp(24px,4.4vw,80px);
  --pg-font:"Montserrat",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  font-family:var(--pg-font);
  color:var(--pg-ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  box-sizing:border-box;
}
.mtr-page *,.mtr-page *::before,.mtr-page *::after{box-sizing:border-box}
.mtr-page__in{width:100%; max-width:1320px; margin:0 auto; padding-inline:var(--pg-shell);}

/* small teal rule + label used at the top of every block */
.mtr-eyebrow{
  display:flex; align-items:center; gap:14px;
  margin:0 0 16px; font-size:12.5px; font-weight:500;
  letter-spacing:.17em; text-transform:uppercase; color:var(--pg-teal);
}
.mtr-eyebrow i{display:block; width:36px; height:1px; background:currentColor; flex:none;}

/* ── banner ───────────────────────────────────────────────── */
.mtr-pghero{
  position:relative; isolation:isolate; overflow:hidden;
  background:#0b1420; color:#fff;
  padding:clamp(150px,16vw,232px) 0 clamp(60px,8vw,104px);
}
.mtr-pghero__bg{position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center;}
.mtr-pghero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg,rgba(6,14,20,.96) 0%,rgba(6,14,20,.88) 34%,rgba(6,14,20,.34) 78%,rgba(6,14,20,.12) 100%);
}
.mtr-pghero .mtr-eyebrow{color:rgba(255,255,255,.82);}
.mtr-pghero .mtr-eyebrow i{background:var(--pg-teal-lt);}
.mtr-pghero h1{
  margin:0; font-size:clamp(40px,6vw,76px); line-height:1.02;
  letter-spacing:-.03em; font-weight:600;
}
.mtr-pghero p{
  margin:24px 0 0; max-width:56ch;
  font-size:clamp(15px,1.15vw,17px); line-height:1.72; color:rgba(255,255,255,.80);
}

/* ── services ─────────────────────────────────────────────── */
.mtr-pgsec{padding:clamp(60px,7.5vw,112px) 0;}
.mtr-pgsec--tint{background:#f5f7f7;}

.mtr-svc-head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:24px; margin:0 0 clamp(28px,3.4vw,50px);
}
.mtr-svc-head h2{
  margin:0; font-size:clamp(28px,3.4vw,44px); line-height:1.1;
  letter-spacing:-.025em; font-weight:600;
}
.mtr-svc-head__note{
  margin:0; max-width:34ch; font-size:14.5px; line-height:1.6; color:var(--pg-body);
  padding-top:6px; border-top:1px solid var(--pg-teal);
}

.mtr-svc-grid{
  display:grid; gap:clamp(18px,1.9vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
  align-items:stretch;
}
.mtr-svc-card{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--pg-line); border-radius:16px;
  padding:clamp(24px,2.3vw,32px);
  transition:box-shadow .3s ease, transform .3s ease;
}
.mtr-svc-card:hover{box-shadow:0 18px 44px rgba(11,20,32,.09); transform:translateY(-3px);}
.mtr-svc-card__ic{
  display:grid; place-items:center; width:52px; height:52px; margin:0 0 20px;
  border-radius:13px; background:rgba(0,132,144,.09); color:var(--pg-teal);
}
.mtr-svc-card__ic svg{width:26px; height:26px;}
.mtr-svc-card h3{
  margin:0 0 16px; font-size:17.5px; font-weight:600; line-height:1.28;
  letter-spacing:-.012em;
}
.mtr-svc-card ul{margin:0 0 22px; padding:0; list-style:none; display:grid; gap:10px;}
.mtr-svc-card li{
  position:relative; padding-left:19px;
  font-size:14.5px; line-height:1.5; color:var(--pg-body);
}
.mtr-svc-card li::before{
  content:""; position:absolute; left:0; top:.58em;
  width:6px; height:6px; border-radius:50%; background:var(--pg-teal); opacity:.9;
}
.mtr-svc-card__more{
  margin-top:auto; display:inline-flex; align-items:center; gap:11px;
  font-size:14.5px; font-weight:500; color:var(--pg-teal); text-decoration:none;
}
.mtr-svc-card__more span{
  display:grid; place-items:center; width:29px; height:29px; flex:none;
  border:1px solid rgba(0,132,144,.38); border-radius:50%;
  transition:background .25s ease, border-color .25s ease;
}
.mtr-svc-card__more svg{width:13px; height:13px;}
.mtr-svc-card:hover .mtr-svc-card__more span{background:rgba(0,132,144,.11); border-color:var(--pg-teal);}

/* ── an accredited / highlight block (Hunter Water, etc.) ─── */
.mtr-accred{
  margin-top:clamp(26px,3vw,40px);
  border:1px solid var(--pg-line); border-left:3px solid var(--pg-teal);
  border-radius:16px; background:#fff;
  padding:clamp(26px,3vw,40px);
}
.mtr-accred h3{margin:0 0 10px; font-size:clamp(20px,2vw,26px); font-weight:600; letter-spacing:-.02em;}
.mtr-accred__tags{
  margin:0 0 18px; font-size:13.5px; letter-spacing:.06em;
  color:var(--pg-teal); font-weight:500;
}
.mtr-accred p{margin:0 0 14px; max-width:92ch; color:var(--pg-body); line-height:1.72; font-size:15.5px;}
.mtr-accred p:last-child{margin-bottom:0;}

/* ── why Metiri ───────────────────────────────────────────── */
.mtr-why{
  display:grid; align-items:stretch;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
}
.mtr-why__art{
  position:relative; overflow:hidden; min-height:clamp(340px,42vw,560px);
  background:#0b1420;
}
.mtr-why__art img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
/* the Metiri chevron, laid over the photo as a translucent teal wash */
.mtr-why__art::after{
  content:""; position:absolute; inset:0;
  background:url(../../images/metiri-watermark.svg) no-repeat right center/auto 140%;
  opacity:.42; mix-blend-mode:screen; pointer-events:none;
}
.mtr-why__stamp{
  position:absolute; z-index:2; left:clamp(22px,3vw,40px); top:clamp(26px,3.4vw,48px);
  margin:0; max-width:11ch;
  font-size:12.5px; letter-spacing:.2em; line-height:2; text-transform:uppercase;
  color:#fff; text-shadow:0 1px 14px rgba(0,0,0,.45);
}
.mtr-why__stamp::before{
  content:""; display:block; width:34px; height:1px; margin-bottom:16px; background:var(--pg-teal-lt);
}
.mtr-why__body{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(40px,5vw,84px) var(--pg-shell);
}
.mtr-why__body h2{
  margin:0 0 clamp(22px,2.6vw,34px);
  font-size:clamp(26px,3.2vw,42px); line-height:1.12; letter-spacing:-.025em; font-weight:600;
  max-width:19ch;
}
.mtr-why__list{display:grid; gap:15px; margin:0; padding:0; list-style:none;}
.mtr-why__list li{
  position:relative; padding-left:42px;
  font-size:clamp(15px,1.12vw,16.5px); line-height:1.6; color:var(--pg-ink);
}
.mtr-why__list li::before{
  content:""; position:absolute; left:0; top:-.05em;
  width:27px; height:27px; border-radius:50%; background:rgba(0,132,144,.11);
}
.mtr-why__list li::after{
  content:""; position:absolute; left:9px; top:.44em;
  width:9px; height:5px; border-left:2px solid var(--pg-teal); border-bottom:2px solid var(--pg-teal);
  transform:rotate(-45deg);
}

/* ── let's talk ───────────────────────────────────────────── */
.mtr-talk{
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(104deg,#05343a 0%,#0a5a61 52%,#067782 100%);
  color:#fff; padding:clamp(48px,5.6vw,78px) 0;
}
/* slow drifting contour lines — motion, but nothing that distracts */
.mtr-talk__motion{
  position:absolute; inset:-25% -10%; z-index:-1; opacity:.30;
  background-repeat:repeat-x; background-position:0 50%; background-size:1200px 100%;
  background-image:
    radial-gradient(60% 120% at 12% 50%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(48% 110% at 52% 42%, rgba(46,196,201,.28) 0%, rgba(46,196,201,0) 62%),
    radial-gradient(52% 120% at 88% 58%, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 62%);
  animation:mtr-drift 26s linear infinite;
  will-change:transform;
}
.mtr-talk__rings{
  position:absolute; z-index:-1; right:-140px; top:50%; translate:0 -50%;
  width:620px; height:620px; opacity:.20; pointer-events:none;
  background:
    radial-gradient(circle, transparent 0 28%, rgba(255,255,255,.5) 28% 28.4%, transparent 28.4%),
    radial-gradient(circle, transparent 0 42%, rgba(255,255,255,.4) 42% 42.3%, transparent 42.3%),
    radial-gradient(circle, transparent 0 56%, rgba(255,255,255,.3) 56% 56.3%, transparent 56.3%);
  animation:mtr-pulse 9s ease-in-out infinite;
}
@keyframes mtr-drift{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-1200px,0,0)}
}
@keyframes mtr-pulse{
  0%,100%{transform:scale(1); opacity:.20}
  50%{transform:scale(1.07); opacity:.30}
}
@media (prefers-reduced-motion:reduce){
  .mtr-talk__motion,.mtr-talk__rings{animation:none}
}
.mtr-talk__in{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:26px;
}
.mtr-talk .mtr-eyebrow{color:rgba(255,255,255,.85);}
.mtr-talk .mtr-eyebrow i{background:var(--pg-teal-lt);}
.mtr-talk h2{
  margin:0; max-width:24ch;
  font-size:clamp(23px,2.7vw,36px); line-height:1.22; letter-spacing:-.02em; font-weight:600;
}
.mtr-talk__btn{
  display:inline-flex; align-items:center; gap:13px; flex:none;
  padding:14px 15px 14px 26px; border-radius:999px; text-decoration:none;
  background:var(--pg-teal-lt); color:#04333a; font-size:15.5px; font-weight:600;
  transition:background .25s ease, transform .25s ease;
}
.mtr-talk__btn:hover{background:#5bd8db; transform:translateY(-2px);}
.mtr-talk__btn span{
  display:grid; place-items:center; width:31px; height:31px;
  border-radius:50%; background:rgba(4,51,58,.16);
}
.mtr-talk__btn svg{width:14px; height:14px;}

/* ── responsive ───────────────────────────────────────────── */
@media (max-width:1024px){
  .mtr-why{grid-template-columns:1fr;}
  .mtr-why__art{min-height:clamp(260px,52vw,380px);}
}
@media (max-width:640px){
  .mtr-svc-head{flex-direction:column; align-items:flex-start;}
  .mtr-talk__in{flex-direction:column; align-items:flex-start;}
  .mtr-why__body{padding-inline:var(--pg-shell);}
}

/* five groups read better as 3 + 2 than as a lopsided 4 + 1 */
@media (min-width:1024px){
  .mtr-svc-grid--five{grid-template-columns:repeat(3,minmax(0,1fr));}
}

/* ============================================================
   Contact
   ============================================================ */
.mtr-cpage{
  display:grid; gap:clamp(28px,4vw,64px); align-items:start;
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
}
.mtr-cform{
  position:relative; background:#fff; border:1px solid var(--pg-line); border-radius:18px;
  padding:clamp(24px,3vw,44px);
}
.mtr-cform__row{display:grid; gap:18px; grid-template-columns:1fr 1fr;}
.mtr-field{display:flex; flex-direction:column; gap:7px; margin:0 0 20px;}
.mtr-field > span{font-size:14px; font-weight:600; color:var(--pg-ink);}
.mtr-field > span em{font-style:normal; color:var(--pg-teal); margin-left:2px;}
.mtr-field small{font-size:13px; line-height:1.5; color:var(--pg-body); margin-top:-2px;}
.mtr-field input,.mtr-field textarea{
  width:100%; font:inherit; font-size:15px; color:var(--pg-ink);
  background:#f7f9f9; border:1px solid rgba(11,20,32,.14); border-radius:11px;
  padding:13px 15px; transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.mtr-field textarea{resize:vertical; min-height:150px; line-height:1.6;}
.mtr-field input:focus,.mtr-field textarea:focus{
  outline:none; background:#fff; border-color:var(--pg-teal);
  box-shadow:0 0 0 4px rgba(0,132,144,.12);
}
/* bots fill every field; people never see this one */
.mtr-hp{position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden;}

.mtr-drop{
  position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding:18px; border:1.5px dashed rgba(0,132,144,.40); border-radius:12px;
  background:rgba(0,132,144,.04); cursor:pointer; font-size:14px; color:var(--pg-body);
  transition:background .2s ease, border-color .2s ease;
}
.mtr-drop:hover,.mtr-drop.is-over{background:rgba(0,132,144,.09); border-color:var(--pg-teal);}
.mtr-drop input{position:absolute; inset:0; opacity:0; cursor:pointer;}
.mtr-drop b{
  display:inline-flex; align-items:center; padding:8px 14px; border-radius:999px;
  background:var(--pg-teal); color:#fff; font-size:13.5px; font-weight:600;
}
.mtr-drop__names{margin:8px 0 0; font-size:13.5px; color:var(--pg-teal); min-height:1em;}

.mtr-cform__send{
  display:inline-flex; align-items:center; gap:13px; margin-top:6px;
  padding:15px 15px 15px 28px; border:0; border-radius:999px; cursor:pointer;
  background:var(--pg-teal); color:#fff; font:inherit; font-size:15.5px; font-weight:600;
  transition:background .25s ease, transform .25s ease;
}
.mtr-cform__send:hover{background:#0b6f78; transform:translateY(-2px);}
.mtr-cform__send span{
  display:grid; place-items:center; width:31px; height:31px;
  border-radius:50%; background:rgba(255,255,255,.18);
}
.mtr-cform__send svg{width:14px; height:14px;}

.mtr-cform__note{
  margin:0 0 22px; padding:14px 18px; border-radius:11px; font-size:14.5px; line-height:1.5;
}
.mtr-cform__note[data-tone="good"]{background:rgba(0,132,144,.10); color:#05535b;}
.mtr-cform__note[data-tone="bad"]{background:rgba(196,57,42,.09); color:#8b2a1f;}

/* details column */
.mtr-cdetails{display:grid; gap:14px; position:sticky; top:110px;}
.mtr-cdetail{
  display:flex; gap:16px; align-items:flex-start;
  padding:22px; border:1px solid var(--pg-line); border-radius:16px; background:#fff;
  text-decoration:none; color:inherit; transition:border-color .25s ease, box-shadow .25s ease;
}
a.mtr-cdetail:hover{border-color:rgba(0,132,144,.45); box-shadow:0 12px 30px rgba(11,20,32,.07);}
.mtr-cdetail__ic{
  display:grid; place-items:center; width:46px; height:46px; flex:none;
  border-radius:12px; background:rgba(0,132,144,.09); color:var(--pg-teal);
}
.mtr-cdetail__ic svg{width:22px; height:22px;}
.mtr-cdetail small{display:block; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--pg-body); margin-bottom:5px;}
.mtr-cdetail strong{display:block; font-size:16px; font-weight:600; line-height:1.45; color:var(--pg-ink);}

@media (max-width:1024px){
  .mtr-cpage{grid-template-columns:1fr;}
  .mtr-cdetails{position:static;}
}
@media (max-width:640px){
  .mtr-cform__row{grid-template-columns:1fr; gap:0;}
}

/* ── accreditation badge (Hunter Water) ───────────────────── */
.mtr-badge{
  display:inline-flex; align-items:center; gap:16px; margin-top:30px;
  padding:10px 22px 10px 10px; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.mtr-badge img{width:64px; height:64px; border-radius:50%; display:block; flex:none;}
.mtr-badge span{font-size:15px; font-weight:600; line-height:1.3; color:#fff; max-width:17ch;}
.mtr-accred__head{display:flex; align-items:center; gap:20px; margin:0 0 6px;}
.mtr-accred__head img{width:78px; height:78px; border-radius:50%; flex:none; display:block;}
.mtr-accred__head h3{margin:0;}

/* ============================================================
   About — Metiri + Director
   Editorial split compositions: large photography with angled,
   architectural edges; deep navy type; teal used only as accent.
   ============================================================ */
.mtr-ab{
  --ab-navy:#0b1d2a;
  --ab-body:#4c5d68;
  --ab-teal:#0b8f99;
  --ab-cyan:#2ec4c9;
  --ab-mist:#f2f8fa;
  --ab-line:rgba(11,29,42,.12);
  color:var(--ab-navy);
}
.mtr-ab .mtr-eyebrow{color:var(--ab-navy); letter-spacing:.24em; font-size:12px;}
.mtr-ab .mtr-eyebrow i{background:var(--ab-cyan); width:42px; height:2px;}

/* buttons — restrained radius, 250ms transitions */
.mtr-abtn{
  display:inline-flex; align-items:center; gap:12px;
  padding:14px 22px; border-radius:10px; text-decoration:none;
  font-size:15px; font-weight:600; letter-spacing:.005em;
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease;
}
.mtr-abtn svg{width:15px; height:15px; flex:none; transition:transform .25s ease;}
.mtr-abtn:hover svg{transform:translateX(3px);}
.mtr-abtn--solid{background:var(--ab-teal); color:#fff; border:1px solid var(--ab-teal);}
.mtr-abtn--solid:hover{background:#097a83; border-color:#097a83;}
.mtr-abtn--line{background:transparent; color:var(--ab-teal); border:1px solid rgba(11,143,153,.55);}
.mtr-abtn--line:hover{background:rgba(11,143,153,.07); border-color:var(--ab-teal);}

/* ── section 1: About Metiri ─────────────────────────────── */
.mtr-ab1{
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  min-height:clamp(560px,50vw,760px); background:var(--ab-mist); overflow:hidden;
}
.mtr-ab1__copy{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(128px,11vw,168px) clamp(24px,4vw,64px) clamp(56px,6vw,90px) max(var(--pg-shell), calc((100vw - 1320px)/2 + var(--pg-shell)));
}
.mtr-ab1 h1{
  margin:0 0 clamp(20px,2vw,28px);
  font-size:clamp(56px,7.4vw,108px); line-height:.95; letter-spacing:-.04em; font-weight:700;
}
.mtr-ab1 p{margin:0 0 30px; max-width:52ch; font-size:clamp(15px,1.08vw,16.5px); line-height:1.75; color:var(--ab-body);}
.mtr-ab1 .mtr-abtn{align-self:flex-start;}

.mtr-ab1__stats{
  display:grid; grid-template-columns:repeat(3,auto); justify-content:start;
  margin-top:clamp(38px,4.4vw,60px); padding-top:26px; border-top:1px solid var(--ab-line);
}
.mtr-ab1__stat{padding:0 clamp(18px,2.4vw,40px);}
.mtr-ab1__stat:first-child{padding-left:0;}
.mtr-ab1__stat + .mtr-ab1__stat{border-left:1px solid var(--ab-line);}
.mtr-ab1__stat b{display:block; font-size:clamp(24px,2.3vw,32px); font-weight:700; letter-spacing:-.02em; color:var(--ab-teal); line-height:1.1;}
.mtr-ab1__stat span{display:block; margin-top:6px; font-size:13px; color:var(--ab-body);}

.mtr-ab1__media{
  position:relative; overflow:hidden;
  /* architectural cut: a steep angle down the left edge */
  clip-path:polygon(15% 0, 100% 0, 100% 100%, 0 100%);
}
.mtr-ab1__media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 45%;
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.mtr-ab1__media:hover img{transform:scale(1.035);}
.mtr-ab1__media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(270deg,rgba(6,18,26,.62) 0%,rgba(6,18,26,.18) 34%,rgba(6,18,26,0) 60%);
}
.mtr-ab1__tag{
  position:absolute; z-index:2; right:clamp(24px,4vw,64px); top:50%; translate:0 -50%;
  margin:0; font-size:14px; line-height:1.9; font-weight:500; color:#fff; letter-spacing:.02em;
}
.mtr-ab1__tag::before{content:""; display:block; width:36px; height:2px; margin-bottom:14px; background:var(--ab-cyan);}

/* ── section 2: Director ─────────────────────────────────── */
.mtr-dir{
  position:relative; display:grid; grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  background:#fff; overflow:hidden;
}
.mtr-dir__media{
  position:relative; overflow:hidden; min-height:clamp(560px,52vw,820px); background:#dfe5e8;
  clip-path:polygon(0 0, 100% 0, 86% 100%, 0 100%);
}
.mtr-dir__media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 18%;
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.mtr-dir__media:hover img{transform:scale(1.035);}
.mtr-dir__media::before{               /* drafting contours, barely there */
  content:""; position:absolute; z-index:1; left:-8%; bottom:-10%; width:70%; aspect-ratio:1;
  background:url(../../images/metiri-contours.svg) no-repeat center/contain; opacity:.16; pointer-events:none;
}
.mtr-dir__media::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(0deg,rgba(6,18,26,.84) 0%,rgba(6,18,26,.35) 32%,rgba(6,18,26,0) 55%);
}
.mtr-dir__label{
  position:absolute; z-index:2; left:clamp(24px,3.4vw,56px); bottom:clamp(28px,3.4vw,52px);
  margin:0; color:#fff; max-width:22ch;
}
.mtr-dir__label strong{display:block; font-size:13px; letter-spacing:.28em; font-weight:600;}
.mtr-dir__label span{display:block; margin-top:6px; font-size:12px; letter-spacing:.28em; color:rgba(255,255,255,.7);}
.mtr-dir__label q{
  display:block; margin-top:22px; padding-top:18px; border-top:2px solid var(--ab-cyan); width:fit-content;
  font-size:clamp(15px,1.25vw,18px); line-height:1.5; font-weight:500; quotes:none; color:rgba(255,255,255,.92);
}

.mtr-dir__copy{
  position:relative; padding:clamp(64px,7vw,112px) max(var(--pg-shell), calc((100vw - 1320px)/2 + var(--pg-shell))) clamp(64px,7vw,112px) clamp(28px,3.6vw,64px);
}
.mtr-dir__copy::after{                /* contour texture fading off the right edge */
  content:""; position:absolute; right:-14%; top:-8%; width:52%; aspect-ratio:1; z-index:0;
  background:url(../../images/metiri-contours.svg) no-repeat center/contain; opacity:.07; pointer-events:none;
}
.mtr-dir__copy > *{position:relative; z-index:1;}
.mtr-dir h2{margin:0; font-size:clamp(38px,4.4vw,62px); line-height:1.02; letter-spacing:-.035em; font-weight:700;}
.mtr-dir__role{margin:12px 0 26px; font-size:clamp(15px,1.15vw,17px); font-weight:500; color:var(--ab-body);}
.mtr-dir__bio p{margin:0 0 15px; max-width:64ch; font-size:15px; line-height:1.75; color:var(--ab-body);}
.mtr-dir h3{margin:30px 0 16px; font-size:17px; font-weight:600; color:var(--ab-teal); letter-spacing:-.005em;}
.mtr-exp{
  display:grid; grid-template-columns:1fr 1fr; gap:12px 28px;
  margin:0 0 34px; padding:0; list-style:none; max-width:560px;
}
.mtr-exp li{
  display:flex; align-items:center; gap:11px; font-size:15px; color:var(--ab-navy);
  transition:transform .25s ease;
}
.mtr-exp li:hover{transform:translateX(3px);}
.mtr-exp li i{
  position:relative; display:block; width:19px; height:19px; flex:none; border-radius:50%;
  background:var(--ab-teal);
}
.mtr-exp li i::after{
  content:""; position:absolute; left:6px; top:5.5px; width:6px; height:3.5px;
  border-left:1.8px solid #fff; border-bottom:1.8px solid #fff; transform:rotate(-45deg);
}
.mtr-dir__cta{display:flex; flex-wrap:wrap; gap:14px;}

/* ── responsive ── */
@media (max-width:1024px){
  .mtr-ab1,.mtr-dir{grid-template-columns:1fr;}
  .mtr-ab1__copy{padding:clamp(120px,18vw,150px) var(--pg-shell) 44px;}
  .mtr-ab1__media{min-height:clamp(320px,62vw,520px); clip-path:polygon(0 9%, 100% 0, 100% 100%, 0 100%);}
  .mtr-dir__media{min-height:clamp(420px,100vw,640px); clip-path:polygon(0 0, 100% 0, 100% 93%, 0 100%);}
  .mtr-dir__copy{padding:48px var(--pg-shell) 72px;}
}
@media (max-width:560px){
  .mtr-ab1__stats{grid-template-columns:1fr; gap:18px;}
  .mtr-ab1__stat{padding:0;}
  .mtr-ab1__stat + .mtr-ab1__stat{border-left:0; padding-top:18px; border-top:1px solid var(--ab-line);}
  .mtr-exp{grid-template-columns:1fr;}
}

/* this page opens on a light ground, so the header can't start transparent —
   give it the solid "scrolled" treatment from the top */
body:has(.mtr-ab) .mtr-nav{
  background:rgba(8,16,22,.94);
  -webkit-backdrop-filter:blur(16px) saturate(130%); backdrop-filter:blur(16px) saturate(130%);
  box-shadow:0 1px 0 rgba(255,255,255,.07);
}

/* ============================================================
   Contact — the home page's "Start your Project today" layout,
   without its background video: dark ground, white form card,
   details alongside.
   ============================================================ */
.mtr-cx{
  position:relative; isolation:isolate; overflow:hidden; color:#fff;
  background:
    radial-gradient(900px 520px at 78% 18%, rgba(46,196,201,.16), transparent 62%),
    radial-gradient(700px 480px at 12% 88%, rgba(11,143,153,.14), transparent 60%),
    #0a1720;
  padding:clamp(130px,12vw,176px) 0 clamp(64px,7vw,110px);
}
.mtr-cx::before{            /* faint drafting contours */
  content:""; position:absolute; z-index:-1; right:-12%; bottom:-22%; width:min(760px,70vw); aspect-ratio:1;
  background:url(../../images/metiri-contours.svg) no-repeat center/contain; opacity:.10; filter:invert(1);
}
.mtr-cx__head{text-align:center; margin:0 auto clamp(34px,4vw,56px); max-width:760px;}
.mtr-cx__eyebrow{
  display:inline-flex; align-items:center; gap:9px; margin:0 0 18px;
  font-size:14px; color:rgba(255,255,255,.85);
}
.mtr-cx__eyebrow svg{width:14px; height:14px; color:#fff;}
.mtr-cx h1{
  margin:0; font-size:clamp(42px,6.2vw,84px); line-height:1.02; letter-spacing:-.035em; font-weight:700;
}
.mtr-cx h1 em{font-style:italic; font-weight:400; color:#4fd1d6;}
.mtr-cx__lede{margin:20px auto 0; max-width:54ch; font-size:clamp(15px,1.12vw,17px); line-height:1.65; color:rgba(255,255,255,.72);}

.mtr-cx__grid{
  display:grid; gap:clamp(24px,3vw,44px); align-items:start;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  max-width:1040px; margin:0 auto;
}
.mtr-cx__card{border:0; border-radius:16px; box-shadow:0 30px 70px rgba(0,0,0,.30);}
.mtr-cx__card h2{margin:0 0 24px; font-size:clamp(22px,2vw,28px); font-weight:600; letter-spacing:-.02em; color:#0b1d2a;}
.mtr-cx__card .mtr-field input,.mtr-cx__card .mtr-field textarea{background:#fff;}
.mtr-cx__foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 24px;
  margin-top:8px; padding-top:22px; border-top:1px solid rgba(11,20,32,.08);
}
.mtr-cx__foot p{margin:0; font-size:13px; color:#5b6b74; text-align:right;}
.mtr-cx__foot a{display:block; margin-top:3px; font-size:16px; font-weight:600; color:#0b1d2a; text-decoration:none;}
.mtr-cx__foot a:hover{color:#0b8f99;}

.mtr-cx__side{padding-top:6px;}
.mtr-cx__side-h{margin:0 0 20px; font-size:14px; color:rgba(255,255,255,.7);}
.mtr-cx__details{display:grid; gap:12px;}
.mtr-cx__details a{
  display:flex; align-items:flex-start; gap:15px; padding:18px;
  border:1px solid rgba(255,255,255,.12); border-radius:12px;
  background:rgba(255,255,255,.04); color:#fff; text-decoration:none;
  transition:border-color .25s ease, background .25s ease, transform .25s ease;
}
.mtr-cx__details a:hover{border-color:rgba(79,209,214,.55); background:rgba(255,255,255,.07); transform:translateX(3px);}
.mtr-cx__details small{display:block; margin-bottom:4px; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.55);}
.mtr-cx__details a > span:last-child{font-size:15.5px; font-weight:600; line-height:1.45;}
.mtr-cx__ic{
  display:grid; place-items:center; width:42px; height:42px; flex:none; border-radius:10px;
  background:rgba(79,209,214,.14); color:#4fd1d6;
}
.mtr-cx__ic svg{width:21px; height:21px;}

@media (max-width:900px){
  .mtr-cx__grid{grid-template-columns:1fr;}
  .mtr-cx__foot p{text-align:left;}
}

/* director portrait is now the bright office composite — no dark fade over it */
.mtr-dir__media{background:#e9f6f7;}
.mtr-dir__media img{object-position:50% 16%;}
.mtr-dir__media::after{background:none;}
.mtr-dir__quote{
  position:relative; margin:0 0 30px; padding:4px 0 4px 26px; max-width:40ch;
  border-left:2px solid var(--ab-cyan);
  font-size:clamp(17px,1.35vw,20px); line-height:1.5; font-weight:500; color:var(--ab-navy);
}

/* ── FAQ page: the home page's FAQ section, on its own ── */
.mtr-faqpage{background:#f5f8f8; padding-top:clamp(84px,7vw,100px);}
/* light page, so the header starts solid rather than transparent */
body:has(.mtr-faqpage) .mtr-nav{
  background:rgba(8,16,22,.94);
  -webkit-backdrop-filter:blur(16px) saturate(130%); backdrop-filter:blur(16px) saturate(130%);
}

/* ============================================================
   One standard for headings, matching the home page
   ("✦ Insights & Inspiration" / "Explore our Latest journal"):
   star + sentence-case label, Montserrat 600 headings in navy,
   teal for the accent word.
   ============================================================ */
.mtr-page .mtr-eyebrow{
  gap:8px; margin:0 0 18px;
  font-size:15px; font-weight:500; letter-spacing:-.01em; text-transform:none;
  color:#05080c;
}
.mtr-page .mtr-eyebrow i{display:none;}
.mtr-eyebrow__star{width:14px; height:14px; flex:none; color:#008490;}
/* on the dark bands */
.mtr-pghero .mtr-eyebrow,
.mtr-talk .mtr-eyebrow{color:#fff;}
.mtr-pghero .mtr-eyebrow__star,
.mtr-talk .mtr-eyebrow__star{color:#3fc9dc;}

.mtr-page h1,
.mtr-page h2{font-weight:600 !important; letter-spacing:-.04em;}
.mtr-ab h1,.mtr-ab h2,
.mtr-svc-head h2,.mtr-why__body h2{color:#12333c;}
.mtr-ab1__stat b{font-weight:600;}
/* contact heading: the accent word like "Project" on the home page */
.mtr-cx h1 em{font-style:normal; font-weight:600; color:#3fc9dc;}

/* ── Director portraits ── */
/* Sean: the same block mirrored — copy left, portrait right */
.mtr-dir--flip{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); background:var(--ab-mist);}
.mtr-dir--flip .mtr-dir__media{order:2; clip-path:polygon(14% 0, 100% 0, 100% 100%, 0 100%);}
.mtr-dir--flip .mtr-dir__copy{
  order:1;
  padding:clamp(64px,7vw,112px) clamp(28px,3.6vw,64px) clamp(64px,7vw,112px) max(var(--pg-shell), calc((100vw - 1320px)/2 + var(--pg-shell)));
}
.mtr-dir--flip .mtr-dir__copy::after{right:auto; left:-14%;}
@media (max-width:1024px){
  .mtr-dir--flip{grid-template-columns:1fr;}
  .mtr-dir--flip .mtr-dir__media{order:0; clip-path:polygon(0 0, 100% 0, 100% 93%, 0 100%);}
  .mtr-dir--flip .mtr-dir__copy{padding:48px var(--pg-shell) 72px;}
}

/* ============================================================
   About — "Meet our team": the template's team grid (dark band,
   label left / heading right, one large card + six), in Metiri type.
   Photos are transparent cut-outs, so each card supplies the studio
   backdrop; names sit on a dark fade at the foot of the card.
   ============================================================ */
.mtr-team{background:#05080c; color:#fff; padding:clamp(88px,10.4vw,150px) 0;}
.mtr-team__in{max-width:1440px; margin:0 auto; padding-inline:clamp(20px,2.5vw,36px);}
.mtr-team__head{
  display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1fr); gap:24px;
  align-items:start; margin-bottom:clamp(40px,3.6vw,52px);
}
.mtr-team .mtr-eyebrow{color:#fff; margin:0; padding-left:clamp(0px,1.3vw,18px);}
.mtr-team .mtr-eyebrow__star{color:#3fc9dc;}
.mtr-team h2{
  margin:0; font-size:clamp(40px,5.8vw,84px); line-height:1.1; letter-spacing:-.04em;
  font-weight:600 !important; color:#fff; max-width:19ch;
}
.mtr-team h2 em{font-style:normal; color:#3fc9dc;}

.mtr-team__grid{
  display:grid; gap:clamp(10px,1.55vw,22px);
  grid-template-columns:minmax(0,1.54fr) repeat(3,minmax(0,1fr));
  grid-auto-rows:clamp(250px,23.4vw,337px);
}
.mtr-tm{
  position:relative; overflow:hidden; margin:0; border-radius:16px; isolation:isolate;
  background:linear-gradient(180deg,#e3ecee 0%,#b7cace 100%);
}
.mtr-tm > img:not(.mtr-tm__logo){
  position:absolute; inset:0; z-index:-1; width:100%; height:100%;
  object-fit:cover; object-position:50% 8%;
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.mtr-tm:hover > img:not(.mtr-tm__logo){transform:scale(1.04);}
.mtr-tm::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(0deg,rgba(5,8,12,.88) 0%,rgba(5,8,12,.45) 24%,rgba(5,8,12,0) 46%);
}
.mtr-tm__cap{position:absolute; z-index:1; left:24px; right:24px; bottom:24px;}
.mtr-tm__cap h3{margin:0 0 4px; font-size:clamp(18px,1.7vw,24px); font-weight:500; letter-spacing:-.02em; color:#fff; line-height:1.2;}
.mtr-tm__cap p{margin:0; font-size:clamp(13px,1.1vw,16px); font-weight:500; letter-spacing:-.02em; color:#aaa9ad; line-height:1.2;}

.mtr-tm--lead{grid-row:span 2; background:linear-gradient(170deg,#1c7f87 0%,#12333c 72%);}
.mtr-tm--lead > img:not(.mtr-tm__logo){object-position:50% 100%; object-fit:contain; top:auto; height:88%;}
.mtr-tm__logo{position:absolute; z-index:1; left:24px; top:26px; width:clamp(104px,9vw,130px); height:auto;}

@media (max-width:1024px){
  .mtr-team__head{grid-template-columns:1fr; gap:18px;}
  .mtr-team .mtr-eyebrow{padding-left:0;}
  .mtr-team__grid{grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:auto;}
  .mtr-tm{height:clamp(240px,34vw,330px);}
  .mtr-tm--lead{grid-column:span 3; grid-row:auto; height:clamp(380px,62vw,520px);}
}
@media (max-width:640px){
  .mtr-team__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .mtr-tm{height:clamp(210px,62vw,280px);}
  .mtr-tm--lead{grid-column:span 2; height:clamp(380px,112vw,470px);}
  .mtr-tm__cap{left:14px; right:14px; bottom:14px;}
  .mtr-tm__logo{left:16px; top:18px;}
}

/* ── team grid, five people: large card + 2×2 ── */
.mtr-team__grid{grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,1fr));}

/* ── hover (or tap/focus): the bio rises in a frosted panel over the photo ── */
.mtr-tm{cursor:default; outline:none;}
.mtr-tm__cap{
  left:12px; right:12px; bottom:12px; padding:12px;
  border-radius:12px; border:1px solid transparent;
  max-height:calc(100% - 24px); overflow:hidden;
  transition:background .4s ease, border-color .4s ease, -webkit-backdrop-filter .4s ease, backdrop-filter .4s ease;
}
.mtr-tm__more{display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s cubic-bezier(.22,.61,.24,1);}
.mtr-tm__more > div{overflow:hidden; min-height:0;}
.mtr-tm__bio{
  margin:12px 0 0 !important; font-size:14px !important; line-height:1.55 !important;
  letter-spacing:0 !important; color:rgba(255,255,255,.9) !important;
  opacity:0; transform:translateY(8px); transition:opacity .35s ease .05s, transform .45s ease;
}
.mtr-tm:hover .mtr-tm__cap,
.mtr-tm.is-open .mtr-tm__cap,
.mtr-tm:focus-within .mtr-tm__cap{
  background:rgba(8,22,28,.42);
  border-color:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
}
.mtr-tm:hover .mtr-tm__more,
.mtr-tm.is-open .mtr-tm__more,
.mtr-tm:focus-within .mtr-tm__more{grid-template-rows:1fr;}
.mtr-tm:hover .mtr-tm__bio,
.mtr-tm.is-open .mtr-tm__bio,
.mtr-tm:focus-within .mtr-tm__bio{opacity:1; transform:none;}
.mtr-tm:focus-visible{box-shadow:0 0 0 2px #3fc9dc;}
@media (prefers-reduced-motion:reduce){
  .mtr-tm__cap,.mtr-tm__more,.mtr-tm__bio,.mtr-tm > img{transition:none !important;}
}

@media (max-width:1024px){
  .mtr-team__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .mtr-tm{height:clamp(300px,44vw,380px);}
  .mtr-tm--lead{grid-column:span 2; height:clamp(420px,66vw,540px);}
}
@media (max-width:640px){
  .mtr-team__grid{grid-template-columns:1fr;}
  .mtr-tm{height:clamp(400px,118vw,460px);}
  .mtr-tm--lead{grid-column:auto; height:clamp(420px,122vw,480px);}
  .mtr-tm__bio{font-size:13.5px !important;}
}
/* cut-outs stand whole at the foot of every card, never cropped at the head */
.mtr-tm > img:not(.mtr-tm__logo){object-fit:contain; object-position:50% 100%; top:auto; height:92%;}
.mtr-tm:hover .mtr-tm__cap,
.mtr-tm.is-open .mtr-tm__cap,
.mtr-tm:focus-within .mtr-tm__cap{background:rgba(6,18,24,.58);}
.mtr-tm:hover .mtr-tm__cap > p,
.mtr-tm.is-open .mtr-tm__cap > p,
.mtr-tm:focus-within .mtr-tm__cap > p{color:#3fc9dc; transition:color .3s ease;}

/* ============================================================
   About — phone & tablet layout
   ============================================================ */
.mtr-dir__more{display:none;}
@media (max-width:1024px){
  /* office photo: an inset, rounded frame instead of a full-bleed slab;
     the People/Projects/Communities tag can't be read over it, so it goes */
  .mtr-ab1__media{
    min-height:0; aspect-ratio:4/3; margin:0 var(--pg-shell) clamp(40px,8vw,64px);
    clip-path:none; border-radius:16px;
  }
  .mtr-ab1__media::after{background:none;}
  .mtr-ab1__tag{display:none;}
  .mtr-ab1__copy{padding-bottom:36px;}

  /* directors: the same inset frame, with room between the two blocks */
  .mtr-dir, .mtr-dir--flip{padding-top:clamp(44px,8vw,64px);}
  .mtr-dir__media, .mtr-dir--flip .mtr-dir__media{
    min-height:0; aspect-ratio:4/5; max-height:560px;
    margin:0 var(--pg-shell); border-radius:16px; clip-path:none;
  }
  .mtr-dir__media img{object-position:50% 12%;}
  .mtr-dir__media::before{display:none;}
  .mtr-dir__copy, .mtr-dir--flip .mtr-dir__copy{padding:32px var(--pg-shell) clamp(52px,10vw,72px);}
  .mtr-dir__copy::after{display:none;}
}
@media (max-width:640px){
  .mtr-ab1 h1{font-size:clamp(48px,15vw,64px);}
  .mtr-ab1 p{font-size:15px; line-height:1.7;}

  /* stats sit in one compact row */
  .mtr-ab1__stats{grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin-top:32px; padding-top:20px;}
  .mtr-ab1__stat{padding:0 10px;}
  .mtr-ab1__stat:first-child{padding-left:0;}
  .mtr-ab1__stat + .mtr-ab1__stat{border-top:0; padding-top:0; border-left:1px solid var(--ab-line);}
  .mtr-ab1__stat b{font-size:21px;}
  .mtr-ab1__stat span{font-size:11.5px; line-height:1.35;}

  .mtr-dir h2{font-size:clamp(34px,10vw,42px);}
  .mtr-dir__role{margin:8px 0 20px; font-size:15px;}
  .mtr-dir__quote{font-size:16px; margin-bottom:22px; padding-left:18px;}
  .mtr-dir__bio p{font-size:14.5px; line-height:1.7;}

  /* bios: first paragraph, then Read more */
  .mtr-dir__bio:not(.is-open) p:nth-child(n+2){display:none;}
  .mtr-dir__more{
    display:inline-flex; align-items:center; gap:6px; margin:2px 0 6px; padding:0;
    background:none; border:0; font:inherit; font-size:14px; font-weight:600;
    color:var(--ab-teal); cursor:pointer;
  }
  .mtr-dir__more::after{content:"›"; font-size:18px; line-height:1; transition:transform .25s ease;}
  .mtr-dir__more[aria-expanded="true"]::after{transform:rotate(90deg);}

  /* expertise: one tidy column */
  .mtr-dir h3{margin-top:22px;}
  .mtr-exp{grid-template-columns:1fr; gap:10px;}
  .mtr-exp li{font-size:14.5px; align-items:flex-start;}
  .mtr-exp li i{margin-top:1px;}

  /* buttons full width, stacked */
  .mtr-dir__cta{flex-direction:column;}
  .mtr-dir__cta .mtr-abtn{justify-content:center;}
}

/* ── team cards on phones: photo on top, a frosted name panel overlapping
      its foot; tap opens the whole bio in the flow (nothing clipped) ── */
@media (max-width:640px){
  .mtr-tm, .mtr-tm--lead{height:auto; display:flex; flex-direction:column; cursor:pointer;}
  .mtr-tm > img:not(.mtr-tm__logo),
  .mtr-tm--lead > img:not(.mtr-tm__logo){
    position:relative; inset:auto; top:auto; z-index:0;
    width:100%; height:300px; object-fit:contain; object-position:50% 100%;
  }
  .mtr-tm--lead > img:not(.mtr-tm__logo){height:340px;}
  .mtr-tm::after{display:none;}
  .mtr-tm__cap{
    position:relative; left:auto; right:auto; bottom:auto; z-index:1;
    margin:-64px 12px 12px; padding:14px 44px 14px 14px; max-height:none; overflow:visible;
    background:rgba(6,18,24,.62); border-color:rgba(255,255,255,.14);
    -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%);
  }
  .mtr-tm__cap::after{
    content:"+"; position:absolute; right:14px; top:12px; width:24px; height:24px;
    display:grid; place-items:center; border-radius:50%;
    border:1px solid rgba(255,255,255,.35); color:#fff; font-size:16px; line-height:1;
    transition:transform .3s ease;
  }
  .mtr-tm.is-open .mtr-tm__cap::after{transform:rotate(45deg);}
  .mtr-tm__cap > p{color:#3fc9dc;}
  /* only the tap state opens it on touch (a lingering :hover/:focus mustn't) */
  .mtr-tm:not(.is-open) .mtr-tm__more{grid-template-rows:0fr !important;}
  .mtr-tm:not(.is-open) .mtr-tm__bio{opacity:0 !important;}
}
/* team cards on phones: a drop-down chevron instead of the plus; flips when open */
@media (max-width:640px){
  .mtr-tm__cap::after{
    content:"";
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
  }
  .mtr-tm.is-open .mtr-tm__cap::after{transform:rotate(180deg);}
}

/* ── About opening: "Our Team" with three feature tiles, on a faint contour ground ── */
.mtr-ab1__copy{position:relative;}
.mtr-ab1__copy::before{
  content:""; position:absolute; z-index:0; right:-6%; top:6%; width:62%; aspect-ratio:1; pointer-events:none;
  background:url(../../images/metiri-contours.svg) no-repeat center/contain; opacity:.07;
}
.mtr-ab1__copy > *{position:relative; z-index:1;}
.mtr-ab1 h1{color:#12333c;}
.mtr-ab1 p{max-width:60ch; font-size:clamp(15px,1.15vw,17.5px); line-height:1.7;}
.mtr-ab1__feats{
  display:grid; grid-template-columns:repeat(3,auto); justify-content:start; gap:clamp(20px,3vw,48px);
  margin:clamp(10px,1.4vw,18px) 0 0; padding:0; list-style:none;
}
.mtr-ab1__feats li{
  display:flex; align-items:center; gap:16px;
  font-size:clamp(14.5px,1.1vw,16.5px); font-weight:600; line-height:1.4; color:#12333c;
}
.mtr-ab1__ic{
  display:grid; place-items:center; flex:none;
  width:clamp(54px,4.6vw,66px); aspect-ratio:1; border-radius:12px;
  background:#e2f4f6; color:#008490;
  transition:transform .3s ease, background .3s ease;
}
.mtr-ab1__ic svg{width:48%; height:48%;}
.mtr-ab1__feats li:hover .mtr-ab1__ic{transform:translateY(-2px); background:#d3eef1;}
@media (max-width:1180px) and (min-width:1025px){
  .mtr-ab1__feats{grid-template-columns:1fr; gap:14px;}
}
@media (max-width:640px){
  .mtr-ab1__feats{grid-template-columns:1fr; gap:12px; margin-top:6px;}
  .mtr-ab1__feats li br{display:none;}
  .mtr-ab1__ic{width:48px;}
}
/* the three tiles share the copy column evenly; labels keep to two lines */
@media (min-width:1025px){
  .mtr-ab1__feats{grid-template-columns:repeat(3,minmax(0,max-content)); gap:clamp(14px,1.6vw,28px);}
  .mtr-ab1__feats li{gap:12px; font-size:clamp(13.5px,1vw,15.5px); white-space:nowrap;}
  .mtr-ab1__ic{width:clamp(46px,3.6vw,60px);}
}
@media (max-width:1180px) and (min-width:1025px){
  .mtr-ab1__feats{grid-template-columns:1fr;}
}

/* ── Privacy Policy (and other legal text): one readable column ── */
.mtr-legal{padding-bottom:clamp(72px,8vw,120px);}
.mtr-legal__in{max-width:820px; margin:0 auto; padding:clamp(56px,6vw,96px) var(--pg-shell) 0;}
.mtr-legal h1{margin:0 0 clamp(28px,3vw,44px); font-size:clamp(40px,5.4vw,72px); line-height:1.05; letter-spacing:-.04em; color:#12333c;}
.mtr-legal h2{margin:clamp(36px,3.6vw,52px) 0 14px; font-size:clamp(22px,2vw,28px); line-height:1.2; letter-spacing:-.02em; color:#12333c;}
.mtr-legal h3{margin:28px 0 10px; font-size:clamp(18px,1.4vw,20px); font-weight:600; letter-spacing:-.01em; color:#12333c;}
.mtr-legal h4{margin:20px 0 8px; font-size:16px; font-weight:600; color:#12333c;}
.mtr-legal__doc p,.mtr-legal__doc li{font-size:clamp(15px,1.1vw,16.5px); line-height:1.75; color:#4c5d68;}
.mtr-legal__doc p{margin:0 0 14px;}
.mtr-legal__doc ul{margin:0 0 16px; padding:0; list-style:none;}
.mtr-legal__doc li{position:relative; padding-left:22px; margin:0 0 10px;}
.mtr-legal__doc li::before{content:""; position:absolute; left:2px; top:.72em; width:6px; height:6px; border-radius:50%; background:#008490;}
.mtr-legal__doc strong{color:#12333c; font-weight:600;}
.mtr-legal__doc a{color:#008490; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;}
.mtr-legal__doc a:hover{color:#0f6b73;}
.mtr-legal__card{
  margin:8px 0 18px; padding:20px 24px; border:1px solid #dce7e9; border-radius:14px; background:#fff;
  font-style:normal; font-size:15.5px; line-height:1.8; color:#4c5d68;
}

/* ── Team cards: name and position only (client review, Sep 2026) —
      no bio panel, so no hover/tap state, plain cursor, no drop-down chevron ── */
.mtr-tm{cursor:default;}
.mtr-tm:hover .mtr-tm__cap,
.mtr-tm:focus-within .mtr-tm__cap,
.mtr-tm.is-open .mtr-tm__cap{background:transparent; border-color:transparent; -webkit-backdrop-filter:none; backdrop-filter:none;}
.mtr-tm:hover .mtr-tm__cap > p,
.mtr-tm.is-open .mtr-tm__cap > p,
.mtr-tm:focus-within .mtr-tm__cap > p{color:#aaa9ad;}
@media (max-width:640px){
  .mtr-tm, .mtr-tm--lead{cursor:default;}
  .mtr-tm__cap{padding-right:14px;}
  .mtr-tm__cap::after{display:none;}
}
/* directors: the bio now follows the name directly */
.mtr-dir h2 + .mtr-dir__bio{margin-top:clamp(18px,1.8vw,26px);}

/* ── Directors: compact now the bios are shorter (client review, Sep 2026) —
      section height follows the text; the portrait no longer sets a tall minimum ── */
@media (min-width:1025px){
  .mtr-dir{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);}
  .mtr-dir--flip{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);}
  .mtr-dir__media{min-height:clamp(400px,34vw,520px);}
  .mtr-dir__copy, .mtr-dir--flip .mtr-dir__copy{
    display:flex; flex-direction:column; justify-content:center;
    padding-top:clamp(44px,4vw,64px); padding-bottom:clamp(44px,4vw,64px);
  }
  .mtr-dir__bio p{max-width:72ch;}
}

/* ── team grid, seven people: large card + 3×2 (tablet 2 across, phone 1) ── */
@media (min-width:1025px){
  .mtr-team__grid{grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr));}
}
/* no photo yet: initials on the card's own gradient */
.mtr-tm--nophoto{background:linear-gradient(170deg,#e3ecee 0%,#b7cace 100%);}
.mtr-tm__initials{
  position:absolute; inset:0 0 22% 0; z-index:-1; display:grid; place-items:center;
  font-family:"Montserrat",ui-sans-serif,system-ui,sans-serif;
  font-size:clamp(56px,6vw,92px); font-weight:600; letter-spacing:-.04em; color:#12333c; opacity:.22;
}
/* director eyebrow now carries the full title */
.mtr-dir .mtr-eyebrow{flex-wrap:wrap;}
@media (max-width:640px){
  /* phones: the initials take the photo's place in the flow */
  .mtr-tm__initials{position:relative; inset:auto; z-index:0; height:300px;}
}