/* ==========================================================================
   MR X SECURITY SERVICES — site stylesheet
   Namespaced, dependency-free, WordPress-portable.
   ========================================================================== */

/* ---------- fonts ---------- */
@font-face{font-family:'Chakra Petch';src:url('../fonts/chakrapetch-600.woff2') format('woff2');
  font-weight:600;font-display:swap;}
@font-face{font-family:'Chakra Petch';src:url('../fonts/chakrapetch-700.woff2') format('woff2');
  font-weight:700;font-display:swap;}
@font-face{font-family:'Barlow';src:url('../fonts/barlow-400.woff2') format('woff2');
  font-weight:400;font-display:swap;}
@font-face{font-family:'Barlow';src:url('../fonts/barlow-600.woff2') format('woff2');
  font-weight:600;font-display:swap;}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/plexmono-400.woff2') format('woff2');
  font-weight:400;font-display:swap;}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/plexmono-500.woff2') format('woff2');
  font-weight:500;font-display:swap;}

/* ---------- tokens ---------- */
:root{
  --black:#060608; --black-2:#0b0b0d; --panel:#0f1012; --panel-2:#131417;
  --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.18);
  --red:#E01F26; --red-deep:#A6141A;
  --silver-1:#8e9296; --silver-2:#d8dade;
  --silver-grad:linear-gradient(100deg,#9aa0a6 0%,#ffffff 38%,#a8aeb4 70%,#f0f2f4 100%);
  --text:#f2f3f4; --text-dim:#a3a8ae; --text-faint:#7a7f85;

  /* THE ARC */
  --accent:var(--red);
  --iris:#E01F26;
  --iris-hi:#FF565C;
  --iris-lo:#63080C;
  --eye-stroke:rgba(224,31,38,.55);
  --eye-stroke-soft:rgba(224,31,38,.3);

  /* photography grade: colour, held slightly back so the type stays in charge */
  --grade:saturate(.9) contrast(1.05) brightness(.9);

  --gutter:clamp(16px,1.6vw,28px);
  --margin:clamp(20px,5vw,88px);
  --maxw:1680px;
  --sec:clamp(80px,12vh,160px);

  /* Chakra Petch's chamfered corners echo the faceted shards in the MRX mark */
  --display:'Chakra Petch','Barlow',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --sans:'Barlow',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --fs-hero:clamp(2.75rem,7.1vw,7.1rem);
  --fs-h1:clamp(2.4rem,6vw,5.6rem);
  --fs-h2:clamp(1.95rem,4.4vw,3.9rem);
  --fs-h3:clamp(1.3rem,2.4vw,2rem);
  --fs-lead:clamp(1.05rem,1.5vw,1.35rem);
  --fs-mono:.6875rem;
  --fs-mono-s:.625rem;

  --e-reveal:cubic-bezier(.16,1,.3,1);
  --e-mech:cubic-bezier(.65,0,.35,1);
  --e-ui:cubic-bezier(.4,0,.2,1);
  --e-spring:cubic-bezier(.34,1.56,.64,1);
}
html[data-align="1"]{
  --accent:var(--silver-2);
  --iris:#c8ccd0;
  --iris-hi:#ffffff;
  --iris-lo:#585d63;
  --eye-stroke:rgba(216,218,222,.48);
  --eye-stroke-soft:rgba(216,218,222,.26);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--black);color:var(--text);
  font-family:var(--sans);font-size:1rem;line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,picture,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,p,dl,dd,ol,ul,figure,blockquote{margin:0}
ul,ol{list-style:none;padding:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
::selection{background:var(--accent);color:var(--black)}
[id]{scroll-margin-top:84px}

/* film grain over the whole page */
body::after{
  content:'';position:fixed;inset:0;z-index:60;pointer-events:none;
  background-image:url('../img/grain.png');background-size:128px 128px;
  opacity:.045;mix-blend-mode:overlay;
}

/* ---------- helpers ---------- */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--margin)}
.sec{position:relative}
.sec-pad{padding-block:var(--sec)}
.sec-line{border-top:1px solid var(--line)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter)}

.mrx-skip{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--accent);
  color:var(--black);padding:12px 20px;font:500 var(--fs-mono)/1 var(--mono);
  letter-spacing:.2em;text-transform:uppercase}
.mrx-skip:focus{left:12px;top:12px}

.kicker{font:500 var(--fs-mono)/1.4 var(--mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-faint)}
.kicker.wide{letter-spacing:.3em}
.kicker.mark{color:var(--text-dim);display:flex;align-items:center;gap:.9em}
.kicker.mark::before{content:'';width:7px;height:7px;background:var(--accent);flex:none;
  transition:background 900ms var(--e-reveal)}

.h2{font-family:var(--display);font-size:var(--fs-h2);line-height:.98;letter-spacing:-.01em;
  font-weight:700;text-transform:uppercase;margin-top:.45em;max-width:20ch}
.h3{font-family:var(--display);font-size:var(--fs-h3);line-height:1.14;font-weight:600}
.lead{font-size:var(--fs-lead);line-height:1.5;color:var(--text);max-width:52ch;margin-top:1.2em}
.lead strong,.body strong,.lead b,.body b{font-weight:600;color:var(--text)}
.body{font-size:1rem;line-height:1.66;color:var(--text-dim);max-width:62ch;margin-top:1.1em}
.rule{height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform 700ms var(--e-reveal),background 900ms var(--e-reveal)}
.rule.is-in{transform:scaleX(1)}

/* section header: title left, a way onward right */
.sec-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:var(--gutter) 40px}
.sec-head .lead{grid-column:1}
.link-arrow{display:inline-flex;align-items:center;gap:.8em;padding:.6em 0;
  font:500 var(--fs-mono)/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--text);border-bottom:1px solid var(--line-strong);
  transition:border-color 300ms var(--e-ui),color 300ms var(--e-ui)}
.link-arrow span{transition:transform 300ms var(--e-ui)}
.link-arrow:hover{border-color:var(--accent);color:var(--accent)}
.link-arrow:hover span{transform:translateX(4px)}

/* ---------- spec tables ---------- */
.spec{margin-top:2.2em;border-top:1px solid var(--line)}
.spec>div{display:grid;grid-template-columns:minmax(110px,.28fr) 1fr;gap:var(--gutter);
  padding:.85em 0;border-bottom:1px solid var(--line);position:relative}
.spec>div::after{content:'';position:absolute;left:0;bottom:-1px;width:100%;height:1px;
  background:var(--line-strong);transform:scaleX(0);transform-origin:left;
  transition:transform 620ms var(--e-reveal)}
.spec>div.is-in::after{transform:scaleX(1)}
.spec dt{font:500 var(--fs-mono-s)/1.6 var(--mono);letter-spacing:.24em;
  text-transform:uppercase;color:var(--text-faint)}
.spec dd{font:400 var(--fs-mono)/1.6 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--text)}
.spec-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);margin-top:0}
.spec-row>div{grid-template-columns:auto;gap:.3em;align-content:start}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.7em;padding:1.05em 1.6em;
  font:500 var(--fs-mono)/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--line-strong);position:relative;overflow:hidden;isolation:isolate;
  min-height:44px;transition:border-color 300ms var(--e-ui),color 300ms var(--e-ui),
  background 300ms var(--e-ui)}
.btn>span{transition:transform 300ms var(--e-ui)}
.btn-solid{background:var(--accent);color:var(--black);border-color:var(--accent)}
.btn-solid:hover{background:var(--text);border-color:var(--text)}
.btn-ghost{color:var(--text);background:rgba(6,6,8,.35)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn:hover>span{transform:translateX(4px)}
.btn-sm{padding:.85em 1.2em;margin-top:1.4em}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:2.2em}

/* ---------- lists ---------- */
.checklist{display:grid;gap:.75em;margin-top:1.6em}
.checklist li{display:grid;grid-template-columns:18px 1fr;gap:14px;align-items:baseline;
  color:var(--text);line-height:1.5}
.checklist li::before{content:'';width:10px;height:10px;border:1px solid var(--accent);
  transform:translateY(1px) rotate(45deg);transition:border-color 900ms var(--e-reveal)}
.checklist.two{grid-template-columns:repeat(2,1fr);column-gap:var(--gutter)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:1.4em}
.tags li,.tags a{font:500 var(--fs-mono-s)/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-dim);border:1px solid var(--line-strong);padding:.75em .9em;
  transition:color 260ms var(--e-ui),border-color 260ms var(--e-ui)}
.tags a:hover{color:var(--text);border-color:var(--accent)}

/* ---------- framed photograph ---------- */
.media{position:relative}
.media picture{display:block;position:relative;overflow:hidden;aspect-ratio:var(--ar,4/5);
  background:var(--panel)}
.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--op,50% 50%);filter:var(--grade);
  transform:scale(1.08);transition:transform 1500ms var(--e-reveal)}
.media picture::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,6,8,0) 55%,rgba(6,6,8,.55) 100%);
  box-shadow:inset 0 0 0 1px var(--line)}
html.js .media[data-rv] picture{clip-path:inset(0 0 100% 0);
  transition:clip-path 1000ms var(--e-reveal)}
html.js .media[data-rv].is-in picture{clip-path:inset(0)}
.media.is-in img{transform:scale(1)}
.media figcaption{display:flex;gap:1em;margin-top:1em;font:400 var(--fs-mono-s)/1.6 var(--mono);
  letter-spacing:.2em;text-transform:uppercase;color:var(--text-faint)}
.media figcaption b{color:var(--accent);font-weight:500;transition:color 900ms var(--e-reveal)}
/* the [data-rv] fade would double up with the clip — the figure itself stays put */
html.js .media[data-rv]{opacity:1!important;transform:none!important}

.ticks{position:absolute;inset:-7px;pointer-events:none;z-index:2}
.ticks i{position:absolute;width:14px;height:14px;border:1px solid var(--accent);opacity:.8;
  transition:border-color 900ms var(--e-reveal)}
.ticks i:nth-child(1){top:0;left:0;border-width:1px 0 0 1px}
.ticks i:nth-child(2){top:0;right:0;border-width:1px 1px 0 0}
.ticks i:nth-child(3){bottom:0;left:0;border-width:0 0 1px 1px}
.ticks i:nth-child(4){bottom:0;right:0;border-width:0 1px 1px 0}

/* full-bleed photographic band */
.band{position:relative;overflow:hidden;isolation:isolate}
.band-photo{position:absolute;inset:-6% 0;z-index:-2;
  transform:translate3d(0,calc(var(--sy,0) * .08px),0) scale(var(--zoom,1))}
.band-photo picture,.band-photo img{width:100%;height:100%;object-fit:cover;
  object-position:var(--op,50% 50%)}
.band-photo img{filter:var(--grade)}
.band::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,var(--black) 0,rgba(6,6,8,.4) 22%,rgba(6,6,8,.4) 78%,var(--black) 100%),
             linear-gradient(90deg,rgba(6,6,8,.8) 0,rgba(6,6,8,.3) 60%,rgba(6,6,8,.1) 100%)}

