/* ==========================================================================
   Marbella Maid — blog
   File: /assets/css/../blog/blog.css  (served as /blog/blog.css)

   Loaded AFTER mm-global.css on every blog page. mm-global.css is heavily
   !important and sets heading/paragraph rules at `body`-level specificity, so
   the rules below that must beat it carry a `body` prefix plus !important.
   Do not "tidy" those prefixes away: they are load-bearing. See the note in
   DESIGN-SPEC section 7.1.
   ========================================================================== */


/* --- 1. Tokens ----------------------------------------------------------
   Declared on .mm-blog so they inherit to everything inside the wrapper and
   leak nowhere else. --------------------------------------------------- */
.mm-blog{
  --mm-blog-page:#F7F9F6;
  --mm-blog-sage:#D8DFD7;
  --mm-blog-ink:#000000;
  --mm-blog-body:#333333;
  --mm-blog-muted:#777777;
  --mm-blog-blue:#065780;
  --mm-blog-radius:4px;
  --mm-blog-gap:20px;
  --mm-blog-gap-m:16px;
  --mm-blog-track:1140px;
  --mm-blog-gutter:24px;
  --mm-blog-gutter-m:16px;
  --mm-blog-sec:52px;
  --mm-blog-sec-m:34px;
  --mm-blog-prose:680px;
  --mm-blog-wide:900px;
  --mm-blog-meta-size:13px;
  --mm-blog-card-title:26px;
  --mm-blog-card-title-m:22px;
}
@media (max-width:767px){
  .mm-blog{--mm-blog-gutter:16px;--mm-blog-gap:16px;}
}


/* --- 2. Page shell ------------------------------------------------------ */
.mm-blog{
  background:var(--mm-blog-page);
  color:var(--mm-blog-body);
  font-family:'Roboto',Arial,sans-serif;
  font-weight:300;
  /* Space for the fixed review ticker + booking bar. The live site reserves
     this with a script that measures the stack; that script is included on
     every blog page. This is the no-JS fallback, measured off the live pages
     (103px desktop, 93px at 375). */
}
.mm-blog *{box-sizing:border-box;}
.mm-blog .mm-wrap-blog{
  max-width:var(--mm-blog-track);
  margin:0 auto;
  padding:0 var(--mm-blog-gutter);
}
@media (max-width:767px){
  .mm-blog .mm-wrap-blog{padding:0 var(--mm-blog-gutter-m);}
}

/* Sticky header: the live site keeps the header pinned with an Elementor
   sticky clone. Blog pages do not load Elementor's JS, so the same effect is
   achieved with plain CSS sticky. mm-global already puts the header at
   z-index 9000, above page content. */
header.elementor-location-header{
  position:sticky !important;
  top:0;
}

/* Focus visibility. The site ships no focus styles at all; the blog adds one
   ring, 2px #065780 at 2px offset, which clears 3:1 on both white and sage. */
.mm-blog a:focus-visible,
.mm-blog button:focus-visible,
.mm-blog input:focus-visible{
  outline:2px solid var(--mm-blog-blue);
  outline-offset:2px;
}


/* --- 3. Hero band -------------------------------------------------------
   .mm-hero is a real global class: mm-global.css already gives it
   `padding:64px 0 !important` (40px under 768) and sets its h1 to Bebas 50px
   / 32px with 1.5px tracking. Those measured values are exactly what the live
   pages render, so the blog inherits them instead of restating them. Only the
   background and text treatment are added here. ------------------------- */
.mm-blog .mm-hero{
  background:var(--mm-blog-sage);
  text-align:center;
}
.mm-blog .mm-hero h1{
  font-size:var(--mm-h1) !important;
  margin:0 0 14px !important;
  color:var(--mm-blog-ink) !important;
}
/* The intro line. Scoped to its own class rather than `.mm-hero p`, because
   the archive hero carries the article count in a <p> too and that one must
   stay at 15px muted. `body ... !important` is required: mm-global sets
   `body .mm-hero p` at 16px !important. */
body .mm-blog .mm-hero .mm-blog-hero__intro{
  font-family:'Roboto',Arial,sans-serif !important;
  font-size:20px !important;
  font-weight:400 !important;
  line-height:1.65 !important;
  color:var(--mm-blog-ink) !important;
  max-width:760px;
  margin:0 auto !important;
  text-align:center !important;
}
@media (max-width:767px){
  .mm-blog .mm-hero h1{font-size:var(--mm-h1-m) !important;}
  body .mm-blog .mm-hero .mm-blog-hero__intro{font-size:17px !important;}
}

/* Shorter variant for category and tag archives. */
@media (min-width:768px){
  .mm-blog .mm-hero--archive{padding-top:44px !important;padding-bottom:40px !important;}
}
@media (max-width:767px){
  .mm-blog .mm-hero--archive{padding-top:32px !important;padding-bottom:28px !important;}
}
.mm-blog .mm-hero--archive h1{margin:0 0 8px !important;}

