/*!
 * Maiyo & Mbugua sections.
 * Colour is inherited: the --mm-* properties are overwritten at runtime
 * by MM_Tokens from the Astra Customizer, so the theme stays the source
 * of truth for colour. Typography is Cabin site-wide (see the font
 * override at the foot of this file); Cabin is enqueued by mm.php.
 * Generated by build/make_mm.py. Do not hand-edit.
 */
/* ---------------------------------------------------------------- tokens */
.mm{
  --navy:#04027B;
  --navy-deep:#02013D;
  --navy-soft:#EDEDF7;
  --red:#DB0504;
  --red-deep:#B00403;
  --ink:#14141F;
  --muted:#5A5A6E;
  --paper:#FFFFFF;
  --wash:#F5F5FA;
  --line:rgba(4,2,123,.14);
  --line-l:rgba(255,255,255,.22);
  --wrap:1200px;

  /* Cabin is the site face now — one humanist sans for headings AND body.
     It is loaded explicitly by the plugin (mm.php enqueues it from Google
     Fonts), NOT by the theme, so unlike the old 'Inter' body token it never
     silently falls back to system-ui. Weights: 400/500/600/700.
     (Artifacts override --f-display via .mm[data-face=...] with their embedded
     faces, so they're unaffected.) */
  --f-display:'Cabin',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --f-body:'Cabin',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;

  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16.5px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
.mm *,.mm *::before,.mm *::after{box-sizing:border-box;}
/* The whole reset sits in :where(), at zero specificity.
   Written as `.mm p, .mm h1, …` it is (0,1,1) and outranks every component
   class at (0,1,0) — so `.mm-eyebrow{margin-bottom:14px}` did nothing on any
   section (the eyebrow is a <p>), and neither did .mm-cc__h's or .mm-box__c's
   margins. The spacing audit found the eyebrow sitting at exactly 0.0px from
   its own heading in seven places. A reset must never outrank a component:
   this is the third distinct bug in this stylesheet from the same cause. */
.mm :where(p,h1,h2,h3,h4,ul,ol,dl,dd,figure,blockquote){margin:0;padding:0;}
.mm :where(ul){list-style:none;}
/* :where() so this carries ZERO specificity. As `.mm a` it was (0,1,1) and beat
   every (0,1,0) button rule, so .mm-btn--solid's white text lost to the parent's
   colour: navy-on-navy on any light ground. It only looked right on the navy
   bands, where the inherited colour happened to be white. Same trap that has
   bitten the Griffin stylesheet four times — a reset must never outrank a
   component. */
/* (0,1,0), not :where()'s (0,0,0). A reset has to sit ABOVE the theme's bare
   element rules and BELOW our own components — Astra sets `a{color:#04027B}`
   at (0,0,1), which a zero-specificity reset loses to. (0,1,0) beats every
   bare-element rule and still ties our components, which are later in this
   file and therefore win. */
.mm :where(a){color:inherit;text-decoration:none;}
/* height:auto is not optional. Every <img> carries width/height attributes for
   the plugin's sake, and a presentational height attribute pins the used
   height — so `aspect-ratio` is ignored and the picture is stretched to its
   full natural height in a half-width column. That is the "images look long
   and the text stops looking aligned" fault exactly: a 1640x924 photo rendered
   515x924.
   :where() again, so .mm-cover's height:100% is not outranked. `.mm img` would
   be (0,1,1) and would beat every component class — the same trap as the link
   reset above, in a different costume. */
:where(.mm) img{max-width:100%;height:auto;display:block;}
.mm-wrap{width:min(var(--wrap),calc(100% - 48px));margin-inline:auto;}
.mm-s{position:relative;}
.mm-pad{padding-block:clamp(56px,7vw,104px);}
.mm-wash{background:var(--wash);}
.mm-navy{background:var(--navy);color:#fff;}
.mm-red{background:var(--red);color:#fff;}
.mm-centre{text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px;}

/* ------------------------------------------------------------------ type */
/* Every heading states its own colour. Inheriting is not enough on a real
   theme: Astra writes heading-base-color as a direct `h1,h2,…{color:#04027B}`
   rule, and a direct rule always beats an inherited value no matter how
   specific the ancestor is. The hero H1 shipped navy-on-navy because .mm-h1
   was relying on .mm-hero{color:#fff} to reach it. */
.mm-h1{
  font-family:var(--f-display);font-weight:700;line-height:1.06;
  font-size:clamp(34px,4.4vw,58px);letter-spacing:-.015em;text-wrap:balance;
  color:var(--navy);
}
.mm-hero .mm-h1,.mm-navy .mm-h1,.mm-cta .mm-h1{color:#fff;}
.mm-h1--c{max-width:16ch;margin-inline:auto;}
.mm-h2{
  font-family:var(--f-display);font-weight:700;line-height:1.15;
  font-size:clamp(26px,2.7vw,38px);letter-spacing:-.01em;color:var(--navy);
  text-wrap:balance;
}
.mm-h2--xl{font-size:clamp(30px,3.4vw,46px);}
.mm-navy .mm-h2,.mm-red .mm-h2,.mm-cta .mm-h2{color:#fff;}
.mm-h3{
  font-family:var(--f-body);font-weight:600;font-size:18.5px;line-height:1.35;
  color:var(--navy);letter-spacing:-.005em;
}
/* No ch cap. A capped measure inside a grid column leaves blank space on the
   right, which is the first thing a client flags. The grid sets the measure. */
.mm-lead{color:var(--muted);}
.mm-lead--big{font-size:18.5px;}
.mm-navy p,.mm-red p{color:rgba(255,255,255,.86);}

/* the column from the logo, as a rule. the page's one motif. */
.mm-flute{display:inline-flex;gap:2px;align-items:center;}
.mm-flute i{display:block;width:2px;height:13px;background:var(--red);}
.mm-flute i:nth-child(2){height:17px;}
.mm-eyebrow{
  display:flex;align-items:center;gap:10px;
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--navy);margin-bottom:14px;
}
.mm-eyebrow--l{color:rgba(255,255,255,.82);}
.mm-eyebrow--l .mm-flute i{background:#fff;}
.mm-head{margin-bottom:clamp(30px,3.4vw,46px);max-width:60ch;}
.mm-head--l .mm-h2{color:#fff;}

/* --------------------------------------------------------------- buttons */
.mm-btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-body);font-size:14.5px;font-weight:600;
  padding:13px 26px;border-radius:999px;border:1.5px solid transparent;
  transition:background .16s ease,color .16s ease,border-color .16s ease,
             transform .18s ease,box-shadow .18s ease;
  cursor:pointer;
}
/* Gentle lift on hover — a small premium touch (off under reduced motion). */
.mm-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(2,1,45,.16);}
@media (prefers-reduced-motion:reduce){.mm-btn:hover{transform:none;box-shadow:none;}}
.mm-btn--sm{padding:10px 20px;font-size:13.5px;}
.mm-btn--solid{background:var(--navy);color:#fff;}
/* Colour stated on :hover too. Without it the text falls back to the (0,1,0)
   rest rule, which loses to Astra's a:hover (0,1,1) — so the label turned red
   on the red hover fill. Every other variant already states its hover colour;
   --solid was the one that didn't. */
.mm-btn--solid:hover{background:var(--red);color:#fff;}
/* The primary button on a navy ground. --solid there is navy-on-navy: it
   disappeared completely in hero B, where the panel is flat #04027B. */
.mm-btn--light{background:#fff;color:var(--navy);}
.mm-btn--light:hover{background:var(--red);color:#fff;}
.mm-btn--red{background:var(--red);color:#fff;}
.mm-btn--red:hover{background:#fff;color:var(--navy);}
.mm-btn--onred{background:#fff;color:var(--red);}
.mm-btn--onred:hover{background:var(--navy);color:#fff;}
.mm-btn--ghost-l{border-color:rgba(255,255,255,.5);color:#fff;}
.mm-btn--ghost-l:hover{background:#fff;color:var(--navy);border-color:#fff;}
/* Secondary button on a light ground — outlined, fills navy on hover. */
.mm-btn--outline{background:transparent;color:var(--navy);border-color:var(--line);}
.mm-btn--outline:hover{background:var(--navy);color:#fff;border-color:var(--navy);}
.mm-ctas{display:flex;flex-wrap:wrap;gap:12px;}
.mm-ctas--c{justify-content:center;}
.mm-i{width:19px;height:19px;flex:none;}
.mm-i--s{width:15px;height:15px;}
.mm-i--btn{width:16px;height:16px;}
/* Every interactive element is a real <a>/<button>, so a keyboard user tabs
   through all of them — but the custom pill/card styling leaves only the UA
   default ring, which several browsers suppress on a border-radius'd control.
   One explicit :focus-visible ring in the brand red, shown on keyboard focus
   only (never on click). touch-action kills the 300ms double-tap delay and the
   grey tap-flash on the phone, where the CTAs actually get tapped. */
.mm-btn,.mm-nav a,.mm-card,.mm-pc,.mm-listrow,.mm-ft li>a{
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.mm a:focus-visible,.mm button:focus-visible{
  outline:2px solid var(--red);outline-offset:3px;border-radius:3px;}
.mm-navy a:focus-visible,.mm-red a:focus-visible,.mm-cta a:focus-visible,
.mm-hero a:focus-visible{outline-color:#fff;}

/* ---------------------------------------------------------------- header */
.mm-util{background:var(--navy-deep);color:rgba(255,255,255,.8);font-size:13px;}
.mm-util__in{display:flex;gap:26px;align-items:center;
  padding-block:9px;flex-wrap:wrap;}
.mm-util__in a,.mm-util__in span{display:inline-flex;align-items:center;gap:7px;}
.mm-util__in a:hover{color:#fff;}
.mm-hd{background:var(--paper);border-bottom:1px solid var(--line);}
.mm-hd__in{display:flex;align-items:center;gap:32px;padding-block:16px;}
.mm-logo img{height:44px;width:auto;}
.mm-nav{display:flex;gap:26px;font-size:15px;font-weight:500;margin-inline-start:auto;}
.mm-hd--a .mm-nav{margin-inline-end:8px;}
.mm-nav a{padding-block:6px;position:relative;color:var(--ink);}
.mm-nav a:hover{color:var(--navy);}
.mm-nav a.is-on{color:var(--navy);font-weight:600;}
.mm-nav a.is-on::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red);
}
.mm-hd--b .mm-hd__in{flex-direction:column;gap:14px;}
.mm-hd--b .mm-nav{margin-inline:auto;}
.mm-hd--b .mm-logo img{height:54px;}
.mm-hd__tel{display:inline-flex;align-items:center;gap:8px;font-weight:600;
  font-size:14.5px;color:var(--navy);}

/* ------------------------------------------------------------------ hero */
.mm-hero{color:#fff;}
.mm-hero__bg{position:absolute;inset:0;overflow:hidden;background:var(--navy-deep);}
/* Enough scrim to hold white text at AA on the left, little enough that the
   photograph is still a photograph on the right. The first pass ran
   .93/.78/.55 and rendered the image as a black rectangle. */
.mm-hero__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(2,1,61,.88) 0%,rgba(2,1,61,.62) 42%,rgba(4,2,123,.24) 100%);
}
/* Lighter than before (was .72/.82, which nearly hid the photo) so the library
   image reads clearly. The image is already dark, and the CTA text carries its
   own shadow (below), so white stays legible over the lighter wash. */
.mm-cta--a .mm-hero__bg::after{
  background:linear-gradient(180deg,rgba(2,1,61,.34) 0%,rgba(2,1,61,.5) 60%,rgba(2,1,61,.6) 100%);
}
.mm-cta--a .mm-cta__in .mm-h2,
.mm-cta--a .mm-cta__in .mm-hero__desc{text-shadow:0 2px 20px rgba(0,0,0,.55);}

/* "Work with Us Today" navy band, now with a dark background photo behind it.
   Reuses .mm-hero__bg (+ its dark-on-the-left scrim), which keeps the left-hand
   white text legible; the content and the feature photo are lifted above it. */
.mm-work--bg{overflow:hidden;}
.mm-work--bg>.mm-wrap{position:relative;z-index:1;}
/* "Why Choose Us" (About) over a dark bundled background: an even, moderate
   scrim (the photo is already dark) so the white heading and the white cards on
   top read cleanly. */
.mm-services--bg .mm-hero__bg::after{background:rgba(2,1,61,.46);}
.mm-services--bg .mm-eyebrow{color:#fff;}
.mm-services--bg .mm-eyebrow .mm-flute i{background:#fff;}
.mm-cover{width:100%;height:100%;object-fit:cover;}
/* Hero C — full-bleed autoplay video background with overlaid text. A MODERATE
   scrim (lighter than the photo-hero default): dark enough on the left to hold
   the white heading, light on the right so the film reads clearly. The text
   also carries a soft shadow so the scrim can stay this light. */
/* Height tracks the video's 16:9 shape (56.25vw) so object-fit:cover has almost
   nothing to crop on desktop; floored so the text always fits and capped to the
   viewport so it never runs taller than the screen. */
.mm-hero--cv{min-height:clamp(520px,56.25vw,88vh);display:flex;}
/* Centred content (the client asked for centre alignment). The .mm-hero--a rule
   sets align-items:flex-start, same specificity and later in the file, so this
   override qualifies with BOTH hero classes to win the cascade regardless of
   order. */
.mm-hero--a.mm-hero--cv .mm-hero__in{flex:1;justify-content:center;
  align-items:center;text-align:center;}
.mm-hero--cv .mm-h1,.mm-hero--cv .mm-hero__desc{margin-inline:auto;}
.mm-hero--cv .mm-ctas{justify-content:center;}
/* Balanced scrim for centred text (was left-heavy) — even and moderate so the
   film shows through but the white text holds; text-shadow below backs it up. */
.mm-hero--cv .mm-hero__bg::after{
  background:linear-gradient(180deg,rgba(2,1,61,.5) 0%,rgba(2,1,61,.38) 45%,rgba(2,1,61,.56) 100%);
}
.mm-hero--cv .mm-h1,
.mm-hero--cv .mm-hero__kick,
.mm-hero--cv .mm-hero__desc{text-shadow:0 2px 22px rgba(0,0,0,.45);}
/* Subtle "Play sound" toggle, bottom-right of the hero. */
.mm-hero__sound{position:absolute;z-index:3;
  right:clamp(16px,3vw,40px);bottom:clamp(16px,3vw,34px);
  display:inline-flex;align-items:center;gap:8px;padding:9px 15px;
  border-radius:999px;background:rgba(2,1,61,.42);
  border:1px solid rgba(255,255,255,.35);color:#fff;
  font:600 13px/1 var(--f-body);letter-spacing:.01em;cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .2s ease,border-color .2s ease,transform .2s ease;}
.mm-hero__sound:hover{background:rgba(2,1,61,.62);border-color:#fff;transform:translateY(-1px);}
.mm-hero__sound:focus-visible{outline:2px solid #fff;outline-offset:3px;}
.mm-hero__sound .mm-i{width:16px;height:16px;}
.mm-hero--a .mm-hero__in{position:relative;padding-block:clamp(76px,9vw,132px);
  display:flex;flex-direction:column;align-items:flex-start;gap:20px;}
.mm-hero__kick{font-size:12.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.75);}
.mm-hero--a .mm-h1{max-width:17ch;}
/* No margin-top: the parent is a flex column with a 20px gap and the two
   stacked into 36px, one join out of rhythm with every other on the page. */
.mm-facts{display:flex;flex-wrap:wrap;row-gap:12px;column-gap:30px;
  padding-top:22px;border-top:1px solid var(--line-l);width:100%;}
.mm-facts li{display:flex;align-items:center;gap:9px;font-size:14px;
  color:rgba(255,255,255,.84);}

.mm-hero--b .mm-hero__split{display:grid;grid-template-columns:1.05fr .95fr;
  min-height:clamp(400px,46vw,560px);background:var(--navy);}
.mm-hero__panel{display:flex;align-items:center;}
.mm-hero__panelin{margin-inline-start:auto;
  width:min(calc(var(--wrap)/2 - 24px),calc(100% - 48px));
  padding-inline-end:56px;padding-block:56px;
  display:flex;flex-direction:column;align-items:flex-start;gap:20px;}
.mm-hero__fig{position:relative;overflow:hidden;}
.mm-hero__fig img{position:absolute;inset:0;}

.mm-hero--c{background:var(--navy);}
/* Padding tightened top and bottom. It was clamp(64..104) before the images,
   which read as a big empty navy band above and below the copy. */
.mm-hero--c .mm-hero__in{padding-block:clamp(30px,3.6vw,50px) clamp(20px,2.4vw,30px);
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;}
/* The intro/SEO line under the title. Light on the navy ground — the hero uses
   .mm-hero--c, not the .mm-navy class, so `.mm-navy p` never reaches it — and
   capped to a readable measure, centred. */
/* No margin-inline:auto — an auto margin on a flex item CENTRES it even inside
   a flex-start hero, which pushed the tagline off to the right, out of line with
   the H1. Left-aligned heroes now align it left; centred heroes still centre it
   via their own align-items:center. */
.mm-hero__desc{color:rgba(255,255,255,.84);font-size:17px;line-height:1.6;
  max-width:60ch;}

/* ---- hero carousel (hero C) --------------------------------------------
   Full-bleed band of 9:16 portrait frames at a CAPPED height, scroll-snapped
   so it swipes natively. The row is wider than the viewport, so images run off
   both ends and are clipped by the edges. How many show at once follows from
   the capped height and the screen width. Dots are built by JS from the page
   count; gentle autoplay in JS, off under prefers-reduced-motion. */
/* Full-bleed: the frame row spans the full width of the (full-width template)
   section, edge to edge, with the images centred when they don't fill it. No
   fade. Horizontal page scroll is prevented at the site wrapper (the
   overflow-x:clip rule below), not by constraining the width here. */
.mm-hero__car{position:relative;padding-bottom:32px;--carh:clamp(300px,56vh,470px);}
/* justify-content:safe center — when the frames DON'T fill the width they sit
   centred (not left-aligned against an empty right half); when they DO overflow,
   `safe` falls back to start so the first frame stays reachable and it scrolls. */
.mm-hero__track{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
  justify-content:safe center;
  scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;}
.mm-hero__track::-webkit-scrollbar{display:none;}
.mm-hero__slide{flex:0 0 auto;scroll-snap-align:start;}
/* 7/8 = the native ratio of the supplied hero photos (840x960), so `cover`
   crops nothing. Was 9/16; changed on his call to use the images as-is. */
.mm-hero__slide img{height:var(--carh);width:auto;aspect-ratio:7/8;
  object-fit:cover;display:block;}
.mm-hero__dots{position:absolute;left:0;right:0;bottom:9px;z-index:2;
  display:flex;justify-content:center;gap:9px;min-height:9px;}
.mm-hero__dot{width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
  border:1.5px solid rgba(255,255,255,.9);background:transparent;
  transition:background .2s ease;}
.mm-hero__dot.is-on{background:#fff;}
/* Shorter frames on smaller screens — a 470px portrait band is too tall for a
   phone. This is also why the row starts behaving like a carousel there: the
   screen is narrower, fewer frames fit, so it overflows and the dots appear. */
@media (max-width:1024px){ .mm-hero__car{--carh:clamp(280px,48vh,400px);} }
@media (max-width:600px){ .mm-hero__car{--carh:clamp(210px,40vh,300px);} }

/* Start-of-page gap fix. Gutenberg/Astra leaves an EMPTY leading paragraph as
   the first child of .entry-content; its collapsed ~25px bottom margin pushes
   the whole homepage down below the Elementor header. Hiding it seats the hero
   flush under the header. Scoped to .home so no inner page's real first
   paragraph is affected. This is the same start-of-page gap seen on Griffin. */
.home .entry-content>p.wp-block-paragraph:first-child{display:none;}
/* wpautop drops a bare <br> between each [mm_*] shortcode; the transparent
   article lets the grey site background show through those gaps as bands
   between sections (the one just under the navy hero is the most visible).
   Remove them so the sections sit flush against each other. */
.home .entry-content>br{display:none;}
/* Removing a section shortcode (the retired testimonials) leaves a blank line
   that wpautop turns into a stray <p> carrying <br><br> BETWEEN two dark
   sections, showing as a white band. The homepage flow has NO real <br> and no
   bare paragraph outside the .mm section wrappers, so hide every <br> at any
   depth and flatten stray direct-child paragraphs. Scoped to .home. */
.home .entry-content br{display:none;}
.home .entry-content>p{margin:0;}
.home .entry-content>p:empty{display:none;}

/* Full-bleed sections can expose a sliver of horizontal overflow under the
   ast-full-width-layout template once a real vertical scrollbar is present.
   Clip it at the site wrapper. `clip` (not `hidden`) is NOT a scroll container,
   so position:sticky headers and normal vertical scrolling are unaffected. */
.hfeed.site{overflow-x:clip;}

/* ----------------------------------------------------------- split / row */
/* row-gap and column-gap stated separately on every grid that collapses. A
   single `gap` becomes a vertical gap the moment the layout stacks, and a
   60px column gap landing between a heading and its own paragraph reads as a
   broken section. */
.mm-split{display:grid;grid-template-columns:minmax(220px,.85fr) 1.15fr;
  column-gap:clamp(28px,4vw,64px);row-gap:26px;align-items:start;}
.mm-split__body{display:flex;flex-direction:column;align-items:flex-start;gap:22px;}
.mm-row{display:grid;grid-template-columns:.9fr 1.1fr;
  column-gap:clamp(28px,4vw,56px);row-gap:28px;align-items:start;}
.mm-row--rev{grid-template-columns:1.1fr .9fr;}
.mm-row--rev .mm-row__fig{order:2;}
.mm-row__body{display:flex;flex-direction:column;align-items:flex-start;gap:18px;}
/* 4:3, not 4:5. The library's photographs are all 16:9 originals — cropping
   them to an upright 4:5 both mangles the picture and makes the figure taller
   than the prose beside it, so the text floats against a long image and stops
   looking aligned to anything. align-items:start above tops them out together. */
.mm-tall{width:100%;aspect-ratio:4/3;object-fit:cover;}
/* Portrait frame (e.g. the founder photo on About) — close to the source ratio
   so it barely crops, anchored to the top so the face is never cut. */
.mm-portrait{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center top;}
.mm-row__fig{position:relative;}
.mm-row__fig::before{
  content:"";position:absolute;left:-14px;top:-14px;width:74px;height:74px;
  border-left:3px solid var(--red);border-top:3px solid var(--red);
}
/* Padding after every image, and between an image and whatever it sits beside. */
.mm-row__fig figure,.mm-row__fig img{margin-bottom:0;}
.mm-row__fig+.mm-row__body,.mm-row__body+.mm-row__fig{margin-block-start:0;}

/* ----------------------------------------------------------------- cards */
.mm-grid3{display:grid;grid-template-columns:repeat(3,1fr);column-gap:22px;row-gap:22px;}
.mm-grid2{display:grid;grid-template-columns:repeat(2,1fr);column-gap:22px;row-gap:22px;}
.mm-card{
  position:relative;display:flex;flex-direction:column;gap:12px;padding:32px 30px;
  background:var(--paper);border:1px solid var(--line);overflow:hidden;
  box-shadow:0 1px 2px rgba(4,2,60,.05);
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
/* A thin red rule seats along the card top and slides in on hover — a small
   brand accent so the cards read as designed, not as plain boxes. */
.mm-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform .25s ease;}
.mm-card p{color:var(--muted);font-size:15px;flex:1;}
.mm-card:hover{border-color:var(--navy);transform:translateY(-3px);
  box-shadow:0 14px 36px rgba(4,2,60,.12);}
.mm-card:hover::before{transform:scaleX(1);}
.mm-card__ico{
  width:46px;height:46px;display:grid;place-items:center;
  background:var(--navy);color:#fff;border-radius:50%;
}
.mm-card__sq{
  width:48px;height:48px;display:grid;place-items:center;
  background:var(--red);color:#fff;
}
.mm-card--flute{position:relative;padding-inline-start:34px;}
.mm-card--flute::before{
  content:"";position:absolute;left:0;top:30px;bottom:30px;width:3px;
  background:var(--navy);transition:background .18s ease;
}
.mm-card--flute:hover::before{background:var(--red);}
.mm-more{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;
  font-weight:600;color:var(--navy);}
.mm-card:hover .mm-more{color:var(--red);}

/* ---- service cards: photo + overlapping navy plaque (homepage "Our Services")
   The title rides a navy plaque that overlaps the photo; description sits on
   white below. Card overflow stays visible so the plaque's shadow shows, and
   only .mm-pc__media clips (so the photo can zoom on hover without the plaque
   being cut). Square corners, to match .mm-card. -------------------------- */
.mm-pc{position:relative;display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);box-shadow:0 1px 2px rgba(4,2,60,.05);
  transition:transform .22s ease,box-shadow .22s ease;}
.mm-pc__media{display:block;aspect-ratio:16/10;overflow:hidden;}
.mm-pc__media img{width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease;}
.mm-pc__plaque{position:relative;z-index:2;display:block;
  margin:-38px 20px 0 20px;padding:15px 20px;background:var(--navy);color:#fff;
  box-shadow:0 12px 28px rgba(2,1,45,.28);transition:background .22s ease;}
.mm-pc__plaque .mm-h3{color:#fff;line-height:1.22;}
.mm-pc__body{display:flex;flex-direction:column;gap:12px;padding:18px 24px 26px;flex:1;}
.mm-pc__body p{color:var(--muted);font-size:15px;line-height:1.55;flex:1;}
.mm-pc__body .mm-more{margin-top:auto;}
.mm-pc:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(4,2,60,.14);}
.mm-pc:hover .mm-pc__plaque{background:var(--red);}
.mm-pc:hover .mm-pc__media img{transform:scale(1.05);}
.mm-pc:hover .mm-more{color:var(--red);}
@media (prefers-reduced-motion:reduce){
  .mm-pc,.mm-pc__media img{transition:none;}
  .mm-pc:hover{transform:none;}
  .mm-pc:hover .mm-pc__media img{transform:none;}}

/* ---- placeholders & step numbers (practice-area pages) ------------------ */
/* Blank image placeholder for pages awaiting real art — a hatched box with a
   pill label. When these pages are drafted to the plugin it becomes a real
   image slot; an empty slot then renders nothing and the layout closes up. */
.mm-ph{display:grid;place-items:center;width:100%;height:100%;min-height:240px;
  background:repeating-linear-gradient(45deg,var(--wash),var(--wash) 11px,
    #E7E7F3 11px,#E7E7F3 22px);border:1px dashed var(--line);color:var(--muted);}
.mm-ph span{font-size:12.5px;font-weight:600;letter-spacing:.04em;
  background:var(--paper);padding:6px 13px;border-radius:999px;
  border:1px solid var(--line);}
.mm-hero__fig .mm-ph{min-height:100%;border:0;}
.mm-hero__bg .mm-ph{min-height:100%;border:0;background:var(--navy-deep);}
/* Step number badge — the "how we work" numerals, in place of an icon. */
.mm-num{width:46px;height:46px;flex:none;display:grid;place-items:center;
  border-radius:50%;background:var(--navy);color:#fff;
  font-family:var(--f-display);font-weight:700;font-size:19px;line-height:1;}
.mm-red .mm-num,.mm-navy .mm-num{background:#fff;color:var(--navy);}
/* Headings and step text must flip to white on the dark bands — a navy H3 on a
   navy ground is invisible, which hid the step titles in "How we work" C. */
.mm-navy .mm-h3,.mm-red .mm-h3{color:#fff;}
.mm-navy .mm-lead,.mm-red .mm-lead{color:rgba(255,255,255,.82);}
/* A single-column numbered step list (practice "How we work", variant b). */
.mm-steps{display:flex;flex-direction:column;max-width:820px;}
/* A connected 3-step process (practice "How we work", variant c). The numbers
   sit on a horizontal rule so the steps read as a sequence, not floating dots. */
.mm-process{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
  margin-top:8px;}
.mm-process__step{display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:13px;position:relative;}
.mm-process__step .mm-num{position:relative;z-index:1;}
.mm-process__step:not(:last-child)::after{content:"";position:absolute;
  top:23px;left:calc(50% + 32px);right:calc(-50% + 32px);height:2px;
  background:rgba(255,255,255,.28);z-index:0;}
.mm-process__step .mm-h3{margin-top:2px;}

/* ---- minimal-editorial template (standalone pages: About/Contact/Appointment)
   No image heroes — big type, generous whitespace, thin red rules. ---------- */
/* Image hero banner — a photo behind the title with a navy scrim (reuses the
   .mm-hero__bg scrim). Falls back to deep navy if no image is set. */
.mm-ed-hero{position:relative;overflow:hidden;background:var(--navy-deep);color:#fff;
  padding-block:clamp(66px,9vw,128px);}
.mm-ed-hero .mm-wrap{position:relative;z-index:1;}
.mm-ed-kick{display:inline-flex;align-items:center;gap:12px;font-size:12.5px;
  font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--navy);
  margin-bottom:22px;}
.mm-ed-h1{font-family:var(--f-display);font-weight:700;color:var(--navy);
  font-size:clamp(38px,6vw,74px);line-height:1.03;letter-spacing:-.02em;
  text-wrap:balance;max-width:15ch;}
.mm-ed-lead{margin-top:24px;max-width:56ch;color:var(--muted);
  font-size:clamp(17px,1.7vw,21px);line-height:1.62;}
.mm-ed-lead a{color:var(--navy);font-weight:600;}
.mm-ed-lead a:hover{color:var(--red);}
/* white text on the navy hero band */
.mm-ed-hero .mm-ed-kick{color:rgba(255,255,255,.82);}
.mm-ed-hero .mm-ed-kick .mm-flute i{background:#fff;}
.mm-ed-hero .mm-ed-h1{color:#fff;}
.mm-ed-hero .mm-ed-lead{color:rgba(255,255,255,.84);}
.mm-ed-rule{height:1px;background:var(--line);border:0;margin:0;}
.mm-ed-sec{padding-block:clamp(44px,6vw,84px);}
.mm-ed-sec--tight{padding-block:clamp(30px,4vw,52px);}
/* contact info row */
.mm-ed-info{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(28px,4vw,60px);}
.mm-ed-info__i{display:flex;flex-direction:column;gap:11px;}
.mm-ed-info__k{display:inline-flex;align-items:center;gap:9px;font-size:12px;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--red);}
.mm-ed-info__v{font-family:var(--f-display);font-size:clamp(19px,1.8vw,23px);
  line-height:1.38;color:var(--navy);}
.mm-ed-info__v a:hover{color:var(--red);}
/* external-embed frame — real Google Map / Calendly goes here live; a hatched
   placeholder stands in wherever the CSP blocks the outside script (the artifact). */
.mm-ed-embed{width:100%;border:1px dashed var(--line);color:var(--muted);
  display:grid;place-items:center;text-align:center;
  background:repeating-linear-gradient(45deg,var(--wash),var(--wash) 11px,
    #E7E7F3 11px,#E7E7F3 22px);}
.mm-ed-embed--map{aspect-ratio:16/6;}
/* real Google Map iframe container (live) */
.mm-ed-map{position:relative;width:100%;aspect-ratio:16/6;overflow:hidden;}
.mm-ed-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
@media (max-width:760px){ .mm-ed-map{aspect-ratio:4/3;} }
.mm-ed-embed--cal{min-height:640px;}
.mm-ed-embed span{background:var(--paper);padding:10px 18px;border-radius:999px;
  border:1px solid var(--line);font-size:13px;font-weight:600;max-width:82%;
  color:var(--ink);}
@media (max-width:760px){ .mm-ed-info{grid-template-columns:1fr;} }

/* ---- subtle scroll-reveal ------------------------------------------------
   Sections fade + rise as they enter the viewport. mm-reveal.js applies the
   class ONLY to sections below the fold (above-fold content is never hidden, so
   there's no flash) and does nothing under prefers-reduced-motion. */
.mm-reveal{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1);}
.mm-reveal.is-in{opacity:1;transform:none;}
/* Staggered children: cards/rows rise in sequence once their section reveals —
   a subtle, premium cascade. Pure CSS off the section's .is-in state (no JS
   change); only applies inside a revealing (below-fold) section, so above-fold
   content never hides. */
.mm-reveal .mm-grid3>*,.mm-reveal .mm-grid2>*,.mm-reveal .mm-list2>*{
  opacity:0;transform:translateY(16px);
  transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1);}
.mm-reveal.is-in .mm-grid3>*,.mm-reveal.is-in .mm-grid2>*,.mm-reveal.is-in .mm-list2>*{
  opacity:1;transform:none;}
.mm-reveal.is-in .mm-grid3>*:nth-child(2),.mm-reveal.is-in .mm-grid2>*:nth-child(2),
.mm-reveal.is-in .mm-list2>*:nth-child(2){transition-delay:.09s;}
.mm-reveal.is-in .mm-grid3>*:nth-child(3),.mm-reveal.is-in .mm-grid2>*:nth-child(3),
.mm-reveal.is-in .mm-list2>*:nth-child(3){transition-delay:.18s;}
.mm-reveal.is-in .mm-grid3>*:nth-child(4),.mm-reveal.is-in .mm-grid2>*:nth-child(4),
.mm-reveal.is-in .mm-list2>*:nth-child(4){transition-delay:.27s;}
.mm-reveal.is-in .mm-grid3>*:nth-child(5),.mm-reveal.is-in .mm-grid2>*:nth-child(5){transition-delay:.36s;}
.mm-reveal.is-in .mm-grid3>*:nth-child(6),.mm-reveal.is-in .mm-grid2>*:nth-child(6){transition-delay:.45s;}
@media (prefers-reduced-motion:reduce){
  .mm-reveal{opacity:1!important;transform:none!important;transition:none;}
  .mm-reveal .mm-grid3>*,.mm-reveal .mm-grid2>*,.mm-reveal .mm-list2>*{
    opacity:1!important;transform:none!important;transition:none;}
}

.mm-list2{display:grid;grid-template-columns:repeat(2,1fr);column-gap:44px;row-gap:0;}
.mm-listrow{display:grid;grid-template-columns:auto 1fr auto;
  column-gap:18px;row-gap:6px;
  align-items:start;padding-block:24px;border-top:1px solid var(--line);}
.mm-listrow:hover .mm-h3{color:var(--red);}
/* Solid ground, white glyph — never a bare brand-coloured glyph on white.
   Called out on Griffin as "keep icons green and white, not white and green";
   the same applies here in navy. */
.mm-listrow__ico{width:38px;height:38px;display:grid;place-items:center;
  background:var(--navy);color:#fff;flex:none;}
.mm-listrow__t{display:flex;flex-direction:column;gap:5px;}
.mm-listrow__t span{color:var(--muted);font-size:14.5px;}
.mm-listrow .mm-i--btn{margin-top:10px;color:var(--navy);}

/* ------------------------------------------------------------- prose/rail */
/* NO MAGAZINE COLUMNS. Prose split across two CSS columns makes the reader
   track to the bottom and back up, and it was called out on the Griffin job in
   exactly those words: "the text splitting into two columns brings confusion".
   One top-to-bottom column. Bullet lists may still run in columns — this rule
   is about prose. */
/* No bottom margin: every parent that holds .mm-prose is a flex column with
   its own gap, and margin+gap double up. Let the layout do the spacing. */
.mm-prose{display:flex;flex-direction:column;gap:16px;}
.mm-rail{display:grid;grid-template-columns:1.35fr .65fr;
  column-gap:clamp(28px,4vw,56px);row-gap:30px;align-items:start;}
.mm-rail__body{display:flex;flex-direction:column;align-items:flex-start;gap:16px;
  border-left:3px solid var(--navy);padding-left:clamp(20px,2.4vw,34px);}
.mm-rail__body p{color:var(--muted);}
.mm-cc{background:var(--navy);color:#fff;padding:30px 28px;}
.mm-cc__h{font-size:12px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:18px;}
.mm-cc dl{display:flex;flex-direction:column;gap:16px;}
.mm-cc dl>div{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;}
.mm-cc dt{color:var(--red);padding-top:3px;}
.mm-cc dd{margin:0;font-size:14.5px;color:rgba(255,255,255,.9);line-height:1.55;}

/* ------------------------------------------------------------ quotations */
.mm-q{
  padding:30px 28px;background:var(--paper);border:1px solid var(--line);
  position:relative;display:flex;flex-direction:column;gap:20px;
}
.mm-q::before{
  content:"";position:absolute;top:0;left:28px;width:26px;height:3px;background:var(--red);
}
/* Astra puts FIVE bare `blockquote` rules on the page — a 5px left border,
   20px padding, font-style:italic, font-size:1.2em and
   margin:1.5em 1em 1.5em 3em. Bare element selectors, so (0,1,1) here beats
   all of them outright with no tie to lose. This is the "the mock does not
   load the theme" trap: these testimonials measured perfectly in the artifact
   and shipped italic, indented and rule-bordered on the live page. */
.mm-q blockquote{
  margin:0;padding:0;border:0;font-style:normal;
  font-size:15.5px;line-height:1.7;color:var(--ink);
}
.mm-q--l blockquote{color:rgba(255,255,255,.9);}
.mm-q--big blockquote{border:0;font-style:normal;}
.mm-q--l{background:rgba(255,255,255,.06);border-color:var(--line-l);}
.mm-q--big{margin-bottom:22px;padding:clamp(30px,4vw,52px);background:var(--navy-soft);
  border-color:transparent;}
.mm-q--big blockquote{font-family:var(--f-display);font-weight:700;
  font-size:clamp(19px,2.1vw,27px);line-height:1.4;color:var(--navy);}

/* Testimonial byline: a rounded client photo beside the name + title. The
   blockquote takes the slack so bylines line up along the bottom of the row. */
.mm-q blockquote{flex:1;}
.mm-q__by{display:flex;align-items:center;gap:13px;}
.mm-q__ava{width:52px;height:52px;flex:none;border-radius:50%;object-fit:cover;
  border:2px solid var(--paper);box-shadow:0 0 0 1px var(--line);}
.mm-q__id{display:flex;flex-direction:column;line-height:1.25;}
.mm-q__name{font-weight:700;color:var(--navy);font-size:15px;}
.mm-q__role{color:var(--muted);font-size:13px;}
.mm-q--l .mm-q__name{color:#fff;}
.mm-q--l .mm-q__role{color:rgba(255,255,255,.72);}
.mm-q--l .mm-q__ava{border-color:transparent;box-shadow:0 0 0 1px var(--line-l);}

/* Testimonials carousel: shows all THREE across on desktop (like the old row),
   snapping ONE card at a time; drops to 2-up then 1-up on narrower screens where
   it becomes a real swipe carousel with dots (shared mm-carousel.js). Same
   3/2/1 breakpoints as .mm-grid3. On desktop the three fill the width exactly,
   so there is no overflow and the dots stay hidden. */
.mm-tcar{position:relative;}
.mm-car__track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;}
.mm-car__track::-webkit-scrollbar{display:none;}
.mm-tslide{flex:0 0 calc((100% - 44px)/3);scroll-snap-align:start;display:flex;}
.mm-tslide>.mm-q{width:100%;}
@media (max-width:1024px){ .mm-tslide{flex-basis:calc((100% - 22px)/2);} }
@media (max-width:760px){ .mm-tslide{flex-basis:100%;} }
.mm-car__dots{display:flex;justify-content:center;gap:9px;margin-top:24px;min-height:9px;}
/* the dots are .mm-hero__dot (white, for the dark hero); on the light band they
   need to read navy */
.mm-tcar .mm-hero__dot{border-color:rgba(4,2,123,.45);}
.mm-tcar .mm-hero__dot.is-on{background:var(--navy);border-color:var(--navy);}

/* Faint Nairobi skyline as a white-section background, anchored to the bottom.
   The image's own white top merges with the section, so it blends seamlessly;
   the size is capped so the buildings don't grow unbounded on wide screens, and
   extra bottom padding (this is the "extend" — content clears the skyline) gives
   the towers room below the content. url() is relative to this file (assets/css/).
   Comes after .mm-pad so its padding-bottom wins the tie. */
.mm-skyline{
  background:#fff url(../img/pattern/skyline-light.webp) center bottom / 100% auto no-repeat;
  padding-bottom:clamp(180px,30vw,560px);
}

/* ------------------------------------------------------------------- cta */
.mm-cta{color:#fff;}
/* Taller banner so the 16:9 background photo is actually visible (cover was
   cropping it hard at the old short height). Content is centred vertically. */
.mm-cta--a{min-height:clamp(460px,50vw,720px);display:flex;}
.mm-cta--a .mm-cta__in{position:relative;flex:1;justify-content:center;
  padding-block:clamp(56px,6vw,90px);}
.mm-box{background:var(--navy);color:#fff;padding:clamp(30px,3.6vw,48px);
  display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between;}
.mm-box__c{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;
  color:rgba(255,255,255,.86);font-size:15px;}
.mm-box__c svg{display:inline-block;vertical-align:-2px;margin-inline-end:4px;}

/* ---------------------------------------------------------------- footer */
.mm-ft{background:var(--navy-deep);color:rgba(255,255,255,.74);font-size:14.5px;}
.mm-ft--c{background:var(--paper);color:var(--muted);border-top:3px solid var(--navy);}
.mm-ft__in{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;
  gap:clamp(26px,3vw,48px);padding-block:clamp(44px,5vw,68px);}
.mm-ft__in2{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(30px,4vw,64px);
  padding-block:clamp(44px,5vw,68px);}
.mm-ft__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3vw,48px);}
.mm-ft__logo img{height:52px;width:auto;}
.mm-ft--a .mm-ft__logo img,.mm-ft--b .mm-ft__logo img{
  /* the supplied logo is navy-on-white; on a navy ground it needs the white cut */
  background:#fff;padding:8px 12px;
}
.mm-ft__brand{display:flex;flex-direction:column;gap:18px;}
.mm-ft__brand p{color:rgba(255,255,255,.62);font-size:14px;max-width:34ch;}
.mm-ft--c .mm-ft__brand p{color:var(--muted);}
.mm-ft h3{font-family:var(--f-body);font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:#fff;margin-bottom:16px;}
.mm-ft--c h3{color:var(--navy);}
.mm-ft ul{display:flex;flex-direction:column;gap:4px;}
/* 24px is the WCAG 2.2 minimum target. A 14.5px footer link on an 11px gap is
   about 22px of tappable height — under it, and these are the links a client
   actually uses on a phone. */
.mm-ft li>a{display:inline-flex;align-items:center;min-height:26px;}
.mm-ft a:hover{color:#fff;}
.mm-ft--c a:hover{color:var(--red);}
.mm-ft__c li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;}
.mm-ft__c svg{color:var(--red);margin-top:4px;}
.mm-ft__bar{border-top:1px solid var(--line-l);font-size:13px;}
.mm-ft--c .mm-ft__bar{border-top-color:var(--line);}
.mm-ft__barin{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  padding-block:18px;}

/* --------------------------------------------------------------- ours-tag */
.mm-new{border-bottom:1.5px dotted currentColor;cursor:help;}
.mm.mm--noflag .mm-new{border-bottom:0;}
/* Not on a headline. A dotted rule under a 58px display H1 reads as an
   underline, not as a footnote — it fights the one line on the page that has
   to land cleanly. Scoped to .mm-h1 (not the whole hero) so the flag still
   shows on the hero's intro line, which IS ours and wants marking. */
.mm-h1 .mm-new{border-bottom:0;cursor:default;}

/* ------------------------------------------------------------ responsive */
@media (max-width:1024px){
  .mm-grid3{grid-template-columns:repeat(2,1fr);}
  .mm-ft__in{grid-template-columns:1fr 1fr;}
  .mm-hero--b .mm-hero__split{grid-template-columns:1fr;}
  .mm-hero__fig{min-height:300px;}
  .mm-hero__panelin{margin-inline:auto;padding-inline-end:0;}
  .mm-list2{grid-template-columns:1fr;}
  .mm-rail{grid-template-columns:1fr;}
  .mm-split{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .mm{font-size:16px;}
  .mm-wrap{width:calc(100% - 36px);}
  .mm-grid3,.mm-grid2{grid-template-columns:1fr;}
  .mm-cols2{columns:1;}
  .mm-row,.mm-row--rev{grid-template-columns:1fr;}
  .mm-row--rev .mm-row__fig{order:0;}
  .mm-tall{aspect-ratio:16/10;}
  .mm-nav{display:none;}
  .mm-hd__in{justify-content:space-between;}
  .mm-util__in{gap:8px 18px;font-size:12px;}
  .mm-ft__in,.mm-ft__in2,.mm-ft__cols{grid-template-columns:1fr;}
  .mm-strip{grid-template-columns:1fr;}
  .mm-strip__i:nth-child(n+3){display:none;}
  .mm-box{flex-direction:column;align-items:flex-start;}
  .mm-facts{gap:10px 20px;}
}
@media (prefers-reduced-motion:reduce){
  .mm *{transition:none!important;animation:none!important;}
}

/* ------------------------------------------------ site-wide font: Cabin */
:root{--mm-site-font:'Cabin',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;}
html body,
body button, body input, body optgroup, body select, body textarea,
body h1, body h2, body h3, body h4, body h5, body h6,
.site-title, .site-description, .ast-site-title-wrap a,
.main-header-menu a, .ast-header-break-point .main-header-menu a,
.menu-link, .sub-menu a, .ast-mobile-menu-buttons,
#content, .entry-title, .entry-content, .widget, .site-footer,
/* heading LINKS: Astra styles these directly (e.g. blog card titles are
   <h2 class="entry-title"><a>…</a>), so the anchor needs the family itself —
   inheriting from the h2 loses to Astra's direct rule on the <a>. */
.entry-title a,
#content h1 a, #content h2 a, #content h3 a, #content h4 a, #content h5 a, #content h6 a,
.elementor-widget-container, .elementor-heading-title,
.elementor-button, .elementor-button-content-wrapper,
.elementor-widget-text-editor, .elementor-widget-heading,
.elementor-nav-menu a, .elementor-nav-menu--main a{
  font-family:var(--mm-site-font) !important;
}
/* Single-post content background is white. Astra's global colour 4 (#F5F5FA)
   was showing through the content area on single posts (most visible on mobile,
   where the separate-container white box collapses). Scoped to .single so
   archives and pages are untouched. */
.single .site-content,
.single #primary,
.single .ast-article-single,
.single .ast-article-inner,
.single .entry-content{ background-color:#fff !important; }
/* Blog/archive/single titles: Astra ships these at font-weight:500 (lighter than
   the rest of the site's 700 headings). Bring them to 700 so blog headings match
   everything else. */
.entry-title, .entry-title a,
.single .entry-content h2, .single .entry-content h3{ font-weight:700 !important; }