/* ==========================================================================
   EYES
   ========================================================================== */
.mrx-defs{position:absolute;width:0;height:0;overflow:hidden}

.mrx-eye{position:absolute;display:block;pointer-events:none;
  transition:opacity 620ms var(--e-reveal);
  left:var(--x);top:var(--y);width:var(--s);
  transform:translate(-50%,-50%);opacity:var(--o,1)}
.eye-svg{width:100%;height:auto;overflow:visible}

/* the eye is built in layers, back to front: a shaded sclera, a graded iris
   with a limbal ring, the pupil, two catchlights, the socket shadow the brow
   casts, and finally a lid that sweeps DOWN rather than pinching shut. */
.eye-sclera{fill:url(#mrx-sclera)}
.eye-iris{fill:url(#mrx-irisg)}
.eye-fleck{fill:none;stroke:rgba(255,255,255,.1);stroke-width:3.4;
  stroke-dasharray:1.4 2.9}
.eye-limbal{fill:none;stroke:rgba(0,0,0,.55);stroke-width:1.8}
.eye-pupil{fill:#040405;transform-box:view-box;transform-origin:50px 28px;
  transform:scale(var(--pr,1));transition:transform 260ms var(--e-ui)}
.eye-spec{fill:rgba(255,255,255,.58)}
.eye-spec-b{fill:rgba(255,255,255,.22)}
.eye-shade{fill:url(#mrx-shade);pointer-events:none}
.eye-pupilg{transform-box:view-box;transform-origin:50px 28px}

/* lid: a shaped blade parked above the eye, translated down to close.
   -3 keeps it clear of the upper lash line when open; 50 buries the eye. */
.eye-lidg{transform-box:view-box;
  transform:translateY(calc(var(--lid,0) * 50px - 3px));
  transition:transform 140ms cubic-bezier(.4,0,.6,1)}
.eye-lid{fill:var(--black)}
.eye-lash{fill:none;stroke:var(--eye-stroke);stroke-width:1.4;
  vector-effect:non-scaling-stroke}
.eye-line-up{fill:none;stroke:var(--eye-stroke);stroke-width:1.7;
  stroke-linecap:round;vector-effect:non-scaling-stroke}
.eye-line-dn{fill:none;stroke:var(--eye-stroke-soft);stroke-width:1;
  stroke-linecap:round;vector-effect:non-scaling-stroke}
.mrx-defs stop{transition:stop-color 900ms var(--e-reveal)}
.mrx-eye.is-closing .eye-lidg{transition-duration:180ms}
/* lidded: the upper arc recedes and the lower lash line carries the shape,
   so a shut eye reads as a closed eye rather than an empty socket */
.eye-line-up,.eye-line-dn{transition:stroke 900ms var(--e-reveal),
  opacity 200ms var(--e-ui),stroke-width 200ms var(--e-ui)}
.mrx-eye.is-lidded .eye-line-up{opacity:.22}
.mrx-eye.is-lidded .eye-line-dn{stroke:var(--eye-stroke);stroke-width:1.5}
.mrx-eye.is-shut{--lid:1}
.mrx-eye.is-awake .eye-pupilg{will-change:transform}

/* ==========================================================================
   PRELOADER (first visit only)
   ========================================================================== */
#mrx-preload{position:fixed;inset:0;z-index:9998;background:var(--black);
  display:grid;place-items:center;transition:opacity 560ms var(--e-mech),transform 560ms var(--e-mech)}
#mrx-preload.is-out{opacity:0;transform:scale(1.06);pointer-events:none}
html.is-arriving #mrx-preload{display:none}
.pre-grid{display:grid;grid-template-columns:repeat(40,1fr);gap:1px;
  width:min(78vw,78vh*1.667);aspect-ratio:40/24}
.pre-grid i{background:currentColor;color:var(--silver-1);opacity:0;
  transition:opacity 260ms linear var(--d,0ms)}
.pre-grid i.on{opacity:var(--tgt,1);transition:opacity 620ms var(--e-reveal) var(--d,0ms)}
.pre-grid i.iris{color:var(--red)}
.pre-grid.blink i{opacity:0!important;transition:opacity 160ms linear!important}
.pre-bar{position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--line)}
.pre-bar i{display:block;height:100%;background:var(--red);
  transform:scaleX(var(--p,0));transform-origin:left;transition:transform 300ms linear}

/* ==========================================================================
   PAGE TRANSITION — the page blinks.
   Two lids close over the page you are leaving, meet on a red seam with the
   destination's name, and open on the page you arrive at.
   ========================================================================== */
#mrx-lids{position:fixed;inset:0;z-index:9997;pointer-events:none}
.lid{position:absolute;left:0;width:100%;height:50.5%;background:#08080a;
  transition:transform 640ms var(--e-reveal) 60ms}
.lid-t{top:0;transform:translateY(-101%);border-bottom:1px solid var(--line)}
.lid-b{bottom:0;transform:translateY(101%);border-top:1px solid var(--line)}
/* the lids carry the lash line of the eye motif on their leading edge */
.lid-t::after,.lid-b::after{content:'';position:absolute;left:0;width:100%;height:28px;
  background:radial-gradient(60% 100% at 50% 100%,rgba(224,31,38,.12),transparent 70%)}
.lid-t::after{bottom:0}
.lid-b::after{top:0;transform:scaleY(-1)}
.lid-seam{position:absolute;left:0;top:50%;width:100%;height:1px;background:var(--red);
  transform:scaleX(0);transition:transform 380ms var(--e-mech)}
.lid-label{position:absolute;left:50%;top:50%;transform:translate(-50%,calc(-100% - 14px));
  font:500 var(--fs-mono)/1 var(--mono);letter-spacing:.32em;text-transform:uppercase;
  color:var(--text-dim);opacity:0;transition:opacity 200ms var(--e-ui);white-space:nowrap}
.lid-label::before{content:'\25B8\00a0\00a0';color:var(--red)}
html.lids-shut #mrx-lids{pointer-events:auto}
html.lids-shut .lid{transform:none;transition:transform 420ms var(--e-mech)}
html.lids-shut .lid-seam{transform:scaleX(1);transition-delay:300ms}
html.lids-shut .lid-label{opacity:1;transition-delay:280ms}
/* failsafe: if a script never runs, the page still opens */
html.lids-shut.is-arriving .lid-t{animation:mrx-lid-t 640ms var(--e-reveal) 3.5s forwards}
html.lids-shut.is-arriving .lid-b{animation:mrx-lid-b 640ms var(--e-reveal) 3.5s forwards}
@keyframes mrx-lid-t{to{transform:translateY(-101%)}}
@keyframes mrx-lid-b{to{transform:translateY(101%)}}

/* ==========================================================================
   NAV
   ========================================================================== */
#mrx-nav{position:fixed;top:0;left:0;width:100%;z-index:900;height:68px;
  transition:transform 320ms var(--e-ui),background 320ms var(--e-ui),
             backdrop-filter 320ms var(--e-ui),border-color 320ms var(--e-ui);
  border-bottom:1px solid transparent}
#mrx-nav.is-stuck{background:rgba(6,6,8,.78);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line)}
#mrx-nav.is-hidden{transform:translateY(-100%)}
.nav-inner{height:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--margin);
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(20px,4vw,56px)}
.nav-logo img{height:28px;width:auto}
.nav-links{display:flex;gap:clamp(18px,2.6vw,38px)}
.nav-links a{font:500 var(--fs-mono)/1 var(--mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-dim);position:relative;padding:8px 0;
  transition:color 280ms var(--e-ui)}
.nav-links a::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:right;
  transition:transform 280ms var(--e-ui)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--text)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav-right{display:flex;align-items:center;gap:14px}
.nav-tel{font:500 var(--fs-mono)/1 var(--mono);letter-spacing:.16em;color:var(--text-dim);
  transition:color 280ms var(--e-ui)}
.nav-tel:hover{color:var(--text)}
.nav-cta{display:inline-flex;align-items:center;gap:.8em;padding:.8em 1.25em;
  border:1px solid var(--line-strong);font:500 var(--fs-mono)/1 var(--mono);
  letter-spacing:.2em;text-transform:uppercase;transition:border-color 280ms var(--e-ui)}
.nav-cta:hover,.nav-cta[aria-current="page"]{border-color:var(--accent)}
.nav-cta .dot{width:5px;height:5px;border-radius:50%;background:var(--accent);
  animation:mrx-pulse 2s var(--e-ui) infinite;transition:background 900ms var(--e-reveal)}
@keyframes mrx-pulse{0%,100%{opacity:.35}50%{opacity:1}}
.nav-progress{position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:var(--accent);transform:scaleX(var(--progress,0));transform-origin:left;
  transition:background 900ms var(--e-reveal)}
.nav-burger{display:none;width:44px;height:44px;place-items:center;
  place-content:center;gap:5px}
.nav-burger i{display:block;width:18px;height:1px;background:var(--text);
  transition:transform 300ms var(--e-mech),opacity 200ms}
.nav-burger[aria-expanded="true"] i:first-child{transform:translateY(3px) rotate(45deg)}
.nav-burger[aria-expanded="true"] i:last-child{transform:translateY(-3px) rotate(-45deg)}

.nav-panel{position:fixed;inset:0;z-index:890;background:#08080a;
  display:grid;align-content:center;padding:0 var(--margin);
  opacity:0;transition:opacity 320ms var(--e-ui)}
.nav-panel.is-open{opacity:1}
.nav-panel[hidden]{display:none}
.nav-panel-eyes{position:absolute;inset:0;opacity:.5}
.nav-panel-links{position:relative;display:grid;gap:.2em}
.nav-panel-links a{display:flex;align-items:baseline;gap:.7em;
  font-family:var(--display);font-size:clamp(1.9rem,8vw,2.6rem);font-weight:700;
  text-transform:uppercase;line-height:1.12;opacity:0;transform:translateY(14px);
  transition:opacity 420ms var(--e-reveal) var(--d),transform 420ms var(--e-reveal) var(--d)}
.nav-panel-links a small{font:500 var(--fs-mono-s)/1 var(--mono);letter-spacing:.2em;color:var(--accent)}
.nav-panel-links a[aria-current="page"]{color:var(--text-faint)}
.nav-panel.is-open .nav-panel-links a{opacity:1;transform:none}
.nav-panel-foot{position:relative;margin-top:2.4em;display:grid;gap:.9em;
  font:500 var(--fs-mono)/1.4 var(--mono);letter-spacing:.2em;color:var(--text-dim)}

/* ---------- services dropdown ---------- */
.nav-drop{position:relative;display:flex;align-items:center;gap:2px}
.drop-toggle{width:22px;height:30px;display:grid;place-items:center}
.drop-toggle i{width:6px;height:6px;border:solid var(--text-dim);border-width:0 1px 1px 0;
  transform:translateY(-2px) rotate(45deg);transition:transform 300ms var(--e-ui),border-color 300ms var(--e-ui)}
.nav-drop:hover .drop-toggle i,.nav-drop.is-open .drop-toggle i{transform:translateY(1px) rotate(225deg);border-color:var(--accent)}
.drop-panel{position:absolute;top:calc(100% + 18px);left:-28px;width:min(640px,80vw);
  display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:10px;
  background:rgba(10,10,12,.97);border:1px solid var(--line-strong);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 30px 60px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity 240ms var(--e-ui),transform 320ms var(--e-reveal),visibility 0s 320ms}
/* a bridge across the gap so the pointer can travel from link to panel */
.drop-panel::before{content:'';position:absolute;left:0;right:0;top:-20px;height:20px}
.drop-panel::after{content:'';position:absolute;left:40px;top:-1px;width:40px;height:1px;background:var(--accent)}
.nav-drop:hover .drop-panel,.nav-drop:focus-within .drop-panel,.nav-drop.is-open .drop-panel{
  opacity:1;visibility:visible;transform:none;transition:opacity 240ms var(--e-ui),transform 320ms var(--e-reveal),visibility 0s}
.nav-drop.is-closed .drop-panel{opacity:0;visibility:hidden;transform:translateY(-8px)}
.drop-item{display:grid;grid-template-columns:76px 1fr;gap:14px;align-items:center;padding:10px;
  border:1px solid transparent;transition:background 240ms var(--e-ui),border-color 240ms var(--e-ui)}
.drop-item:hover,.drop-item:focus-visible,.drop-item[aria-current="page"]{background:var(--panel-2);border-color:var(--line)}
.drop-thumb{display:block;width:76px;aspect-ratio:1;overflow:hidden;background:var(--panel)}
.drop-thumb img{width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%);filter:var(--grade);
  transition:transform 600ms var(--e-reveal)}