/* Count / status line. `body ... !important` because mm-global sets
   `section p` at 16px/300 !important and these sit inside sections. */
body .mm-blog .mm-blog-count,
body .mm-blog .mm-blog-status{
  font-family:'Roboto',Arial,sans-serif !important;
  font-size:15px !important;
  font-weight:400 !important;
  line-height:1.5 !important;
  letter-spacing:0 !important;
  color:var(--mm-blog-muted) !important;
  text-align:left !important;
  margin:0 !important;
}
body .mm-blog .mm-blog-hero .mm-blog-count{
  text-align:center !important;
}
body .mm-blog .mm-blog-status{margin:28px 0 0 !important;}


/* --- 4. Toolbar: search + category chips -------------------------------- */
.mm-blog-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:28px 0 0;
  flex-wrap:wrap;
}
.mm-blog-filters{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  min-width:0;
}
.mm-blog-search{
  position:relative;
  flex:0 0 320px;
}
.mm-blog-search svg{
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:18px;
  color:var(--mm-blog-muted);
  pointer-events:none;
}
.mm-blog-search input{
  width:100%;
  min-height:48px;
  padding:12px 44px 12px 44px;
  font-family:'Roboto',Arial,sans-serif;
  font-size:16px;
  line-height:1.4;
  color:var(--mm-blog-body);
  background:#ffffff;
  border:1px solid var(--mm-blog-sage);
  border-radius:var(--mm-blog-radius);
  -webkit-appearance:none;
  appearance:none;
}
.mm-blog-search input::placeholder{color:var(--mm-blog-muted);opacity:1;}
.mm-blog-search input:focus{
  outline:none;
  border-color:var(--mm-blog-blue);
  box-shadow:0 0 0 2px rgba(6,87,120,.25);
}
.mm-blog-search__clear{
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
  width:36px;
  height:36px;
  display:none;
  align-items:center;
  justify-content:center;
  padding:0;
  background:none;
  border:0;
  color:var(--mm-blog-muted);
  cursor:pointer;
}
.mm-blog-search__clear svg{position:static;width:16px;height:16px;transform:none;color:inherit;}
.mm-blog-search__clear:hover{color:var(--mm-blog-ink);}
.mm-blog-search.is-filled .mm-blog-search__clear{display:flex;}

@media (max-width:1023px){
  .mm-blog-search{flex:0 0 240px;}
}
@media (max-width:767px){
  .mm-blog-toolbar{flex-direction:column;align-items:stretch;gap:12px;flex-wrap:nowrap;}
  .mm-blog-search{flex:1 1 auto;order:-1;width:100%;min-width:0;max-width:100%;}
  .mm-blog-search input{width:100%;min-width:0;max-width:100%;}
  .mm-blog-filters{
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    padding-bottom:2px;
    margin:0 calc(-1 * var(--mm-blog-gutter-m));
    padding-left:var(--mm-blog-gutter-m);
    padding-right:var(--mm-blog-gutter-m);
    width:100%;
    min-width:0;
    max-width:100%;
  }
  .mm-blog-filters::-webkit-scrollbar{display:none;}
  .mm-blog-chip{flex:0 0 auto;}
}

/* Chips. Rounded rectangles at 4px, not pills: the site is built entirely on
   4px corners and 0px square buttons, so a 999px pill would be the only
   fully round element on it. */
.mm-blog-chip{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:10px 16px;
  font-family:'Roboto',Arial,sans-serif;
  font-size:14px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.5px;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--mm-blog-body);
  background:#ffffff;
  border:1px solid var(--mm-blog-sage);
  border-radius:var(--mm-blog-radius);
  cursor:pointer;
  white-space:nowrap;
  transition:border-color .2s, background .2s, color .2s;
}
.mm-blog-chip:hover{border-color:var(--mm-blog-ink);}
.mm-blog-chip.is-active,
.mm-blog-chip[aria-current="true"]{
  background:var(--mm-blog-ink);
  border-color:var(--mm-blog-ink);
  color:#ffffff;
}
.mm-blog-chip:focus-visible{outline:2px solid var(--mm-blog-blue);outline-offset:2px;}


