/* Site menu (menu.js): the nav button and the full-screen page menu with animated previews.
   Monochrome like the rest of the chrome; previews use only ice and sage, never danger colours. */

/* Button: a round button of its own, just right of the nav bar (the bar makes room for it) */
body.has-mx { --mxw: 54px; --navw: min(1200px, calc(100% - 2 * var(--gutter) - var(--mxw) - 10px)); }
body.has-mx .nav { width: var(--navw); left: calc(50% - (var(--mxw) + 10px) / 2); }
.mx-btn { position: fixed; z-index: 51; top: 14px; left: calc(50% - (var(--mxw) + 10px) / 2 + var(--navw) / 2 + 10px); width: var(--mxw); height: var(--mxw);
  display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid var(--line); color: var(--text); cursor: pointer;
  background: rgba(14, 17, 15, 0.55); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  transition: border-color .25s, background .3s, transform .25s var(--ease); }
.mx-btn:hover { border-color: rgba(255,255,255,.4); transform: scale(1.04); }
.mx-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.mx-btn.on { background: rgba(14,17,15,.9); border-color: var(--line-2); }
.mx-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mx-ico { position: relative; width: 18px; height: 11px; }
.mx-ico i { position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform .45s var(--ease), top .45s var(--ease), width .45s var(--ease), left .45s var(--ease); }
.mx-ico i:first-child { top: 1px; } .mx-ico i:last-child { top: 8.5px; width: 62%; left: 38%; }
.mx-btn:hover .mx-ico i:last-child { width: 100%; left: 0; }
.mx-btn.on .mx-ico i:first-child { top: 4.75px; transform: rotate(45deg); }
.mx-btn.on .mx-ico i:last-child { top: 4.75px; width: 100%; left: 0; transform: rotate(-45deg); }
.nav.mx-on { background: rgba(14,17,15,.9); }
/* the nav bar is narrower now: keep every item on one line */
body.has-mx .brand, body.has-mx .nav .btn { white-space: nowrap; }
@media (max-width: 1180px) { body.has-mx .brand-sub { display: none; } body.has-mx .nav-links { gap: 18px; } }
@media (max-width: 520px) { body.has-mx { --mxw: 48px; } .mx-btn { top: 17px; }
  body.has-mx .nav { gap: 10px; padding-left: 14px; }
  body.has-mx .brand > span { letter-spacing: .14em; font-size: 13px; }
  body.has-mx .nav .btn-sm { padding: 10px 14px; font-size: 13px; } }
html.mx-lock, html.mx-lock body { overflow: hidden; }

/* Overlay: grows out of the button as a circle */
.mx { position: fixed; inset: 0; z-index: 45; background: radial-gradient(120% 90% at 85% 10%, #141916 0%, var(--bg) 55%);
  clip-path: circle(0px at var(--ox, 90%) var(--oy, 40px)); transition: clip-path .7s cubic-bezier(.7, 0, .2, 1); overflow-y: auto;
  display: grid; grid-template-rows: 1fr auto; padding: 110px var(--gutter) 28px; }
.mx.open { clip-path: circle(150vmax at var(--ox, 90%) var(--oy, 40px)); }
.mx.closing { transition-duration: .55s; transition-timing-function: cubic-bezier(.6, 0, .4, 1); }
.mx-inner { max-width: 1200px; width: 100%; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: center; }

/* Page list: titles rise out of a mask, one after another */
.mx-list { display: grid; gap: 6px; }
.mx-item { display: grid; grid-template-columns: 42px 1fr; column-gap: 14px; padding: 14px 0; text-decoration: none; border-top: 1px solid var(--line); position: relative; transition: opacity .3s; }
.mx-item:last-child { border-bottom: 1px solid var(--line); }
.mx-item:focus-visible { outline: none; }
.mx-item:focus-visible .mx-t span { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 8px; }
.mx-item::after { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--accent); transition: width .6s var(--ease); }
.mx-item.lit::after { width: 100%; }
.mx-list:hover .mx-item:not(.lit) { opacity: .42; }
.mx-n { grid-row: span 2; font: 400 11px var(--mono); letter-spacing: .1em; color: var(--muted); padding-top: 14px; opacity: 0; transition: opacity .5s; }
.mx-t { display: block; overflow: hidden; line-height: 1.05; padding-bottom: 4px; }
.mx-t span { display: inline-block; font-size: clamp(34px, 5.2vw, 72px); font-weight: 300; letter-spacing: -0.025em; transform: translateY(110%); transition: transform .8s var(--ease), color .3s; }
.mx-item.lit .mx-t span { transform: translateX(10px); }
.mx-item.here .mx-t span { color: #cfd6cd; }
.mx-d { font-size: 14px; color: var(--muted); opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .6s var(--ease); }
.mx-d em { font-style: normal; color: var(--sage); }
.mx.open .mx-t span { transform: none; transition-delay: calc(.22s + var(--i) * .075s); }
.mx.open .mx-item.lit .mx-t span { transform: translateX(10px); transition-delay: 0s; }
.mx.open .mx-n, .mx.open .mx-d { opacity: 1; transform: none; transition-delay: calc(.38s + var(--i) * .075s); }
.mx.closing .mx-t span { transform: translateY(-110%); transition: transform .35s ease-in; transition-delay: calc(var(--i) * .03s); }
.mx.closing .mx-n, .mx.closing .mx-d { opacity: 0; transition-delay: 0s; }

/* Preview stage */
.mx-stage { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); border: 1px solid var(--line-2); background: rgba(20,24,21,.6); overflow: hidden;
  opacity: 0; transform: scale(.96); transition: opacity .6s .35s, transform .8s .35s var(--ease); }