.drop-item:hover .drop-thumb img{transform:scale(1.08)}
.drop-txt{display:grid;gap:4px}
.drop-txt .n{font:500 var(--fs-mono-s)/1 var(--mono);letter-spacing:.22em;color:var(--accent)}
.drop-txt b{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:.92rem;line-height:1.15;color:var(--text)}
.drop-txt span:last-child{font-size:.8rem;line-height:1.4;color:var(--text-dim)}
.drop-all{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;padding:14px 12px 8px;margin-top:4px;
  border-top:1px solid var(--line);font:500 var(--fs-mono)/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);
  transition:color 240ms var(--e-ui)}
.drop-all:hover{color:var(--text)}
.nav-links .drop-panel a::after{display:none}
/* the panel's links must not inherit the top-level nav's mono caps */
.nav-links .drop-panel a{font:400 1rem/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--text);padding:10px}
.nav-links .drop-panel a.drop-all{font:500 var(--fs-mono)/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-dim);padding:14px 12px 8px}
.nav-links .drop-panel a.drop-all:hover{color:var(--text)}
.drop-thumb picture{display:block;width:100%;height:100%}
.nav-panel-sub{display:grid;gap:.5em;margin:.3em 0 .7em 2.6em}
.nav-panel-links .nav-panel-sub a.sub{font:500 var(--fs-mono)/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-dim)}
.nav-panel-links .nav-panel-sub a.sub[aria-current="page"]{color:var(--accent)}

/* ==========================================================================
   HOME HERO
   ========================================================================== */
#mrx-hero{min-height:100svh;display:grid;align-items:center;overflow:hidden;
  padding-block:120px 90px}
/* --opx/--opy are the photo's focal point: the officer stands right of
   centre with empty backdrop to the left, so the crop is anchored right -
   the face lands mid-plate and the bare backdrop runs under the fade */
.hero-photo{position:absolute;inset:0 0 0 auto;width:54%;z-index:0;
  --opx:100%;--opy:24%;
  transform:translate3d(0,calc(var(--sy,0) * -.06px),0)}
.hero-photo picture,.hero-photo img{width:100%;height:100%;object-fit:cover;
  object-position:var(--opx) var(--opy)}
.hero-photo img{filter:saturate(.88) contrast(1.06) brightness(.94)}
.hero-photo::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,var(--black) 0 4%,rgba(6,6,8,.7) 14%,
                             rgba(6,6,8,.18) 30%,rgba(6,6,8,0) 44%),
             linear-gradient(180deg,rgba(6,6,8,.5) 0,rgba(6,6,8,.04) 22%,
                             rgba(6,6,8,0) 60%,var(--black) 98%)}
.hero-frame{position:absolute;inset:84px 4vw 4vw;z-index:2;pointer-events:none;
  border:1px solid var(--line)}
.hero-frame i{position:absolute;width:12px;height:12px;border:1px solid var(--line-strong)}
.hero-frame i:nth-child(1){top:-1px;left:-1px;border-width:1px 0 0 1px}
.hero-frame i:nth-child(2){top:-1px;right:-1px;border-width:1px 1px 0 0}
.hero-frame i:nth-child(3){bottom:-1px;left:-1px;border-width:0 0 1px 1px}
.hero-frame i:nth-child(4){bottom:-1px;right:-1px;border-width:0 1px 1px 0}

.hero-copy{position:relative;z-index:3;width:100%;max-width:var(--maxw);
  margin-inline:auto;padding-inline:max(var(--margin),8vw)}
.hero-h1{font-size:var(--fs-hero);line-height:.92;letter-spacing:-.012em;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  margin:.28em 0 0;max-width:15ch}
.hero-h1 span{display:block;clip-path:inset(0 0 100% 0);transform:translateY(18px)}
.hero-h1 b{color:transparent;position:relative;display:inline-block;width:.2em}
.hero-h1 b::after{content:'';position:absolute;right:.02em;bottom:.055em;
  width:.155em;height:.155em;background:var(--red)}
.hero-lead{font-size:var(--fs-lead);margin-top:.9em;color:var(--text)}
.hero-body{color:var(--text-dim);margin-top:.5em;max-width:44ch}
.hero-copy .rule{margin:2em 0 1em;max-width:280px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:2em}

.hero-hud{position:absolute;left:calc(4vw + 22px);bottom:calc(4vw + 20px);z-index:3;
  display:flex;gap:2.2em;font:400 var(--fs-mono-s)/1 var(--mono);
  letter-spacing:.22em;text-transform:uppercase;color:var(--text-faint)}
.hero-scroll{position:absolute;right:calc(4vw + 22px);bottom:calc(4vw + 20px);z-index:3;
  width:1px;height:64px;background:var(--line);overflow:hidden}
.hero-scroll i{position:absolute;left:0;width:1px;height:6px;background:var(--accent);
  animation:mrx-scrollcue 1800ms var(--e-ui) infinite}
@keyframes mrx-scrollcue{0%{transform:translateY(-8px)}100%{transform:translateY(64px)}}

/* ==========================================================================
   INNER PAGE HERO
   ========================================================================== */
.page-hero{position:relative;min-height:min(88svh,900px);display:grid;align-items:end;
  overflow:hidden;padding-block:150px clamp(60px,10vh,110px);isolation:isolate}
.ph-photo{position:absolute;inset:-4% 0 0;z-index:-2;
  transform:translate3d(0,calc(var(--sy,0) * -.14px),0)}
.ph-photo picture,.ph-photo img{width:100%;height:100%;object-fit:cover;
  object-position:var(--op,50% 50%)}
.ph-photo img{filter:var(--grade);animation:mrx-settle 2400ms var(--e-reveal) both}
@keyframes mrx-settle{from{transform:scale(1.08)}to{transform:scale(1)}}
.page-hero::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(6,6,8,.94) 0,rgba(6,6,8,.72) 30%,rgba(6,6,8,.2) 66%,rgba(6,6,8,.3) 100%),
             linear-gradient(180deg,rgba(6,6,8,.7) 0,rgba(6,6,8,0) 28%,rgba(6,6,8,0) 58%,var(--black) 100%)}
.page-hero .hero-frame{inset:84px clamp(14px,2.4vw,40px) clamp(14px,2.4vw,40px)}
.ph-copy{position:relative;z-index:3}
.crumbs{display:flex;flex-wrap:wrap;gap:.8em;margin-bottom:2.2em;
  font:500 var(--fs-mono-s)/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--text-faint)}
.crumbs a{color:var(--text-dim);transition:color 260ms var(--e-ui)}
.crumbs a:hover{color:var(--text)}
.crumbs [aria-current]{color:var(--accent)}
.ph-h1{font-family:var(--display);font-size:var(--fs-h1);line-height:.94;letter-spacing:-.012em;
  font-weight:700;text-transform:uppercase;margin-top:.4em;max-width:17ch}
.ph-h1 span{display:block;clip-path:inset(0 0 100% 0);transform:translateY(18px)}
/* SEO: the search phrase rides inside the H1 as its first line, dressed as the
   kicker that used to sit above it. The gap moves onto the first headline line
   so it is measured in the headline's own em, as the old h1 margin was. */
.hero-h1:has(> .h1-kw),.ph-h1:has(> .h1-kw){margin-top:0}
.h1-kw{display:block}
.h1-kw.mark{display:flex}
.hero-h1 > .h1-kw + span{margin-top:.28em}
.ph-h1 > .h1-kw + span{margin-top:.4em}
.ph-lead{font-size:var(--fs-lead);line-height:1.5;max-width:54ch;margin-top:1.3em;color:var(--text)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:2.4em}
.chips a{display:inline-flex;align-items:center;gap:.7em;padding:.85em 1.05em;
  font:500 var(--fs-mono-s)/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--line-strong);background:rgba(6,6,8,.45);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:border-color 260ms var(--e-ui),color 260ms var(--e-ui)}
.chips a b{color:var(--accent);font-weight:500}
.chips a:hover{border-color:var(--accent)}
.ph-hud{position:absolute;right:calc(clamp(14px,2.4vw,40px) + 22px);bottom:calc(clamp(14px,2.4vw,40px) + 20px);
  z-index:3;display:grid;gap:.7em;justify-items:end;font:400 var(--fs-mono-s)/1 var(--mono);
  letter-spacing:.22em;text-transform:uppercase;color:var(--text-faint)}
.ph-hud b{color:var(--text-dim);font-weight:400}

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee{position:relative;border-block:1px solid var(--line);overflow:hidden;
  padding-block:20px;background:var(--black-2)}
.marquee-track{display:flex;width:max-content;animation:mrx-marquee 46s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{display:inline-flex;align-items:center;gap:1.4em;padding-right:1.4em;
  font-family:var(--display);font-weight:600;text-transform:uppercase;white-space:nowrap;
  font-size:clamp(1rem,1.5vw,1.35rem);letter-spacing:.02em;color:var(--text-dim)}
.marquee span::after{content:'';width:7px;height:7px;background:var(--accent);
  transform:rotate(45deg);transition:background 900ms var(--e-reveal)}
@keyframes mrx-marquee{to{transform:translateX(-50%)}}

/* ==========================================================================
   SPLIT (copy beside a photograph)
   ========================================================================== */
.split{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);align-items:center}
.split-text{grid-column:1/7}
.split-media{grid-column:8/13}
.split.flip .split-text{grid-column:7/13;order:2}
.split.flip .split-media{grid-column:1/6;order:1}
.split.top{align-items:start}

