/* ==========================================================================
   MNC 2026 — "Signal v2" design system
   Tokens, header, hero and the homepage sections. Every colour, size and
   spacing value resolves from the custom properties in section 1, so the
   system can be retuned in one place.
   ========================================================================== */

/* ---------------------------------------------------------------- 0. Fonts
   Self-hosted (SIL Open Font License 1.1): Bricolage Grotesque (variable,
   weight 200-800 and optical size 12-96), Manrope (variable, weight
   200-800) and IBM Plex Mono 400/500/600. Latin files cover English and
   French; the latin-ext files download only for a character outside that
   range. The two main Latin files are preloaded in functions.php. Family
   names match the --mnc-font-* tokens, so nothing else changes. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(fonts/bricolage-grotesque-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-latin-500.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-latin-600.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* --------------------------------------------------------------- 1. Tokens */
:root {
  /* surfaces */
  --mnc-navy:        #141c38;
  --mnc-card:        #1c2650;
  --mnc-card-raised: #212c58;
  --mnc-ink:         #0b1020;
  --mnc-cream:       #f4f3ee;
  --mnc-cream-dark:  #e2e0d8;
  --mnc-cream-mid:   #eae8e1;
  --mnc-stripe-a:    #232f5e;
  --mnc-stripe-b:    #293668;

  /* accent */
  --mnc-amber:       #f5a524;
  --mnc-amber-deep:  #b8791a;
  --mnc-amber-15:    rgba(245, 165, 36, .15);
  --mnc-amber-20:    rgba(245, 165, 36, .2);
  --mnc-amber-30:    rgba(245, 165, 36, .3);
  --mnc-amber-50:    rgba(245, 165, 36, .5);
  --mnc-amber-60:    rgba(245, 165, 36, .6);

  /* Type colours.
     The token names keep their original numbers so nothing downstream has to
     change, but the alphas were raised in September 2026. WCAG's contrast
     formula was built around dark text on light grounds and consistently
     overstates how legible light text on a dark ground looks: the old ladder
     technically passed AA almost everywhere and still read as washed out. Every
     step now clears 5:1 on the darkest surface it is used on, and the bottom of
     the ladder no longer fails outright on raised cards.
                                  contrast on navy / card / raised
     text     1.00  #eef0f6        14.7  12.8  11.8
     text-85   .88                 11.6  10.2   9.4
     text-75   .80                  9.8   8.7   8.1
     text-72   .78                  9.3   8.4   7.8   ← body copy
     text-65   .72                  8.2   7.3   6.9
     text-55   .64                  6.7   6.1   5.7   ← small labels
     text-50   .58                  5.8   5.3   5.0
  */
  --mnc-text:        #eef0f6;
  --mnc-text-85:     rgba(238, 240, 246, .88);
  --mnc-text-75:     rgba(238, 240, 246, .8);
  --mnc-text-72:     rgba(238, 240, 246, .78);
  --mnc-text-65:     rgba(238, 240, 246, .72);
  --mnc-text-55:     rgba(238, 240, 246, .64);
  --mnc-text-50:     rgba(238, 240, 246, .58);

  /* Cream surfaces run dark-on-light, where the contrast maths is reliable.
     --mnc-on-cream-mu was 4.58:1, which passes AA by a hair and fails it as
     soon as anything renders at 13px; darkened to clear 5.5:1. */
  --mnc-on-cream:    #434752;
  --mnc-on-cream-mu: #5f626c;

  /* lines */
  --mnc-line:        rgba(255, 255, 255, .11);
  --mnc-line-12:     rgba(255, 255, 255, .12);
  --mnc-line-10:     rgba(255, 255, 255, .1);
  --mnc-fill-10:     rgba(255, 255, 255, .1);

  /* type */
  --mnc-font-display: 'Bricolage Grotesque', 'Instrument Serif', Georgia, serif;
  --mnc-font-body:    Manrope, 'DM Sans', system-ui, -apple-system, sans-serif;
  --mnc-font-mono:    'IBM Plex Mono', ui-monospace, Menlo, monospace;

  /* Type scale. 76px display sits above a √2 (1.414) ladder:
     76 · 54 · 38 · 27 · 19. Each token is fluid, so the responsive steps that
     used to be hand-written per heading are no longer needed. */
  --mnc-fs-display:  clamp(34px, 0.875rem + 4.3vw, 76px);   /* homepage hero h1  */
  --mnc-fs-h2:       clamp(27px, 1rem + 2.65vw, 54px);      /* section h2, page h1 */
  --mnc-fs-h3:       clamp(22px, 0.95rem + 1.6vw, 38px);    /* sub-section h3    */
  --mnc-fs-h4:       clamp(19px, 1.05rem + 0.72vw, 27px);   /* card / panel h4   */
  --mnc-fs-h5:       19px;                                  /* smallest heading  */

  /* metrics */
  /* Edge padding. --mnc-pad is the plain value (used by narrow-measure blocks
     such as the blog post column); --mnc-gutter grows on wide screens so that
     section backgrounds run full-bleed while the content inside stays capped
     at --mnc-max and centred. */
  --mnc-pad:         56px;
  --mnc-max:         1440px;
  --mnc-gutter:      max(var(--mnc-pad), calc((100vw - var(--mnc-max)) / 2));
  --mnc-r-sm:        8px;
  --mnc-r-md:        12px;
  --mnc-r-lg:        14px;
  --mnc-r-xl:        18px;
  --mnc-pill:        999px;
}

/* ----------------------------------------------------------------- 2. Base */
html { -webkit-text-size-adjust: 100%; }

body.mnc {
  margin: 0;
  background: var(--mnc-navy);
  color: var(--mnc-text);
  font-family: var(--mnc-font-body);
  font-size: 16px;
  line-height: 1.5;
  /* Deliberately NOT -webkit-font-smoothing: antialiased. On a dark ground that
     setting thins every stroke and is a large part of why light text reads as
     washed out on macOS. Subpixel rendering keeps the weight the face was
     designed with. */
  -webkit-font-smoothing: auto;
}

body.mnc img { max-width: 100%; }
/* :where() so this carries zero specificity. As `body.mnc a` it scored (0,1,2)
   and silently outranked every single-class button and link colour — the dark
   button rendered ink-on-ink, the primary rendered pale-on-amber, and
   .mnc-link-amber was never amber. As a default, components now win. */
:where(body.mnc a) { color: inherit; }

/* Links inside running copy: amber plus a permanent underline, so a link is
   never told apart by colour alone (WCAG 1.4.1). Amber is 8.2:1 on navy and
   6.6:1 on raised cards. Cream surfaces swap in a darker amber (5.3:1), set
   through --mnc-link below. Buttons placed inside copy keep their own look.
   Specificity (0,2,1) is deliberate: it has to beat the block editor's global
   `a:where(...) { text-decoration: none }` and the older `.mnc-entry a`. */
.mnc-post-body a:not(.mnc-btn),
.mnc-entry a:not(.mnc-btn),
.mnc-prose-lg a:not(.mnc-btn),
.mnc-svc-overview-def a:not(.mnc-btn),
.mnc-about-copy a:not(.mnc-btn),
.mnc-page-hero .lead a:not(.mnc-btn) {
  color: var(--mnc-link, var(--mnc-amber));
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.mnc-post-body a:not(.mnc-btn):hover,
.mnc-entry a:not(.mnc-btn):hover,
.mnc-prose-lg a:not(.mnc-btn):hover,
.mnc-svc-overview-def a:not(.mnc-btn):hover,
.mnc-about-copy a:not(.mnc-btn):hover,
.mnc-page-hero .lead a:not(.mnc-btn):hover { text-decoration-thickness: 2px; }
.mnc-media,
.mnc-diff,
.mnc-roster,
.mnc-logo-strip,
.mnc-trust,
.mnc-result--light,
.mnc-bfeature { --mnc-link: #8a5a0f; }
body.mnc *, body.mnc *::before, body.mnc *::after { box-sizing: border-box; }

/* Visible focus for every interactive element (WCAG 2.4.7). */
body.mnc :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--mnc-amber);
  outline-offset: 3px;
  border-radius: 4px;
}

.mnc-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--mnc-amber);
  color: var(--mnc-ink);
  padding: 12px 20px;
  border-radius: 0 0 var(--mnc-r-sm) 0;
  font-weight: 700;
  text-decoration: none;
}
.mnc-skip:focus { left: 0; }

.mnc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------- 3. Layout shell */
/* Full-bleed: sections span the viewport; --mnc-gutter keeps their content
   centred and no wider than --mnc-max. */
.mnc-shell {
  max-width: none;
  margin: 0;
  background: var(--mnc-navy);
}

/* ----------------------------------------------------------- 4. Animations */
@keyframes mnc-pulse   { 0% { transform: scale(.6); opacity: .9 } 100% { transform: scale(1.6); opacity: 0 } }
@keyframes mnc-spin    { to { transform: rotate(360deg) } }
@keyframes mnc-marquee { from { transform: translateX(0) } to { transform: translateX(-100%) } }
@keyframes mnc-rise    { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }

.mnc-rise    { animation: mnc-rise .8s both; }
.mnc-rise-1  { animation: mnc-rise .7s both; }
.mnc-d1      { animation-delay: .1s }
.mnc-d2      { animation-delay: .25s }
.mnc-d3      { animation-delay: .4s }
.mnc-d4      { animation-delay: .6s }
.mnc-d5      { animation-delay: .7s }
.mnc-d6      { animation-delay: .8s }
.mnc-d7      { animation-delay: .9s }

@media (prefers-reduced-motion: reduce) {
  body.mnc *,
  body.mnc *::before,
  body.mnc *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .mnc-radar { display: none; }
  .mnc-tm-ring { display: none; }
  .mnc-tm-person, .mnc-tm-quote { transition: none !important; }
  .mnc-marquee-group { animation: none !important; transform: none !important; }
}

/* -------------------------------------------------------------- 5. Buttons */
.mnc-btn {
  display: inline-block;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  border-radius: var(--mnc-pill);
  transition: filter .2s, background-color .2s, transform .2s;
}
.mnc-btn:hover { filter: brightness(1.07); }

