/* ==========================================================================
   MR X SECURITY SERVICES — landing page
   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;
  --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:#9aa0a6; --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);

  --gutter:clamp(16px,1.6vw,28px);
  --margin:clamp(20px,5vw,88px);
  --maxw:1680px;

  /* 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-h2:clamp(1.95rem,4.6vw,4.05rem);
  --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,p,dl,dd,ol,ul,figure{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)}

/* 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:clamp(88px,13vh,180px)}

.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:.96;letter-spacing:-.01em;
  font-weight:700;text-transform:uppercase;margin-top:.4em}
.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,.cmd-bio strong,.lead b,.body b,.cmd-bio b{font-weight:600;color:var(--text)}
.body{font-size:1rem;line-height:1.62;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)}

/* ---------- 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)}

/* ---------- 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;
  min-height:44px;transition:border-color 300ms var(--e-ui),color 300ms var(--e-ui)}
.btn>span{transition:transform 300ms var(--e-ui)}
.btn::before{content:'';position:absolute;inset:0;background:var(--accent);
  transform:scaleX(0);transform-origin:left;z-index:-1;
  transition:transform 420ms var(--e-reveal)}
.btn-solid{background:var(--accent);color:var(--black);border-color:var(--accent)}
.btn-ghost{color:var(--text)}
.btn:hover{border-color:var(--accent)}
.btn-ghost:hover{color:var(--accent)}
.btn:hover>span{transform:translateX(4px)}
.btn-sm{padding:.85em 1.2em;margin-top:1.4em}

/* ==========================================================================
   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}
/* a heavier upper lash line and a lighter lower one — the way an eye reads */
.eye-line-up{fill:none;stroke:var(--eye-stroke);stroke-width:1.7;
  stroke-linecap:round;vector-effect:non-scaling-stroke;
  transition:stroke 900ms var(--e-reveal)}
.eye-line-dn{fill:none;stroke:var(--eye-stroke-soft);stroke-width:1;
  stroke-linecap:round;vector-effect:non-scaling-stroke;
  transition:stroke 900ms var(--e-reveal)}
.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
   ========================================================================== */
#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}
.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}

/* ==========================================================================
   NAV
   ========================================================================== */
#mrx-nav{position:fixed;top:0;left:0;width:100%;z-index:900;height:64px;
  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,.72);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:26px;width:auto}
.nav-links{display:flex;gap:clamp(16px,2.4vw,34px)}
.nav-links a{font:500 var(--fs-mono)/1 var(--mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-dim);position:relative;padding:6px 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.is-active{color:var(--text)}
.nav-links a:hover::after,.nav-links a.is-active::after{transform:scaleX(1);transform-origin:left}
.nav-right{display:flex;align-items:center;gap:14px}
.nav-cta{display:inline-flex;align-items:center;gap:.8em;padding:.72em 1.2em;
  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{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:.35em}
.nav-panel-links a{font-family:var(--display);font-size:var(--fs-h3);font-weight:600;
  text-transform:uppercase;line-height:1.1;opacity:0;transform:translateY(14px);
  transition:opacity 420ms var(--e-reveal) var(--d),transform 420ms var(--e-reveal) var(--d)}
.nav-panel.is-open .nav-panel-links a{opacity:1;transform:none}
.nav-panel-foot{position:relative;margin-top:2.4em;font:500 var(--fs-mono)/1 var(--mono);
  letter-spacing:.2em;color:var(--text-faint)}

/* ==========================================================================
   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. At desktop widths the crop is
   height-driven, so 0% parks the officer clear of the headline instead of
   burying his face behind it. */
.hero-photo{position:absolute;inset:0 0 0 auto;width:52%;z-index:0;
  --opx:0%;--opy:50%;
  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:grayscale(1) brightness(.82) contrast(1.04)}
/* the left feather only has to blend the photo's cut edge into the page —
   it used to run to 78% and take the whole face with it */
.hero-photo::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,var(--black) 0 8%,rgba(6,6,8,.72) 14%,
                             rgba(6,6,8,.2) 24%,rgba(6,6,8,0) 38%),
             linear-gradient(180deg,rgba(6,6,8,.46) 0,rgba(6,6,8,.06) 22%,
                             rgba(6,6,8,0) 58%,var(--black) 97%)}
.hero-eyes{position:absolute;inset:0;z-index:1}
.hero-frame{position:absolute;inset: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)}
.hud-tracked b{color:var(--accent);font-weight:500;transition:color 900ms var(--e-reveal)}
.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)}}

/* ==========================================================================
   BACKGROUND-IMAGE SECTIONS
   ========================================================================== */
[data-bg]{isolation:isolate}
[data-bg]::before{content:'';position:absolute;inset:0;z-index:-2;
  background-size:cover;background-position:center;
  filter:grayscale(1) contrast(1.2)}
[data-bg]::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,var(--black) 0,rgba(6,6,8,.34) 24%,rgba(6,6,8,.34) 76%,var(--black) 100%)}
[data-bg="control"]::before{background-image:url('../img/brand/control-1400.jpg');
  background-image:image-set(url('../img/brand/control-1400.webp') type('image/webp'),
                             url('../img/brand/control-1400.jpg') type('image/jpeg'));
  filter:grayscale(1) brightness(.34) contrast(1.15);background-position:78% 26%}
[data-bg="squad"]::before{background-image:url('../img/brand/squad-1400.jpg');
  background-image:image-set(url('../img/brand/squad-1400.webp') type('image/webp'),
                             url('../img/brand/squad-1400.jpg') type('image/jpeg'));
  filter:grayscale(1) brightness(.20) contrast(1.15);
  transform:scale(var(--zoom,1));transition:transform 100ms linear}
[data-bg="cta"]::before{background-image:url('../img/brand/cta-1400.jpg');
  background-image:image-set(url('../img/brand/cta-1400.webp') type('image/webp'),
                             url('../img/brand/cta-1400.jpg') type('image/jpeg'));
  filter:grayscale(1) brightness(.24) contrast(1.15);background-position:72% 22%}

/* ---------- who we are ---------- */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter)}
.who-eyes{position:absolute;inset:0;z-index:0}
#mrx-who .wrap{position:relative;z-index:1}
#mrx-who::after{background:linear-gradient(180deg,var(--black) 0,rgba(6,6,8,.5) 24%,rgba(6,6,8,.5) 76%,var(--black) 100%),
  linear-gradient(90deg,rgba(6,6,8,.86) 0,rgba(6,6,8,.5) 46%,rgba(6,6,8,.1) 72%)}
#mrx-who .col-a{grid-column:1/7}
#mrx-who .col-b{grid-column:8/13;align-self:end}
/* proactive gets underlined, reactive gets struck out — one second of
   animation that says the whole positioning without a caption */
.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)}

/* ---------- doctrine ---------- */
.doc-grid{position:relative;display:grid;grid-template-columns:repeat(12,1fr);
  gap:var(--gutter);margin-top:clamp(32px,5vh,64px)}
.doc-rail{grid-column:7/8;justify-self:center;width:1px;background:var(--line);
  position:relative;min-height:100%}
.doc-node{position:absolute;left:-3px;top:calc(var(--p,0) * 100%);width:7px;height:7px;
  background:var(--accent);transition:background 900ms var(--e-reveal)}
.doc-vision{grid-column:1/7}
.doc-mission{grid-column:7/13;margin-top:150px}
.doc-statement{font-size:clamp(1.2rem,1.78vw,1.78rem);line-height:1.44;margin-top:.9em;
  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.
   It wipes off to the right and is clipped by the line, so there is no
   half-collapsed remnant to leave behind. */
.doc-statement span::after{content:'';position:absolute;inset:0 -.3em;
  background:#0f0f11;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}

/* ==========================================================================
   SERVICES
   ========================================================================== */
.svc-outer{height:400vh}
.svc-stage{position:sticky;top:0;height:100svh;display:grid;
  grid-template-rows:1fr auto;align-content:center;padding-block:88px 40px;overflow:hidden}
.svc-inner{display:grid;grid-template-columns:42fr 58fr;gap:clamp(24px,5vw,80px);
  align-items:center}
.svc-list{margin-top:clamp(20px,4vh,48px);display:grid;gap:clamp(6px,1.4vh,18px)}
.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.8vw,2.5rem);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,.16);
  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,.4)}