.mx.open .mx-stage { opacity: 1; transform: none; }
.mx.closing .mx-stage { opacity: 0; transition-delay: 0s; transition-duration: .3s; }
.mx-viz { position: absolute; inset: 0; opacity: 0; transition: opacity .4s; }
.mx-viz.on { opacity: 1; }
.mx-viz svg { width: 100%; height: 100%; display: block; }
.mx-cap { position: absolute; left: 16px; bottom: 12px; font: 400 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* 3D previews (menu3d.js): the canvas replaces the SVG previews once it's running */
.mx-3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mx-stage.has-3d .mx-viz { display: none; }
.mx-3d-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.mx-3l { position: absolute; left: 0; top: 0; white-space: nowrap; font-size: 11.5px; color: #e6ebe4; transition: opacity .35s; will-change: transform; opacity: 0;
  padding: 4px 8px; border-radius: 7px; background: rgba(11,13,12,.72); border: 1px solid var(--line); margin: -34px 0 0 8px; }
.mx-3l b { font-weight: 600; }
.mx-3l em { display: block; font-style: normal; font-family: var(--mono); font-size: 10px; color: var(--muted); }
.mx-3l::before { content: ""; position: absolute; left: -8px; top: 100%; width: 8px; height: 8px; border-left: 1px solid rgba(255,255,255,.5); border-bottom: 1px solid rgba(255,255,255,.5); }
.mx-3l.zone { margin: -12px 0 0 0; transform-origin: left; background: none; border: 0; padding: 0; font: 500 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.mx-3l.zone::before { display: none; }
.mx-3l.card { margin: -22px 0 0 -40px; }
.mx-3l.card::before { display: none; }
.mx-3l.below { margin: 16px 0 0 -18px; } .mx-3l.below::before { top: -10px; left: 14px; border-bottom: 0; border-top: 1px solid rgba(255,255,255,.5); height: 10px; width: 1px; border-left: 1px solid rgba(255,255,255,.5); }
.mx-3l.desk { margin: -46px 0 0 -10px; }

/* Footer */
.mx-foot { max-width: 1200px; width: 100%; margin: 28px auto 0; display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; opacity: 0; transition: opacity .5s; }
.mx.open .mx-foot { opacity: 1; transition-delay: .6s; }
.mx-foot p { margin: 0; font-size: 12px; color: var(--muted); max-width: 60ch; }

@media (max-width: 900px) {
  .mx { padding-top: 96px; }
  .mx-inner { grid-template-columns: 1fr; align-content: start; }
  .mx-stage { order: -1; aspect-ratio: 16 / 9; max-height: 26vh; justify-self: stretch; }
  .mx-item { grid-template-columns: 30px 1fr; padding: 12px 0; }
  .mx-n { padding-top: 10px; }
  .mx-t span { font-size: clamp(30px, 9vw, 44px); }
}

/* ── Preview animations: they replay each time a preview turns on ── */
.mx-viz svg * { vector-effect: non-scaling-stroke; }
/* map: contours draw in around the summit, then a route climbs to it */
.mz-c { fill: none; stroke: rgba(214,232,246,.22); stroke-width: 1; stroke-dasharray: 900; stroke-dashoffset: 900; }
.mz-c.ix { stroke: rgba(214,232,246,.5); }
.mx-viz.on .mz-c { animation: mz-draw 1.6s var(--ease) both; animation-delay: calc(var(--i) * .07s); }
.mz-peak { fill: #fff; } .mx-viz.on .mz-peak { animation: mz-pop .6s 1s both; transform-box: fill-box; transform-origin: center; }
.mz-t { fill: var(--muted); font: 500 11px var(--mono); letter-spacing: .06em; }
.mx-viz.on .mz-t { animation: mz-fade .6s 1.2s both; }
.mz-route { fill: none; stroke: #fff; stroke-width: 1.6; stroke-dasharray: 4 6; }
.mx-viz.on .mz-route { animation: mz-dash 1.8s 1.1s linear both, mz-fade .4s 1.1s both; }
/* pros: a skin track draws up the slope and the group follows it to the decision point */
.mz-slope { fill: rgba(214,232,246,.035); stroke: rgba(214,232,246,.18); stroke-width: 1; }
.mz-skin { fill: none; stroke: rgba(232,236,230,.75); stroke-width: 1.4; stroke-dasharray: 3 6; }
.mx-viz.on .mz-skin { animation: mz-fade .5s both; }
.mz-walker { fill: #9fb0a2; offset-rotate: 0deg; offset-distance: 0%; }
.mz-walker.lead { fill: #fff; }
.mx-viz.on .mz-walker { animation: mz-walk 7s linear infinite both; animation-delay: calc(var(--i) * .32s); }
.mz-dp { fill: none; stroke: #fff; stroke-width: 1.4; stroke-dasharray: 3 3; }
.mx-viz.on .mz-dp { animation: mz-pop .5s .3s both; transform-box: fill-box; transform-origin: center; }
/* reporting: two zones, a pin drops where they overlap, routes pulse out to both centers */
.mz-zone { fill: rgba(214,232,246,.04); stroke: rgba(214,232,246,.5); stroke-width: 1.2; stroke-dasharray: 6 5; }
.mz-zone.b { fill: rgba(142,162,145,.07); stroke: rgba(142,162,145,.75); stroke-dasharray: 2 4; }
.mx-viz.on .mz-zone { animation: mz-fade .6s both; } .mx-viz.on .mz-zone.b { animation-delay: .15s; }
.mz-pin circle { fill: #fff; } .mz-pin .halo { fill: none; stroke: #fff; stroke-width: 1; }
.mx-viz.on .mz-pin { animation: mz-drop .7s .35s cubic-bezier(.3, 1.5, .5, 1) both; }
.mx-viz.on .mz-pin .halo { animation: mz-ping 2.2s 1.1s var(--ease) infinite both; transform-box: fill-box; transform-origin: center; }
.mz-ray { fill: none; stroke: #fff; stroke-width: 1.4; stroke-dasharray: 3 7; stroke-linecap: round; }
.mx-viz.on .mz-ray { animation: mz-fade .3s 1s both, mz-run 2.4s 1s linear infinite; }
.mz-card rect { fill: rgba(14,17,15,.9); stroke: var(--line-2); }
.mz-card text { fill: #dfe5dc; font: 500 11px var(--font); }
.mx-viz.on .mz-card { animation: mz-rise .6s var(--ease) both; } .mx-viz.on .c1 { animation-delay: 1.3s; } .mx-viz.on .c2 { animation-delay: 1.5s; }
/* centers: a center's site builds itself, block by block */
.mz-frame { fill: rgba(14,17,15,.6); stroke: var(--line-2); stroke-dasharray: 1200; stroke-dashoffset: 1200; }
.mx-viz.on .mz-frame { animation: mz-draw 1.2s var(--ease) both; }
.mz-bar, .mz-h, .mz-fc .ln { fill: rgba(232,236,230,.8); transform-box: fill-box; transform-origin: left center; }
.mz-h.s, .mz-fc .ln.s { fill: rgba(232,236,230,.35); }
.mz-dot { fill: var(--accent); }
.mx-viz.on .mz-bar { animation: mz-grow .6s .5s var(--ease) both; }
.mx-viz.on .mz-dot { animation: mz-pop .5s .7s both; transform-box: fill-box; transform-origin: center; }
.mx-viz.on .mz-h { animation: mz-grow .7s .75s var(--ease) both; } .mx-viz.on .mz-h.s { animation-delay: .9s; }
.mz-fc > rect:first-child { fill: rgba(214,232,246,.05); stroke: var(--line-2); }
.mz-fc .chip { fill: none; stroke: #fff; stroke-width: 1.5; }
.mx-viz.on .mz-fc { animation: mz-rise .6s 1.1s var(--ease) both; }
.mx-viz.on .mz-fc .ln { animation: mz-grow .6s 1.4s var(--ease) both; } .mx-viz.on .mz-fc .ln.s { animation-delay: 1.5s; }
.mz-card2 { fill: rgba(232,236,230,.06); stroke: var(--line); }
.mx-viz.on .mz-card2 { animation: mz-rise .6s 1.5s var(--ease) both; } .mx-viz.on .mz-card2.b { animation-delay: 1.65s; }

@keyframes mz-draw { to { stroke-dashoffset: 0; } }
@keyframes mz-fade { from { opacity: 0; } }
@keyframes mz-pop { from { opacity: 0; transform: scale(0); } }
@keyframes mz-dash { from { stroke-dashoffset: 120; } to { stroke-dashoffset: 0; } }
@keyframes mz-run { to { stroke-dashoffset: -40; } }
@keyframes mz-walk { 0% { offset-distance: 0%; opacity: 0; } 6% { opacity: 1; } 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes mz-drop { from { opacity: 0; transform: translateY(-90px); } }
@keyframes mz-ping { 0% { transform: scale(.4); opacity: .9; } 80%, 100% { transform: scale(2); opacity: 0; } }
@keyframes mz-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes mz-grow { from { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
  .mx, .mx.closing { transition: opacity .2s; clip-path: none; opacity: 0; }
  .mx.open { opacity: 1; }
  .mx-t span, .mx-d, .mx-n, .mx-stage, .mx-foot { transition: none !important; transform: none !important; opacity: 1 !important; }
  .mx-viz *, .mx-viz.on * { animation: none !important; stroke-dashoffset: 0 !important; }
  .mz-walker { offset-distance: 60%; }
}

/* contact.js: the note shown after a form opens an email */
.cta-form.sent .sent-msg a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }