/* Start custom CSS */@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Montserrat:wght@400;500;700&display=swap");

/* ---------------------------------------------------------------
   0. Elementor container reset (unprefixed, deliberately)
   Canvas removes header/footer but the theme stylesheet still loads.
   These containers must not clip or constrain the sticky panes.
   --------------------------------------------------------------- */
body.elementor-page .elementor-section-wrap,
body.elementor-page .elementor-section,
body.elementor-page .elementor-container,
body.elementor-page .elementor-column,
body.elementor-page .elementor-widget-wrap,
body.elementor-page .elementor-widget,
body.elementor-page .elementor-widget-container {
  overflow: visible !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
html, body { overflow-x: clip; }

/* ---------------------------------------------------------------
   1. Tokens
   Achromatic on purpose. This is a design studio: the personality
   comes from the type and the two motion moments, not from a hue.
   --------------------------------------------------------------- */
#mnm {
  /* colour */
  --ink:      #14161A;   /* blue-black, reads as printed ink not pure #000 */
  --ink-90:   #24272C;
  --paper:    #EFEEEA;   /* warm neutral, greyer than the usual cream */
  --paper-2:  #E5E3DD;
  --mute:     #6E7076;
  --rule:     #C9C7C0;

  /* ===== FONTS - CHANGE THEM HERE, NOWHERE ELSE =====================
     Two faces on the page. That is the whole system.

       --sans   Montserrat. Everything that is not an italic accent.
       --body   Montserrat. Running paragraph text.
       --serif  Instrument Serif. The italic accents only:
                "in Tzaneen", the process numerals, the closing bands.

     --sans and --body are the same face right now, on purpose. They
     stay as separate tokens so you can put a different display face
     on headings later without touching a single rule.

     To go back to Helvetica for headings only, change --sans to:
       "Helvetica Neue", Helvetica, system-ui, Arial, sans-serif
     ================================================================= */
  --sans:  "Montserrat", "Helvetica Neue", Helvetica, system-ui, Arial, sans-serif;
  --body:  "Montserrat", "Helvetica Neue", Helvetica, system-ui, Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  /* measure */
  --gut: clamp(20px, 5vw, 72px);
  --maxw: 1440px;

  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 100%;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------
   1b. Specificity guard  <-- FIXES THE BLACK-ON-BLACK HERO
   font-family and color are INHERITED properties. Inheritance loses
   to any direct rule in the theme stylesheet, no matter how weak -
   a bare `h1 { font-family: ...; color: ... }` from Elementor's
   global typography beats `#mnm { }` inheriting down, because the
   theme rule targets the h1 directly and inheritance does not.
   That is why the hero rendered in a serif, in near-black on the
   near-black hero, while `in Tzaneen.` stayed correct: that span
   has its own class rule.
   So both properties get re-declared on the elements themselves.
   These are 101; every class rule below is 110 and still wins, so
   the serif accents and muted labels are untouched.
   --------------------------------------------------------------- */
#mnm h1, #mnm h2, #mnm h3, #mnm h4, #mnm h5, #mnm h6,
#mnm p, #mnm li, #mnm span, #mnm a, #mnm button, #mnm label,
#mnm input, #mnm select, #mnm textarea {
  font-family: var(--sans);
  color: inherit;
}

#mnm *, #mnm *::before, #mnm *::after { box-sizing: border-box; }
#mnm p, #mnm h1, #mnm h2, #mnm h3, #mnm h4, #mnm ul, #mnm li, #mnm figure { margin: 0; padding: 0; }
#mnm ul { list-style: none; }
#mnm img, #mnm svg { display: block; max-width: 100%; }
#mnm a { color: inherit; text-decoration: none; }

#mnm a:focus-visible,
#mnm button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
  border-radius: 2px;
}

#mnm .mnm-wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gut);
  padding-right: var(--gut);
}

/* Small caps utility label. Tracking is size specific throughout;
   this is the only place positive tracking is used. */
#mnm .mnm-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
  line-height: 1;
}

/* ---------------------------------------------------------------
   2. Nav - translucent material, content scrolls underneath
   --------------------------------------------------------------- */
#mnm .mnm-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px var(--gut);
  background: rgba(239, 238, 234, 0.62);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  transition: background 240ms ease, color 240ms ease;
}
#mnm .mnm-nav__mark { height: 26px; width: auto; }
#mnm .mnm-nav__links { display: flex; gap: clamp(16px, 2.4vw, 34px); align-items: center; }
#mnm .mnm-nav__links a {
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--ink);
  padding: 6px 0;
  position: relative;
}
#mnm .mnm-nav__links a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
#mnm .mnm-nav__links a:hover::after { transform: scaleX(1); }
#mnm .mnm-nav__cta {
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 8px 16px !important;
}
#mnm .mnm-nav__cta::after { display: none; }
#mnm .mnm-nav__cta:hover { background: var(--ink); color: var(--paper); }

/* Nav flips to light type while the dark hero is behind it */
#mnm .mnm-nav.is-dark {
  background: rgba(20, 22, 26, 0.55);
  color: var(--paper);
}
#mnm .mnm-nav.is-dark .mnm-nav__links a { color: var(--paper); }
#mnm .mnm-nav.is-dark .mnm-nav__cta { border-color: var(--paper); }
#mnm .mnm-nav.is-dark .mnm-nav__cta:hover { background: var(--paper); color: var(--ink); }
/* EDIT: only needed if the logo SVG is dark artwork. Delete this line if
   the mark disappears against the dark hero. */
#mnm .mnm-nav.is-dark .mnm-nav__mark { filter: invert(1) brightness(2); }

@media (max-width: 720px) {
  #mnm .mnm-nav__links a:not(.mnm-nav__cta) { display: none; }
}

/* ---------------------------------------------------------------
   3. HERO - scroll driven word roll
   COUPLED CONSTANTS: --hero-vh below and HERO in the JS must agree.
   HERO = { LEAD: 0.35, STEP: 0.50, TAIL: 0.55 } with 5 words
   total = 0.35 + 0.50 * 4 + 0.55 = 2.90  ->  --hero-vh: 290
   Change one, change the other.
   --------------------------------------------------------------- */
#mnm .mnm-hero {
  --hero-vh: 335;
  position: relative;
  height: calc(var(--hero-vh) * 1vh);
  background: var(--ink);
  color: var(--paper);
}
#mnm .mnm-hero__pane {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: clamp(28px, 6vh, 64px);
  overflow: hidden;
}
#mnm .mnm-hero__eyebrow {
  color: rgba(239, 238, 234, 0.55);
  margin-bottom: auto;
  padding-top: clamp(84px, 14vh, 150px);
}

/* Montserrat is noticeably wider than Helvetica at the same size, so
   the display sizes below are pulled in and the tracking tightened.
   If a long roll word ("web based apps") still runs off the right,
   drop the 8.4vw first - the clamp ceiling only bites on big screens. */
#mnm .mnm-hero__h1 {
  font-weight: 700;
  /* scales on min(vw, vh) so short laptops do not clip the three lines */
  font-size: clamp(2.3rem, min(8.4vw, 11.4vh), 7.4rem);
  line-height: 0.98;
  letter-spacing: -0.042em;   /* Montserrat needs more negative than Helvetica */
}
#mnm .mnm-hero__lead { display: block; }

/* the roll window - exactly one line tall, everything else is clipped */
#mnm .mnm-roll {
  display: block;
  position: relative;
  height: 1.12em;
  overflow: hidden;
}
#mnm .mnm-roll__strip {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  will-change: transform;
}
#mnm .mnm-roll__word {
  display: flex;
  align-items: center;
  height: 1.12em;
  line-height: 1;
  white-space: nowrap;
  transform-origin: left center;
  will-change: opacity, filter;
}

/* Long words must never run off the edge. The roll is one line by
   design, so the word scales down to fit instead of wrapping.
   transform-origin is already left, so it shrinks toward the margin. */
#mnm .mnm-roll__word {
  max-width: 100%;
  transform-origin: left center;
}
@media (max-width: 900px) {
  #mnm .mnm-hero__h1 { font-size: clamp(2rem, 7.2vw, 7.4rem); }
}
@media (max-width: 600px) {
  #mnm .mnm-hero__h1 { font-size: clamp(1.75rem, 6.6vw, 7.4rem); }
}

#mnm .mnm-hero__place {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.46em;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: rgba(239, 238, 234, 0.72);
  margin-top: 0.12em;
}

#mnm .mnm-hero__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(24px, 5vh, 52px);
}
/* Body copy sits at zero tracking. Montserrat is already open, so
   the negative tracking used on display type would be wrong here. */
#mnm .mnm-hero__sub {
  font-family: var(--body);
  font-weight: 400;
  letter-spacing: 0;
  max-width: 34ch;
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.6;
  color: rgba(239, 238, 234, 0.62);
}
#mnm .mnm-hero__cue {
  display: flex; align-items: center; gap: 10px;
  color: rgba(239, 238, 234, 0.45);
  flex: none;
}
#mnm .mnm-hero__cue span { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
#mnm .mnm-hero__cue i {
  display: block; width: 1px; height: 34px;
  background: currentColor;
  transform-origin: top;
  animation: mnm-cue 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes mnm-cue {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* progress ticks - one per word, so the roll reads as finite */
#mnm .mnm-hero__ticks {
  position: absolute;
  right: var(--gut);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#mnm .mnm-hero__ticks b {
  display: block;
  width: 18px; height: 1px;
  background: rgba(239, 238, 234, 0.28);
  transition: background 200ms ease, width 300ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
#mnm .mnm-hero__ticks b.is-on { background: var(--paper); width: 34px; }

@media (max-width: 900px) {
  #mnm .mnm-hero__ticks { display: none; }
  #mnm .mnm-hero__foot { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------------------------------------
   4. Shared section rhythm
   --------------------------------------------------------------- */
#mnm .mnm-sec { padding-top: clamp(72px, 12vh, 150px); padding-bottom: clamp(72px, 12vh, 150px); }
#mnm .mnm-sec--tight { padding-bottom: clamp(48px, 8vh, 96px); }

#mnm .mnm-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(36px, 6vh, 72px);
}

#mnm .mnm-h2 {
  font-weight: 700;
  font-size: clamp(1.8rem, 4.1vw, 3.3rem);
  line-height: 1.06;
  letter-spacing: -0.034em;
  max-width: 18ch;
}
#mnm .mnm-body { font-family: var(--body);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.62;
  letter-spacing: 0;           /* body sits at zero, only display is tightened */
  color: var(--ink-90);
  max-width: 62ch;
}
#mnm .mnm-body + .mnm-body { margin-top: 1.1em; }
#mnm .mnm-body strong { font-weight: 700; }

/* pull statement - the one place the serif appears above the fold line */
#mnm .mnm-pull {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 5.6vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 17ch;
}
#mnm .mnm-pull em { font-style: italic; }

#mnm .mnm-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 5vw, 88px);
  align-items: start;
}
#mnm .mnm-split > * { min-width: 0; }   /* grid items default to min-width auto */
@media (max-width: 860px) { #mnm .mnm-split { grid-template-columns: 1fr; } }

/* link with a rule that draws on hover */
#mnm .mnm-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  letter-spacing: -0.005em;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--rule);
  transition: border-color 200ms ease, gap 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
#mnm .mnm-link:hover { border-color: var(--ink); gap: 16px; }
#mnm .mnm-link svg { width: 14px; height: 14px; flex: none; }

/* ---------------------------------------------------------------
   5. Services - hairline rows. Not a sequence, so not numbered.
   --------------------------------------------------------------- */
#mnm .mnm-svc { border-top: 1px solid var(--rule); }
#mnm .mnm-svc__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: clamp(16px, 4vw, 64px);
  padding: clamp(26px, 4vh, 44px) 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
#mnm .mnm-svc__row > * { min-width: 0; }
#mnm .mnm-svc__name {
  font-size: clamp(1.2rem, 2.45vw, 1.95rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
#mnm .mnm-svc__body { font-family: var(--body); font-size: clamp(14px, 1.05vw, 16.5px); line-height: 1.6; color: var(--ink-90); }
@media (max-width: 720px) { #mnm .mnm-svc__row { grid-template-columns: 1fr; gap: 12px; } }

/* ---------------------------------------------------------------
   6. Work - scroll driven zoom
   The mockup has a transparent background, so there is no frame, no
   aspect-ratio box and no object-fit cropping. It sits on the paper
   directly and is scaled by transform only.

   COUPLED CONSTANTS: --work-vh here and WORK in the JS must agree.
   WORK = { GROW: 0.62, HOLD: 0.18 } -> 1.0 + 0.62 + 0.18 = 1.80
   Your JS says HOLD 0.18 while the CSS said 200. Corrected to 180.
   --------------------------------------------------------------- */
#mnm .mnm-work {
  --work-vh: 180;
  position: relative;
  height: calc(var(--work-vh) * 1vh);
}
#mnm .mnm-work__pane {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vh, 44px);
  overflow: clip;              /* clip, never hidden - hidden kills sticky */
}
#mnm .mnm-work__media {
  display: block;
  width: min(100%, 1100px);
  transform: scale(0.14);      /* starting size, JS takes over on frame 1 */
  transform-origin: center center;
  will-change: transform, opacity;
}
#mnm .mnm-work__media img {
  display: block;
  width: 100%;
  height: auto;
  background: none;            /* transparent PNG stays transparent */
}
#mnm .mnm-work__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  max-width: var(--maxw);
  padding: 0 var(--gut);
  gap: 20px;
}
@media (max-width: 720px) {
  #mnm .mnm-work__foot { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* no pinning on touch, and no zoom - the image just sits at full size */
@media (max-width: 1023px), (prefers-reduced-motion: reduce) {
  #mnm .mnm-work { height: auto; }
  #mnm .mnm-work__pane {
    position: static;
    height: auto;
    padding: clamp(50px, 9vh, 110px) 0;
  }
  #mnm .mnm-work__media { transform: none !important; opacity: 1 !important; }
}