.mnc-btn--primary {
  background: var(--mnc-amber);
  color: var(--mnc-ink);
  padding: 15px 26px;
  font-size: 15px;
  font-weight: 700;
}
.mnc-btn--ghost {
  background: var(--mnc-fill-10);
  color: var(--mnc-text);
  padding: 15px 22px;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid var(--mnc-line-12);
}
.mnc-btn--sm {
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 700;
}
.mnc-btn--dark {
  background: var(--mnc-ink);
  color: #fff;
  padding: 13px 22px;
  font-size: 14px;
  font-weight: 700;
}
.mnc-btn--dark-ghost {
  background: rgba(11, 16, 32, .08);
  color: var(--mnc-ink);
  padding: 13px 20px;
  font-size: 14px;
  font-weight: 600;
}
.mnc-btn--block { text-align: center; display: block; }

.mnc-link-amber {
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  color: var(--mnc-amber);
  white-space: nowrap;
}
.mnc-link-amber:hover { text-decoration: underline; }

/* --------------------------------------------------------------- 6. Header */
.mnc-header {
  position: relative;          /* positioning context for the services mega panel */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px var(--mnc-gutter);
}
.mnc-brand {
  text-decoration: none;
  font: 700 20px/1.1 var(--mnc-font-display);
  letter-spacing: -.02em;
  display: inline-flex;
  align-items: center;
}
.mnc-brand img { display: block; max-height: 40px; width: auto; }

.mnc-nav {
  display: flex;
  gap: 30px;
  font-size: 14px;
  font-weight: 600;
  color: var(--mnc-text-75);
}
.mnc-nav a { text-decoration: none; }
.mnc-nav a:hover,
.mnc-nav a[aria-current] { color: var(--mnc-text); }

/* Shown only to logged-in users who can edit menus, when the Primary location
   has no menu assigned. Never rendered for visitors. */
.mnc-nav-setup {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--mnc-amber);
  text-decoration: none;
  border: 1px dashed var(--mnc-amber-60);
  border-radius: var(--mnc-pill);
  padding: 8px 14px;
}
.mnc-nav-setup:hover { background: var(--mnc-amber-15); }

.mnc-nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--mnc-line-12);
  border-radius: var(--mnc-r-sm);
  color: var(--mnc-text);
  padding: 9px 12px;
  font: 600 13px/1 var(--mnc-font-body);
}

/* ---------------------------------------------- 6b. Services mega panel ---
   Built from the service architecture, not from nested menu items: one column
   per hub, then a column for the vertical and standalone pages. Twenty
   services will not fit in a dropdown list, and should not have to.

   Desktop opens on hover, on focus and on the toggle. Mobile ignores hover
   entirely and behaves as an accordion inside the nav drawer. */

.mnc-navitem--mega {
  display: flex;
  align-items: center;
  gap: 5px;
}

.mnc-mega-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 4px;
  margin: 0;
  color: inherit;
  cursor: pointer;
  line-height: 0;
}
.mnc-mega-toggle svg { transition: transform .2s; }
.mnc-navitem.is-open .mnc-mega-toggle svg { transform: rotate(180deg); }

.mnc-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 120;
  background: var(--mnc-card);
  border-top: 1px solid var(--mnc-line);
  border-bottom: 1px solid var(--mnc-line);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
/* The amber filament the interior section separators use, so the panel reads
   as part of the same system rather than a bolted-on dropdown. */
.mnc-mega::before {
  content: "";
  position: absolute;
  top: -1px;
  left: var(--mnc-gutter);
  right: var(--mnc-gutter);
  height: 1px;
  background: linear-gradient(90deg, var(--mnc-amber-50) 0, var(--mnc-line) 18%, rgba(255, 255, 255, .04) 70%, transparent 100%);
}

.mnc-mega-inner { padding: 34px var(--mnc-gutter) 26px; }

.mnc-mega-cols {
  display: grid;
  grid-template-columns: repeat(var(--mnc-mega-cols, 4), minmax(0, 1fr));
  gap: 30px 40px;
}
.mnc-mega-col { min-width: 0; }

.mnc-mega-hub {
  display: block;
  font-family: var(--mnc-font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--mnc-text);
  text-decoration: none;
}
.mnc-mega-hub:hover { color: var(--mnc-amber); }

.mnc-mega-note {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--mnc-text-55);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mnc-mega-label {
  margin: 0;
  font: 600 10.5px/1 var(--mnc-font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mnc-text-50);
}
.mnc-mega-label--gap { margin-top: 22px; }

.mnc-mega-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.mnc-mega-list a {
  display: block;
  padding: 6px 10px 6px 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--mnc-text-75);
  text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: 12px;
  margin-left: -12px;
  transition: color .18s, border-color .18s;
}
.mnc-mega-list a:hover,
.mnc-mega-list a:focus-visible,
.mnc-mega-list a[aria-current] {
  color: var(--mnc-text);
  border-left-color: var(--mnc-amber);
}

.mnc-mega-foot {
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--mnc-line-10);
}

@media (min-width: 961px) {
  /* Without JS, hover and focus open the panel on their own. Once app.js has
     marked the item enhanced it drives .is-open instead — including for hover —
     because a CSS :focus-within rule cannot be overridden by Escape, and a panel
     you cannot dismiss from the keyboard is worse than one that needs JS. */
  .mnc-navitem--mega:not([data-mnc-enhanced]):hover .mnc-mega,
  .mnc-navitem--mega:not([data-mnc-enhanced]):focus-within .mnc-mega,
  .mnc-navitem--mega.is-open .mnc-mega {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

@media (max-width: 960px) {
  /* In the drawer the panel is an accordion: no overlay, no hover, no shadow. */
  .mnc-navitem--mega { display: block; position: relative; }
  .mnc-navitem--mega > a { display: inline-block; }
  .mnc-mega-toggle {
    position: absolute;
    top: 4px;
    right: 0;
    padding: 10px;
  }
  .mnc-mega {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    transition: none;
  }
  .mnc-mega::before { display: none; }
  .mnc-navitem--mega.is-open .mnc-mega { display: block; }
  .mnc-mega-inner { padding: 4px 0 14px; }
  .mnc-mega-cols { grid-template-columns: 1fr; gap: 0; }
  .mnc-mega-note { display: none; }

  /* Stacked, the hanging amber border that works as a hover affordance on
     desktop instead outdents every spoke past its own hub, which inverts the
     hierarchy. Here the group header sits flush and its spokes indent under it. */
  .mnc-mega-col {
    padding: 16px 0;
    border-top: 1px solid var(--mnc-line-10);
  }
  .mnc-mega-col:first-child { border-top: 0; padding-top: 6px; }

  .mnc-mega-hub {
    font-family: var(--mnc-font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mnc-text-50);
  }
  .mnc-mega-hub:hover { color: var(--mnc-amber); }

  .mnc-mega-list { margin-top: 6px; padding-left: 12px; }
  .mnc-mega-list a {
    font-size: 15px;
    padding: 9px 0;
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }
  .mnc-mega-list a:hover,
  .mnc-mega-list a:focus-visible,
  .mnc-mega-list a[aria-current] { color: var(--mnc-amber); }

  .mnc-mega-label { margin-bottom: 6px; }
  .mnc-mega-label--gap { margin-top: 18px; }
  .mnc-mega-foot { margin-top: 16px; padding-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .mnc-mega,
  .mnc-mega-toggle svg { transition: none; }
}

/* ----------------------------------------------------------------- 7. Hero */
.mnc-hero {
  position: relative;
  padding: 40px var(--mnc-gutter) 48px;
  overflow: hidden;
  background:
    radial-gradient(900px 500px at 85% 40%, rgba(245, 165, 36, .14), transparent 60%),
    radial-gradient(700px 600px at 10% 90%, rgba(80, 110, 255, .14), transparent 60%);
}
.mnc-radar {
  position: absolute;
  right: calc(var(--mnc-gutter) + 44px);
  top: -20px;
  width: 480px;
  height: 480px;
  pointer-events: none;
}
.mnc-radar span { position: absolute; border-radius: 50%; }
.mnc-radar .r1,
.mnc-radar .r2,
.mnc-radar .r3 {
  inset: 0;
  border: 1px solid var(--mnc-amber-50);
  animation: mnc-pulse 4s linear infinite;
}
.mnc-radar .r2 { animation-delay: 1.33s; }
.mnc-radar .r3 { animation-delay: 2.66s; }
.mnc-radar .r4 {
  inset: 40px;
  border: 1px dashed rgba(238, 240, 246, .25);
  animation: mnc-spin 60s linear infinite;
}
.mnc-radar .r5 { inset: 120px; border: 1px solid rgba(238, 240, 246, .12); }

.mnc-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 48px;
  align-items: start;
}

.mnc-eyebrow {
  margin: 0 0 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mnc-amber);
}
.mnc-eyebrow .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mnc-amber);
  box-shadow: 0 0 0 6px var(--mnc-amber-20);
  flex: none;
}

.mnc-hero h1 {
  margin: 0 0 22px;
  font-family: var(--mnc-font-display);
  font-weight: 500;
  font-size: var(--mnc-fs-display);
  line-height: .98;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.mnc-hero h1 em,
.mnc-accent { color: var(--mnc-amber); font-style: normal; }

.mnc-hero-lead {
  margin: 0 0 30px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--mnc-text-72);
  max-width: 540px;
}
.mnc-btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

.mnc-portrait { margin: 0; position: relative; }
.mnc-portrait img.mnc-portrait-img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 15%;
  border-radius: 200px 200px 24px 24px;
  filter: contrast(1.05) saturate(.85);
}
.mnc-portrait figcaption {
  position: absolute;
  left: -40px;
  bottom: 28px;
  background: var(--mnc-card-raised);
  border: 1px solid var(--mnc-line-12);
  border-radius: var(--mnc-r-md);
  padding: 12px 16px;
  display: flex;
  gap: 12px;
  align-items: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
}
.mnc-portrait figcaption img {
  height: 36px;
  width: auto;
  background: #fff;
  border-radius: 6px;
  padding: 3px;
}
.mnc-portrait figcaption span {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--mnc-text-75);
}
.mnc-portrait figcaption strong { color: var(--mnc-text); }

.mnc-proof {
  position: relative;
  margin: 44px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--mnc-line-12);
  display: flex;
  gap: 56px;
  flex-wrap: wrap;
}
.mnc-proof dt { font-size: 12px; color: var(--mnc-text-55); margin-bottom: 2px; }
.mnc-proof dd { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }

/* -------------------------------------------------------------- 8. Clients */
/* Full-bleed cream band: the section background IS the logo bar background, so
   the strip reads as one seamless banner and the hero's bottom-left gradient
   meets a clean edge instead of being cut by navy either side of a pill. */