/* home: who we are */
#mrx-who{overflow:hidden}
.who-eyes{position:absolute;inset:0;z-index:0}
#mrx-who .wrap{position:relative;z-index:1}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);margin-top:2.6em;
  border-top:1px solid var(--line);padding-top:1.4em}
.facts dt{font:500 var(--fs-mono-s)/1.5 var(--mono);letter-spacing:.24em;text-transform:uppercase;
  color:var(--text-faint)}
.facts dd{margin-top:.6em;font-family:var(--display);font-weight:600;font-size:1.05rem;
  line-height:1.3;text-transform:uppercase}
/* proactive gets underlined, reactive gets struck out */
.swap-on,.swap-off{position:relative;white-space:nowrap;text-decoration:none}
.swap-on{font-style:normal;color:var(--text)}
.swap-off{color:var(--text-faint)}
.swap-on::after,.swap-off::after{content:'';position:absolute;left:-1px;right:-1px;
  height:1px;background:var(--red);transform:scaleX(0);transform-origin:left}
.swap-on::after{bottom:-.16em;transition:transform 420ms var(--e-mech) 200ms}
.swap-off::after{top:54%;transition:transform 380ms var(--e-mech)}
.swap-on.is-struck::after,.swap-off.is-struck::after{transform:scaleX(1)}

/* ==========================================================================
   SERVICES APERTURE (home)
   ========================================================================== */
.svc-outer{height:330vh}
.svc-stage{position:sticky;top:0;height:100svh;display:grid;
  grid-template-rows:1fr auto;align-content:center;padding-block:96px 36px;overflow:hidden}
.svc-inner{display:grid;grid-template-columns:46fr 54fr;gap:clamp(24px,5vw,80px);
  align-items:center}
.svc-list{margin-top:clamp(18px,3vh,40px);display:grid;gap:clamp(6px,1.2vh,16px)}
.svc-tab{display:grid;grid-template-columns:auto 1fr;gap:1em;align-items:baseline;
  text-align:left;width:100%}
.svc-tab .n{font:500 var(--fs-mono)/1 var(--mono);letter-spacing:.2em;color:var(--text-faint);
  transition:color 520ms var(--e-ui)}
.svc-tab .t{font-size:clamp(1.25rem,2.6vw,2.35rem);line-height:1.06;text-transform:uppercase;
  font-family:var(--display);font-weight:700;letter-spacing:-.005em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.2);
  transition:color 520ms var(--e-ui),-webkit-text-stroke-color 520ms var(--e-ui)}
.svc-tab.is-on .t{color:var(--text);-webkit-text-stroke-color:transparent}
.svc-tab.is-on .n{color:var(--accent)}
.svc-tab:hover .t{-webkit-text-stroke-color:rgba(255,255,255,.45)}
.svc-desc{color:var(--text-dim);max-width:46ch;margin-top:clamp(18px,3vh,32px);min-height:4.9em;
  transition:opacity 300ms var(--e-ui)}
.svc-desc.is-swap{opacity:0}
.svc-more{margin-top:1.2em}

.svc-lens{display:grid;place-items:center}
.lens-box{position:relative;width:clamp(300px,34vw,540px);aspect-ratio:4/5;
  max-height:58svh;overflow:hidden}
.lens-box::after{content:'';position:absolute;inset:0;pointer-events:none;
  border:1px solid var(--line-strong);
  box-shadow:inset 0 0 0 7px rgba(6,6,8,.45),inset 0 0 0 8px var(--line)}

/* the aperture: an octagonal iris that shuts on one service and opens on the
   next, twisting 22.5° as it travels. */
.lens-imgs{position:absolute;inset:0;
  clip-path:polygon(123.9% 80.6%,80.6% 123.9%,19.4% 123.9%,-23.9% 80.6%,
                    -23.9% 19.4%,19.4% -23.9%,80.6% -23.9%,123.9% 19.4%);
  transition:clip-path 320ms cubic-bezier(.76,0,.24,1)}
.lens-box.is-closing .lens-imgs{
  clip-path:polygon(54.2% 54.2%,50% 56%,45.8% 54.2%,44% 50%,45.8% 45.8%,50% 44%,54.2% 45.8%,56% 50%)}
.lens-imgs picture{position:absolute;inset:0}
.lens-imgs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--op,50% 50%);filter:var(--grade);opacity:0;transform:scale(1.06)}
.lens-imgs img.is-on{opacity:1;transform:scale(1);
  transition:transform 900ms var(--e-reveal)}
.lens-imgs::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,6,8,0) 50%,rgba(6,6,8,.6) 100%)}
@keyframes mrx-draw{to{stroke-dashoffset:0}}
.lens-ticks{position:absolute;inset:-1px;pointer-events:none}
.lens-ticks i{position:absolute;width:14px;height:14px;border:1px solid var(--accent);
  opacity:.7;transition:border-color 900ms var(--e-reveal)}
.lens-ticks i:nth-child(1){top:0;left:0;border-width:1px 0 0 1px}
.lens-ticks i:nth-child(2){top:0;right:0;border-width:1px 1px 0 0}
.lens-ticks i:nth-child(3){bottom:0;left:0;border-width:0 0 1px 1px}
.lens-ticks i:nth-child(4){bottom:0;right:0;border-width:0 1px 1px 0}

.svc-spec{margin-top:clamp(16px,3vh,36px)}
.svc-rail{position:absolute;right:calc(var(--margin) * .4);top:50%;transform:translateY(-50%);
  display:grid;gap:6px}
.svc-rail i{display:block;width:1px;height:34px;background:var(--line);position:relative}
.svc-rail i::after{content:'';position:absolute;inset:0;background:var(--accent);
  transform:scaleY(var(--f,0));transform-origin:top;transition:background 900ms var(--e-reveal)}

/* linear source — hidden once the stage takes over */
.svc-source{display:grid;gap:clamp(56px,9vh,110px);padding-block:clamp(40px,6vh,80px) clamp(56px,9vh,110px)}
.svc-source-head{display:none}
.svc-source h3{font-size:clamp(1.45rem,3.5vw,2.15rem);line-height:1.1;text-transform:uppercase;
  font-family:var(--display);font-weight:700}
.svc-source h3 .n{display:block;font:500 var(--fs-mono)/2.6 var(--mono);
  letter-spacing:.24em;color:var(--accent);transition:color 900ms var(--e-reveal)}
.svc-source picture{display:block;position:relative;margin-top:1.2em;aspect-ratio:4/5;overflow:hidden}
.svc-source img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--op,50% 50%);filter:var(--grade)}
html.js .svc-source picture{clip-path:inset(0 0 100% 0)}
html.js .svc-source [data-svc].is-in picture{clip-path:inset(0);transition:clip-path 780ms var(--e-reveal)}
.svc-source p{color:var(--text-dim);margin-top:1.2em;max-width:60ch}
html.js .svc-stage-live .svc-source{display:none}
html.js .svc-stage-live .svc-source-head{display:none}

/* ==========================================================================
   THE TURN
   ========================================================================== */
.turn-outer{height:250vh}
.turn-stage{position:sticky;top:0;height:100svh;display:grid;place-items:center;
  overflow:hidden}
.turn-ring{position:absolute;inset:0}
.turn-centre{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.turn-phase{opacity:0;transition:opacity 500ms var(--e-ui)}
.turn-phase.is-on{opacity:1}
.turn-you{display:block;font-size:clamp(2.6rem,7.8vw,6rem);line-height:1.02;text-transform:uppercase;
  font-family:var(--display);font-weight:700;color:var(--red);margin-top:.15em}
.turn-copy{position:relative;z-index:2;max-width:min(760px,86vw);text-align:center;
  max-height:84svh;isolation:isolate;
  opacity:0;transform:translateY(16px);transition:opacity 620ms var(--e-reveal),transform 620ms var(--e-reveal)}
.turn-copy::before{content:'';position:absolute;inset:-10% -18%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(6,6,8,.95) 0 46%,rgba(6,6,8,0) 80%)}
.turn-copy.is-on{opacity:1;transform:none}
.turn-display{font-size:clamp(1.7rem,3.8vw,3.1rem);line-height:.98;text-transform:uppercase;
  font-family:var(--display);font-weight:700;letter-spacing:-.01em}
.turn-copy .body{margin-inline:auto;text-align:left;font-size:.98rem;max-width:58ch}
.turn-copy .spec{text-align:left;margin-top:1.6em}
.turn-copy .spec>div{padding:.6em 0}
.turn-copy .link-arrow{margin-top:1.8em}

/* ==========================================================================
   SECTOR RAIL (home)
   ========================================================================== */
#mrx-sectors{overflow:hidden}
.rail-wrap{position:relative;margin-top:clamp(36px,6vh,64px)}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(250px,23vw,340px);
  gap:var(--gutter);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-inline:max(var(--margin),calc((100vw - var(--maxw)) / 2 + var(--margin)));
  scroll-padding-inline:max(var(--margin),calc((100vw - var(--maxw)) / 2 + var(--margin)));
  scrollbar-width:none;cursor:grab;padding-bottom:4px}
.rail::-webkit-scrollbar{display:none}
.rail.is-drag{cursor:grabbing;scroll-snap-type:none}
.rail.is-drag a{pointer-events:none}
.rail-card{scroll-snap-align:start;position:relative;display:block}
.rail-card picture{display:block;position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--panel)}
.rail-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--op,50% 50%);filter:var(--grade);
  transition:transform 900ms var(--e-reveal),filter 600ms var(--e-ui)}
.rail-card picture::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,6,8,.15) 0,rgba(6,6,8,0) 40%,rgba(6,6,8,.92) 100%);
  box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow 400ms var(--e-ui)}
.rail-card:hover img,.rail-card:focus-visible img{transform:scale(1.06);filter:saturate(1) contrast(1.05)}
.rail-card:hover picture::after{box-shadow:inset 0 0 0 1px var(--accent)}
.rail-card .rc-body{position:absolute;left:0;right:0;bottom:0;padding:clamp(18px,1.8vw,26px)}
.rail-card .n{font:500 var(--fs-mono-s)/1 var(--mono);letter-spacing:.24em;color:var(--accent)}
.rail-card h3{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.15rem,1.6vw,1.45rem);line-height:1.08;margin-top:.6em}
.rail-card p{color:var(--text-dim);font-size:.9rem;line-height:1.5;margin-top:.6em}
.rail-nav{display:flex;align-items:center;gap:18px;margin-top:clamp(24px,4vh,40px)}
.rail-btn{width:48px;height:48px;border:1px solid var(--line-strong);display:grid;place-items:center;
  transition:border-color 260ms var(--e-ui),color 260ms var(--e-ui)}
.rail-btn:hover{border-color:var(--accent);color:var(--accent)}
.rail-btn[disabled]{opacity:.3;pointer-events:none}
.rail-progress{flex:1;height:1px;background:var(--line);position:relative;max-width:420px}
.rail-progress i{position:absolute;inset:0;background:var(--accent);transform-origin:left;
  transform:scaleX(var(--rp,.1))}

/* ==========================================================================
   STATS
   ========================================================================== */
#mrx-assurance{padding-block:clamp(110px,18vh,210px)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(34px,6vh,70px)}
.stats>div{padding:0 clamp(12px,2vw,30px);border-left:1px solid var(--line-strong)}
.stats>div:first-child{border-left:0;padding-left:0}
.stats dd{font:500 clamp(3rem,7vw,6.5rem)/1 var(--mono);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--text)}
.stats dt{font:500 var(--fs-mono)/1.6 var(--mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-dim);margin-top:1.4em;max-width:18ch}
.stats-note{margin-top:clamp(40px,7vh,72px);display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:20px;border-top:1px solid var(--line-strong);padding-top:24px}
.stats-note p{font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(1.05rem,1.8vw,1.5rem);max-width:34ch;line-height:1.2}

/* ==========================================================================
   LEADERSHIP
   ========================================================================== */
/* about: the four leaders as a portrait grid. Headshots share one framing
   (4:5, eyes at ~38%), so they sit at rest with no crop or zoom. */
.lead-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter);
  margin-top:clamp(40px,7vh,72px)}
.lead-grid picture{display:block;position:relative;overflow:hidden;
  border:1px solid var(--line);background:var(--black)}
.lead-grid picture::after{content:'';position:absolute;inset:auto 0 0 0;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform 520ms var(--e-reveal)}
.lead-grid img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;
  object-position:50% 20%;filter:var(--grade);transition:filter 600ms var(--e-ui)}
.lead-grid li:hover img{filter:none}
.lead-grid li:hover picture::after{transform:scaleX(1)}
.lead-grid h3{font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(1.1rem,1.5vw,1.4rem);line-height:1.15;margin-top:1.1em}
.lead-grid p{font:500 var(--fs-mono)/1.5 var(--mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--iris-hi);margin-top:.7em}
.pull-meta .media img{transform:none!important;object-position:50% 20%}

/* home: the chain of command as full-width rows. The portrait wipes in on
   the right as each row scrolls in; the head opens the message. --cmd-zone is
   the right-hand band the tile is centred in. */
.cmd-rows{--cmd-h:clamp(260px,32vh,320px);--cmd-w:calc(var(--cmd-h)*.8);
  --cmd-zone:min(27%,320px);
  margin-top:clamp(40px,7vh,72px);border-top:1px solid var(--line)}
.cmd-row{position:relative;border-bottom:1px solid var(--line);overflow:hidden;
  transition:background 420ms var(--e-ui)}
.cmd-row:hover,.cmd-row:focus-within{background:var(--black-2)}
/* the tile is the portrait's own 4:5, one head deep, so the whole head and
   shoulders always show; an opened message runs on below it */
.cmd-photo{position:absolute;top:0;right:max(0px,calc((var(--cmd-zone) - var(--cmd-w))/2));
  width:var(--cmd-w);height:var(--cmd-h);z-index:0;background:var(--black);
  clip-path:inset(0 0 0 100%);transition:clip-path 620ms var(--e-reveal)}
.cmd-row.is-in .cmd-photo,.cmd-row:hover .cmd-photo,
.cmd-row:focus-within .cmd-photo,.cmd-row.is-open .cmd-photo{clip-path:inset(0)}
.cmd-photo picture{display:block;position:absolute;inset:0}
.cmd-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;
  filter:var(--grade);transition:filter 620ms var(--e-ui)}
.cmd-row:hover .cmd-photo img,.cmd-row:focus-within .cmd-photo img,
.cmd-row.is-open .cmd-photo img{filter:none}
/* the headshots are shot on the page's own charcoal; just fade the chest out */
.cmd-photo::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,6,8,0) 70%,var(--black) 100%)}
.cmd-sweep{position:absolute;inset:0;opacity:0;pointer-events:none;z-index:1;
  background:linear-gradient(105deg,transparent 34%,rgba(216,218,222,.18) 50%,transparent 66%);
  background-size:280% 100%;background-position:100% 0}
.cmd-row:hover .cmd-sweep,.cmd-row:focus-within .cmd-sweep,.cmd-row.is-open .cmd-sweep{
  opacity:1;background-position:0 0;transition:opacity 300ms,background-position 900ms var(--e-reveal)}
.cmd-head{position:relative;z-index:1;display:grid;
  grid-template-columns:200px 1fr 220px 40px;align-items:center;gap:var(--gutter);
  width:100%;max-width:var(--maxw);margin-inline:auto;
  min-height:var(--cmd-h);
  padding:clamp(28px,5vh,54px) var(--margin);text-align:left;
  /* keep the role and the toggle out from under the portrait tile */
  padding-right:calc(max(var(--cmd-zone),var(--cmd-w)) + var(--gutter))}
.cmd-n{font:500 var(--fs-mono-s)/1 var(--mono);letter-spacing:.24em;white-space:nowrap;
  text-transform:uppercase;color:var(--accent)}
.cmd-name{font-size:clamp(1.45rem,3.05vw,2.9rem);line-height:1.04;text-transform:uppercase;
  font-family:var(--display);font-weight:700;letter-spacing:-.01em;position:relative;
  transition:transform 620ms var(--e-reveal)}
.cmd-row:hover .cmd-name,.cmd-row:focus-within .cmd-name{transform:translateX(24px)}
.cmd-name::after{content:'';position:absolute;left:0;bottom:-.16em;width:100%;height:1px;
  background:var(--silver-2);transform:scaleX(0);transform-origin:left;
  transition:transform 420ms var(--e-reveal)}
.cmd-row:hover .cmd-name::after,.cmd-row:focus-within .cmd-name::after{transform:scaleX(1)}
.cmd-badge{display:inline-block;vertical-align:middle;margin-left:.5em;padding:.34em .6em;
  border:1px solid var(--silver-1);font:500 var(--fs-mono-s)/1 var(--mono);
  letter-spacing:.2em;color:var(--silver-2);text-transform:uppercase}
.cmd-role{font:400 var(--fs-mono)/1.5 var(--mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-dim)}
.cmd-plus{justify-self:end;position:relative;width:16px;height:16px}
.cmd-plus::before,.cmd-plus::after{content:'';position:absolute;inset:50% 0 auto;
  height:1px;background:var(--text-dim);transition:transform 420ms var(--e-mech)}
.cmd-plus::after{transform:rotate(90deg)}
.cmd-row.is-open .cmd-plus::after{transform:rotate(0)}
.cmd-bio{position:relative;z-index:1;display:grid;grid-template-rows:0fr;
  transition:grid-template-rows 520ms var(--e-reveal)}
.cmd-row.is-open .cmd-bio{grid-template-rows:1fr}
.cmd-bio-in{overflow:hidden}
.cmd-bio-wrap{max-width:var(--maxw);margin-inline:auto;
  padding:0 calc(max(var(--cmd-zone),var(--cmd-w)) + var(--gutter)) clamp(30px,5vh,56px) var(--margin);
  display:grid;grid-template-columns:200px 1fr;gap:var(--gutter)}
.cmd-bio p{grid-column:2;max-width:64ch;color:var(--text-dim);font-size:1.02rem}
html.no-js .cmd-bio{grid-template-rows:1fr}
html.no-js .cmd-photo,html.no-io .cmd-photo,html.no-motion .cmd-photo{clip-path:inset(0)}

/* pull quotes */
.pull{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);
  padding-block:clamp(40px,7vh,80px);border-top:1px solid var(--line)}
.pull+.pull{border-top-color:var(--line)}
.pull-meta{grid-column:1/4}
.pull-meta .media{max-width:150px;margin-top:1.4em}
.pull-meta .media picture{--ar:4/5}
.pull blockquote{grid-column:5/13}
.pull blockquote p{font-size:clamp(1.2rem,2vw,1.75rem);line-height:1.45;color:var(--text);
  text-indent:-.45em}
.pull blockquote p+p{margin-top:1em}
.pull cite{display:block;margin-top:1.6em;font:500 var(--fs-mono)/1.6 var(--mono);font-style:normal;
  letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim)}
.pull cite b{color:var(--text);font-weight:500}

/* ==========================================================================
   ABOUT — doctrine, pillars, values
   ========================================================================== */
.doc-panels{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gutter);
  margin-top:clamp(36px,6vh,64px)}
.doc-panel{position:relative;padding:clamp(28px,3.6vw,60px);border:1px solid var(--line);
  background:linear-gradient(180deg,#0d0d10 0,#08080a 100%);overflow:hidden}
.doc-panel::before{content:'\201C';position:absolute;right:.12em;top:-.18em;
  font:700 clamp(8rem,14vw,14rem)/1 var(--display);color:rgba(255,255,255,.035);pointer-events:none}
.doc-panel h3{font:500 var(--fs-mono)/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;
  color:var(--accent);display:flex;align-items:center;gap:1em}
.doc-panel h3::after{content:'';flex:1;height:1px;background:var(--line)}
.doc-statement{font-size:clamp(1.2rem,1.7vw,1.6rem);line-height:1.44;margin-top:1.2em;font-weight:400}
.doc-statement span{position:relative;display:block;overflow:hidden}
/* a redaction, not a black box — the 1px red edge is what names it */
.doc-statement span::after{content:'';position:absolute;inset:0 -.3em;
  background:#121215;border-left:1px solid var(--red);pointer-events:none;
  transform:translateX(0);
  transition:transform 520ms var(--e-reveal) var(--d,0ms)}
.doc-statement span.is-open::after{transform:translateX(103%)}
html.no-js .doc-statement span::after,html.no-io .doc-statement span::after{display:none}

.pillars{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(40px,7vh,72px);
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.pillar,.feature{position:relative;padding:clamp(26px,3vw,46px);border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);transition:background 420ms var(--e-ui)}
.pillar::before,.feature::before{content:'';position:absolute;left:-1px;top:-1px;width:28px;height:1px;
  background:var(--accent);transition:width 520ms var(--e-reveal),background 900ms var(--e-reveal)}
.pillar:hover,.feature:hover{background:var(--black-2)}
.pillar:hover::before,.feature:hover::before{width:calc(100% + 2px)}
.pillar-ico{width:44px;height:44px;color:var(--accent);transition:color 900ms var(--e-reveal)}
.pillar-ico *{fill:none;stroke:currentColor;stroke-width:1.2;vector-effect:non-scaling-stroke}
.pillar .n,.feature .n{display:block;margin-top:1.8em;font:500 var(--fs-mono-s)/1 var(--mono);
  letter-spacing:.24em;color:var(--text-faint)}
.pillar h3,.feature h3{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.12;margin-top:.6em}
.pillar p,.feature p{color:var(--text-dim);margin-top:.9em;font-size:.97rem}

.values{margin-top:clamp(36px,6vh,64px);border-top:1px solid var(--line)}
.values li{display:grid;grid-template-columns:80px minmax(0,1.1fr) minmax(0,1fr);gap:var(--gutter);
  align-items:baseline;padding-block:clamp(18px,2.6vh,28px);border-bottom:1px solid var(--line)}
.values .n{font:500 var(--fs-mono)/1 var(--mono);letter-spacing:.2em;color:var(--text-faint)}
.values h3{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.6rem,4vw,3.4rem);line-height:1;color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.32);transition:color 420ms var(--e-ui),-webkit-text-stroke-color 420ms var(--e-ui)}
.values li:hover h3,.values li.is-in h3{color:var(--text);-webkit-text-stroke-color:transparent}
.values p{color:var(--text-dim);max-width:46ch}

/* ==========================================================================
   SERVICES PAGE
   ========================================================================== */
.svc-detail{padding-block:var(--sec);border-top:1px solid var(--line)}
.svc-detail .n-big{font:700 clamp(4rem,9vw,8rem)/.8 var(--display);color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.14);display:block}
.svc-detail .h2{max-width:16ch}
.svc-detail .spec-row{margin-top:2.4em}
.svc-detail .split{align-items:start}
/* the copy runs long; the photograph travels with it rather than floating mid-gap */
.svc-detail .split-media{position:sticky;top:110px}
.svc-detail .media{position:relative}
.svc-detail h4{font:500 var(--fs-mono)/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;
  color:var(--text-faint);margin-top:2.4em}

.includes{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gutter);
  margin-top:clamp(36px,6vh,60px)}
.include{border-top:1px solid var(--line-strong);padding-top:1.2em}
.include svg{width:34px;height:34px;color:var(--accent);transition:color 900ms var(--e-reveal)}
.include svg *{fill:none;stroke:currentColor;stroke-width:1.2;vector-effect:non-scaling-stroke}
.include h3{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:1.02rem;
  line-height:1.2;margin-top:1.1em}
.include p{color:var(--text-dim);font-size:.92rem;margin-top:.6em}

.steps{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gutter);
  margin-top:clamp(40px,7vh,72px)}
.steps::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:var(--line)}
.steps::after{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform 1600ms var(--e-reveal),background 900ms var(--e-reveal)}
.steps.is-in::after{transform:scaleX(1)}
.step{position:relative;padding-top:2em}
.step::before{content:'';position:absolute;left:0;top:-4px;width:9px;height:9px;
  background:var(--black);border:1px solid var(--accent);transform:rotate(45deg);
  transition:background 400ms var(--e-ui) var(--sd,0ms),border-color 900ms var(--e-reveal)}
.steps.is-in .step::before{background:var(--accent)}
.step .n{font:500 var(--fs-mono)/1 var(--mono);letter-spacing:.24em;color:var(--text-faint)}
.step h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.2rem;
  line-height:1.12;margin-top:.8em}
.step p{color:var(--text-dim);font-size:.95rem;margin-top:.7em}

/* services hub cards */
.svc-cards{display:grid;gap:clamp(48px,8vh,96px);margin-top:clamp(40px,7vh,72px)}
.svc-card{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);align-items:center}
.svc-card-media{grid-column:1/7;display:block}
.svc-card-body{grid-column:8/13;position:relative}
.svc-card.flip .svc-card-media{grid-column:7/13;order:2}
.svc-card.flip .svc-card-body{grid-column:1/6;order:1}
.svc-card-media:hover .media img{transform:scale(1.04)}
.svc-card .n-big{font:700 clamp(3.5rem,7vw,6.5rem)/.8 var(--display);color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.14);display:block;margin-bottom:.2em}
.svc-card-title{text-transform:uppercase;font-weight:700;font-size:clamp(1.6rem,2.8vw,2.5rem);line-height:1.02;margin-top:.5em}
.svc-card-title a{transition:color 260ms var(--e-ui)}
.svc-card-title a:hover{color:var(--accent)}

/* service pages */
.page-hero .actions{margin-top:2em}
.ph-spec{display:grid;gap:.5em;justify-items:end}
.ph-spec div{display:flex;gap:1em}
.ph-spec dt{color:var(--text-faint)}
.ph-spec dd{color:var(--text-dim)}
.feat-band{padding-block:clamp(120px,20vh,220px)}
.feat-band::after{background:linear-gradient(180deg,var(--black) 0,rgba(6,6,8,.15) 22%,rgba(6,6,8,.15) 78%,var(--black) 100%),
  linear-gradient(90deg,rgba(6,6,8,.88) 0,rgba(6,6,8,.55) 42%,rgba(6,6,8,0) 75%)}
.feat-band .band-photo img{filter:saturate(.95) contrast(1.05) brightness(1)}
.feat-band .checklist{max-width:56ch}
.audience{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter);margin-top:clamp(36px,6vh,60px)}
.audience li{border-top:1px solid var(--line-strong);padding-top:1.2em}
.audience .n{font:500 var(--fs-mono-s)/1 var(--mono);letter-spacing:.24em;color:var(--accent)}
.audience h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.15rem;line-height:1.15;margin-top:.8em}
.audience p{color:var(--text-dim);font-size:.95rem;margin-top:.6em}
#for .rail-wrap{margin-top:clamp(40px,6vh,64px)}
#for .rail{grid-auto-columns:clamp(250px,30vw,440px)}
#for .rail-card picture{aspect-ratio:16/10}
.others{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);margin-top:clamp(32px,5vh,56px)}
.others .rail-card picture{aspect-ratio:4/3}
.svc-pager{display:flex;gap:24px;font:500 var(--fs-mono)/1 var(--mono);letter-spacing:.18em;text-transform:uppercase}
.svc-pager a{color:var(--text-dim);border-bottom:1px solid var(--line-strong);padding:.6em 0;transition:color 260ms var(--e-ui),border-color 260ms var(--e-ui)}
.svc-pager a:hover{color:var(--text);border-color:var(--accent)}
#faq .body .link-arrow{padding:0;margin-inline:.2em}

/* plan-view diagrams (one per service page) */
.schem-fig{position:relative;border:1px solid var(--line);padding:clamp(14px,1.8vw,26px);
  background:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px) 0 0/20px 20px,
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px) 0 0/20px 20px,
    linear-gradient(180deg,#0c0c0f,#08080a)}
.schem-fig figcaption{display:flex;justify-content:space-between;gap:1em;margin-top:1em;padding-top:1em;
  border-top:1px solid var(--line);font:400 var(--fs-mono-s)/1.6 var(--mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-faint)}
.svc-schem{display:block;width:100%;height:auto;color:var(--accent);overflow:visible;
  transition:color 900ms var(--e-reveal)}
.svc-schem path,.svc-schem rect,.svc-schem circle{fill:none;stroke:currentColor;stroke-width:1;
  vector-effect:non-scaling-stroke}
.svc-schem .mk{fill:currentColor;stroke:none}
/* vehicles are solid so the route underneath doesn't show through them */
.svc-schem .veh{fill:#0b0b0e}
.svc-schem .mkline{stroke-width:1.2}
.svc-schem .dash{stroke-dasharray:4 4}
.svc-schem .faint{stroke:var(--text-faint);stroke-opacity:.45}
.svc-schem .cone{fill:currentColor;fill-opacity:.14;stroke:none}
.svc-schem text{font-family:var(--mono);font-size:5.4px;letter-spacing:.08em;fill:var(--text-dim);stroke:none}
.svc-schem .hd{font-size:6px;letter-spacing:.14em;fill:var(--text)}
/* linework strokes on first; labels, routes and markers settle in after it */
html.js .svc-schem .draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
html.js .svc-schem .draw.go{animation:mrx-draw 1100ms var(--e-reveal) forwards}
html.js .svc-schem .fade{opacity:0;transition:opacity 700ms var(--e-reveal) 650ms}
html.js .svc-schem.is-drawn .fade{opacity:1}
html.js .svc-schem .dot{transition-delay:900ms}
html.no-motion .svc-schem .draw{stroke-dashoffset:0;stroke-dasharray:none}
html.no-motion .svc-schem .fade,html.no-io .svc-schem .fade{opacity:1}

/* the plan sits left, the steps run down beside it */
.split.plan{margin-top:clamp(40px,7vh,72px)}
.split.plan .split-media{grid-column:1/6;position:sticky;top:110px}
.split.plan .split-text{grid-column:7/13}
/* a vertical run of steps, beside the plan */
.steps.v{grid-template-columns:1fr;gap:0;margin-top:0}
.steps.v::before,.steps.v::after{left:4px;right:auto;top:6px;bottom:0;width:1px;height:auto}
.steps.v::after{transform:scaleY(0);transform-origin:top}
.steps.v.is-in::after{transform:scaleY(1)}
.steps.v .step{padding:0 0 clamp(22px,3.4vh,34px) 2.4em}
.steps.v .step::before{top:.35em}
.steps.v .step h3{margin-top:.4em}

/* ==========================================================================
   INDUSTRIES PAGE
   ========================================================================== */
.sectors{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);
  margin-top:clamp(40px,7vh,72px)}
.sector{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);
  background:var(--black-2);transition:border-color 400ms var(--e-ui)}
.sector:hover,.sector:target{border-color:var(--line-strong)}
.sector:target{box-shadow:0 0 0 1px var(--accent)}
.sector .media picture{--ar:16/10}
.sector .media picture::after{box-shadow:none}
.sector:hover .media img{transform:scale(1.04)}
.sector-body{display:flex;flex-direction:column;flex:1;padding:clamp(22px,2.2vw,34px)}
.sector .n{font:500 var(--fs-mono-s)/1 var(--mono);letter-spacing:.24em;color:var(--accent)}
.sector h3{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.2rem,1.7vw,1.5rem);line-height:1.1;margin-top:.7em}
.sector .chal{color:var(--text-dim);margin-top:.9em;font-size:.97rem}
.sector h4{font:500 var(--fs-mono-s)/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;
  color:var(--text-faint);margin-top:1.8em}
.sector .checklist{margin-top:1em;gap:.55em;font-size:.95rem}
.sector .tags{margin-top:auto;padding-top:1.6em}

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta-band{padding-block:clamp(100px,16vh,190px)}
.cta-band .band-photo{left:30%;top:7%;bottom:-6%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 100%)}
.cta-band::after{background:linear-gradient(180deg,var(--black) 0,rgba(6,6,8,.12) 14%,rgba(6,6,8,.25) 78%,var(--black) 100%),
  linear-gradient(90deg,var(--black) 0,rgba(6,6,8,.96) 30%,rgba(6,6,8,.55) 46%,rgba(6,6,8,.08) 72%)}
.cta-h2{font-size:clamp(2.25rem,6vw,5.6rem);line-height:.98;letter-spacing:-.02em;
  text-transform:uppercase;font-family:var(--display);font-weight:700;margin-top:.4em}