/* ---------------------------------------------------------------
   7. Process - genuinely a sequence, so the numerals earn their place
   --------------------------------------------------------------- */
#mnm .mnm-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 36px);
  border-top: 1px solid var(--rule);
  padding-top: 30px;
}
#mnm .mnm-step { min-width: 0; position: relative; }
/* the rule above each step is the sequence: a tick that fills in */
#mnm .mnm-step::before {
  content: "";
  position: absolute;
  top: -31px; left: 0;
  width: 100%; height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 520ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
#mnm .mnm-step.is-in::before { transform: scaleX(1); }
#mnm .mnm-step__n {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1;
  color: var(--mute);
  margin-bottom: 16px;
}
#mnm .mnm-step__t { font-size: 16px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 6px; }
#mnm .mnm-step__b { font-family: var(--body); font-size: 14px; line-height: 1.55; color: var(--ink-90); }
@media (max-width: 1100px) { #mnm .mnm-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 38px; } }
@media (max-width: 700px)  { #mnm .mnm-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; } }
@media (max-width: 440px)  { #mnm .mnm-steps { grid-template-columns: 1fr; row-gap: 30px; } }
@media (max-width: 1100px) { #mnm .mnm-step::before { display: none; } }

/* ---------------------------------------------------------------
   8. CTA
   --------------------------------------------------------------- */
#mnm .mnm-cta { text-align: left; }
#mnm .mnm-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
  padding: 15px 26px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 15px;
  letter-spacing: -0.005em;
  transition: transform 120ms ease-out, opacity 160ms ease;
}
#mnm .mnm-btn:hover { opacity: 0.88; }
#mnm .mnm-btn:active { transform: scale(0.975); }  /* feedback on press, not release */

/* ---------------------------------------------------------------
   9. CLOSER - marquee bands that collapse to a rule
   COUPLED CONSTANTS: --close-vh here and the closer progress in the JS.
   --------------------------------------------------------------- */
#mnm .mnm-close {
  --close-vh: 240;
  position: relative;
  height: calc(var(--close-vh) * 1vh);
  background: var(--paper);
}
#mnm .mnm-close__pane {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#mnm .mnm-bands { flex: none; }
#mnm .mnm-band {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  height: clamp(58px, 11vh, 118px);
  will-change: height;
}
#mnm .mnm-band--dark { background: var(--ink); color: var(--paper); }
#mnm .mnm-band--light { background: var(--paper); color: var(--ink); }
#mnm .mnm-band__track {
  display: flex;
  flex: none;
  will-change: transform;
}
#mnm .mnm-band__unit {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(46px, 9vh, 96px);
  line-height: 1;
  letter-spacing: -0.02em;
  padding-right: 0.34em;
  white-space: nowrap;
  flex: none;
}
#mnm .mnm-band__unit i { font-style: normal; opacity: 0.45; padding-left: 0.34em; }