.mnc-clients {
  margin: 0;
  background: var(--mnc-cream);
  border-radius: 0;
  padding: 26px 0;
  overflow: hidden;
}
/* Each group translates by exactly -100% of its own width, so the next group
   lands precisely where it started — seamless regardless of how many groups
   there are. app.js clones the group until the row is wider than the viewport
   plus one group, which is what stops the blank gap on wide screens, and sets
   the duration from the group's width so speed stays constant. */
.mnc-marquee {
  display: flex;
  width: max-content;
}
.mnc-marquee-group {
  display: flex;
  align-items: center;
  gap: 64px;
  padding: 0 64px 0 0;   /* equals the gap, so the seam spaces like the rest */
  margin: 0;
  list-style: none;
  flex: none;
}
.mnc-marquee-group li {
  flex: none;      /* never shrink: a squeezed box is what let logos overlap */
  display: block;
  line-height: 0;  /* no inline descender gap under the image */
}

.mnc-clients.is-ready .mnc-marquee-group {
  animation: mnc-marquee var(--mnc-marquee-duration, 40s) linear infinite;
  will-change: transform;
}
.mnc-clients:hover .mnc-marquee-group,
.mnc-clients:focus-within .mnc-marquee-group { animation-play-state: paused; }

.mnc-logo {
  display: block;
  height: 26px;
  width: auto;
  /* Overrides the global body.mnc img { max-width: 100% }. Inside a flex row
     that cap resolves against the flex item's width, so a height-constrained
     logo gets clamped narrower than it paints — which is what made images
     spill over their neighbours. */
  max-width: none;
  flex: none;
  opacity: .75;
  transition: filter .3s ease, opacity .3s ease;
}
.mnc-logo--dark  { filter: brightness(0); }
.mnc-logo--gray  { filter: grayscale(1); mix-blend-mode: multiply; }
.mnc-logo--invert{ filter: invert(1); }
/* Logos sized by inc/logos.php carry an inline width; the height follows from
   the width/height attributes' aspect ratio, so max-width can still shrink
   them in a narrow container. (0,2,1) beats every per-section fixed height. */
img.mnc-logo.mnc-logo--sized { height: auto; }

/* Normalized logos: the one-tone image at one shared darkness, with the
   colour image stacked on it and faded in on hover where the old logos
   restored their colour. The wrapper carries the width. */
.mnc-logo-pair {
  position: relative;
  display: block;
  flex: none;
  max-width: 100%;
  line-height: 0;
}
.mnc-logo-pair > img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  transition: opacity .3s ease;
}
.mnc-logo-pair > .mnc-logo-mono { opacity: .58; }
.mnc-logo-pair > .mnc-logo-colour { position: absolute; inset: 0; opacity: 0; }
.mnc-clients .mnc-logo-pair:hover > .mnc-logo-colour,
.mnc-logo-strip .mnc-logo-pair:hover > .mnc-logo-colour,
.mnc-trust .mnc-logo-pair:hover > .mnc-logo-colour { opacity: 1; }
.mnc-clients .mnc-logo-pair:hover > .mnc-logo-mono,
.mnc-logo-strip .mnc-logo-pair:hover > .mnc-logo-mono,
.mnc-trust .mnc-logo-pair:hover > .mnc-logo-mono { opacity: 0; }

/* Hovering a logo restores it to full colour. Specific enough to beat the
   treatment classes above without !important. */
.mnc-clients .mnc-logo:hover,
.mnc-logo-strip .mnc-logo:hover,
.mnc-trust .mnc-logo:hover {
  filter: none;
  opacity: 1;
  mix-blend-mode: normal;
}

/* ------------------------------------------------------------- 9. Sections */
/* ------------------------------------------------------- 8a. Pagination
   the_posts_pagination() emits .navigation.pagination with .page-numbers
   children. None of it had any rules, so every paged listing on the site
   rendered its page links as bare run-together text. */
.mnc-pagination { margin-top: 48px; }
.mnc-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mnc-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 10px 14px;
  border: 1px solid var(--mnc-line-12);
  border-radius: var(--mnc-pill);
  color: var(--mnc-text-72);
  font-size: 14px;
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.mnc-pagination a.page-numbers:hover { color: var(--mnc-text); border-color: rgba(255, 255, 255, .26); }
.mnc-pagination .page-numbers.current {
  background: var(--mnc-amber);
  border-color: var(--mnc-amber);
  color: var(--mnc-ink);
  font-weight: 700;
}
.mnc-pagination .page-numbers.dots { border-color: transparent; }
.mnc-pagination .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------- 8c. Blog index
   The posts listing: a two-column hero (featured article on cream, a
   numbered "Recommended" panel on navy), a category filter and the latest
   grid. Built on the same tokens as the rest of the site -- the featured card
   goes cream to break the navy, exactly as the homepage's featured case study
   does. */

/* ---- hero: featured + recommended ----
   7:5 rather than 1:1 -- the featured card carries an image and a paragraph,
   the panel carries five one-line rows. align-items: stretch lets the panel's
   rows grow to the card's height so the two bottoms line up. No calc() or
   min() in the geometry: Autoptimize mangles nested CSS math in this theme. */
.mnc-bhero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 28px;
  align-items: stretch;
  padding-bottom: 64px;
}
.mnc-bhero--single { grid-template-columns: minmax(0, 1fr); }
.mnc-bhero--single .mnc-bfeature { max-width: 860px; }
.mnc-bhero--single .mnc-brec { max-width: 640px; }

/* ---- featured article (left) ---- */
.mnc-bfeature {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--mnc-cream);
  color: var(--mnc-ink);
  border-radius: var(--mnc-r-xl);
  overflow: hidden;
}
.mnc-bfeature-media {
  display: block;
  width: 100%;
  /* 5:2 beside the panel keeps the card short enough that five rows read as
     a table rather than five islands (the whole hero was cut ~30% at Marc's
     request); the stacked layouts below 960px go back to 16:9, where height
     is free. */
  aspect-ratio: 5 / 2;
  /* This is a flex item, so its automatic minimum height is the <img>'s
     intrinsic height -- which silently overrode the ratio (the box rendered
     at 16:9 whatever was declared). min-height: 0 lets the ratio win. */
  min-height: 0;
  flex: 0 0 auto;
  overflow: hidden;
  background: var(--mnc-cream-mid);
}
.mnc-bfeature-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mnc-bfeature-media.is-empty {
  background: repeating-linear-gradient(135deg, var(--mnc-cream-dark) 0 10px, var(--mnc-cream-mid) 10px 20px);
}
.mnc-bfeature-body {
  flex: 1 1 auto;
  padding: 24px 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.mnc-bfeature-kicker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 0 0 12px;
}
.mnc-bfeature-flag {
  display: inline-block;
  padding: 5px 10px;
  border-radius: var(--mnc-pill);
  background: var(--mnc-ink);
  color: var(--mnc-amber);
  font-family: var(--mnc-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
}
.mnc-bfeature-body h2 {
  margin: 0 0 10px;
  font-family: var(--mnc-font-display);
  font-weight: 500;
  /* One step under the h3 rung: the card is a listing, not a landing. */
  font-size: clamp(22px, 0.9rem + 1.25vw, 32px);
  line-height: 1.1;
  letter-spacing: -.03em;
  max-width: 34ch;
}
.mnc-bfeature-body h2 a { color: inherit; text-decoration: none; }
.mnc-bfeature-body h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mnc-bfeature-ex {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--mnc-on-cream-mu);
  max-width: 60ch;
  /* Two lines, whatever the excerpt length -- the height of this card sets
     the height of the panel beside it. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.mnc-bfeature-foot { display: flex; align-items: center; gap: 20px; margin: 0; flex-wrap: wrap; }
.mnc-bfeature-foot time { font-size: 13px; color: var(--mnc-on-cream-mu); }
/* The kicker sits on cream here, so it cannot use the light-on-dark tag colour. */
/* amber-deep is 3.27:1 on cream — fine for a chip's border, not for its text. */
.mnc-tag--onlight { color: #8f5c10; }

/* ---- recommended panel (right) ----
   A table in effect: number, subject + read time, title, arrow. Rows are
   flex: 1 so five of them fill whatever height the featured card sets;
   hairlines between rows come from a top border on every row after the
   first, not from gaps, so there is nothing to misalign. */
.mnc-brec {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--mnc-line);
  border-radius: var(--mnc-r-xl);
  background: var(--mnc-card);
  overflow: hidden;
}
.mnc-brec-head {
  padding: 20px 28px 16px;
  border-bottom: 1px solid var(--mnc-line);
}
.mnc-brec-head h2 {
  margin: 0;
  font-family: var(--mnc-font-display);
  font-weight: 500;
  font-size: var(--mnc-fs-h4);
  line-height: 1.1;
  letter-spacing: -.03em;
}
.mnc-brec-head p {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--mnc-text-55);
}
.mnc-brec-list {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mnc-brec-item { flex: 1 1 auto; display: flex; }
.mnc-brec-item + .mnc-brec-item { border-top: 1px solid var(--mnc-line); }
.mnc-brec-row {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 16px;
  padding: 12px 28px;
  color: inherit;
  text-decoration: none;
  min-width: 0;
  transition: background-color .25s ease;
}
.mnc-brec-row:hover,
.mnc-brec-row:focus-visible { background: var(--mnc-card-raised); outline: none; }
.mnc-brec-row .n {
  font: 600 13px/1 var(--mnc-font-mono);
  color: var(--mnc-amber);
}
.mnc-brec-row .body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mnc-brec-row .body .mnc-tag { margin: 0; }
.mnc-brec-row .t {
  font-family: var(--mnc-font-display);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--mnc-text);
}
.mnc-brec-row:hover .t { color: var(--mnc-amber); }
.mnc-brec-row .arrow {
  font-size: 16px;
  color: var(--mnc-text-50);
  transition: transform .25s ease, color .25s ease;
}
.mnc-brec-row:hover .arrow { transform: translateX(4px); color: var(--mnc-amber); }

/* ---- category filter ---- */
.mnc-bfilter { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 32px; }
.mnc-bfilter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--mnc-line-12);
  border-radius: var(--mnc-pill);
  background: none;
  color: var(--mnc-text-72);
  font: inherit;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.mnc-bfilter-pill:hover { color: var(--mnc-text); border-color: rgba(255, 255, 255, .26); }
.mnc-bfilter-pill.is-on {
  background: var(--mnc-amber);
  border-color: var(--mnc-amber);
  color: var(--mnc-ink);
  font-weight: 700;
}
.mnc-bfilter-pill .c { font-family: var(--mnc-font-mono); font-size: 11.5px; opacity: .7; }

/* ---- latest grid ---- */
.mnc-bgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 28px; }
.mnc-bcard { display: flex; flex-direction: column; }
.mnc-bcard-media {
  display: block;
  aspect-ratio: 16 / 10;
  margin-bottom: 16px;
  border-radius: var(--mnc-r-lg);
  border: 1px solid var(--mnc-line);
  background: var(--mnc-card);
  overflow: hidden;
}
.mnc-bcard-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mnc-bcard-media.is-empty {
  background: repeating-linear-gradient(135deg, var(--mnc-card) 0 10px, var(--mnc-card-raised) 10px 20px);
}
.mnc-bcard h3 {
  margin: 8px 0 0;
  font-family: var(--mnc-font-display);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.22;
  letter-spacing: -.025em;
}
.mnc-bcard h3 a { color: inherit; text-decoration: none; }
.mnc-bcard h3 a:hover { color: var(--mnc-amber); }
.mnc-bcard-ex {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--mnc-text-72);
}
.mnc-bcard time { margin-top: 12px; font-size: 12.5px; color: var(--mnc-text-55); }

/* ------------------------------------------- 8b. Secondary page hero
   Every template except the homepage opens with .mnc-page-hero. None of these
   classes had a single rule, so the eyebrow and title rendered as bare text
   flush against the viewport edge on archives, search, 404 and single pages.
   Deliberately quieter than .mnc-hero -- same gutter and glow language, less
   of it, so a listing page never competes with the homepage. */
.mnc-page-hero {
  position: relative;
  overflow: hidden;
  padding: 60px var(--mnc-gutter) 52px;
  margin-bottom: 60px;
  border-bottom: 1px solid var(--mnc-line);
  background:
    radial-gradient(780px 420px at 84% 6%, rgba(245, 165, 36, .10), transparent 62%),
    radial-gradient(620px 460px at 2% 98%, rgba(80, 110, 255, .10), transparent 64%);
}
.mnc-eyebrow-plain {
  margin: 0 0 16px;
  font-family: var(--mnc-font-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mnc-amber);
}
.mnc-page-title {
  position: relative;
  margin: 0;
  max-width: 20ch;
  font-family: var(--mnc-font-display);
  font-weight: 500;
  font-size: var(--mnc-fs-h2);
  line-height: 1.04;
  letter-spacing: -.04em;
  color: var(--mnc-text);
}
.mnc-page-hero .lead {
  position: relative;
  margin: 20px 0 0;
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--mnc-text-72);
}
.mnc-page-hero .mnc-searchform { position: relative; margin-top: 26px; max-width: 480px; }
/* The Insights index has its own hero directly underneath (featured +
   recommended), so this header is a label, not a landing: no eyebrow in the
   markup, and about half the vertical room. Placed after the base rule so it
   wins on equal specificity. */
.mnc-page-hero--blog {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 28px;
  padding: 10px var(--mnc-gutter) 10px;
  margin-bottom: 20px;
}
.mnc-page-hero--blog .mnc-page-title { font-size: var(--mnc-fs-h3); max-width: none; flex: none; }
.mnc-page-hero--blog .lead { margin: 0; font-size: 15px; flex: 1 1 320px; min-width: 0; max-width: none; }
/* Category archives keep the eyebrow (it links back to the index); in the row it
   is just the first item, so it loses its stacked-layout margin. */
.mnc-page-hero--blog .mnc-eyebrow-plain { margin: 0; }

/* get_search_form() emits WordPress's default markup, which arrived completely
   unstyled -- a raw grey input and button on the 404 and search pages. */
.mnc-searchform .search-form { display: flex; gap: 10px; }
.mnc-searchform label { flex: 1; min-width: 0; margin: 0; }
.mnc-searchform .search-field {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--mnc-line-12);
  border-radius: var(--mnc-pill);
  background: rgba(255, 255, 255, .04);
  color: var(--mnc-text);
  font: inherit;
  font-size: 15px;
}
.mnc-searchform .search-field::placeholder { color: var(--mnc-text-55, rgba(238, 240, 246, .55)); }
.mnc-searchform .search-field:focus-visible {
  outline: 2px solid var(--mnc-amber);
  outline-offset: 2px;
  border-color: transparent;
}
.mnc-searchform .search-submit {
  flex: none;
  padding: 13px 22px;
  border: 0;
  border-radius: var(--mnc-pill);
  background: var(--mnc-amber);
  color: var(--mnc-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.mnc-searchform .search-submit:hover { background: var(--mnc-amber-deep, #b8791a); }

/* Decorative concentric rings, echoing the hero's radar without the animation. */
.mnc-rings {
  position: absolute;
  top: -90px;
  right: calc(var(--mnc-gutter) - 40px);
  width: 340px;
  height: 340px;
  pointer-events: none;
}
.mnc-rings span {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--mnc-amber-50, rgba(245, 165, 36, .5));
  opacity: .3;
}
.mnc-rings .a { inset: 0; }
.mnc-rings .b { inset: 52px; opacity: .2; }
.mnc-rings .c { inset: 96px; opacity: .16; }

.mnc-section { padding: 0 var(--mnc-gutter) 72px; }
.mnc-section--services { padding: 80px var(--mnc-gutter) 64px; }

.mnc-section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 40px;
  margin-bottom: 32px;
}
.mnc-section-head h2 {
  margin: 0;
  font-family: var(--mnc-font-display);
  font-weight: 500;
  font-size: var(--mnc-fs-h2);
  line-height: 1.02;
  letter-spacing: -.04em;
  max-width: 560px;
}
.mnc-section-head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}
.mnc-section-head--center h2 { max-width: 19ch; }
.mnc-section-lead {
  margin: 0;
  max-width: 56ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--mnc-text-72);
}

.mnc-section-head--sm { margin-bottom: 28px; }
/* Compact head: same h2 rung as .mnc-section-head, just tighter spacing. */
.mnc-section-head--sm h2 { letter-spacing: -.035em; }

/* ------------------------------------------------------------ 10. Services */
.mnc-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* ------------------------------------------- 10b. Services circuit map ----- */
/* A rail of service pillars wired to a panel of that pillar's sub-services.
   The rail is built from every published hub, so the CSS never assumes a
   count: the rail is a flex column that simply gets taller, and the spoke grid
   is auto-fit, so it reflows from two spokes to nine without a media query.

   With JS off every panel renders in flow, ruled apart, and the architecture is
   still legible. app.js adds .is-enhanced, stacks them and draws the wire.

   Geometry here stays free of nested math functions on purpose: Autoptimize's
   CSS minifier has mangled calc()/min() in this theme before, and the two-column
   split is the one thing that must not silently collapse. */
.mnc-cmap {
  position: relative;
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}

/* The wire is decorative. It sits under both columns and never takes a click. */
.mnc-cmap-wire {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
.mnc-cmap-wire-path {
  fill: none;
  stroke: var(--mnc-amber);
  stroke-width: 1.25;
  opacity: .5;
}
.mnc-cmap-wire-node { fill: var(--mnc-amber); }

/* ---- rail ---- */
.mnc-cmap-rail {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mnc-cmap-hub {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--mnc-line);
  border-radius: var(--mnc-r-md);
  background: var(--mnc-card);
  color: var(--mnc-text-72);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .22s ease, background-color .22s ease, color .22s ease;
}
.mnc-cmap-hub:hover { color: var(--mnc-text); background: var(--mnc-card-raised); }
.mnc-cmap-hub[aria-selected="true"] {
  border-color: var(--mnc-amber);
  background: var(--mnc-card-raised);
  color: var(--mnc-text);
}

.mnc-cmap-ico {
  background: rgba(255, 255, 255, .06);
  color: var(--mnc-text-55);
  transition: background-color .22s ease, color .22s ease;
}
.mnc-cmap-hub[aria-selected="true"] .mnc-cmap-ico {
  background: var(--mnc-amber-15);
  color: var(--mnc-amber);
}

.mnc-cmap-hub-x { display: block; min-width: 0; }
.mnc-cmap-hub-t {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}
.mnc-cmap-hub-c {
  display: block;
  margin-top: 3px;
  font: 500 10.5px/1.2 var(--mnc-font-mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--mnc-text-50);
}
.mnc-cmap-hub[aria-selected="true"] .mnc-cmap-hub-c { color: var(--mnc-amber); }

/* ---- panel ---- */
.mnc-cmap-stage { position: relative; z-index: 1; min-width: 0; }
.mnc-cmap.is-enhanced .mnc-cmap-stage { display: grid; }

.mnc-cmap-panel {
  position: relative;
  min-width: 0;
  padding: 28px;
  border: 1px solid var(--mnc-line);
  border-radius: var(--mnc-r-xl);
  background: var(--mnc-card);
}
.mnc-cmap.is-enhanced .mnc-cmap-panel { grid-area: 1 / 1; }
.mnc-cmap-panel[hidden] { display: none; }
.mnc-cmap-panel:focus { outline: none; }
.mnc-cmap-panel + .mnc-cmap-panel { margin-top: 14px; }
.mnc-cmap.is-enhanced .mnc-cmap-panel + .mnc-cmap-panel { margin-top: 0; }

.mnc-cmap-title {
  margin: 0 0 12px;
  font-family: var(--mnc-font-display);
  font-weight: 500;
  font-size: var(--mnc-fs-h4);
  line-height: 1.14;
  letter-spacing: -.03em;
  text-wrap: balance;
  color: var(--mnc-text);
}
.mnc-cmap-sum {
  margin: 0 0 22px;
  max-width: 58ch;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--mnc-text-72);
}

/* ---- spoke grid ---- */
/* One-pixel gaps over a lit background draw the hairlines, so the grid reads as
   a wired board rather than a stack of cards, and an odd spoke count leaves no
   half-drawn row. */
.mnc-cmap-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 22px;
  border: 1px solid var(--mnc-line-10);
  border-radius: var(--mnc-r-md);
  background: var(--mnc-line-10);
  overflow: hidden;
}

/* Column count comes from the spoke count (see front-page.php) rather than
   auto-fit, so the last row always fills and the hairline gaps never frame an
   empty rectangle. Attribute selectors, not inline styles: the breakpoints
   below still need to win. */
.mnc-cmap-grid[data-cols="1"] { grid-template-columns: minmax(0, 1fr); }
.mnc-cmap-grid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mnc-cmap-grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mnc-cmap-cell[data-span="2"] { grid-column: span 2; }
.mnc-cmap-cell[data-span="3"] { grid-column: span 3; }