.svc-lens{display:grid;place-items:center}
.lens-box{position:relative;width:clamp(280px,30vw,430px);aspect-ratio:9/16;
  max-height:60svh;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,.55),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. clip-path interpolates point-to-point,
   so the twist costs nothing but the coordinates. */
.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 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) brightness(.40) contrast(1.22);opacity:0;transform:scale(1.06)}
.lens-imgs img.is-on{opacity:1;transform:scale(1);
  transition:transform 900ms var(--e-reveal)}
.lens-schematic{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  color:var(--accent);opacity:.8;transition:color 900ms var(--e-reveal);
  filter:drop-shadow(0 0 6px rgba(0,0,0,.9))}
.lens-schematic path,.lens-schematic rect,.lens-schematic circle{
  stroke:currentColor;fill:none;vector-effect:non-scaling-stroke}
.lens-schematic .draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  animation:mrx-draw 900ms var(--e-reveal) forwards}
@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,40px)}
.spec-row{margin-top:0;border-top:1px solid var(--line)}
.spec-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}
.spec-row>div{grid-template-columns:auto;gap:.3em;align-content:start}
.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(56px,9vh,110px)}
.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 img{width:100%;aspect-ratio:4/5;object-fit:cover;margin-top:1.2em;
  filter:grayscale(1) brightness(.4) contrast(1.2);clip-path:inset(0 0 100% 0)}
.svc-source [data-svc].is-in img{clip-path:inset(0);transition:clip-path 780ms var(--e-reveal)}
.svc-schem{width:min(60%,320px);margin-top:1.6em;color:var(--accent);opacity:.85;
  transition:color 900ms var(--e-reveal)}
.svc-schem path,.svc-schem rect,.svc-schem circle{stroke:currentColor;fill:none;
  vector-effect:non-scaling-stroke}
.svc-schem .draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.svc-schem .draw.go{animation:mrx-draw 900ms var(--e-reveal) forwards}
html.no-js .svc-schem .draw,html.no-motion .svc-schem .draw{stroke-dashoffset:0}
.svc-source p{color:var(--text-dim);margin-top:1.2em;max-width:60ch}
html.js .svc-stage-live .svc-source{display:none}

/* ==========================================================================
   THE TURN
   ========================================================================== */
.turn-outer{height:300vh}
.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(720px,84vw);text-align:center;
  max-height:78svh;isolation:isolate;
  opacity:0;transform:translateY(16px);transition:opacity 620ms var(--e-reveal),transform 620ms var(--e-reveal)}
/* keep the ring from fighting the copy for legibility */
.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}

/* ==========================================================================
   COMMAND
   ========================================================================== */
.cmd-rows{margin-top:clamp(40px,7vh,80px);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:#0a0a0c}
/* the rows have to be deep enough to hold a head: at 146px the tile only ever
   showed a slice of collar. --opx/--opy are set per row on the article. */
.cmd-photo{position:absolute;inset:0 0 0 auto;width:min(27%,320px);z-index:0;
  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)}
/* a bare <picture> is inline, so `height:100%` on the img inside it had no
   definite basis to resolve against — which is why the phone tile ignored its
   own 4/5 aspect-ratio and ran nearly 800px tall */
.cmd-photo picture{display:block;position:absolute;inset:0}
.cmd-photo img{width:100%;height:100%;object-fit:cover;
  object-position:var(--opx,50%) var(--opy,0%);
  filter:grayscale(1) contrast(1.08) brightness(.88);
  transform:scale(1.05);transition:transform 900ms var(--e-reveal),
                                   filter 620ms var(--e-ui)}
/* feather the studio backdrop into the row with gradients rather than a mask —
   predictable in every engine, and it never blows out a light backdrop.
   Kept short: at 46% it used to sit right across two of the three faces. */