/* the hairline the bands collapse into */
#mnm .mnm-close__rule {
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

#mnm .mnm-close__reveal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(26px, 5vh, 54px);
  padding-top: clamp(30px, 6vh, 64px);
  will-change: transform, opacity;
}
#mnm .mnm-close__logo { width: clamp(180px, 26vw, 340px); height: auto; }

#mnm .mnm-close__contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(14px, 3vw, 40px);
  font-size: 15px;
  letter-spacing: -0.005em;
}
#mnm .mnm-close__contact a { border-bottom: 1px solid var(--rule); padding-bottom: 3px; transition: border-color 200ms ease; }
#mnm .mnm-close__contact a:hover { border-color: var(--ink); }

#mnm .mnm-close__meta {
  position: absolute;
  left: var(--gut); right: var(--gut); bottom: 18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  color: var(--mute);
}

/* ---------------------------------------------------------------
   10. Motion, transparency and contrast preferences
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #mnm .mnm-roll { height: auto; overflow: visible; }
  #mnm .mnm-roll__strip { position: static; transform: none !important; }

  /* No animation, so the roll becomes static type. The key word keeps
     display size; the rest collapse onto ONE inline comma-separated
     line, so it reads as a deliberate subtitle instead of a broken
     stack. Every word is still real text - nothing is hidden. */
  #mnm .mnm-roll__word {
    display: inline;
    height: auto;
    opacity: 1 !important;
    filter: none !important;
    font-size: clamp(13px, 3.4vw, 16px);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    color: rgba(239, 238, 234, 0.58);
  }
  #mnm .mnm-roll__word::after { content: ", "; }
  #mnm .mnm-roll__word:last-child::after { content: ""; }
  #mnm .mnm-roll__word.is-key {
    display: block;
    height: auto;
    font-size: 1em;
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.042em;
    color: inherit;
    margin-bottom: 0.28em;
  }
  #mnm .mnm-roll__word.is-key::after { content: ""; }
  /* the roll becomes a plain list, with the key word left at full size */
  #mnm .mnm-roll__word { opacity: 1 !important; filter: none !important; font-size: 0.32em; color: rgba(239, 238, 234, 0.7); }
  #mnm .mnm-roll__word.is-key { font-size: 1em; color: inherit; }
  #mnm .mnm-hero__cue i { animation: none; }
  #mnm .mnm-hero__ticks { display: none; }

  #mnm .mnm-close { height: auto; }
  #mnm .mnm-close__pane { position: static; height: auto; padding: 60px 0; }
  #mnm .mnm-band__track { transform: none !important; }
  #mnm .mnm-band { height: auto; padding: 10px 0; }
  #mnm .mnm-close__rule { transform: scaleX(1); margin: 40px 0; }
  #mnm .mnm-close__reveal { opacity: 1 !important; transform: none !important; }
  #mnm .mnm-close__meta { position: static; margin-top: 40px; }

  #mnm .mnm-step::before { transform: scaleX(1); transition: none; }
  #mnm * { transition-duration: 200ms !important; }
}

@media (prefers-reduced-transparency: reduce) {
  #mnm .mnm-nav { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
  #mnm .mnm-nav.is-dark { background: var(--ink); }
}

@media (prefers-contrast: more) {
  #mnm { --mute: #3C3E42; --rule: #8A887F; }
  #mnm .mnm-nav { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid var(--ink); }
  #mnm .mnm-hero__sub, #mnm .mnm-hero__place { color: var(--paper); }
}

/* ---------------------------------------------------------------
   11. Mobile / no-sticky fallback
   Pinned scroll jacking fights the browser's own gesture handling
   on touch, so below 1024px both panes release.
   --------------------------------------------------------------- */
@media (max-width: 1023px) {
  #mnm .mnm-hero { height: auto; }
  #mnm .mnm-close { height: auto; }
  #mnm .mnm-close__pane { position: static; height: auto; padding: 56px 0 100px; }
  #mnm .mnm-close__meta { position: static; margin-top: 44px; padding: 0 var(--gut); }
  #mnm .mnm-hero__pane { justify-content: center; padding-bottom: clamp(20px, 4vh, 40px); }
  #mnm .mnm-hero__eyebrow { margin-bottom: clamp(14px, 2.5vh, 24px); padding-top: 0; }
}/* End custom CSS */