.mnc-cmap-cell {
  display: block;
  min-width: 0;
  padding: 14px 16px;
  background: var(--mnc-card);
  text-decoration: none;
  color: inherit;
  transition: background-color .2s ease;
}
.mnc-cmap-cell:hover { background: var(--mnc-card-raised); }
.mnc-cmap-cell:hover .mnc-cmap-cell-t { color: var(--mnc-amber); }

.mnc-cmap-cell-t {
  display: block;
  margin-bottom: 5px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--mnc-text);
  transition: color .2s ease;
}
.mnc-cmap-cell-g {
  display: block;
  font: 400 11px/1.5 var(--mnc-font-mono);
  color: var(--mnc-text-50);
}
.mnc-cmap-cell-k {
  color: var(--mnc-text-50);
  opacity: .75;
}
.mnc-cmap-cell-k::after { content: ': '; }

.mnc-cmap-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 700;
}

/* "All services" — bottom right, and only rendered when the field is filled. */
.mnc-services-foot { display: flex; justify-content: flex-end; margin-top: 24px; }
.mnc-card {
  background: var(--mnc-card);
  border: 1px solid var(--mnc-line);
  border-radius: var(--mnc-r-lg);
  padding: 26px;
  transition: border-color .25s, box-shadow .25s, transform .25s;
  text-decoration: none;
  color: inherit;
  display: block;
}
.mnc-card:hover,
.mnc-card:focus-within {
  border-color: var(--mnc-amber-60);
  box-shadow: 0 0 0 1px var(--mnc-amber-30), 0 20px 50px rgba(0, 0, 0, .4);
  transform: translateY(-3px);
}
.mnc-card-head {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.mnc-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--mnc-r-sm);
  background: var(--mnc-amber-15);
  display: grid;
  place-items: center;
  font: 600 9px/1 var(--mnc-font-mono);
  color: var(--mnc-amber);
  flex: none;
  overflow: hidden;
}
.mnc-icon img,
.mnc-icon svg { width: 18px; height: 18px; display: block; }
.mnc-card h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.mnc-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--mnc-text-65);
}

/* ------------------------------------------------- 11. Featured case study */
/* ---------------------------------------- Success stories carousel */
.mnc-cscar { position: relative; }
.mnc-cscar-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  border-radius: var(--mnc-r-xl);
}
.mnc-cscar-track::-webkit-scrollbar { display: none; }
.mnc-cscar-track:focus-visible { outline: 2px solid var(--mnc-amber); outline-offset: 4px; }
/* min-width: 0 or the two-column grid inside refuses to shrink to the track. */
.mnc-cscar-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.mnc-cscar.is-single .mnc-cscar-track { overflow: visible; }

.mnc-cscar-nav {
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.mnc-cscar-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--mnc-line-12);
  background: none;
  color: var(--mnc-text-72);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s, color .15s, opacity .15s;
}
.mnc-cscar-arrow:hover:not(:disabled) { border-color: var(--mnc-amber-50); color: var(--mnc-text); }
.mnc-cscar-arrow:disabled { opacity: .3; cursor: default; }
.mnc-cscar-dots { display: flex; gap: 9px; }
.mnc-cscar-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--mnc-fill-10);
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.mnc-cscar-dot.is-on { background: var(--mnc-amber); transform: scale(1.25); }

@media (prefers-reduced-motion: reduce) {
  .mnc-cscar-track { scroll-behavior: auto; }
}

.mnc-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--mnc-cream);
  color: var(--mnc-ink);
  border-radius: var(--mnc-r-xl);
  overflow: hidden;
}
.mnc-visual {
  background: repeating-linear-gradient(135deg, var(--mnc-cream-dark) 0 10px, var(--mnc-cream-mid) 10px 20px);
  display: grid;
  place-items: center;
  min-height: 340px;
  font: 12px/1.4 var(--mnc-font-mono);
  color: var(--mnc-on-cream-mu);
  text-align: center;
  padding: 20px;
}
/* With a real image the stripes are placeholder texture, so they step aside for
   a plain tinted mat. `contain` keeps the whole screenshot visible — `cover`
   was cropping the sides off wide dashboard captures. */
.mnc-visual--filled {
  background: var(--mnc-cream-mid);
  min-height: 300px;
  padding: 26px;
}
.mnc-visual img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  display: block;
}
.mnc-featured-body {
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mnc-kicker {
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--mnc-amber-deep);
}
.mnc-featured-body :is(h2, h3) {
  margin: 0 0 16px;
  font-family: var(--mnc-font-display);
  font-weight: 500;
  font-size: var(--mnc-fs-h3);
  line-height: 1.1;
  letter-spacing: -.035em;
}
.mnc-featured-body > p {
  margin: 0 0 26px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--mnc-on-cream);
}
.mnc-metrics { display: flex; gap: 36px; margin: 0 0 28px; flex-wrap: wrap; }
.mnc-metrics dd {
  margin: 0;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -.03em;
}
.mnc-metrics dt { font-size: 12.5px; color: var(--mnc-on-cream-mu); }

/* -------------------------------------------------------- 12. Testimonials */
/* Revolving anchor rail: people on a shallow arc at the left, quote at the
   right. Rotates on a timer, pauses on hover or keyboard focus, and hovering
   any avatar promotes that person immediately. */
.mnc-tm {
  position: relative;
  display: grid;
  grid-template-columns: 470px 1fr;
  gap: 64px;
  align-items: center;
  min-height: 360px;
}
/* The hero's amber glow, quietly reused behind the rail. */
.mnc-tm::before {
  content: "";
  position: absolute;
  left: -60px;
  top: 50%;
  width: 460px;
  height: 460px;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(245, 165, 36, .13), transparent 62%);
  pointer-events: none;
}

/* The arc lives in this wrapper, not in the list — an <svg> is not valid
   content inside a <ul>, and it was escaping the rail's box. */
/* Fixed box: the arc's viewBox is 1:1 with it, so the curve is drawn once and
   never recalculated. People are placed on it absolutely, which also means a
   rotation moves nothing in flow -- no reflow, no layout shift. */
.mnc-tm-rail { position: relative; width: 470px; height: 340px; }
.mnc-tm-people {
  position: relative;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mnc-tm-people > li {
  position: absolute;
  left: 150px;      /* the arc's apex */
  top: 50%;
  width: max-content;
  max-width: 290px;
}
/* An inline <svg> is a replaced element: with inset:0 but no width/height it
   keeps its intrinsic size, so the 40x100 viewBox stretched it to 950px tall
   and the dashed stroke ran straight down through the About band. Explicit
   100%/100% is what actually binds it to the rail. */
.mnc-tm-arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}
.mnc-tm-arc path {
  fill: none;
  stroke: rgba(245, 165, 36, .34);
  stroke-width: 1;
  stroke-dasharray: 3 5;
  /* The viewBox is stretched vertically, so without this the stroke thins out. */
  vector-effect: non-scaling-stroke;
}

.mnc-tm-person {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: auto;
  padding: 6px 12px 6px 6px;
  border: 0;
  border-radius: var(--mnc-pill);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  /* Scale about the avatar's own centre, not the box's left edge -- with a
     left origin the off-slot avatars slid inward as they shrank and came off
     the arc by ~8px. */
  transform-origin: 42px center;
  /* app.js sets --x/--y to a point on the fixed arc and --sc/--op to the
     falloff for that slot. With no JS everything sits at the apex at full
     size, which is the correct resting state. */
  transform: translate(var(--x, 0px), calc(-50% + var(--y, 0px))) scale(var(--sc, 1));
  opacity: var(--op, 1);
  transition: transform .55s cubic-bezier(.3, .7, .25, 1), opacity .45s ease;
}
.mnc-tm-person[aria-selected="true"] { opacity: 1; }

.mnc-tm-avatar {
  position: relative;
  width: 72px;
  height: 72px;
  flex: none;
  border-radius: 50%;
}
.mnc-tm-avatar .disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--mnc-card-raised);
  border: 1px solid var(--mnc-line);
  display: grid;
  place-items: center;
  font: 600 21px/1 var(--mnc-font-display);
  letter-spacing: .01em;
  color: var(--mnc-text-55);
  transition: border-color .35s ease, color .35s ease, background-color .35s ease;
}
.mnc-tm-avatar .disc img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
}
.mnc-tm-person[aria-selected="true"] .disc {
  border-color: transparent;
  background: var(--mnc-amber-15);
  color: var(--mnc-amber);
}
.mnc-tm-person:hover .disc { border-color: var(--mnc-amber-60); }

/* Countdown ring — makes the rotation feel timed rather than arbitrary. */
.mnc-tm-ring { position: absolute; inset: -7px; opacity: 0; transition: opacity .35s ease; }
.mnc-tm-person[aria-selected="true"] .mnc-tm-ring { opacity: 1; }
.mnc-tm-ring circle { fill: none; stroke-width: 1.5; }
.mnc-tm-ring .track { stroke: rgba(255, 255, 255, .1); }
.mnc-tm-ring .bar {
  stroke: var(--mnc-amber);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--p, 0) * 100);
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.mnc-tm-who { min-width: 0; }
.mnc-tm-name {
  display: block;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.25;
  white-space: nowrap;
}
.mnc-tm-role {
  display: block;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--mnc-text-55);
  white-space: nowrap;
}
.mnc-tm-person[aria-selected="true"] .mnc-tm-role { color: var(--mnc-text-72); }

.mnc-tm-quotes { position: relative; display: grid; min-height: 220px; }
.mnc-tm-quote {
  grid-area: 1 / 1;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: opacity .4s ease, transform .4s cubic-bezier(.2, .7, .3, 1);
}
.mnc-tm-quote[aria-hidden="true"] { opacity: 0; transform: translateY(10px); pointer-events: none; }
@keyframes mnc-tm-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mnc-tm-mark {
  display: block;
  font: 500 76px/.6 var(--mnc-font-display);
  color: var(--mnc-amber);
  margin-bottom: 14px;
  user-select: none;
}
.mnc-tm-quote blockquote {
  margin: 0;
  font-family: var(--mnc-font-display);
  font-weight: 500;
  /* A step above the h4 rung: this is the only quote on the page and it has a
     whole column to fill. em rather than ch so the measure tracks the size. */
  font-size: clamp(21px, 1.05rem + 1.2vw, 34px);
  line-height: 1.4;
  letter-spacing: -.025em;
  color: var(--mnc-text-85);
  max-width: 26em;
  text-wrap: pretty;
}