/* --- 5. Featured post --------------------------------------------------- */
.mm-blog-featured{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  margin-top:32px;
  background:var(--mm-blog-sage);
  border-radius:var(--mm-blog-radius);
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  transition:box-shadow .25s, transform .25s;
}
.mm-blog-featured:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.08);}
.mm-blog-featured:focus-visible{outline:2px solid var(--mm-blog-blue);outline-offset:2px;}
.mm-blog-featured__media{display:block;flex:0 0 auto;aspect-ratio:16/9;min-height:0;overflow:hidden;background:#cfd6cd;}
.mm-blog-featured__media img{width:100%;height:100%;min-height:0;object-fit:cover;object-position:center;display:block;}
.mm-blog-featured__body{
  padding:40px 40px 36px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}
.mm-blog-featured__chip{
  align-self:flex-start;
  display:inline-block;
  margin:0 0 14px;
  padding:5px 10px;
  font-family:'Roboto',Arial,sans-serif;
  font-size:12px;
  font-weight:700;
  line-height:1.4;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:#ffffff;
  background:var(--mm-blog-ink);
  border-radius:var(--mm-blog-radius);
}
.mm-blog-featured__title{
  font-family:'Bebas Neue',Impact,sans-serif;
  font-size:40px;
  font-weight:500;
  letter-spacing:1.2px;
  text-transform:uppercase;
  line-height:1.08;
  color:var(--mm-blog-ink);
  margin:0 0 14px;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.mm-blog-featured__meta{
  font-size:var(--mm-blog-meta-size);
  line-height:1.5;
  color:var(--mm-blog-muted);
  margin:0 0 14px;
}
.mm-blog-featured__excerpt{
  font-size:17px;
  line-height:1.7;
  color:var(--mm-blog-body);
  margin:0 0 20px;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.mm-blog-featured__link{
  font-size:13px;
  font-weight:700;
  line-height:1.6;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--mm-blog-blue);
}
.mm-blog-featured:hover .mm-blog-featured__link{
  color:var(--mm-blog-ink);
  text-decoration:underline;
}
@media (max-width:1023px){
  /* The .mm-blog prefix is required: the later override layer sets
     `.mm-blog .mm-blog-featured{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}`
     at specificity (0,2,0), which beats a bare `.mm-blog-featured` (0,1,0) no matter
     the source order. Without it the featured card stayed two-column on mobile and
     the photo was squeezed to 190x118 inside a 361px card — the "tiny image and
     huge empty space" Greg saw. */
  .mm-blog-featured,
  .mm-blog .mm-blog-featured{grid-template-columns:1fr;}
  .mm-blog-featured__body{padding:24px 20px 24px;}
  .mm-blog-featured__title{font-size:26px;letter-spacing:1.5px;}
  .mm-blog-featured__excerpt{font-size:16px;-webkit-line-clamp:2;}
}



/* --- 7. Card grid ------------------------------------------------------ */
.mm-blog-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--mm-blog-gap);
  align-items:start;
  margin-top:32px;
}
@media (max-width:1023px){ .mm-blog-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:767px){ .mm-blog-grid{grid-template-columns:1fr;gap:var(--mm-blog-gap-m);} }

/* Cards.
   The card is an <article> with a stretched title link rather than one <a>
   wrapping everything: the tag pills are real links to the tag archives, and
   an <a> inside an <a> is invalid HTML that breaks keyboard order. The title
   link covers the whole card through its ::after, which is the standard
   accessible equivalent of a card link. */
.mm-blog-card{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  background:#ffffff;
  border:1px solid var(--mm-blog-sage);
  border-radius:var(--mm-blog-radius);
  overflow:hidden;
  transition:box-shadow .25s, border-color .25s, transform .25s;
}
.mm-blog-card:hover{
  border-color:var(--mm-blog-ink);
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.mm-blog-card:focus-within{
  outline:2px solid var(--mm-blog-blue);
  outline-offset:2px;
}
/* The media box is a flex item inside a column flex card. Its default
   min-height:auto resolves to the intrinsic height of the image, so a
   PORTRAIT photo (619x1100, 825x1100 in the library) grew the 4:3 box to
   620px and made that whole row 975px tall against 578px for its
   neighbours. flex:0 0 auto + min-height:0 + overflow:hidden pins the box
   to the aspect ratio and lets object-fit crop the tall photo instead. */
.mm-blog-card__media{display:block;flex:0 0 auto;aspect-ratio:4/3;min-height:0;overflow:hidden;background:var(--mm-blog-sage);}
.mm-blog-card__media img{width:100%;height:100%;min-height:0;object-fit:cover;object-position:center;display:block;}
/* Search overlay cards are injected from posts.json and carry no image; the
   placeholder keeps the 4:3 block so the grid geometry is identical. */
.mm-blog-card__ph{display:block;width:100%;height:100%;}
.mm-blog-card__body{
  padding:20px 22px 22px;
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
}
.mm-blog-card__cat{
  align-self:flex-start;
  display:inline-block;
  margin:0 0 10px;
  padding:4px 9px;
  font-family:'Roboto',Arial,sans-serif;
  font-size:12px;
  font-weight:700;
  line-height:1.4;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--mm-blog-ink);
  background:var(--mm-blog-sage);
  border-radius:var(--mm-blog-radius);
  text-decoration:none;
}
/* The title. `body h3` in mm-global.css sets Bebas 28px !important on every
   h3, and an !important beats a plain class whatever the specificity, so this
   rule carries both a body prefix and !important. */