.cta-h2 span{display:block;clip-path:inset(0 0 100% 0);transform:translateY(18px)}
.metal{background:var(--silver-grad);background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:mrx-sheen 6s linear infinite}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .metal{color:var(--silver-2);background:none;animation:none}}
@keyframes mrx-sheen{0%{background-position:0 0}100%{background-position:280% 0}}
.cta-band .lead{max-width:46ch}
.cta-mini{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:2em;font:500 var(--fs-mono)/1.6 var(--mono);
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim)}
.cta-mini a{border-bottom:1px solid var(--line-strong);transition:color 260ms var(--e-ui),border-color 260ms var(--e-ui)}
.cta-mini a:hover{color:var(--text);border-color:var(--accent)}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}
.tile{position:relative;min-height:150px;border:1px solid var(--line-strong);
  padding:clamp(20px,2.4vw,30px);display:grid;align-content:space-between;gap:24px;
  overflow:hidden;isolation:isolate;background:var(--black-2)}
.tile::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--silver-grad);
  transform:scale(0);transform-origin:var(--ox,50%) var(--oy,50%);
  transition:transform 480ms var(--e-reveal)}
.tile.is-fill::before{transform:scale(1)}
.tile.is-fill{color:var(--black);border-color:var(--silver-2)}
.tile-k{font:500 var(--fs-mono)/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;
  color:var(--text-faint);transition:color 300ms var(--e-ui)}
.tile.is-fill .tile-k,.tile.is-fill .tile-s{color:rgba(6,6,8,.6)}
.tile-v{font-size:clamp(1.15rem,2vw,1.7rem);line-height:1.2;
  font-family:var(--display);font-weight:600;word-break:break-word}
.tile-s{display:block;font-size:.88rem;color:var(--text-dim);margin-top:.4em;transition:color 300ms var(--e-ui)}
.tile-a{position:absolute;right:clamp(20px,2.4vw,30px);top:clamp(20px,2.4vw,30px);
  transition:transform 300ms var(--e-ui)}
.tile:hover .tile-a{transform:translateX(5px)}

.contact-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);
  margin-top:clamp(56px,9vh,100px);align-items:start}
.contact-grid .mrx-form{grid-column:1/8}
.contact-aside{grid-column:9/13;display:grid;gap:clamp(28px,4vh,44px)}
.aside-block{border-top:1px solid var(--line-strong);padding-top:1.4em}
.aside-block h3{font:500 var(--fs-mono)/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;
  color:var(--text-faint)}
.next{display:grid;gap:1.2em;margin-top:1.4em;counter-reset:nx}
.next li{display:grid;grid-template-columns:34px 1fr;column-gap:12px;counter-increment:nx}
.next b,.next span{grid-column:2}
.next li::before{grid-row:1/3;content:'0' counter(nx);font:500 var(--fs-mono)/1.9 var(--mono);letter-spacing:.2em;color:var(--accent)}
.next b{display:block;font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:1rem}
.next span{display:block;color:var(--text-dim);font-size:.94rem;margin-top:.25em}
.aside-block address{font-style:normal;margin-top:1.2em;display:grid;gap:.5em;color:var(--text-dim)}
.aside-block address a{color:var(--text)}
.aside-block address a:hover{color:var(--accent)}

.mrx-form{position:relative;border:1px solid var(--line);background:var(--black-2);
  padding:clamp(24px,3.4vw,54px)}
.f-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.6vw,38px);
  margin-top:clamp(24px,4vh,40px)}
.f-wide{grid-column:1/-1}
.f{position:relative;display:grid;gap:.5em}
.f label{font:500 var(--fs-mono)/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-faint)}
.f label em{font-style:normal;opacity:.6}
.f input,.f select,.f textarea{background:none;border:0;border-bottom:1px solid var(--line-strong);
  padding:.65em 0;font-size:1.02rem;color:var(--text);border-radius:0;
  transition:border-color 300ms var(--e-ui)}
.f textarea{resize:vertical;min-height:110px}
.f select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-dim) 50%),
                   linear-gradient(135deg,var(--text-dim) 50%,transparent 50%);
  background-position:calc(100% - 12px) 1.15em,calc(100% - 7px) 1.15em;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.f select option{background:var(--panel);color:var(--text)}
.f input:focus,.f select:focus,.f textarea:focus{outline:0;border-bottom-color:var(--accent)}
.f input[aria-invalid="true"],.f select[aria-invalid="true"],.f textarea[aria-invalid="true"]{
  border-bottom-color:var(--red)}
.f-err{font:400 var(--fs-mono)/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--red)}
.f-foot{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:clamp(28px,4vh,44px)}
.f-status{font:400 var(--fs-mono)/1.6 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-faint);max-width:44ch}

.faq{margin-top:clamp(36px,6vh,60px);border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:grid;grid-template-columns:60px 1fr 24px;align-items:center;gap:var(--gutter);
  padding-block:clamp(20px,3vh,30px);cursor:pointer;list-style:none;
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(1.05rem,1.6vw,1.35rem);line-height:1.2;transition:color 260ms var(--e-ui)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary .n{font:500 var(--fs-mono)/1 var(--mono);letter-spacing:.2em;color:var(--text-faint)}
.faq .plus{position:relative;width:16px;height:16px;justify-self:end}
.faq .plus::before,.faq .plus::after{content:'';position:absolute;inset:50% 0 auto;height:1px;
  background:var(--text-dim);transition:transform 420ms var(--e-mech)}
.faq .plus::after{transform:rotate(90deg)}
.faq details[open] .plus::after{transform:rotate(0)}
.faq .a{padding:0 0 clamp(22px,3vh,32px) calc(60px + var(--gutter));max-width:calc(70ch + 80px);color:var(--text-dim)}
.faq .a p+p{margin-top:.8em}

.last-eye{display:grid;justify-items:center;gap:1.4em;
  padding-block:clamp(90px,15vh,170px) clamp(60px,9vh,110px);position:relative}
.last-eye .mrx-eye{position:relative;left:auto;top:auto;transform:none;width:150px;opacity:1}
.last-eye .kicker{color:var(--text-dim)}

/* ==========================================================================
   CREDITS + 404
   ========================================================================== */
.credits{margin-top:clamp(36px,6vh,60px);border-top:1px solid var(--line)}
.credits li{display:grid;grid-template-columns:120px 1fr auto;gap:var(--gutter);align-items:center;
  padding-block:16px;border-bottom:1px solid var(--line)}
.credits img{width:120px;aspect-ratio:3/2;object-fit:cover;filter:var(--grade)}
.credits h3{font-family:var(--display);font-weight:600;font-size:1.02rem}
.credits p{color:var(--text-dim);font-size:.9rem;margin-top:.2em}
.credits a{color:var(--text);border-bottom:1px solid var(--line-strong)}
.credits a:hover{border-color:var(--accent)}
.credits .lic{font:500 var(--fs-mono-s)/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--line-strong);padding:.7em .8em;white-space:nowrap;color:var(--text-dim)}

.lost{min-height:100svh;display:grid;place-items:center;text-align:center;padding:120px var(--margin) 80px}
.lost .mrx-eye{position:relative;left:auto;top:auto;transform:none;width:180px;margin-inline:auto}
.lost .ph-h1{margin-inline:auto}
.lost .actions{justify-content:center}

/* ==========================================================================
   FOOTER
   ========================================================================== */
#mrx-footer{border-top:1px solid var(--line);padding-top:clamp(56px,9vh,96px);background:var(--black)}
.foot-grid{display:grid;grid-template-columns:4fr 2fr 2fr 3fr;gap:clamp(28px,4vw,60px)}
.foot-logo{width:min(230px,60%);height:auto}
.foot-brand p{color:var(--text-faint);font-size:.92rem;margin-top:1.4em;line-height:1.7;max-width:36ch}
.foot-col .kicker{margin-bottom:1.6em}
.foot-col li+li{margin-top:.7em}
.foot-col a{color:var(--text-dim);font-size:.95rem;position:relative;
  transition:color 280ms var(--e-ui)}
.foot-col a:hover{color:var(--text)}
.foot-strip{display:flex;flex-wrap:wrap;gap:.6em clamp(16px,3vw,38px);align-items:center;
  border-top:1px solid var(--line);margin-top:clamp(50px,8vh,90px);
  padding-block:22px clamp(22px,4vh,40px);
  font:400 var(--fs-mono-s)/1.6 var(--mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-faint)}
.foot-strip a:hover{color:var(--text)}
.foot-strip b{color:var(--text-dim);font-weight:400;font-variant-numeric:tabular-nums}
.motion-toggle{margin-left:auto;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-faint);transition:color 280ms var(--e-ui)}
.motion-toggle:hover{color:var(--text)}
.motion-toggle b{color:var(--accent);font-weight:500;transition:color 900ms var(--e-reveal)}

/* ==========================================================================
   CURSOR
   ========================================================================== */
.mrx-cursor{display:none}
@media (min-width:900px) and (pointer:fine){
  html.js.has-cursor,html.js.has-cursor *{cursor:none}
  .mrx-cursor{display:block;position:fixed;left:0;top:0;z-index:9999;pointer-events:none}
  .cur-dot{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--accent);
    transform:translate(calc(var(--mx,0) * 1px - 50%),calc(var(--my,0) * 1px - 50%));
    transition:background 900ms var(--e-reveal)}
  .cur-ring{position:absolute;width:30px;height:30px;border-radius:50%;
    border:1px solid rgba(255,255,255,.28);
    transform:translate(calc(var(--rx,0) * 1px - 50%),calc(var(--ry,0) * 1px - 50%));
    transition:width 300ms var(--e-ui),height 300ms var(--e-ui),
               border-color 300ms var(--e-ui),border-radius 300ms var(--e-ui)}
  .cur-ring b{position:absolute;width:6px;height:6px;border:1px solid var(--accent);opacity:0;
    transition:opacity 300ms var(--e-ui),transform 300ms var(--e-ui)}
  .cur-ring b:nth-child(1){top:-3px;left:-3px;border-width:1px 0 0 1px}
  .cur-ring b:nth-child(2){top:-3px;right:-3px;border-width:1px 1px 0 0}
  .cur-ring b:nth-child(3){bottom:-3px;left:-3px;border-width:0 0 1px 1px}
  .cur-ring b:nth-child(4){bottom:-3px;right:-3px;border-width:0 1px 1px 0}
  .mrx-cursor.is-hot .cur-ring{width:52px;height:52px;border-color:transparent;border-radius:0}
  .mrx-cursor.is-hot .cur-ring b{opacity:1;transform:rotate(45deg)}
  .cur-label{position:absolute;font:500 var(--fs-mono-s)/1 var(--mono);letter-spacing:.24em;
    text-transform:uppercase;color:var(--text-faint);white-space:nowrap;opacity:0;
    transform:translate(calc(var(--rx,0) * 1px - 50%),calc(var(--ry,0) * 1px + 34px));
    transition:opacity 300ms var(--e-ui)}
  .mrx-cursor.has-label .cur-label{opacity:1}
}

/* ==========================================================================
   GHOST MODE
   ========================================================================== */
.ghost-strip{position:fixed;top:68px;left:0;width:100%;z-index:880;background:#050506;
  border-top:1px solid var(--red);border-bottom:1px solid var(--line);
  transform:translateY(-100%);transition:transform 480ms var(--e-reveal)}
.ghost-strip[hidden]{display:none}
.ghost-strip.is-on{transform:none}
.ghost-strip button{display:block;width:100%;padding:14px var(--margin);text-align:center;
  font:500 var(--fs-mono)/1.4 var(--mono);letter-spacing:.24em;text-transform:uppercase;
  color:var(--text-dim)}
.ghost-strip kbd{font:inherit;border:1px solid var(--line-strong);padding:.15em .5em}
html.is-ghost main,html.is-ghost #mrx-footer,html.is-ghost #mrx-nav{
  filter:grayscale(1) brightness(.55);transition:filter 900ms var(--e-reveal)}
html.is-ghost{--accent:#3a3c40;--iris:#2c2e31;--eye-stroke:rgba(120,124,128,.22)}
html.is-ghost .cur-dot{opacity:0}
html.is-ghost .mrx-cursor.is-hot .cur-ring{width:30px;height:30px;
  border-color:rgba(255,255,255,.28);border-radius:50%}
html.is-ghost .mrx-cursor.is-hot .cur-ring b{opacity:0}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1199px){
  .cmd-head{grid-template-columns:1fr 180px 36px;row-gap:.7em;align-content:center}
  .cmd-n{grid-column:1/-1}
  .cmd-bio-wrap{grid-template-columns:1fr}
  .cmd-bio p{grid-column:1}
  .lead-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:48px}
  .foot-grid{grid-template-columns:repeat(2,1fr);row-gap:44px}
  .split-text{grid-column:1/8}
  .split-media{grid-column:8/13}
  .split.flip .split-text{grid-column:6/13}
  .split.flip .split-media{grid-column:1/6}
  .includes{grid-template-columns:repeat(3,1fr);row-gap:36px}
  .steps{grid-template-columns:repeat(3,1fr);row-gap:44px}
  .steps::before,.steps::after{display:none}
  .step{border-top:1px solid var(--line)}
  .sectors{grid-template-columns:repeat(2,1fr)}
  .contact-grid .mrx-form{grid-column:1/-1}
  .contact-aside{grid-column:1/-1;grid-template-columns:repeat(2,1fr)}
  .nav-tel{display:none}
  .audience{grid-template-columns:repeat(2,1fr);row-gap:32px}
}

/* letterbox monitors: narrow the plate and hold the head */
@media (min-aspect-ratio:2/1) and (min-width:1200px){
  .hero-photo{width:46%;--opy:18%}
}

@media (max-width:899px){
  .cmd-head{grid-template-columns:1fr auto;gap:.5em 16px;min-height:0;
    padding-block:clamp(22px,4vh,36px);padding-right:var(--margin)}
  .cmd-n,.cmd-name{grid-column:1/-1}
  .cmd-role{grid-column:1}
  .cmd-plus{grid-row:3;grid-column:2}
  .cmd-row:hover .cmd-name,.cmd-row:focus-within .cmd-name{transform:none}
  .cmd-photo{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:4/5;max-height:72svh;
    clip-path:inset(0 0 100% 0)}
  .cmd-row.is-in .cmd-photo{clip-path:inset(0)}
  .cmd-photo::after{background:linear-gradient(180deg,rgba(6,6,8,0) 58%,var(--black) 100%)}
  .cmd-bio-wrap{grid-template-columns:1fr;padding-right:var(--margin)}
  .cmd-bio p{grid-column:1}

  :root{--fs-mono:.625rem;--fs-mono-s:.5625rem}
  .kicker{letter-spacing:.16em}
  .kicker.wide{letter-spacing:.24em}

  .nav-links{display:none}
  .nav-cta{display:none}
  .nav-burger{display:grid}
  #mrx-nav{height:58px}
  .ghost-strip{top:58px}
  .nav-inner{grid-template-columns:1fr auto}
  .nav-right{justify-content:flex-end}

  /* phones: the copy drops to the foot of the screen so the officer's face
     owns the top third instead of being read through */
  #mrx-hero{padding-block:100px 76px;min-height:100svh;align-items:end}
  .hero-photo{inset:0;width:100%;--opx:66%;--opy:12%}
  .hero-photo img{filter:saturate(.85) brightness(.72) contrast(1.06)}
  .hero-photo::after{background:linear-gradient(180deg,rgba(6,6,8,.42) 0,
    rgba(6,6,8,.05) 20%,rgba(6,6,8,.3) 40%,rgba(6,6,8,.86) 62%,var(--black) 88%)}
  .hero-h1{font-size:clamp(2.15rem,9.4vw,3.4rem);max-width:none}
  .hero-copy{padding-inline:var(--margin)}
  .hero-frame,.page-hero .hero-frame{inset:70px 14px 14px}
  .hero-hud{left:var(--margin);bottom:20px;gap:1.4em;flex-wrap:wrap}
  .hero-scroll{display:none}
  .hero-actions .btn,.actions .btn{width:100%;justify-content:center;min-height:56px}

  .page-hero{min-height:84svh;padding-block:120px 64px}
  .page-hero::after{background:linear-gradient(180deg,rgba(6,6,8,.6) 0,rgba(6,6,8,.15) 26%,rgba(6,6,8,.7) 58%,var(--black) 100%)}
  .ph-h1{font-size:clamp(2.1rem,10vw,3.4rem)}
  .ph-hud{display:none}

  .sec-head{grid-template-columns:1fr}
  .split,.split.flip{grid-template-columns:1fr;row-gap:40px}
  .split-text,.split-media,.split.flip .split-text,.split.flip .split-media{grid-column:1;order:0}
  .split .split-media{order:2}
  .svc-detail .split-media{position:static}
  .facts{grid-template-columns:1fr;gap:18px}
  .checklist.two{grid-template-columns:1fr}

  /* services: no pinning on touch — the linear source becomes the section */
  .svc-outer{display:none}
  .svc-source{display:grid!important}
  .svc-source-head{display:block!important}

  .turn-outer{height:220vh}
  .turn-copy{text-align:left}
  .turn-copy .body{margin-inline:0}

  .rail{grid-auto-columns:78vw}

  .stats{grid-template-columns:repeat(2,1fr);gap:38px 0}
  .stats>div:nth-child(3){border-left:0;padding-left:0}

  .cta-band .band-photo{left:0;opacity:.6}
  .pull{grid-template-columns:1fr;row-gap:20px}
  .pull-meta,.pull blockquote{grid-column:1}

  .doc-panels{grid-template-columns:1fr}
  /* the statement lines are set for a desktop measure; on a phone they flow as prose */
  .doc-statement span{display:inline}
  .doc-statement span::after{display:none}
  .pillars{grid-template-columns:1fr}
  .values li{grid-template-columns:44px 1fr;row-gap:10px}
  .values p{grid-column:2}
  .includes{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .schem-fig{max-width:520px}
  .split.plan .split-media,.split.plan .split-text{grid-column:1;position:static}
  .split.plan .split-media{order:0}
  .sectors{grid-template-columns:1fr}
  .svc-card,.svc-card.flip{grid-template-columns:1fr;row-gap:28px}
  .svc-card-media,.svc-card-body,.svc-card.flip .svc-card-media,.svc-card.flip .svc-card-body{grid-column:1;order:0}
  .audience{grid-template-columns:1fr}
  .others{grid-template-columns:1fr}
  #for .rail{grid-auto-columns:78vw}
  .page-hero .actions .btn{width:100%;justify-content:center}

  .tiles{grid-template-columns:1fr}
  .contact-aside{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr}
  .faq summary{grid-template-columns:36px 1fr 20px}
  .faq .a{padding-left:0}
  .credits li{grid-template-columns:80px 1fr}
  .credits img{width:80px}
  .credits .lic{grid-column:2;justify-self:start}
  .foot-grid{grid-template-columns:1fr;row-gap:36px}
  .motion-toggle{margin-left:0}
}

@media (max-width:639px){
  .lead-grid{column-gap:12px;row-gap:36px}
  .lead-grid h3{font-size:1rem}
  .lead-grid p{font-size:.62rem;letter-spacing:.14em}
  .stats{grid-template-columns:1fr}
  .stats>div{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:26px}
  .stats>div:first-child{border-top:0;padding-top:0}
  .spec>div{grid-template-columns:1fr;gap:.35em}
  .spec-row{grid-template-columns:1fr}
  .includes{grid-template-columns:1fr}
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}
html.no-motion *,html.no-motion *::before,html.no-motion *::after{
  animation-duration:.001ms!important;animation-iteration-count:1!important;
  transition-duration:.001ms!important;scroll-behavior:auto!important}
html.no-motion .svc-outer{display:none}
html.no-motion .svc-source{display:grid!important}
html.no-motion .svc-source-head{display:block!important}
html.no-motion .turn-outer{height:auto}
html.no-motion .turn-stage{position:static;height:auto;padding-block:var(--sec)}
html.no-motion .turn-centre{display:none}
html.no-motion .turn-copy{opacity:1;transform:none}
html.no-motion .doc-statement span::after{display:none}
html.no-motion .hero-h1 span,html.no-motion .cta-h2 span,html.no-motion .ph-h1 span{clip-path:none;transform:none}
html.no-motion .svc-source picture,html.no-motion .media picture{clip-path:none!important}
html.no-motion .rule{transform:scaleX(1)}
html.no-motion .metal{animation:none}
html.no-motion .marquee-track{animation:none}

/* no-JS: everything visible */
html.no-js .hero-h1 span,html.no-js .cta-h2 span,html.no-js .ph-h1 span{clip-path:none;transform:none}
html.no-js .svc-outer{display:none}
html.no-js .svc-source-head{display:block}
html.no-js .turn-outer{height:auto}
html.no-js .turn-stage{position:static;height:auto;padding-block:120px}
html.no-js .turn-centre{display:none}
html.no-js .turn-copy{opacity:1;transform:none}
html.no-js .rule{transform:scaleX(1)}
html.no-js #mrx-preload,html.no-js #mrx-lids{display:none}
html.no-js .motion-toggle,html.no-js .foot-clock,html.no-js .hero-hud{display:none}
html.no-js .nav-burger{display:none}
@media (max-width:899px){
  html.no-js .nav-links{display:flex;gap:14px}
  html.no-js .nav-links a{font-size:.5rem}
}
html.no-js .mrx-cursor{display:none}

/* ---------- turn ring eyes (positioned from the ellipse centre) ---------- */
.mrx-eye.on-ring{transform:translate(-50%,-50%) translate(var(--px,0),var(--py,0))}
/* scroll-velocity coupling */
.h2,.cta-h2,.hero-h1,.ph-h1,.turn-display{transform:skewX(var(--vel,0deg));
  transition:transform 220ms var(--e-ui)}
html.no-motion .h2,html.no-motion .cta-h2,html.no-motion .hero-h1,
html.no-motion .ph-h1,html.no-motion .turn-display{transform:none}