.mnc-tm-quote--long blockquote { font-size: clamp(18px, .95rem + .75vw, 26px); line-height: 1.45; }
.mnc-tm-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
  justify-content: center;
}
.mnc-tm-dots { display: flex; gap: 7px; }
.mnc-tm-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  cursor: pointer;
  transition: background-color .3s ease, transform .3s ease;
}
.mnc-tm-dot[aria-current="true"] { background: var(--mnc-amber); transform: scale(1.35); }
.mnc-tm-pause {
  display: inline-flex;
  align-items: center;
  background: none;
  border: 1px solid var(--mnc-line);
  border-radius: var(--mnc-pill);
  color: var(--mnc-text-55);
  font: 600 11.5px/1 var(--mnc-font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 7px 13px;
  cursor: pointer;
}
.mnc-tm-pause:hover { color: var(--mnc-text); border-color: rgba(255, 255, 255, .24); }

/* --------------------------------------------------------------- 13. About */
/* Full-bleed band so the About chapter separates from the navy either side.
   One step up in value plus a soft amber wash — the hero's move, quieter. */
.mnc-section--about {
  background:
    radial-gradient(760px 360px at 88% 0%, rgba(245, 165, 36, .10), transparent 66%),
    var(--mnc-card);
  border-top: 1px solid var(--mnc-line);
  border-bottom: 1px solid var(--mnc-line);
  padding-top: 76px;
  padding-bottom: 80px;
  margin-bottom: 72px;
}

.mnc-about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 48px;
  align-items: start;
}
.mnc-about h2 {
  margin: 0 0 8px;
  /* Column one only, so the media cell can span the heading row as well and
     the photo runs the full height of the block rather than starting level
     with the first paragraph. */
  grid-column: 1;
  grid-row: 1;
  font-family: var(--mnc-font-display);
  font-weight: 500;
  font-size: var(--mnc-fs-h2);
  line-height: 1.05;
  letter-spacing: -.035em;
}
.mnc-about-copy {
  grid-column: 1;
  grid-row: 2;
  font-size: 16px;
  line-height: 1.65;
  color: var(--mnc-text-72);
}
.mnc-about-copy p { margin: 0 0 14px; }
.mnc-about-copy p:last-child { margin: 0; }
.mnc-about-copy a { font-weight: 700; color: var(--mnc-amber); }

.mnc-plate {
  align-self: stretch;
  min-height: 260px;
  border-radius: var(--mnc-r-lg);
  border: 1px solid var(--mnc-line);
  background: repeating-linear-gradient(135deg, var(--mnc-stripe-a) 0 10px, var(--mnc-stripe-b) 10px 20px);
  display: grid;
  place-items: center;
  font: 12px/1.4 var(--mnc-font-mono);
  color: var(--mnc-text-55);
  text-align: center;
  padding: 20px;
  overflow: hidden;
}
.mnc-plate img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  display: block;
  border-radius: var(--mnc-r-lg);
}

/* The media cell holds nothing in flow when there is a real image, so the row
   height is set purely by the copy column. The plate is then absolutely
   positioned to that height and takes its width from the image's own aspect
   ratio, which keeps the photo uncropped while the section stops stretching to
   fit it. */
.mnc-about-media { position: relative; grid-column: 2; grid-row: 1 / span 2; align-self: stretch; min-height: 0; }
.mnc-plate--filled {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: auto;
  width: auto;
  max-width: 100%;
  aspect-ratio: var(--mnc-plate-ar, 1);
  min-height: 0;
  padding: 12px;
}
/* contain, not cover: aspect-ratio sizes the border box, so the padded inner
   area is a slightly different ratio and cover would shave the edges off. The
   letterboxing lands on the striped mat, where it reads as the frame. */
.mnc-plate--filled img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  display: block;
  border-radius: 0;
}
/* Ground behind the image, chosen on the homepage (About > Image background).
   A solid ground gets more air than the striped mat so a logo's edges and
   descenders never touch the frame. */
.mnc-plate--bg-white,
.mnc-plate--bg-cream,
.mnc-plate--bg-navy { padding: 28px; }
.mnc-plate--bg-white { background: #fff; border-color: rgba(255, 255, 255, .55); }
.mnc-plate--bg-cream { background: var(--mnc-cream); border-color: rgba(255, 255, 255, .35); }
.mnc-plate--bg-navy { background: var(--mnc-navy); }

/* ------------------------------------------------------------ 14. Insights */
.mnc-insights-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 14px;
}
.mnc-insight-hero {
  position: relative;
  border-radius: var(--mnc-r-lg);
  overflow: hidden;
  min-height: 340px;
  display: flex;
  align-items: end;
  background: repeating-linear-gradient(135deg, var(--mnc-stripe-a) 0 10px, var(--mnc-stripe-b) 10px 20px);
  background-size: cover;
  background-position: center;
  transition: transform .25s;
}
.mnc-insight-hero:hover { transform: translateY(-3px); }
.mnc-insight-hero .cap {
  padding: 28px;
  background: linear-gradient(transparent, rgba(20, 28, 56, .97));
  width: 100%;
}
.mnc-insight-hero h3 {
  margin: 0;
  font-family: var(--mnc-font-display);
  font-weight: 500;
  font-size: var(--mnc-fs-h4);
  line-height: 1.2;
  letter-spacing: -.02em;
}
.mnc-insight-hero a.mnc-stretch { position: static; }
.mnc-insight-hero h3 a { text-decoration: none; }
.mnc-insight-hero h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.mnc-tag {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mnc-amber);
}
.mnc-insight {
  background: var(--mnc-card);
  border: 1px solid var(--mnc-line);
  border-radius: var(--mnc-r-lg);
  padding: 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color .25s;
}
.mnc-insight:hover { border-color: var(--mnc-amber-60); }
.mnc-insight .mnc-tag { margin: 0 0 12px; }
.mnc-insight h3 {
  margin: 0 0 20px;
  font-size: var(--mnc-fs-h5);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.mnc-insight h3 a { text-decoration: none; }
.mnc-read {
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  color: var(--mnc-text-75);
}
.mnc-read:hover { color: var(--mnc-amber); }

/* ----------------------------------------------------------- 15. CTA panel */
.mnc-cta {
  margin: 0 var(--mnc-gutter) 56px;
  padding: 56px;
  border-radius: var(--mnc-r-xl);
  background:
    radial-gradient(600px 300px at 20% 100%, rgba(245, 165, 36, .25), transparent 70%),
    var(--mnc-card);
  border: 1px solid var(--mnc-line-10);
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 48px;
  align-items: center;
}
.mnc-cta h2 {
  margin: 0 0 12px;
  font-family: var(--mnc-font-display);
  font-weight: 500;
  font-size: var(--mnc-fs-h2);
  line-height: 1.05;
  letter-spacing: -.04em;
}
.mnc-cta p { margin: 0; font-size: 15.5px; color: var(--mnc-text-65); }
.mnc-cta-actions { display: flex; flex-direction: column; gap: 10px; }

/* --------------------------------------------------------------- 16. Footer */
.mnc-footer {
  padding: 64px var(--mnc-gutter) 0;
  border-top: 1px solid var(--mnc-line);
  background: var(--mnc-ink);
  font-size: 14px;
  color: var(--mnc-text-65);
}
.mnc-footer a { color: inherit; text-decoration: none; }
.mnc-footer a:hover { color: var(--mnc-text); text-decoration: underline; text-underline-offset: 3px; }

.mnc-footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: 56px;
  padding-bottom: 52px;
}
.mnc-footer-brand .mnc-brand { color: var(--mnc-text); }
.mnc-footer-role { margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: var(--mnc-text-55); }

.mnc-footer-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.mnc-footer-h {
  margin: 0 0 18px;
  font: 600 10.5px/1 var(--mnc-font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mnc-text-50);
}
.mnc-footer-col ul { list-style: none; margin: 0; padding: 0; }
.mnc-footer-col li { margin: 0 0 11px; line-height: 1.35; }
.mnc-footer-col a { color: var(--mnc-text-75); }
.mnc-footer-col a[aria-current="page"] { color: var(--mnc-text); }
.mnc-footer-col li.mnc-footer-more { margin-top: 16px; font-size: 13px; }
.mnc-footer-col .mnc-footer-more a { color: var(--mnc-amber); }

.mnc-footer-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 22px 0 26px;
  border-top: 1px solid var(--mnc-line);
  font-size: 13px;
  color: var(--mnc-text-50);
}
.mnc-footer-bar nav { display: flex; gap: 24px; flex-wrap: wrap; }