.cmd-photo::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#08080a 0 1%,rgba(8,8,10,.5) 9%,
                             rgba(8,8,10,.1) 19%,rgba(8,8,10,0) 28%),
             linear-gradient(180deg,rgba(8,8,10,0) 62%,#08080a 100%)}
.cmd-row:hover .cmd-photo img,.cmd-row:focus-within .cmd-photo img,
.cmd-row.is-open .cmd-photo img{transform:scale(1);filter:grayscale(1) contrast(1.1) brightness(1.02)}
.cmd-sweep{position:absolute;inset:0;opacity:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 34%,rgba(216,218,222,.22) 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:140px 1fr 230px 40px;align-items:center;gap:var(--gutter);
  width:100%;max-width:var(--maxw);margin-inline:auto;
  min-height:clamp(230px,30vh,320px);
  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(min(27%,320px) + var(--gutter))}
.cmd-n{font:500 var(--fs-mono-s)/1 var(--mono);letter-spacing:.24em;
  text-transform:uppercase;color:var(--text-faint)}
.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 var(--margin) clamp(30px,5vh,56px);
  display:grid;grid-template-columns:150px 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{clip-path:inset(0)}

/* ==========================================================================
   ASSURANCE
   ========================================================================== */
#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)}
.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-faint);margin-top:1.4em;max-width:16ch}

/* ==========================================================================
   CONTACT + FOOTER
   ========================================================================== */
#mrx-contact{padding-block:clamp(90px,15vh,190px) 0}
.cta-h2{font-size:clamp(2.25rem,6.1vw,5.9rem);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}}

.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);
  margin-top:clamp(44px,7vh,84px)}
.tile{position:relative;min-height:140px;border:1px solid var(--line-strong);
  padding:clamp(20px,2.4vw,30px);display:grid;align-content:space-between;
  overflow:hidden;isolation:isolate}
.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{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-a{position:absolute;right:clamp(20px,2.4vw,30px);bottom:clamp(20px,2.4vw,30px);
  transition:transform 300ms var(--e-ui)}
.tile:hover .tile-a{transform:translateX(5px)}

.form-wrap{margin-top:clamp(56px,9vh,110px);position:relative}
.form-wrap::before{content:'';position:absolute;inset:0 calc(var(--margin) * -1);z-index:-1;
  background:linear-gradient(180deg,rgba(6,6,8,0) 0,rgba(6,6,8,.93) 6%,var(--black) 22%)}
.mrx-form{position:relative}
.mrx-form{border-top:1px solid var(--line);padding-top:clamp(28px,4vh,50px)}
.f-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.6vw,38px);
  margin-top:clamp(24px,4vh,44px)}
.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:96px}
.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}

.last-eye{display:grid;justify-items:center;gap:1.4em;
  padding-block:clamp(90px,15vh,180px) 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)}

#mrx-footer{border-top:1px solid var(--line);padding-top:clamp(50px,8vh,90px)}
.foot-grid{display:grid;grid-template-columns:4fr 2fr 2fr 4fr;gap:clamp(28px,4vw,60px)}
.foot-logo{width:min(230px,60%);height:auto}
.foot-brand p{color:var(--text-faint);font-size:.9rem;margin-top:1.4em;line-height:1.7}
.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 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:9000;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:64px;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}
@media (max-width:899px){.ghost-strip{top:56px}}
.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){
  #mrx-who .col-a{grid-column:1/8}
  #mrx-who .col-b{grid-column:1/13;margin-top:2.4em}
  .doc-vision{grid-column:1/7}
  .doc-mission{grid-column:7/13;margin-top:150px}
  .doc-rail{display:none}
  .cmd-head{grid-template-columns:120px 1fr 200px 36px}
  .cmd-bio-wrap{grid-template-columns:120px 1fr}
  .foot-grid{grid-template-columns:repeat(2,1fr);row-gap:44px}
}

/* letterbox monitors: past ~2:1 the cover crop flips to width-driven and would
   start shaving the top of his head, so narrow the plate and hold the head */
@media (min-aspect-ratio:2/1) and (min-width:1200px){
  .hero-photo{width:44%;--opy:6%}
}

/* phones never need the 1400px plate */
@media (max-width:900px){
  [data-bg="control"]::before{background-image:url('../img/brand/control-900.jpg');
    background-image:image-set(url('../img/brand/control-900.webp') type('image/webp'),
                               url('../img/brand/control-900.jpg') type('image/jpeg'))}
  [data-bg="squad"]::before{background-image:url('../img/brand/squad-900.jpg');
    background-image:image-set(url('../img/brand/squad-900.webp') type('image/webp'),
                               url('../img/brand/squad-900.jpg') type('image/jpeg'))}
  [data-bg="cta"]::before{background-image:url('../img/brand/cta-900.jpg');
    background-image:image-set(url('../img/brand/cta-900.webp') type('image/webp'),
                               url('../img/brand/cta-900.jpg') type('image/jpeg'))}
}

@media (max-width:899px){
  /* Plex Mono sets wider than the face it replaced — pull the micro type back
     in on phones so kickers stop wrapping */
  :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:56px}
  .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:10%;--opy:44%}
  .hero-photo img{filter:grayscale(1) brightness(.56) contrast(1.06)}
  .hero-photo::after{background:linear-gradient(180deg,rgba(6,6,8,.42) 0,
    rgba(6,6,8,.1) 20%,rgba(6,6,8,.34) 36%,rgba(6,6,8,.84) 58%,var(--black) 86%)}
  .hero-h1{font-size:clamp(2.15rem,9.4vw,3.4rem);max-width:none}
  .hero-copy{padding-inline:var(--margin)}
  .hero-frame{inset:14px}
  .hero-hud{left:var(--margin);bottom:20px;gap:1.4em;flex-wrap:wrap}
  .hero-scroll{display:none}
  .hero-actions .btn{width:100%;justify-content:center;min-height:56px}

  .doc-grid{grid-template-columns:1fr}
  .doc-vision,.doc-mission{grid-column:1;margin-top:0}
  .doc-mission{margin-top:clamp(48px,8vh,90px)}

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

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

  .cmd-head{grid-template-columns:1fr auto;gap:.5em 16px;
    padding-block:clamp(22px,4vh,36px);padding-right:var(--margin)}
  .cmd-n{grid-column:1/-1}
  .cmd-role{grid-column:1}
  .cmd-plus{grid-row:2;grid-column:2}
  .cmd-name{grid-column:1/-1}
  .cmd-row:hover .cmd-name,.cmd-row:focus-within .cmd-name{transform:none}
  .cmd-photo{position:relative;inset:auto;width:100%;aspect-ratio:4/5;clip-path:inset(0 0 100% 0)}
  .cmd-row.is-in .cmd-photo{clip-path:inset(0)}
  .cmd-photo img{transform:none;filter:grayscale(1) contrast(1.1) brightness(.82)}
  .cmd-photo::after{background:linear-gradient(180deg,rgba(8,8,10,0) 58%,#08080a 100%)}
  .cmd-head{min-height:0}
  .cmd-bio-wrap{grid-template-columns:1fr}
  .cmd-bio p{grid-column:1}

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

  .tiles{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr;row-gap:36px}
  .motion-toggle{margin-left:0}
}

@media (max-width:639px){
  .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}
}

/* ==========================================================================
   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 .turn-outer{height:auto}
html.no-motion .turn-stage{position:static;height:auto;padding-block:clamp(88px,13vh,180px)}
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{clip-path:none;transform:none}
html.no-motion .svc-source img{clip-path:none}
html.no-motion .rule{transform:scaleX(1)}
html.no-motion .metal{animation:none}

/* no-JS: everything visible */
html.no-js .hero-h1 span,html.no-js .cta-h2 span{clip-path:none;transform:none}
html.no-js .svc-outer{display:none}
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 .svc-source img{clip-path:none}
html.no-js .rule{transform:scaleX(1)}
html.no-js #mrx-preload{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,.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 .turn-display{transform:none}