body .mm-blog .mm-blog-card__title{
  font-family:'Bebas Neue',Impact,sans-serif !important;
  font-size:var(--mm-blog-card-title) !important;
  font-weight:500 !important;
  letter-spacing:.5px !important;
  text-transform:uppercase !important;
  line-height:1.15 !important;
  color:var(--mm-blog-ink) !important;
  margin:0 0 8px !important;
  text-align:left !important;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.mm-blog-card__title a{
  color:inherit;
  text-decoration:none;
}
.mm-blog-card__title a::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
}
.mm-blog-card__title a:focus-visible{outline:none;}
.mm-blog-card__meta{
  font-family:'Roboto',Arial,sans-serif;
  font-size:var(--mm-blog-meta-size);
  color:var(--mm-blog-muted);
  margin:0 0 12px;
  line-height:1.5;
}
.mm-blog-card__excerpt{
  font-family:'Roboto',Arial,sans-serif;
  font-size:16px;
  font-weight:300;
  line-height:1.7;
  color:var(--mm-blog-body);
  margin:0 0 14px;
  flex:1 1 auto;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.mm-blog-card__tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:auto;
  position:relative;
  z-index:2;
}
@media (max-width:767px){
  .mm-blog-card__body{padding:16px 16px 18px;}
  body .mm-blog .mm-blog-card__title{font-size:var(--mm-blog-card-title-m) !important;}
  .mm-blog-card__excerpt{-webkit-line-clamp:3;}
}


/* --- 8. Tag pill ------------------------------------------------------- */
.mm-blog-tag{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:5px 10px;
  font-family:'Roboto',Arial,sans-serif;
  font-size:13px;
  line-height:1;
  color:var(--mm-blog-blue);
  background:#ffffff;
  border:1px solid var(--mm-blog-sage);
  border-radius:var(--mm-blog-radius);
  text-decoration:none;
  transition:border-color .2s, color .2s;
}
.mm-blog-tag:hover{border-color:var(--mm-blog-blue);color:var(--mm-blog-ink);}
.mm-blog-tag:focus-visible{outline:2px solid var(--mm-blog-blue);outline-offset:2px;}
.mm-blog-article__tags .mm-blog-tag{min-height:36px;padding:8px 12px;}


/* --- 9. Pagination ----------------------------------------------------- */
.mm-blog-pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin:40px 0 0;
  flex-wrap:wrap;
}
.mm-blog-pagination a,
.mm-blog-pagination span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  padding:0 12px;
  border-radius:var(--mm-blog-radius);
  font-family:'Roboto',Arial,sans-serif;
  font-size:15px;
  font-weight:700;
  line-height:1;
  text-decoration:none;
  color:var(--mm-blog-body);
  background:#ffffff;
  border:1px solid var(--mm-blog-sage);
  transition:border-color .2s;
}
.mm-blog-pagination a:hover{border-color:var(--mm-blog-ink);}
.mm-blog-pagination [aria-current="page"]{
  background:var(--mm-blog-ink);
  border-color:var(--mm-blog-ink);
  color:#ffffff;
}
.mm-blog-pagination .is-disabled,
.mm-blog-pagination .mm-blog-pagination__gap{
  color:var(--mm-blog-sage);
  border-color:#efefec;
  cursor:not-allowed;
  pointer-events:none;
  background:#ffffff;
}
.mm-blog-pagination .mm-blog-pagination__gap{
  border-color:transparent;
  color:var(--mm-blog-muted);
}
.mm-blog-pagination a:focus-visible{outline:2px solid var(--mm-blog-blue);outline-offset:2px;}


/* --- 10. Closing CTA --------------------------------------------------
   Matches .mm-about .mm-cta exactly: sage band, 52px 0 (34px mobile). The
   heading sizing comes from mm-global's `.mm-cta h2` rule. -------------- */
.mm-blog .mm-cta{
  background:var(--mm-blog-sage);
  padding:52px 0;
  text-align:center;
}
.mm-blog .mm-cta h2{
  font-size:var(--mm-h2) !important;
  margin:0 0 12px !important;
  color:var(--mm-blog-ink) !important;
}
body .mm-blog .mm-cta p{
  font-family:'Roboto',Arial,sans-serif !important;
  font-size:17px !important;
  font-weight:400 !important;
  line-height:1.7 !important;
  color:var(--mm-blog-body) !important;
  margin:0 0 24px !important;
  text-align:center !important;
}
@media (max-width:767px){
  .mm-blog .mm-cta{padding:34px 0;}
  .mm-blog .mm-cta h2{font-size:var(--mm-h2-m) !important;}
}

/* Buttons. Measured off the live `.mm-about .mm-btn`: white fill, 2px black
   border, Bebas 22px, 14px 40px padding, square corners, black fill with
   white text on hover. That is what every CTA on the site already looks like,
   so the blog's buttons are the same object rather than a new one. */
.mm-blog-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:14px 40px;
  background:#ffffff;
  color:var(--mm-blog-ink);
  border:2px solid var(--mm-blog-ink);
  border-radius:0;
  font-family:'Bebas Neue',Impact,sans-serif;
  font-size:22px;
  font-weight:500;
  letter-spacing:1px;
  line-height:1.1;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:background .2s, color .2s;
}
.mm-blog-btn:hover{background:var(--mm-blog-ink);color:#ffffff;}
.mm-blog-btn:focus-visible{outline:2px solid var(--mm-blog-blue);outline-offset:2px;}
@media (max-width:767px){
  .mm-blog-btn{display:flex;width:100%;max-width:320px;margin:0 auto;}
}


/* --- 11. Breadcrumb strip ---------------------------------------------- */
/* main .mm-breadcrumb already exists in mm-global.css with the right type
   (13px, #777777, 20px bottom margin, blue links). This only provides the
   strip and the mobile truncation. */
.mm-blog-crumbs{
  padding:18px 0 26px;
  background:#ffffff;
}
/* The crumb must sit in the SAME column as the headline below it. It is a
   .mm-wrap-blog (1140px track) while the article head is a centred 680px
   prose column, so left as-is the breadcrumb hangs 230px to the left of the
   title and reads as belonging to another page. */
.mm-blog-crumbs > .mm-wrap-blog{
  max-width:var(--mm-blog-prose);
  margin:0 auto;
  padding:0 var(--mm-blog-gutter);
}
@media (max-width:767px){
  .mm-blog-crumbs > .mm-wrap-blog{padding:0 var(--mm-blog-gutter-m);}
}
.mm-blog .mm-breadcrumb{
  font-family:'Roboto',Arial,sans-serif;
  font-size:13px;
  line-height:1.5;
  color:var(--mm-blog-muted);
  margin:0;
  display:flex;
  flex-wrap:nowrap;
  align-items:baseline;
  gap:6px;
  min-width:0;
  overflow:hidden;
}
.mm-blog .mm-breadcrumb a{
  color:var(--mm-blog-blue);
  text-decoration:none;
  flex:0 0 auto;
}
.mm-blog .mm-breadcrumb a:hover{text-decoration:underline;}
.mm-blog .mm-breadcrumb .sep{color:var(--mm-blog-sage);flex:0 0 auto;}
.mm-blog .mm-breadcrumb [aria-current="page"]{
  color:var(--mm-blog-muted);
  flex:1 1 auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Article opening band */
.mm-blog-article-open{padding:0;}


/* --- 12. Article ------------------------------------------------------ */
.mm-blog-article__head{
  max-width:var(--mm-blog-prose);
  margin:0 auto;
  padding:0 var(--mm-blog-gutter);
}
.mm-blog-article__head h1{
  font-family:'Bebas Neue',Impact,sans-serif !important;
  font-size:50px !important;
  font-weight:500 !important;
  letter-spacing:1.5px !important;
  text-transform:uppercase !important;
  line-height:1.05 !important;
  color:var(--mm-blog-ink) !important;
  margin:0 0 16px !important;
  text-align:left !important;
}
.mm-blog-article__cat{
  display:inline-block;
  margin:0 0 14px;
  padding:4px 9px;
  font-family:'Roboto',Arial,sans-serif;
  font-size:12px;
  font-weight:700;
  line-height:1.4;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--mm-blog-ink);
  background:var(--mm-blog-sage);
  border-radius:var(--mm-blog-radius);
  text-decoration:none;
}
.mm-blog-article__lead{
  font-family:'Roboto',Arial,sans-serif !important;
  font-size:17px !important;
  font-weight:300 !important;
  line-height:1.7 !important;
  color:var(--mm-blog-body) !important;
  margin:0 0 20px !important;
  max-width:620px;
  text-align:left !important;
}
.mm-blog-article__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-family:'Roboto',Arial,sans-serif;
  font-size:var(--mm-blog-meta-size);
  line-height:1.5;
  color:var(--mm-blog-muted);
  margin:0 0 32px;
}
.mm-blog-article__meta .author{font-size:15px;font-weight:700;color:var(--mm-blog-ink);}
.mm-blog-article__meta .sep{color:var(--mm-blog-sage);}

.mm-blog-article__hero{
  max-width:var(--mm-blog-track);
  margin:0 auto 32px;
  padding:0 var(--mm-blog-gutter);
}
.mm-blog-article__hero img{
  width:100%;
  height:auto;
  display:block;
  border-radius:var(--mm-blog-radius);
  aspect-ratio:16/9;
  object-fit:cover;
}
@media (max-width:767px){
  .mm-blog-article__head{padding:0 var(--mm-blog-gutter-m);}
  .mm-blog-article__head h1{font-size:32px !important;}
  .mm-blog-article__lead{font-size:17px !important;}
  .mm-blog-article__hero{padding:0;margin-bottom:24px;}
  .mm-blog-article__hero img{border-radius:0;aspect-ratio:4/3;}
}

/* The reading column. 680px at 17px/1.7 lands near 70 characters per line;
   full-width body copy would run about 115 and lose the reader on every
   return. */
.mm-blog-article__prose{
  max-width:var(--mm-blog-prose);
  margin:0 auto;
  padding:0 var(--mm-blog-gutter);
}
.mm-blog-article__prose > *{max-width:100%;}
@media (max-width:767px){
  .mm-blog-article__prose{padding:0 var(--mm-blog-gutter-m);}
}

/* Body copy. Scoped hard with a body prefix and !important because
   mm-global.css sets `main p`, `.mm-content p`, `section p` and several
   others at !important. */
body .mm-blog-article__prose p,
body .mm-blog-article__prose li{
  font-family:'Roboto',Arial,sans-serif !important;
  font-size:16px !important;
  font-weight:300 !important;
  line-height:1.7 !important;
  letter-spacing:0 !important;
  color:var(--mm-blog-body) !important;
  margin:0 0 20px !important;
  text-align:left !important;
}
body .mm-blog-article__prose ul,
body .mm-blog-article__prose ol{
  margin:0 0 20px !important;
  padding-left:22px !important;
  text-align:left !important;
}
body .mm-blog-article__prose li{margin:0 0 8px !important;}
body .mm-blog-article__prose li:last-child{margin-bottom:0 !important;}
body .mm-blog-article__prose h2{
  font-family:'Bebas Neue',Impact,sans-serif !important;
  font-size:40px !important;
  font-weight:500 !important;
  letter-spacing:1.5px !important;
  text-transform:uppercase !important;
  line-height:1.08 !important;
  color:var(--mm-blog-ink) !important;
  margin:40px 0 14px !important;
  text-align:left !important;
}
body .mm-blog-article__prose h3{
  font-family:'Bebas Neue',Impact,sans-serif !important;
  font-size:28px !important;
  font-weight:500 !important;
  letter-spacing:1.2px !important;
  text-transform:uppercase !important;
  line-height:1.15 !important;
  color:var(--mm-blog-ink) !important;
  margin:32px 0 10px !important;
  text-align:left !important;
}
body .mm-blog-article__prose h4{
  font-family:'Bebas Neue',Impact,sans-serif !important;
  font-size:20px !important;
  font-weight:500 !important;
  letter-spacing:1px !important;
  text-transform:uppercase !important;
  line-height:1.2 !important;
  color:var(--mm-blog-ink) !important;
  margin:24px 0 8px !important;
  text-align:left !important;
}
body .mm-blog-article__prose h2:first-child,
body .mm-blog-article__prose h3:first-child{margin-top:0 !important;}
body .mm-blog-article__prose a{
  color:var(--mm-blog-blue) !important;
  text-decoration:underline;
  text-decoration-color:rgba(6,87,120,.35);
  text-underline-offset:2px;
}
body .mm-blog-article__prose a:hover{
  color:var(--mm-blog-ink) !important;
  text-decoration-color:currentColor;
}
body .mm-blog-article__prose strong{
  font-weight:700 !important;
  color:var(--mm-blog-ink) !important;
}
body .mm-blog-article__prose code{
  font-family:'Roboto',Arial,sans-serif !important;
  font-size:15px !important;
  background:var(--mm-blog-sage);
  padding:3px 6px;
  border-radius:var(--mm-blog-radius);
}
@media (max-width:767px){
  body .mm-blog-article__prose h2{font-size:26px !important;}
  body .mm-blog-article__prose h3{font-size:22px !important;}
  body .mm-blog-article__prose h4{font-size:18px !important;}
}

/* Pull quote */
.mm-blog-pullquote{
  background:var(--mm-blog-sage);
  border-left:3px solid var(--mm-blog-blue);
  border-radius:var(--mm-blog-radius);
  padding:24px 26px;
  margin:32px 0;
}
.mm-blog-pullquote p{
  font-family:'Bebas Neue',Impact,sans-serif !important;
  font-size:32px !important;
  font-weight:500 !important;
  letter-spacing:1px !important;
  text-transform:uppercase !important;
  line-height:1.15 !important;
  color:var(--mm-blog-ink) !important;
  margin:0 !important;
}
.mm-blog-pullquote cite{
  display:block;
  margin:10px 0 0;
  font-family:'Roboto',Arial,sans-serif;
  font-size:13px;
  font-style:normal;
  line-height:1.5;
  color:var(--mm-blog-muted);
}
@media (max-width:767px){
  .mm-blog-pullquote{padding:20px 18px;}
  .mm-blog-pullquote p{font-size:22px !important;}
}

/* Figures and captions */
.mm-blog-figure{margin:24px 0;}
.mm-blog-figure img{width:100%;height:auto;display:block;border-radius:var(--mm-blog-radius);}
.mm-blog-figure figcaption{
  font-family:'Roboto',Arial,sans-serif;
  font-size:13px;
  line-height:1.5;
  color:var(--mm-blog-muted);
  margin:8px 0 24px;
  text-align:left;
}
/* Wide figures break out of the prose column but never reach the 1140 track,
   and never bleed to the viewport edge inside an article. */
@media (min-width:1024px){
  .mm-blog-article__prose > figure.wide{
    width:var(--mm-blog-wide);
    max-width:var(--mm-blog-wide);
    margin-left:calc((var(--mm-blog-prose) - var(--mm-blog-wide)) / 2);
    margin-right:0;
  }
}

/* Tags under the article */
.mm-blog-article__tags{
  max-width:var(--mm-blog-prose);
  margin:32px auto 0;
  padding:0 var(--mm-blog-gutter);
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.mm-blog-article__tags-rule{
  max-width:var(--mm-blog-prose);
  margin:40px auto 0;
  padding:0 var(--mm-blog-gutter);
}
.mm-blog-article__tags-rule hr{
  border:0;
  border-top:1px solid var(--mm-blog-sage);
  margin:0;
}
@media (max-width:767px){
  .mm-blog-article__tags,
  .mm-blog-article__tags-rule{padding:0 var(--mm-blog-gutter-m);}
}


/* --- 13. Related posts ------------------------------------------------- */
.mm-blog-related{padding:var(--mm-blog-sec) 0;}
body .mm-blog .mm-blog-related h2{
  font-family:'Bebas Neue',Impact,sans-serif !important;
  font-size:var(--mm-h2) !important;
  font-weight:500 !important;
  letter-spacing:1.5px !important;
  text-transform:uppercase !important;
  line-height:1.08 !important;
  color:var(--mm-blog-ink) !important;
  text-align:center !important;
  margin:0 0 24px !important;
}
@media (max-width:767px){
  .mm-blog-related{padding:var(--mm-blog-sec-m) 0;}
  body .mm-blog .mm-blog-related h2{font-size:var(--mm-h2-m) !important;}
}


/* --- 14. Empty states ------------------------------------------------- */
.mm-blog-empty{
  max-width:560px;
  margin:8px auto 40px;
  padding:48px 24px;
  text-align:center;
  background:var(--mm-blog-sage);
  border-radius:var(--mm-blog-radius);
}
.mm-blog-empty__icon{
  width:32px;
  height:32px;
  color:var(--mm-blog-muted);
  margin:0 auto 16px;
  display:block;
}
.mm-blog-empty h2{
  font-family:'Bebas Neue',Impact,sans-serif !important;
  font-size:26px !important;
  font-weight:500 !important;
  letter-spacing:1px !important;
  text-transform:uppercase !important;
  line-height:1.15 !important;
  color:var(--mm-blog-ink) !important;
  margin:0 0 10px !important;
  text-align:center !important;
}
body .mm-blog-empty p{
  font-family:'Roboto',Arial,sans-serif !important;
  font-size:16px !important;
  font-weight:400 !important;
  line-height:1.6 !important;
  color:var(--mm-blog-body) !important;
  margin:0 0 20px !important;
  text-align:center !important;
}
.mm-blog-empty .mm-blog-btn{margin-top:4px;}
@media (max-width:767px){
  .mm-blog-empty{padding:36px 20px;}
}


/* --- 15. Reduced motion ------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .mm-blog-card,.mm-blog-featured,.mm-blog-chip,.mm-blog-tag{-webkit-transition:none;transition:none;}
  .mm-blog-card:hover,.mm-blog-featured:hover{transform:none;}
}


/* --- 15.5 Visual repair: image-led editorial hero + deliberate CTA -------- */
.mm-blog .mm-blog-hero{background:#D8DFD7;text-align:left;}
.mm-blog .mm-blog-hero__inner{
  max-width:1140px;margin:0 auto;padding:48px 24px 52px;
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:44px;align-items:center;
}
.mm-blog .mm-blog-hero__copy{min-width:0;max-width:490px;}
body .mm-blog .mm-blog-hero .mm-blog-hero__eyebrow{
  margin:0 0 14px!important;font-family:'Roboto',Arial,sans-serif!important;
  font-size:13px!important;font-weight:700!important;line-height:1.4!important;
  letter-spacing:1px!important;text-transform:uppercase!important;color:#065780!important;
  text-align:left!important;
}
body .mm-blog .mm-blog-hero h1{
  margin:0 0 18px!important;max-width:16ch;
  font-family:'Bebas Neue',Impact,sans-serif!important;
  font-size:50px!important;font-weight:500!important;
  line-height:1.1!important;letter-spacing:1px!important;text-transform:uppercase!important;
  color:#000000!important;text-align:left!important;
}
body .mm-blog .mm-blog-hero .mm-blog-hero__intro{
  max-width:42ch;margin:0!important;font-family:'Roboto',Arial,sans-serif!important;
  font-size:16px!important;font-weight:300!important;line-height:1.7!important;
  letter-spacing:0!important;color:#333333!important;text-align:left!important;
}
.mm-blog .mm-blog-hero__media{
  min-width:0;aspect-ratio:16/10;overflow:hidden;border-radius:4px;background:#cfd6cd;
}
.mm-blog .mm-blog-hero__media img{display:block;width:100%;height:100%;object-fit:cover;}
@media(min-width:1024px){
  .mm-blog .mm-blog-featured{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);}
}
.mm-blog .mm-blog-featured__media{aspect-ratio:16/10;}
.mm-blog .mm-blog-cta{background:#D8DFD7;padding:52px 0 52px;margin-top:52px;}
@media(max-width:767px){.mm-blog .mm-blog-cta{margin-top:34px;}}
.mm-blog .mm-blog-cta__inner{
  max-width:1140px;margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:36px;align-items:center;
}
body .mm-blog .mm-blog-cta__eyebrow{
  margin:0 0 8px!important;font-family:'Roboto',Arial,sans-serif!important;
  font-size:13px!important;font-weight:700!important;line-height:1.4!important;
  letter-spacing:1px!important;text-transform:uppercase!important;color:#065780!important;
  text-align:left!important;
}
body .mm-blog .mm-blog-cta h2{
  margin:0 0 10px!important;font-family:'Bebas Neue',Impact,sans-serif!important;
  font-size:40px!important;font-weight:500!important;
  line-height:1!important;letter-spacing:1px!important;text-transform:uppercase!important;
  color:#000000!important;text-align:left!important;
}
body .mm-blog .mm-blog-cta__copy>p:last-child{
  max-width:58ch;margin:0!important;font-family:'Roboto',Arial,sans-serif!important;
  font-size:17px!important;font-weight:400!important;line-height:1.6!important;
  color:#333333!important;text-align:left!important;
}
.mm-blog .mm-blog-cta__actions{display:flex;flex-direction:column;align-items:flex-start;gap:10px;}
.mm-blog .mm-blog-cta__actions .mm-blog-btn{min-width:220px;text-align:center;}
.mm-blog .mm-blog-cta__contact{
  font-family:'Roboto',Arial,sans-serif;font-size:15px;font-weight:700;
  color:#065780;text-decoration:underline;text-underline-offset:3px;
}
.mm-blog .mm-blog-cta__contact:hover{color:#000000;}
@media(max-width:1023px){
  .mm-blog .mm-blog-hero__inner{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:28px;padding-top:40px;padding-bottom:40px;}
  body .mm-blog .mm-blog-hero h1{font-size:50px!important;}
  .mm-blog .mm-blog-cta__inner{grid-template-columns:1fr auto;gap:24px;}
}
@media(max-width:767px){
  .mm-blog .mm-blog-hero__inner{grid-template-columns:1fr;gap:24px;padding:24px 16px 34px;}
  .mm-blog .mm-blog-hero__media{order:-1;aspect-ratio:16/10;}
  body .mm-blog .mm-blog-hero h1{max-width:14ch;font-size:32px!important;line-height:1.1!important;}
  body .mm-blog .mm-blog-hero .mm-blog-hero__intro{font-size:16px!important;font-weight:300!important;}
  .mm-blog .mm-blog-cta{padding:34px 0;}
  .mm-blog .mm-blog-cta__inner{grid-template-columns:1fr;gap:22px;padding:0 16px;}
  body .mm-blog .mm-blog-cta h2{font-size:32px!important;}
  .mm-blog .mm-blog-cta__actions{align-items:stretch;}
  .mm-blog .mm-blog-cta__actions .mm-blog-btn{width:100%;max-width:none;}
  .mm-blog .mm-blog-cta__contact{text-align:center;}
}

/* --- 16. Print -------------------------------------------------------- */
@media print{
  header.elementor-location-header,
  .mm-bottom-stack,
  .mm-wa-bubble,
  .mm-blog-toolbar,
  .mm-blog-pagination,
  .mm-blog-related,
  .mm-blog-cta{display:none !important;}
  .mm-blog{color:#000;}
}