/* -------------------------------------------- 16b. Password-protected page */
.mnc-locked {
  padding: 96px var(--mnc-gutter) 120px;
  display: flex;
  justify-content: center;
}
.mnc-locked-card {
  width: 100%;
  max-width: 560px;
  padding: 40px 40px 36px;
  background: var(--mnc-card);
  border: 1px solid var(--mnc-line);
  border-radius: var(--mnc-r-xl);
}
.mnc-locked h1 {
  margin: 0 0 12px;
  font-family: var(--mnc-font-display);
  font-size: var(--mnc-fs-h4);
  line-height: 1.15;
  letter-spacing: -.02em;
}
.mnc-locked-lead { margin: 0 0 28px; color: var(--mnc-text-72); font-size: 16px; }
.mnc-pass-form label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 700; }
.mnc-pass-row { display: flex; gap: 10px; }
.mnc-pass-form input[type="password"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 13px 14px;
  background: var(--mnc-navy);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--mnc-r-sm);
  color: var(--mnc-text);
  font: inherit;
  font-size: 15px;
}
.mnc-pass-form input[type="password"]:focus { outline: 2px solid var(--mnc-amber); outline-offset: 1px; }
.mnc-pass-form input[aria-invalid="true"] { border-color: #f08a7a; }
.mnc-pass-form .mnc-btn { flex: none; }
.mnc-pass-error { margin: 12px 0 0; font-size: 14px; color: #f6a596; }

/* ----------------------------------------------------------- 17. Responsive */
@media (max-width: 1180px) {
  :root { --mnc-pad: 40px; }
  .mnc-footer-top { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .mnc-bhero { gap: 22px; }
  .mnc-bfeature-body { padding: 22px 26px 24px; }
  .mnc-brec-head { padding: 18px 24px 14px; }
  .mnc-brec-row { padding: 10px 24px; gap: 14px; }
  .mnc-brec-row .t { font-size: 16px; }
  .mnc-hero-grid { grid-template-columns: 1fr 340px; gap: 36px; }
  .mnc-radar { right: calc(var(--mnc-gutter) - 16px); width: 400px; height: 400px; }
  .mnc-featured-body { padding: 40px; }

  .mnc-cmap { grid-template-columns: 208px minmax(0, 1fr); gap: 26px; }
}

@media (max-width: 960px) {
  :root { --mnc-pad: 28px; }

  .mnc-nav-toggle { display: inline-block; }
  .mnc-header { flex-wrap: wrap; }
  .mnc-nav {
    order: 3;
    width: 100%;
    flex-direction: column;
    gap: 4px;
    display: none;
    padding-top: 12px;
    border-top: 1px solid var(--mnc-line);
  }
  .mnc-nav a { padding: 10px 0; font-size: 16px; }
  .mnc-header.is-open .mnc-nav { display: flex; }

  .mnc-hero { padding-top: 32px; }
  .mnc-page-hero { padding: 40px var(--mnc-gutter) 36px; margin-bottom: 44px; }
  .mnc-page-hero--blog { padding: 10px var(--mnc-gutter) 10px; margin-bottom: 18px; gap: 2px 20px; }
  .mnc-page-title { max-width: none; }
  .mnc-rings { display: none; }
  .mnc-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .mnc-hero-lead { font-size: 17px; max-width: none; }
  .mnc-portrait { max-width: 360px; }
  .mnc-portrait figcaption { left: 0; }
  .mnc-radar { right: calc(var(--mnc-gutter) - 108px); top: 10px; width: 320px; height: 320px; opacity: .6; }
  .mnc-proof { gap: 28px 36px; }

  .mnc-services-grid { grid-template-columns: repeat(2, 1fr); }
  /* One column: the rail turns into a wrapping row of pillars above the panel,
     which is also the shape a fourth or fifth pillar needs. No wire — there is
     no longer a horizontal run for it to cross. */
  .mnc-cmap { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .mnc-cmap-wire { display: none; }

  /* The rail becomes a two-column grid rather than a wrapping flex row. Flex
     left a full-width orphan under three narrow pillars at tablet widths, which
     read as a mistake; two columns divides evenly for four or six pillars, and
     an odd count stretches its last tile across both so the block still ends
     square. */
  .mnc-cmap-rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mnc-cmap-rail[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
  .mnc-cmap-rail[data-n="3"] .mnc-cmap-hub:last-child,
  .mnc-cmap-rail[data-n="5"] .mnc-cmap-hub:last-child,
  .mnc-cmap-rail[data-n="7"] .mnc-cmap-hub:last-child { grid-column: span 2; }
  .mnc-cmap-hub { width: auto; }
  .mnc-cmap-panel { padding: 26px 24px; }
  .mnc-cmap-grid[data-cols] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mnc-cmap-cell[data-span] { grid-column: auto; }
  /* Stacked: avatar strip, then the quote directly under it. The quote box
     takes the height of the active quote rather than the longest one, so a
     short quote does not sit in the middle of empty space. */
  .mnc-tm { grid-template-columns: minmax(0, 1fr); gap: 18px; min-height: 0; align-items: start; }
  .mnc-tm::before { display: none; }
  .mnc-tm-arc { display: none; }
  .mnc-tm-quotes { display: block; min-height: 0; }
  .mnc-tm-quote { justify-content: flex-start; }
  .mnc-tm-quote[aria-hidden="true"] { display: none; }
  .mnc-tm-quote[aria-hidden="false"] { animation: mnc-tm-in .4s ease both; }
  .mnc-tm-mark { font-size: 56px; margin-bottom: 4px; }
  .mnc-tm-foot { margin-top: 24px; }
  /* No arc below this width, so the people fall back to a plain scrollable
     strip and the arc placement is switched off entirely. */
  /* min-width:0 is load-bearing: a grid/flex item defaults to min-width:auto,
     so the strip sized itself to its content (493px at a 393px viewport) and
     pushed the whole document sideways instead of scrolling inside itself. */
  /* Avatars only in the strip, small enough that five fit a phone. The
     active person's name sits on its own line under the strip (absolute to
     the rail, which reserves the room), so it no longer pushes the other
     avatars off-screen. */
  .mnc-tm-rail { width: auto; height: auto; min-width: 0; max-width: 100%; padding-bottom: 60px; }
  .mnc-tm-people {
    position: static;
    display: flex;
    flex-direction: row;
    gap: 6px;
    overflow-x: auto;
    height: auto;
    min-width: 0;
    max-width: 100%;
    padding: 10px 4px;
    scrollbar-width: none;
  }
  .mnc-tm-people::-webkit-scrollbar { display: none; }
  .mnc-tm-people > li { position: static; width: auto; max-width: none; flex: none; }
  .mnc-tm-person { position: static; padding: 3px; transform: none; opacity: calc(1 - var(--d, 0) * .3); }
  .mnc-tm-avatar { width: 52px; height: 52px; }
  .mnc-tm-avatar .disc { font-size: 17px; }
  .mnc-tm-person .mnc-tm-who { display: none; }
  .mnc-tm-person[aria-selected="true"] .mnc-tm-who {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 82px;
  }
  .mnc-tm-person[aria-selected="true"] .mnc-tm-role { white-space: normal; }
  .mnc-tm-quote blockquote { max-width: none; }
  .mnc-insights-grid { grid-template-columns: 1fr 1fr; }
  .mnc-insight-hero { grid-column: 1 / -1; min-height: 280px; }

  .mnc-featured { grid-template-columns: 1fr; }
  .mnc-visual { min-height: 240px; }
  .mnc-visual--filled { min-height: 200px; padding: 18px; }
  .mnc-featured-body { padding: 32px 28px; }

  /* Stack the hero. The panel's rows no longer need to fill a card's height,
     so they fall back to their natural height. */
  .mnc-bhero { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-bottom: 56px; }
  .mnc-bhero--single .mnc-bfeature,
  .mnc-bhero--single .mnc-brec { max-width: none; }
  .mnc-bfeature-media { aspect-ratio: 16 / 9; }
  .mnc-bfeature-body { padding: 24px 26px 26px; }
  .mnc-bfeature-ex { -webkit-line-clamp: 3; }
  .mnc-brec-item { flex: 0 0 auto; }
  .mnc-brec-row { padding: 14px 24px; }
  .mnc-bgrid { grid-template-columns: repeat(2, 1fr); gap: 28px 22px; }

  .mnc-about { grid-template-columns: 1fr; }
  .mnc-about h2,
  .mnc-about-copy,
  .mnc-about-media { grid-column: 1; grid-row: auto; }
  /* Stacked, there is no copy column to match, so the plate returns to flow. */
  .mnc-about-media { position: static; }
  .mnc-plate--filled {
    position: static;
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
  }

  .mnc-section--services { padding-top: 56px; }
  /* Only the two-column heads collapse to the left. Scoped with :not() because
     the unqualified rule also hit --center: align-items:flex-start shrank the
     h2 to its text width and packed it left, so a centred heading read as
     left-aligned while the lead paragraph under it stayed centred. */
  .mnc-section-head:not(.mnc-section-head--center) {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .mnc-section-head h2 { max-width: none; }
  .mnc-section-head--center { gap: 14px; }
  .mnc-section-head--center h2 { max-width: none; }

  .mnc-cta {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 36px 28px;
  }

}

@media (max-width: 600px) {
  .mnc-locked { padding: 56px var(--mnc-gutter) 72px; }
  .mnc-locked-card { padding: 28px 22px 26px; }
  .mnc-pass-row { flex-direction: column; }
  .mnc-footer { padding-top: 48px; }
  .mnc-footer-top { padding-bottom: 40px; }
  .mnc-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .mnc-footer-bar { flex-direction: column; align-items: flex-start; gap: 12px; }
  .mnc-bgrid { grid-template-columns: 1fr; gap: 30px; }
  .mnc-bfeature-body { padding: 22px 20px 24px; }
  .mnc-bfeature-foot { gap: 14px; }
  .mnc-brec-head { padding: 20px 20px 16px; }
  .mnc-brec-row { padding: 14px 20px; gap: 12px; grid-template-columns: 26px minmax(0, 1fr) 16px; }
  .mnc-brec-row .t { font-size: 16px; }
  .mnc-bfilter { gap: 8px; margin-bottom: 26px; }
  .mnc-bfilter-pill { padding: 8px 13px; font-size: 13px; }

  :root { --mnc-pad: 20px; }
  .mnc-hero h1 { letter-spacing: -.03em; }
  .mnc-eyebrow { font-size: 11.5px; }
  .mnc-btn-row { gap: 10px; }
  .mnc-btn--primary, .mnc-btn--ghost { padding: 14px 20px; font-size: 14px; }
  .mnc-portrait { max-width: none; }
  .mnc-portrait figcaption { position: static; margin-top: 14px; }
  .mnc-radar { display: none; }
  .mnc-proof { gap: 20px 28px; }
  .mnc-proof dd { font-size: 19px; }

  .mnc-services-grid { grid-template-columns: 1fr; }
  /* One pillar per row at phone width: two columns leaves the title and the
     service count fighting over about 130px. */
  .mnc-cmap-rail,
  .mnc-cmap-rail[data-n] { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .mnc-cmap-rail[data-n] .mnc-cmap-hub:last-child { grid-column: auto; }
  .mnc-cmap-hub { padding: 13px 15px; }
  .mnc-cmap-panel { padding: 22px 20px; }
  .mnc-cmap-grid[data-cols] { grid-template-columns: minmax(0, 1fr); }
  .mnc-services-foot { justify-content: flex-start; }
  .mnc-insights-grid { grid-template-columns: 1fr; }
  .mnc-metrics { gap: 24px; }
  .mnc-metrics dd { font-size: 30px; }
  .mnc-cta-actions .mnc-btn { width: 100%; }
}

/* ==========================================================================
   17. Forms: the contact page shell and the contact form modal
   --------------------------------------------------------------------------
   Every "contact" CTA points at #contact and opens the Contact Form 7 form in
   a Popup Maker modal, which is appended to <body> outside any template
   wrapper. The field rules therefore key on either the page's .mnc-formshell
   or the modal's .pum-content, and live here rather than in templates.css
   (which the homepage does not load). The modal box itself overrides Popup
   Maker's generated theme (.pum-theme-N .pum-container, specificity 0,2,0)
   with one extra class, so the plugin's theme settings can stay at their
   defaults.
   ========================================================================== */
.mnc-formshell {
  position: relative;
  background: var(--mnc-card);
  border: 1px solid var(--mnc-line);
  border-radius: var(--mnc-r-xl);
  padding: 32px;
}
:is(.mnc-formshell, .pum-content) > h2 {
  margin: 0 0 16px;
  font-family: var(--mnc-font-display);
  font-weight: 500;
  font-size: var(--mnc-fs-h4);
  line-height: 1.1;
  letter-spacing: -.03em;
}

/* Styles for the form inside the shell — written so a Contact Form 7 form
   dropped in here inherits the design without any CF7-specific markup. */
:is(.mnc-formshell, .pum-content) label,
:is(.mnc-formshell, .pum-content) legend { font-size: 13px; font-weight: 700; display: block; }
:is(.mnc-formshell, .pum-content) .req { color: var(--mnc-amber); }
:is(.mnc-formshell, .pum-content) input[type="text"],
:is(.mnc-formshell, .pum-content) input[type="email"],
:is(.mnc-formshell, .pum-content) input[type="url"],
:is(.mnc-formshell, .pum-content) input[type="tel"],
:is(.mnc-formshell, .pum-content) select,
:is(.mnc-formshell, .pum-content) textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  background: var(--mnc-navy);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--mnc-r-sm);
  color: var(--mnc-text);
  font: inherit;
  font-size: 16px; /* 16px, not 15: iOS zooms the page on focus below that. */
  font-weight: 500;
  box-sizing: border-box;
}
:is(.mnc-formshell, .pum-content) textarea { resize: vertical; min-height: 120px; }
:is(.mnc-formshell, .pum-content) input:focus,
:is(.mnc-formshell, .pum-content) select:focus,
:is(.mnc-formshell, .pum-content) textarea:focus {
  outline: 2px solid var(--mnc-amber);
  outline-offset: 1px;
}
:is(.mnc-formshell, .pum-content) fieldset { margin: 0; padding: 0; border: 0; }
:is(.mnc-formshell, .pum-content) fieldset legend { margin-bottom: 8px; }
:is(.mnc-formshell, .pum-content) .mnc-chipset { display: flex; flex-wrap: wrap; gap: 8px; }
:is(.mnc-formshell, .pum-content) .mnc-chipset label {
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: var(--mnc-pill);
  background: var(--mnc-navy);
  border: 1px solid rgba(255, 255, 255, .14);
  display: inline-flex;
  gap: 8px;
  align-items: center;
  cursor: pointer;
}
:is(.mnc-formshell, .pum-content) .mnc-chipset input { accent-color: var(--mnc-amber); margin: 0; }
:is(.mnc-formshell, .pum-content) .mnc-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
:is(.mnc-formshell, .pum-content) .mnc-field-grid > .full,
:is(.mnc-formshell, .pum-content) fieldset,
:is(.mnc-formshell, .pum-content) .mnc-form-foot { grid-column: 1 / -1; }
:is(.mnc-formshell, .pum-content) .mnc-form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 16px;
}
:is(.mnc-formshell, .pum-content) .mnc-form-foot p { margin: 0; font-size: 12.5px; color: var(--mnc-text-55); }
:is(.mnc-formshell, .pum-content) button[type="submit"],
:is(.mnc-formshell, .pum-content) input[type="submit"],
:is(.mnc-formshell, .pum-content) .wpcf7-submit {
  background: var(--mnc-amber);
  color: var(--mnc-ink);
  border: 0;
  padding: 15px 28px;
  border-radius: var(--mnc-pill);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  width: auto;
}
:is(.mnc-formshell, .pum-content) button[type="submit"]:hover,
:is(.mnc-formshell, .pum-content) .wpcf7-submit:hover { background: #ffb63a; }
/* ---- Contact Form 7 ----
   CF7 emits its own markup and none of the theme's classes: wpautop wraps
   every field in a <p>, controls sit inside .wpcf7-form-control-wrap, and
   radio/checkbox items arrive as .wpcf7-list-item > label > input +
   .wpcf7-list-item-label. The rules above reach the inputs (they are typed
   selectors) but not the layout, which is why a shortcode used to render as
   one tall single column. These rules re-apply the design to CF7's shape, so
   the shortcode output matches the placeholder markup in
   template-contact.php. Keep the two in step. */
:is(.mnc-formshell, .pum-content) .wpcf7 { margin: 0; }
:is(.mnc-formshell, .pum-content) .wpcf7-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* wpautop's paragraphs are the grid items. Full width by default. */
:is(.mnc-formshell, .pum-content) .wpcf7-form > p,
:is(.mnc-formshell, .pum-content) .wpcf7-form > .wpcf7-response-output { margin: 0; grid-column: 1 / -1; }
/* A paragraph holding one single-line input takes half a row, so name/email
   sit side by side as they do in the design. Keyed on the control class, not
   the field name, so renaming a field cannot break the layout; add
   class:mnc-full in the CF7 template to force one full-width. Without :has()
   support every field simply stays full width. */
:is(.mnc-formshell, .pum-content) .wpcf7-form > p:has(input.wpcf7-text) { grid-column: span 1; }
:is(.mnc-formshell, .pum-content) .wpcf7-form > p:has(.mnc-full) { grid-column: 1 / -1; }
/* wpautop leaves a <br> between a label's text and its control; the control
   is already display:block with its own margin. */
:is(.mnc-formshell, .pum-content) .wpcf7-form label br { display: none; }
:is(.mnc-formshell, .pum-content) .wpcf7-form-control-wrap { display: block; }
:is(.mnc-formshell, .pum-content) .wpcf7-textarea { height: 132px; }

/* Radio and checkbox groups become the design's chipset. */
/* CF7 ships its own stylesheet carrying .wpcf7 .wpcf7-list-item,
   .wpcf7 .wpcf7-spinner and .wpcf7 form .wpcf7-response-output. The theme's
   sheet loads after the plugin's, so equal specificity would win on source
   order alone -- these selectors carry the extra .wpcf7 so the outcome does
   not depend on enqueue order. */
:is(.mnc-formshell, .pum-content) .wpcf7 .wpcf7-radio,
:is(.mnc-formshell, .pum-content) .wpcf7 .wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: 8px; }
:is(.mnc-formshell, .pum-content) .wpcf7 .wpcf7-list-item { display: inline-flex; margin: 0; }
:is(.mnc-formshell, .pum-content) .wpcf7 .wpcf7-list-item-label::before,
:is(.mnc-formshell, .pum-content) .wpcf7 .wpcf7-list-item-label::after { content: none; }
:is(.mnc-formshell, .pum-content) .wpcf7 .wpcf7-list-item label {
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: var(--mnc-pill);
  background: var(--mnc-navy);
  border: 1px solid rgba(255, 255, 255, .14);
  display: inline-flex;
  gap: 8px;
  align-items: center;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
:is(.mnc-formshell, .pum-content) .wpcf7 .wpcf7-list-item input { accent-color: var(--mnc-amber); margin: 0; flex: none; }
:is(.mnc-formshell, .pum-content) .wpcf7 .wpcf7-list-item-label { font-weight: 600; }
:is(.mnc-formshell, .pum-content) .wpcf7 .wpcf7-list-item label:has(:checked),
:is(.mnc-formshell, .pum-content) .mnc-chipset label:has(:checked) {
  border-color: var(--mnc-amber-50);
  background: var(--mnc-card-raised);
}

/* CF7 puts the submit button in its own paragraph, so the note the template
   prints after the form lands underneath it rather than beside it. */
:is(.mnc-formshell, .pum-content) .wpcf7-form > p:has(.wpcf7-submit) { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
:is(.mnc-formshell, .pum-content) .wpcf7 .wpcf7-spinner { margin: 0; }
:is(.mnc-formshell, .pum-content) .wpcf7-not-valid-tip { color: #ff9b9b; font-size: 13px; font-weight: 600; margin-top: 6px; }
:is(.mnc-formshell, .pum-content) .wpcf7 form .wpcf7-response-output {
  border-radius: var(--mnc-r-sm);
  border-width: 1px;
  font-size: 14px;
  padding: 12px 14px;
  margin: 0;
}


/* The modal box, in place of Popup Maker's default theme. */
body.mnc .pum-overlay { background: rgba(10, 16, 36, .72); backdrop-filter: blur(4px); }
body.mnc .pum-overlay .pum-container.popmake {
  /* Popup Maker sizes the box as a percentage of the viewport
     (.pum-responsive-medium is 60% wide, centred with left:50% and a -30%
     margin) and its script writes max-width:100% and left inline. The form
     wants the Contact page's column width whatever the size setting says,
     so the width is fixed here and the box is centred with a transform,
     which neither the percentage margin nor the inline left can disturb. */
  width: min(760px, 94vw);
  margin-left: 0;
  left: 50% !important;
  transform: translateX(-50%);
  background: var(--mnc-card);
  color: var(--mnc-text);
  border: 1px solid var(--mnc-line);
  border-radius: var(--mnc-r-xl);
  padding: 32px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
  font-family: var(--mnc-font-body);
  font-size: 16px;
  line-height: 1.5;
}
body.mnc .pum-overlay .pum-container.popmake .pum-content { color: inherit; }
body.mnc .pum-overlay .pum-container.popmake .pum-content > :first-child { margin-top: 0; }
body.mnc .pum-overlay .pum-container.popmake .pum-content > h2,
body.mnc .pum-overlay .pum-container.popmake .pum-content > h3,
body.mnc .pum-overlay .pum-container.popmake .pum-title {
  margin: 0 0 16px;
  padding-right: 48px;
  font-family: var(--mnc-font-display);
  font-weight: 500;
  font-size: var(--mnc-fs-h4);
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--mnc-text);
}
body.mnc .pum-overlay .pum-container.popmake .pum-content > p { color: var(--mnc-text-75); }
body.mnc .pum-overlay .pum-container.popmake .pum-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--mnc-line);
  border-radius: 50%;
  background: var(--mnc-navy);
  color: var(--mnc-text);
  font: 700 0/0 var(--mnc-font-body);
  cursor: pointer;
  box-shadow: none;
  text-shadow: none;
}
body.mnc .pum-overlay .pum-container.popmake .pum-close::before {
  content: "\00d7";
  font-size: 22px;
  line-height: 38px;
}
body.mnc .pum-overlay .pum-container.popmake .pum-close:hover { border-color: var(--mnc-amber-50); }

@media (max-width: 600px) {
  .mnc-formshell,
  body.mnc .pum-overlay .pum-container.popmake { padding: 24px 20px; }
  :is(.mnc-formshell, .pum-content) .mnc-field-grid,
  :is(.mnc-formshell, .pum-content) .wpcf7-form { grid-template-columns: 1fr; }
  :is(.mnc-formshell, .pum-content) .wpcf7-form > p:has(input.wpcf7-text) { grid-column: 1 / -1; }
}