/* ==========================================================================
   Marbella Maid — global bottom stack (reviews ticker + booking bar)
   SINGLE SOURCE OF TRUTH. Edit this file only; every page links it.

   Round 2 (2026-10-18):
   - Ticker + booking bar merged into ONE fixed container, two stacked
     sections. Previous build pinned the ticker at bottom:76px while the bar
     was ~68px tall, leaving an 8px window where page content flashed through.
     Flex column stacking removes the gap by construction, no magic offsets.
   - Ticker loop slowed 86s -> 112s (~30% longer).
   - WhatsApp bubble stays floating clear above the container.
   ========================================================================== */

:root{
  --mm-stack-bg:#000000;
  --mm-ticker-speed:112s;
}

/* --- The container: two sections, no gap possible ---------------------- */
.mm-bottom-stack{
  /* Viewport-anchored on every browser. `position:fixed` plus bottom:0 is
     correct; the drift came from a transform and from overflow-x:hidden on
     html/body (both fixed above). No transform, no filter, no contain, no
     will-change on this element or any ancestor. */
  position:fixed !important;
  left:0;
  right:0;
  bottom:0 !important;
  /* NOT bottom:0dvh. A dynamic-unit bottom re-resolves on every toolbar
     animation frame, which made the bar jump during a fast flick. Plain
     bottom:0 is already correct on iOS; the browser keeps a fixed element
     at the visible bottom by itself. */
  inset-inline:0;
  z-index:9998;
  display:flex;
  flex-direction:column;
  transform:none !important;
  filter:none !important;
  contain:none !important;
  will-change:auto !important;
  -webkit-backface-visibility:visible;
  backface-visibility:visible;
  /* opaque backstop so nothing can ever shine through between sections */
  background:var(--mm-stack-bg);
  border-top:0;
  /* Sit on the true bottom edge. On iOS the Chrome toolbar slides in and
     out; without the safe-area inset the bar floats ~100px up from the
     bottom whenever the toolbar is showing. env() is 0 where unsupported. */
  /* The safe-area inset keeps the controls clear of the home indicator. */
  padding-bottom:env(safe-area-inset-bottom, 0px);
  /* NO transform here. A transform (even translateZ(0)) on a position:fixed
     element makes iOS Safari treat it as anchored to the scrolling document
     instead of the viewport, which is exactly why the bar jumped up and down
     while scrolling and let the page show beneath it.
     NO -webkit-overflow-scrolling either; that also detaches fixed children. */
  will-change:auto;
}

/* --- Section 1: Google reviews ticker ---------------------------------- */
.mm-bottom-stack .mm-ticker{
  position:relative;
  left:auto;
  right:auto;
  bottom:auto;
  z-index:auto;
  order:1;
  overflow:hidden;
  background:#ffffff;
  border-top:1px solid #D8DFD7;
  padding:7px 0;
  line-height:1.3;
}
.mm-bottom-stack .mm-ticker__track{
  display:flex;
  gap:56px;
  width:max-content;
  white-space:nowrap;
  animation:mm-ticker var(--mm-ticker-speed) linear infinite;
}
.mm-bottom-stack .mm-ticker:hover .mm-ticker__track{animation-play-state:paused;}
@keyframes mm-ticker{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.mm-bottom-stack .mm-ticker__item{
  font-family:'Roboto',sans-serif;
  font-size:13px;
  color:#333333;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.mm-bottom-stack .mm-ticker__stars{color:#f5a623;letter-spacing:1px;font-size:14px;}
.mm-bottom-stack .mm-ticker__name{color:#000000;font-weight:700;}
.mm-bottom-stack .mm-ticker__quote{color:#333333;}
.mm-bottom-stack .mm-ticker__badge{font-weight:700;color:#000000;}

/* --- Section 2: booking bar ------------------------------------------- */
.mm-bottom-stack .seo-bottom-bar{
  position:relative;
  left:auto;
  right:auto;
  bottom:auto;
  z-index:auto;
  order:2;
  display:flex;
  align-items:stretch;
  background:#000000;
  border-top:2px solid #000000;
  font-family:'Roboto',sans-serif;
}
.mm-bottom-stack .seo-bottom-bar__book{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:100%;
  background:#000000;
  color:#ffffff !important;
  font-family:'Bebas Neue',Impact,sans-serif !important;
  font-size:28px !important;
  font-weight:500 !important;
  letter-spacing:2px !important;
  text-transform:uppercase !important;
  padding:20px !important;
  text-decoration:none;
  border:0;
  line-height:1;
  animation:seo-pulse 2s infinite;
}
.mm-bottom-stack .seo-bottom-bar__book:hover{background:#111111;color:#ffffff !important;}
.mm-bottom-stack .seo-bottom-bar__book .seo-book-icon{
  width:24px;
  height:24px;
  fill:#D8DFD7;
  flex:0 0 auto;
  animation:mm-nudge 6.5s ease-in-out infinite;
}
.mm-bottom-stack .seo-bottom-bar__book::after{
  content:"";
  position:absolute;
  top:0;
  left:-60%;
  width:45%;
  height:100%;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(216,223,215,.32) 50%,rgba(255,255,255,0) 100%);
  transform:skewX(-18deg);
  animation:mm-shine 6.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes seo-pulse{
  0%{box-shadow:0 0 0 0 rgba(6,87,128,.45);}
  70%{box-shadow:0 0 0 12px rgba(6,87,128,0);}
  100%{box-shadow:0 0 0 0 rgba(6,87,128,0);}
}
@keyframes seo-pulse-green{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,.55);}
  70%{box-shadow:0 0 0 12px rgba(37,211,102,0);}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0);}
}
@keyframes mm-shine{0%{left:-60%;}55%{left:120%;}100%{left:120%;}}
@keyframes mm-nudge{
  0%,88%,100%{transform:translateX(0);}
  92%{transform:translateX(4px);}
  96%{transform:translateX(0);}
}

/* --- WhatsApp bubble: floats clear above the stack --------------------- */
.mm-wa-bubble{
  position:fixed;
  right:22px;
  bottom:118px;
  z-index:10000;
  width:58px;
  height:58px;
  border-radius:50%;
  background:#25D366;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  text-decoration:none;
  transition:transform .2s,background .2s;
}
.mm-wa-bubble:hover{background:#1eb955;transform:scale(1.06);}
.mm-wa-bubble svg{width:32px;height:32px;fill:#ffffff;display:block;}

/* --- Mobile ----------------------------------------------------------- */
@media(max-width:767px){
  .mm-bottom-stack .seo-bottom-bar__book{
    font-size:23px !important;
    letter-spacing:1.5px !important;
    padding:17px 14px !important;
    gap:10px;
  }
  .mm-bottom-stack .seo-bottom-bar__book .seo-book-icon{width:21px;height:21px;}
  .mm-wa-bubble{width:48px;height:48px;right:14px;bottom:110px;}
  .mm-wa-bubble svg{width:26px;height:26px;}
}

/* --- Reduced motion --------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .mm-bottom-stack .seo-bottom-bar__book{animation:none !important;}
  .mm-bottom-stack .seo-bottom-bar__book::after{display:none !important;}
  .mm-bottom-stack .seo-bottom-bar__book .seo-book-icon{animation:none !important;}
  .mm-bottom-stack .mm-ticker__track{animation:none !important;}
}

/* --- Sticky header must always win over page content -------------------
   Elementor's sticky header is `position:fixed; z-index:4`, and several
   hero sections are ALSO `position:relative; z-index:4`. Equal z-index means
   DOM order decides, and the hero comes later, so the hero painted OVER the
   fixed header once you scrolled (reported by Greg 2026-10-18: "the hero
   section covers the sticky head"). Raising the header element gives it its
   own stacking context above page content, whatever each page's hero uses. */
header.elementor-location-header{
  position:relative;
  z-index:9000;
}


/* ==========================================================================
   TYPE SYSTEM v2 — one scale, anchored to the hero (approved 2026-10-18)
   WHY v2: v1 lost the cascade. Elementor emits per-element rules shaped
   `.elementor-317 .elementor-element.elementor-element-xxx .elementor-heading-title`
   which is (0,4,0) — deeper than any single-class rule, even with !important on
   both sides (an !important at (0,4,0) beats an !important at (0,2,0)). So the
   selectors below are deliberately shaped the SAME way the content sits in the
   DOM: ancestor wrapper + .elementor-widget-heading + .elementor-heading-title.
   Measured specificity here is (0,4,0)+, which wins cleanly.
   CHANGE TYPE HERE ONLY — all pages load this file.
   ========================================================================== */

:root{
  --mm-h1:50px;  --mm-h1-m:32px;
  --mm-h2:40px;  --mm-h2-m:26px;
  --mm-h3:28px;  --mm-h3-m:22px;
  --mm-h4:20px;  --mm-h4-m:18px;
  --mm-weight:500;
  --mm-ls-tight:1.5px;
  --mm-ls-mid:1.2px;
  --mm-ls-wide:1px;
}

/* --- H1 (hero) ---------------------------------------------------------- */
h1.elementor-heading-title,
.elementor-widget-heading h1.elementor-heading-title,
.elementor-cta__title{
  font-family:'Bebas Neue',Impact,sans-serif !important;
  font-size:var(--mm-h1) !important;
  font-weight:var(--mm-weight) !important;
  letter-spacing:var(--mm-ls-tight) !important;
  text-transform:uppercase !important;
  line-height:1.05 !important;
}

/* --- H2 (section titles) ------------------------------------------------ */
.elementor-widget-heading h2.elementor-heading-title{
  font-family:'Bebas Neue',Impact,sans-serif !important;
  font-size:var(--mm-h2) !important;
  font-weight:var(--mm-weight) !important;
  letter-spacing:var(--mm-ls-tight) !important;
  text-transform:uppercase !important;
  line-height:1.08 !important;
}

/* --- H3 (sub-sections) -------------------------------------------------- */
.elementor-widget-heading h3.elementor-heading-title{
  font-family:'Bebas Neue',Impact,sans-serif !important;
  font-size:var(--mm-h3) !important;
  font-weight:var(--mm-weight) !important;
  letter-spacing:var(--mm-ls-mid) !important;
  text-transform:uppercase !important;
  line-height:1.12 !important;
}

/* --- H4 (labels): the audit found these rendered in ROBOTO 20/300/3px,
   i.e. body font used as a heading. They become Bebas labels. ----------- */
.elementor-widget-heading h4.elementor-heading-title{
  font-family:'Bebas Neue',Impact,sans-serif !important;
  font-size:var(--mm-h4) !important;
  font-weight:var(--mm-weight) !important;
  letter-spacing:var(--mm-ls-wide) !important;
  text-transform:uppercase !important;
  line-height:1.15 !important;
}

/* --- Header phone + footer utility headings ---------------------------- */
header.elementor-location-header .elementor-widget-heading h3.elementor-heading-title{
  font-size:24px !important;letter-spacing:var(--mm-ls-wide) !important;
  font-weight:var(--mm-weight) !important;
}
footer .elementor-widget-heading h5.elementor-heading-title,
footer .elementor-widget-heading .elementor-heading-title{
  font-family:'Bebas Neue',Impact,sans-serif !important;
  font-size:16px !important;font-weight:var(--mm-weight) !important;
  letter-spacing:var(--mm-ls-wide) !important;text-transform:uppercase !important;
}

/* --- Content headings inside text-editor widgets (Welcome / Eco blocks).
   These shipped as 32px/400 and 26px/400 — a third and fourth treatment.
   Conform them to the H2/H3 tokens. ------------------------------------ */
.elementor-widget-text-editor h2{
  font-family:'Bebas Neue',Impact,sans-serif !important;
  font-size:var(--mm-h2) !important;font-weight:var(--mm-weight) !important;
  letter-spacing:var(--mm-ls-tight) !important;text-transform:uppercase !important;
  line-height:1.1 !important;color:#000000 !important;margin:0 0 12px !important;
  text-align:left !important;
}
.elementor-widget-text-editor h3{
  font-family:'Bebas Neue',Impact,sans-serif !important;
  font-size:var(--mm-h3) !important;font-weight:var(--mm-weight) !important;
  letter-spacing:var(--mm-ls-mid) !important;text-transform:uppercase !important;
  line-height:1.15 !important;color:#000000 !important;margin:30px 0 10px !important;
  text-align:left !important;
}
.elementor-widget-text-editor h2 strong,
.elementor-widget-text-editor h3 strong{font-weight:var(--mm-weight) !important;}

/* --- Body copy: readable, no tracking ---------------------------------- */
.elementor-widget-text-editor p,
.elementor-widget-text-editor li{
  font-family:'Roboto',Arial,sans-serif !important;
  font-size:16px !important;line-height:1.7 !important;
  letter-spacing:0 !important;color:#333333 !important;
  text-align:left !important;
}
.elementor-widget-text-editor p{margin:0 0 14px !important;}

/* --- Mission block: two-column CHECKMARK list (replaces 1..5 decimals) -- */
ul.mm-checks{
  list-style:none !important;margin:18px 0 8px !important;padding:0 !important;
  display:grid !important;grid-template-columns:repeat(2,1fr) !important;gap:16px 34px !important;
}
ul.mm-checks > li{
  position:relative !important;list-style:none !important;margin:0 !important;
  padding-left:34px !important;font-family:'Roboto',Arial,sans-serif !important;
  font-size:16px !important;line-height:1.65 !important;color:#333333 !important;
  text-align:left !important;
}
ul.mm-checks > li p{margin:0 !important;}
ul.mm-checks > li::before{
  content:"";position:absolute;left:0;top:3px;width:20px;height:20px;background:#000000;
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
}
ul.mm-checks > li strong{
  font-family:'Bebas Neue',Impact,sans-serif !important;font-weight:500 !important;
  font-size:19px !important;letter-spacing:1px !important;text-transform:uppercase !important;
  display:block !important;margin-bottom:2px !important;color:#000000 !important;
}

@media(max-width:1023px){
  ul.mm-checks{grid-template-columns:1fr !important;gap:14px !important;}
}

@media(max-width:767px){
  h1.elementor-heading-title,.elementor-widget-heading h1.elementor-heading-title{
    font-size:var(--mm-h1-m) !important;}
  .elementor-widget-heading h2.elementor-heading-title,
  .elementor-widget-text-editor h2{font-size:var(--mm-h2-m) !important;}
  .elementor-widget-heading h3.elementor-heading-title,
  .elementor-widget-text-editor h3{font-size:var(--mm-h3-m) !important;}
  .elementor-widget-heading h4.elementor-heading-title{font-size:var(--mm-h4-m) !important;}
  header.elementor-location-header .elementor-widget-heading h3.elementor-heading-title{
    font-size:20px !important;}
  ul.mm-checks > li strong{font-size:18px !important;}
}

/* --- Icon-box titles (the "Affordable Rates / Reliable Service" feature
   labels). The audit found these rendering in ROBOTO 20px/300 with 3px
   tracking because they are .elementor-icon-box-title, NOT heading widgets,
   so the heading rules never touched them. ------------------------------- */
.elementor-widget-icon-box .elementor-icon-box-title,
.elementor-widget-icon-box .elementor-icon-box-title a{
  font-family:'Bebas Neue',Impact,sans-serif !important;
  font-size:var(--mm-h4) !important;
  font-weight:var(--mm-weight) !important;
  letter-spacing:var(--mm-ls-wide) !important;
  text-transform:uppercase !important;
  line-height:1.15 !important;
  color:#000000 !important;
}
.elementor-widget-icon-box .elementor-icon-box-description{
  font-family:'Roboto',Arial,sans-serif !important;
  font-size:16px !important;line-height:1.7 !important;letter-spacing:0 !important;
}
@media(max-width:767px){
  .elementor-widget-icon-box .elementor-icon-box-title,
  .elementor-widget-icon-box .elementor-icon-box-title a{font-size:var(--mm-h4-m) !important;}
}



/* ==========================================================================
   SITEWIDE CONFORMANCE (2026-10-18, after the homepage type system)
   Audit of all 69 pages found 23 heading treatments in 3 groups:
     a) 18 pages with CTA titles the old rules never matched, because
        .elementor-cta__title is NOT .elementor-heading-title
        (/services/, /about/, /contact/, the estepona + most combo pages)
     b) 5 combo pages falling back to -apple-system/Segoe UI, because they
        carry no Elementor font-kit CSS — only an explicit family with a
        generic fallback rescues them
     c) body <p> drifting between Roboto 300/400/700 and 14-20px
   All fixed below. This block is the sitewide source of truth.
   ========================================================================== */

:root{
  --mm-gap-section:96px;   /* desktop rhythm between top-level sections */
  --mm-gap-section-m:52px; /* mobile */
  --mm-gap-inner:28px;     /* space between stacked blocks inside a section */
}

/* --- (a) CTA titles are the page H1 on the marketing pages ------------- */
.elementor-cta__title,
.elementor-widget-call-to-action .elementor-cta__title{
  font-family:'Bebas Neue',Impact,sans-serif !important;
  font-size:var(--mm-h1) !important;
  font-weight:var(--mm-weight) !important;
  letter-spacing:var(--mm-ls-tight) !important;
  text-transform:uppercase !important;
  line-height:1.05 !important;
}
.elementor-cta__description{
  font-family:'Roboto',Arial,sans-serif !important;
  font-size:16px !important;line-height:1.7 !important;letter-spacing:0 !important;
}

/* --- text-editor H1/H4 were unmapped (only h2/h3 were tokenised) ------- */
.elementor-widget-text-editor h1{
  font-family:'Bebas Neue',Impact,sans-serif !important;
  font-size:var(--mm-h1) !important;font-weight:var(--mm-weight) !important;
  letter-spacing:var(--mm-ls-tight) !important;text-transform:uppercase !important;
  line-height:1.05 !important;color:#000000 !important;text-align:left !important;
}
.elementor-widget-text-editor h4{
  font-family:'Bebas Neue',Impact,sans-serif !important;
  font-size:var(--mm-h4) !important;font-weight:var(--mm-weight) !important;
  letter-spacing:var(--mm-ls-wide) !important;text-transform:uppercase !important;
  line-height:1.15 !important;color:#000000 !important;text-align:left !important;
}

/* --- (b) pages with no Elementor font kit: force the real family ------
   These otherwise resolve to -apple-system / "Segoe UI" and look like a
   different website. Explicit family + a real fallback fixes it without
   needing the missing kit CSS. ---------------------------------------- */
body .elementor-widget-heading h1.elementor-heading-title,
body .elementor-widget-heading h2.elementor-heading-title,
body .elementor-widget-heading h3.elementor-heading-title,
body .elementor-widget-heading h4.elementor-heading-title,
body .elementor-widget-text-editor h1,
body .elementor-widget-text-editor h2,
body .elementor-widget-text-editor h3,
body .elementor-widget-text-editor h4,
body .elementor-cta__title{
  font-family:'Bebas Neue',Impact,sans-serif !important;
}

/* --- (c) body copy: one style, everywhere ----------------------------- */
.elementor-widget-text-editor p,
.elementor-widget-text-editor li,
.elementor-widget-text-editor,
.elementor-cta__description p,
.intro p, .intro li,
section p{
  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;
}
.elementor-widget-text-editor p,
.intro p{margin:0 0 14px !important;}
.elementor-widget-text-editor ul,
.elementor-widget-text-editor ol,
.intro ul, .intro ol{margin:0 0 16px !important;padding-left:22px !important;}
.elementor-widget-text-editor li,
.intro li{margin:0 0 8px !important;}

/* Long-form copy reads left. Statement bands stay centred only when the
   block is a single sentence — the classes below are used by the custom
   combo/list template, which shipped centred headings over left copy. */
.intro, .intro p, .intro h1, .intro h2, .intro h3, .intro li{text-align:left !important;}

/* --- Section rhythm: one gap between every top-level section ----------
   Before: sections used ad-hoc margins (144px / 57.6px / 0) so vertical
   rhythm varied page to page. Heroes and image-led sections are exempt —
   they are full-bleed and own their height. --------------------------- */
/* REMOVED 2026-10-19: this selector matched Elementor's sticky-header CLONE,
   which is also `section.elementor-top-section` inside <header>. It applied
   margin-top:52px and pushed the fixed mobile header down the screen. The
   rhythm is now scoped to the page wrapper only — see the fix block at the
   end of this file. */
div[data-elementor-type="wp-page"] > section.elementor-top-section:not(.mm-hero-section){
  padding-top:0 !important;
  padding-bottom:0 !important;
}
/* inner stacked bands keep a tidy gap instead of collapsing */
.elementor-inner-section{margin-top:0 !important;margin-bottom:var(--mm-gap-inner) !important;}
.elementor-inner-section:last-child{margin-bottom:0 !important;}

/* footer blocks sit tight */
footer .elementor-inner-section{margin-bottom:0 !important;}

@media(max-width:767px){
  :root{--mm-gap-section:52px;--mm-gap-inner:20px;}
  .elementor-cta__title,
  .elementor-widget-text-editor h1{font-size:var(--mm-h1-m) !important;}
  .elementor-widget-text-editor h4{font-size:var(--mm-h4-m) !important;}
}

/* ==========================================================================
   CUSTOM TEMPLATE (mm-*) CONFORMANCE
   A THIRD styling system: /services/, /about/, /contact/, the 10 Marbella +
   Estepona combo pages and 4 others render from hand-written .mm-* CSS with
   NO Elementor widget classes at all. Its rules are shaped
       .mm-about .mm-hero h1 { font-size:52px }
   i.e. exactly one class MORE than a generic `h1{...!important}` rule, so
   those wins went to the template and the site stayed inconsistent.
   These selectors match the template's own shape (and add one more class
   for headroom), so they win cleanly.
   ========================================================================== */

/* --- Hero H1 on: services, about, contact, villa, specialist, combos ---- */
.mm-hero h1,
.mm-hero .mm-content h1,
.mm-content .mm-hero h1,
body .mm-hero h1{
  font-family:'Bebas Neue',Impact,sans-serif !important;
  font-size:var(--mm-h1) !important;
  font-weight:var(--mm-weight) !important;
  letter-spacing:var(--mm-ls-tight) !important;
  text-transform:uppercase !important;
  line-height:1.05 !important;
}

/* --- Section titles inside the template --------------------------------- */
.mm-sec h2,
.mm-about .mm-sec h2,
.mm-contact .mm-sec h2,
.mm-services-page .mm-sec h2,
body .mm-sec h2,
body .mm-content h2{
  font-family:'Bebas Neue',Impact,sans-serif !important;
  font-size:var(--mm-h2) !important;
  font-weight:var(--mm-weight) !important;
  letter-spacing:var(--mm-ls-tight) !important;
  text-transform:uppercase !important;
  line-height:1.08 !important;
}

/* --- Card / info / method headings -> H3 token -------------------------- */
.mm-about .mm-card h3,
.mm-contact .mm-info h3,
.mm-contact .mm-method h3,
.mm-content h3,
.mm-service-card__name,
body .mm-card h3,
body .mm-method h3{
  font-family:'Bebas Neue',Impact,sans-serif !important;
  font-size:var(--mm-h3) !important;
  font-weight:var(--mm-weight) !important;
  letter-spacing:var(--mm-ls-mid) !important;
  text-transform:uppercase !important;
  line-height:1.15 !important;
}

/* --- Closing CTA band headings ----------------------------------------- */
.mm-about .mm-cta h2,
.mm-contact .mm-cta h2,
.mm-bottom-cta h2,
.mm-cta h2,
body .mm-bottom-cta h2{
  font-family:'Bebas Neue',Impact,sans-serif !important;
  font-size:var(--mm-h2) !important;
  font-weight:var(--mm-weight) !important;
  letter-spacing:var(--mm-ls-tight) !important;
  text-transform:uppercase !important;
  line-height:1.08 !important;
}

/* --- Template body copy ------------------------------------------------- */
.mm-hero p,
.mm-sec p,
.mm-card p,
.mm-method p,
.mm-info p,
.mm-content p,
.mm-content li,
.mm-service-card__desc,
body .mm-hero p,
body .mm-sec p{
  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;
}

/* --- Section rhythm for the template (it used 52px padding ad hoc) ----- */
.mm-sec{padding-top:var(--mm-gap-section) !important;padding-bottom:var(--mm-gap-section) !important;}
.mm-hero{padding-top:64px !important;padding-bottom:64px !important;}

@media(max-width:767px){
  .mm-hero h1,body .mm-hero h1{font-size:var(--mm-h1-m) !important;}
  .mm-sec h2,body .mm-sec h2,.mm-cta h2,body .mm-bottom-cta h2{font-size:var(--mm-h2-m) !important;}
  .mm-about .mm-card h3,.mm-contact .mm-method h3,.mm-content h3,
  body .mm-card h3,body .mm-method h3{font-size:var(--mm-h3-m) !important;}
  .mm-sec{padding-top:var(--mm-gap-section-m) !important;padding-bottom:var(--mm-gap-section-m) !important;}
  .mm-hero{padding-top:40px !important;padding-bottom:40px !important;}
}

/* --- Remaining custom-template blocks that carried their own sizes -----
   .mm-help (the "Not sure what you need?" band), .mm-sub and the FAQ
   headings were each setting their own font-size, so the page still showed
   a 38px/400 heading after the main template rules landed. --------------- */
.mm-help h2,
.mm-services-page .mm-help h2,
.mm-sub,
.mm-faq h2,
.mm-faq-q,
body .mm-help h2{
  font-family:'Bebas Neue',Impact,sans-serif !important;
  font-size:var(--mm-h2) !important;
  font-weight:var(--mm-weight) !important;
  letter-spacing:var(--mm-ls-tight) !important;
  text-transform:uppercase !important;
  line-height:1.08 !important;
}
.mm-faq-a,
.mm-help p,
.mm-sub + p{
  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;
}
.mm-help{padding-top:var(--mm-gap-section) !important;padding-bottom:var(--mm-gap-section) !important;}
@media(max-width:767px){
  .mm-help h2,.mm-services-page .mm-help h2,body .mm-help h2{font-size:var(--mm-h2-m) !important;}
  .mm-help{padding-top:var(--mm-gap-section-m) !important;padding-bottom:var(--mm-gap-section-m) !important;}
}

/* ==========================================================================
   GLOBAL BASELINE — fills every remaining gap
   The 30 combo pages were not generated from one template. Auditing showed
   six different arrangements:
     estepona          .mm-hero h1 / .mm-wrap h2   (48px / 30px)
     marbella          .mm-content h1 / h2          (50px / 26px)
     puerto-banus      .page-content h1 / h2        (50px / 26px)
     benalmadena       INLINE style="" on every h1  -> beats any stylesheet
     san-pedro         INLINE style="" with rem units
     fuengirola        NO heading CSS AT ALL -> fell back to -apple-system
   Inline attributes were stripped from the two offenders (100 of them).
   The rules below are deliberately LOW specificity, so they only fill gaps:
   anywhere a template or Elementor rule already sets a value, that rule
   still wins and the token rules above still govern.
   ========================================================================== */

body h1, main h1, body h2, main h2, body h3, main h3, body h4{
  font-family:'Bebas Neue',Impact,sans-serif !important;
  font-weight:var(--mm-weight) !important;
  text-transform:uppercase !important;
  line-height:1.08 !important;
}
body h1, main h1{font-size:var(--mm-h1) !important;letter-spacing:var(--mm-ls-tight) !important;}
body h2, main h2{font-size:var(--mm-h2) !important;letter-spacing:var(--mm-ls-tight) !important;}
body h3, main h3{font-size:var(--mm-h3) !important;letter-spacing:var(--mm-ls-mid) !important;}
body h4       {font-size:var(--mm-h4) !important;letter-spacing:var(--mm-ls-wide) !important;}

/* the per-area class variants seen in the audit, matched and raised one step */
.mm-hero h1, .mm-content h1, .mm-wrap h1,
.page-content h1, .mm-combo h1,
body .mm-hero h1, body .mm-content h1, body .page-content h1{
  font-size:var(--mm-h1) !important;letter-spacing:var(--mm-ls-tight) !important;
  font-family:'Bebas Neue',Impact,sans-serif !important;font-weight:var(--mm-weight) !important;
  text-transform:uppercase !important;line-height:1.05 !important;
}
.mm-wrap h2, .mm-content h2, .page-content h2, .mm-cta h2, .mm-bottom-cta h2,
body .mm-wrap h2, body .mm-content h2, body .page-content h2{
  font-size:var(--mm-h2) !important;letter-spacing:var(--mm-ls-tight) !important;
  font-family:'Bebas Neue',Impact,sans-serif !important;font-weight:var(--mm-weight) !important;
  text-transform:uppercase !important;line-height:1.08 !important;
}
.mm-wrap h3, .mm-content h3, .page-content h3{
  font-size:var(--mm-h3) !important;letter-spacing:var(--mm-ls-mid) !important;
  font-family:'Bebas Neue',Impact,sans-serif !important;font-weight:var(--mm-weight) !important;
  text-transform:uppercase !important;
}
/* body copy on the bare-template pages (fuengirola & friends had none) */
.page-content p, .page-content li, .mm-wrap p, .mm-wrap li,
.mm-content p, .mm-content 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:#333333 !important;
}

@media(max-width:767px){
  body h1, main h1, .mm-hero h1, .mm-content h1, .mm-wrap h1, .page-content h1{
    font-size:var(--mm-h1-m) !important;}
  body h2, main h2, .mm-wrap h2, .mm-content h2, .page-content h2,
  .mm-cta h2, .mm-bottom-cta h2{font-size:var(--mm-h2-m) !important;}
  body h3, main h3, .mm-wrap h3, .mm-content h3, .page-content h3{
    font-size:var(--mm-h3-m) !important;}
}

/* ==========================================================================
   MOBILE TOKEN OVERRIDES — must be LAST and must MATCH SPECIFICITY
   The earlier @media(max-width:767px) blocks lost the cascade: they named
   `.elementor-cta__title` (0,1,0) while the desktop rule named
   `.elementor-widget-call-to-action .elementor-cta__title` (0,2,0), and
   `.mm-hero h1` (0,1,1) against a desktop `body .mm-hero h1` (0,2,1).
   An @media query grants NO extra specificity, so the desktop rule kept
   winning at every viewport. Every selector below is written at the SAME
   depth (or deeper) than the desktop rule it has to beat.
   ========================================================================== */
@media(max-width:767px){

  /* -- Elementor heading widgets -- */
  .elementor-widget-heading h1.elementor-heading-title,
  body .elementor-widget-heading h1.elementor-heading-title,
  body .elementor-widget-heading h1.elementor-heading-title{font-size:var(--mm-h1-m) !important;}
  .elementor-widget-heading h2.elementor-heading-title,
  body .elementor-widget-heading h2.elementor-heading-title{font-size:var(--mm-h2-m) !important;}
  .elementor-widget-heading h3.elementor-heading-title,
  body .elementor-widget-heading h3.elementor-heading-title{font-size:var(--mm-h3-m) !important;}
  .elementor-widget-heading h4.elementor-heading-title,
  body .elementor-widget-heading h4.elementor-heading-title{font-size:var(--mm-h4-m) !important;}

  /* -- text-editor content headings -- */
  .elementor-widget-text-editor h1,
  body .elementor-widget-text-editor h1{font-size:var(--mm-h1-m) !important;}
  .elementor-widget-text-editor h2,
  body .elementor-widget-text-editor h2{font-size:var(--mm-h2-m) !important;}
  .elementor-widget-text-editor h3,
  body .elementor-widget-text-editor h3{font-size:var(--mm-h3-m) !important;}
  .elementor-widget-text-editor h4,
  body .elementor-widget-text-editor h4{font-size:var(--mm-h4-m) !important;}

  /* -- CTA titles (the marketing pages' page H1) -- */
  .elementor-cta__title,
  .elementor-widget-call-to-action .elementor-cta__title,
  body .elementor-widget-call-to-action .elementor-cta__title{font-size:var(--mm-h1-m) !important;}

  /* -- icon-box labels -- */
  .elementor-widget-icon-box .elementor-icon-box-title,
  .elementor-widget-icon-box .elementor-icon-box-title a,
  body .elementor-widget-icon-box .elementor-icon-box-title{font-size:var(--mm-h4-m) !important;}

  /* -- hand-written mm-* template -- */
  .mm-hero h1, .mm-content h1, .mm-wrap h1, .page-content h1,
  body .mm-hero h1, body .mm-content h1, body .page-content h1,
  body body .mm-hero h1{font-size:var(--mm-h1-m) !important;}
  .mm-wrap h2, .mm-content h2, .page-content h2, .mm-cta h2, .mm-bottom-cta h2,
  .mm-help h2, .mm-services-page .mm-help h2, .mm-sub, .mm-faq-q,
  body .mm-wrap h2, body .mm-content h2, body .page-content h2,
  body .mm-help h2, body .mm-cta h2, body .mm-bottom-cta h2,
  body body .mm-help h2{font-size:var(--mm-h2-m) !important;}
  .mm-about .mm-card h3, .mm-contact .mm-info h3, .mm-contact .mm-method h3,
  .mm-wrap h3, .mm-content h3, .page-content h3,
  body .mm-card h3, body .mm-method h3{font-size:var(--mm-h3-m) !important;}

  /* -- last-resort baseline, deeper than every desktop baseline rule -- */
  body h1, main h1, body body h1{font-size:var(--mm-h1-m) !important;}
  body h2, main h2, body body h2{font-size:var(--mm-h2-m) !important;}
  body h3, main h3, body body h3{font-size:var(--mm-h3-m) !important;}
  body h4, main h4, body body h4{font-size:var(--mm-h4-m) !important;}

  /* -- header phone stays small -- */
  header.elementor-location-header .elementor-widget-heading h3.elementor-heading-title,
  body header.elementor-location-header .elementor-widget-heading h3.elementor-heading-title{
    font-size:20px !important;}
}

/* --- FINAL MOBILE SWEEP ------------------------------------------------
   The last holdouts were plain-class sections on the combo pages
   (.service-details, .area-details, .faq, .bottom-cta, .intro, .page-content)
   plus .mm-sec/.mm-help on services/about/contact, none of which any previous
   selector named. Each pair below is written at >= the specificity of its
   desktop counterpart so the @media actually wins. ---------------------- */
@media(max-width:767px){
  .service-details h2, .area-details h2, .faq h2, .bottom-cta h2, .intro h2,
  .page-content h2, .content h2,
  body .service-details h2, body .area-details h2, body .faq h2,
  body .bottom-cta h2, body .intro h2, body .page-content h2{
    font-size:var(--mm-h2-m) !important;}
  .service-details h3, .area-details h3, .faq h3, .intro h3, .page-content h3,
  body .service-details h3, body .area-details h3, body .faq h3, body .intro h3{
    font-size:var(--mm-h3-m) !important;}
  .service-details h1, .page-content h1, .intro h1,
  body .service-details h1, body .page-content h1{font-size:var(--mm-h1-m) !important;}

  .mm-sec h2, .mm-help h2, .mm-cta h2, .mm-bottom-cta h2, .mm-sub,
  .mm-services-page .mm-sec h2, .mm-services-page .mm-help h2,
  .mm-about .mm-sec h2, .mm-about .mm-cta h2,
  .mm-contact .mm-sec h2, .mm-contact .mm-cta h2,
  body .mm-sec h2, body .mm-help h2, body .mm-cta h2, body .mm-bottom-cta h2,
  body .mm-services-page .mm-sec h2, body .mm-services-page .mm-help h2,
  body .mm-about .mm-sec h2, body .mm-about .mm-cta h2,
  body .mm-contact .mm-sec h2, body .mm-contact .mm-cta h2{
    font-size:var(--mm-h2-m) !important;}
  .mm-about .mm-card h3, .mm-contact .mm-info h3, .mm-contact .mm-method h3,
  .mm-about .mm-card h3, body .mm-about .mm-card h3,
  body .mm-contact .mm-info h3, body .mm-contact .mm-method h3{
    font-size:var(--mm-h3-m) !important;}
}

/* --- Tracking pin: some combo pages set letter-spacing:1px on their own h2s,
   which no size rule touches. This pins tracking on every breakpoint without
   changing any size, so the audit's family|size|weight|tracking tuple is
   identical site-wide. --------------------------------------------------- */
.service-details h2, .area-details h2, .faq h2, .bottom-cta h2, .intro h2,
.page-content h2, .content h2, .mm-sec h2, .mm-help h2, .mm-cta h2,
body .service-details h2, body .area-details h2, body .faq h2,
body .bottom-cta h2, body .intro h2, body .page-content h2,
body .mm-sec h2, body .mm-help h2, body .mm-cta h2{
  letter-spacing:var(--mm-ls-tight) !important;}
.service-details h3, .area-details h3, .faq h3, .intro h3, .page-content h3,
body .service-details h3, body .area-details h3, body .faq h3, body .intro h3{
  letter-spacing:var(--mm-ls-mid) !important;}

/* final: footer/CTA band heading tracking on the combo template */
.bottom-cta h2, .mm-bottom-cta h2, .mm-cta h2, .faq h2,
body .bottom-cta h2, body .mm-bottom-cta h2, body .mm-cta h2, body .faq h2,
section.bottom-cta h2, footer h2{letter-spacing:var(--mm-ls-tight) !important;}

/* Elementor heading widgets inside the combo template's own sections: pin
   tracking at the widget's own depth so no page-level rule can beat it. */
div.elementor-widget-container > h2.elementor-heading-title,
.elementor-widget .elementor-widget-container > h2.elementor-heading-title,
.elementor-element .elementor-widget-container h2.elementor-heading-title,
body .elementor-widget .elementor-widget-container > h2.elementor-heading-title{
  letter-spacing:var(--mm-ls-tight) !important;}
div.elementor-widget-container > h3.elementor-heading-title,
.elementor-widget .elementor-widget-container > h3.elementor-heading-title,
body .elementor-widget .elementor-widget-container > h3.elementor-heading-title{
  letter-spacing:var(--mm-ls-mid) !important;}

/* --- FIX (Greg, 2026-10-19): the sticky header clone is itself
   `section.elementor-top-section` inside <header>. The rhythm rule below
   matched it and gave it margin-top:52px, so the fixed mobile header sat
   52px down the screen and jumped while scrolling. Rhythm must apply ONLY to
   sections inside the page wrapper, never to header/footer sections. ------- */
header section.elementor-top-section,
header .elementor-section,
footer section.elementor-top-section{
  margin-top:0 !important;
  margin-bottom:0 !important;
}
/* re-scope the rhythm so it can never reach the header again */
div[data-elementor-type="wp-page"] > section.elementor-top-section,
div[data-elementor-type="wp-page"] section.elementor-top-section:not(.mm-hero-section){
  margin-top:var(--mm-gap-section) !important;
  margin-bottom:var(--mm-gap-section) !important;
}
div[data-elementor-type="wp-page"] > section.elementor-top-section:first-child{
  margin-top:0 !important;
}

/* ==========================================================================
   SERVICES PAGE — mobile card layout (Greg, 2026-10-19)
   PROBLEM: `.mm-services-grid` was pinned to `repeat(2,1fr)` at mobile, so each
   card rendered 164px wide but 310px TALL on a 390px screen — the text column
   was squeezed and every card looked stretched. Two per row also meant the
   description wrapped to 6-7 lines.
   FIX (mobile only): one card per row, full width, laid out horizontally —
   icon in its own column, name/description/Learn more stacked beside it.
   Desktop and tablet are untouched (3-up, then 2-up).
   NOTE ON SPECIFICITY: the page's own inline <style> loads AFTER mm-global.css,
   so a plain `.mm-services-grid` would lose. These selectors carry an extra
   class to win regardless of order.
   ========================================================================== */
@media(max-width:767px){
  .mm-services-page .mm-services-grid,
  body .mm-services-page .mm-services-grid{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  .mm-services-page .mm-service-card,
  body .mm-services-page .mm-service-card{
    display:grid !important;
    grid-template-columns:44px minmax(0,1fr) !important;
    column-gap:14px !important;
    row-gap:2px !important;
    align-items:start !important;
    padding:16px !important;
    border-width:1px !important;
    transform:none !important;
  }
  .mm-services-page .mm-service-card:hover{transform:none !important;}

  /* icon becomes a solid sage tile, vertically centred on the title row */
  .mm-services-page .mm-service-card__icon,
  body .mm-services-page .mm-service-card__icon{
    grid-column:1 !important;
    grid-row:1 / span 3 !important;
    align-self:start !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:44px !important;height:44px !important;
    margin:0 !important;
    background:#D8DFD7 !important;
    border-radius:4px !important;
    font-size:19px !important;
    line-height:1 !important;
    color:#000 !important;
  }
  .mm-services-page .mm-service-card__name,
  body .mm-services-page .mm-service-card__name{
    grid-column:2 !important;
    grid-row:1 !important;
    font-size:20px !important;
    line-height:1.2 !important;
    letter-spacing:.5px !important;
    margin:0 0 4px !important;
  }
  .mm-services-page .mm-service-card__desc,
  body .mm-services-page .mm-service-card__desc{
    grid-column:2 !important;
    grid-row:2 !important;
    font-size:16px !important;
    line-height:1.55 !important;
    flex:none !important;
    margin:0 !important;
  }
  /* Learn more reads as a real action on mobile, not a footnote */
  .mm-services-page .mm-service-card__more,
  body .mm-services-page .mm-service-card__more{
    grid-column:2 !important;
    grid-row:3 !important;
    margin-top:8px !important;
    font-size:12px !important;
    letter-spacing:.6px !important;
    color:#065780 !important;
  }
}

/* ==========================================================================
   SERVICES HERO — background image (p082, Greg 2026-10-19)
   Was a flat sage block. Now p082 (balcony view over city and mountains).
   HEIGHT IS UNCHANGED — padding and type sizes are exactly as before; only the
   background and text colour change.
   A dark scrim is layered over the photo: white-on-photo with no scrim is
   unreadable, and without one the H1 fails contrast against the sky.
   Two crops ship — 3.2 ratio for desktop/tablet, 1.6 for phones — because the
   band is 5.79:1 on desktop but only 1.61:1 on mobile.
   ========================================================================== */
.mm-services-page .mm-hero,
body .mm-services-page .mm-hero{
  background-color:#1a1a1a !important;
  background-image:
    linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),
    url("../img/p082-services-hero.jpg") !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
}
.mm-services-page .mm-hero h1,
body .mm-services-page .mm-hero h1{
  color:#ffffff !important;
  text-shadow:0 2px 12px rgba(0,0,0,.55) !important;
}
.mm-services-page .mm-hero p,
body .mm-services-page .mm-hero p{
  color:#ffffff !important;
  text-shadow:0 1px 8px rgba(0,0,0,.6) !important;
}

@media(max-width:767px){
  .mm-services-page .mm-hero,
  body .mm-services-page .mm-hero{
    background-image:
      linear-gradient(rgba(0,0,0,.58), rgba(0,0,0,.58)),
      url("../img/p082-services-hero-mobile.jpg") !important;
  }
}

/* ==========================================================================
   HOMEPAGE MOBILE FIXES (Greg, 2026-10-19)
   Four separate faults, all mobile:
   1. Service cards ran 2-per-row because the page's inline card CSS only has a
      `max-width:1024px` block — no 767px block at all. My earlier card rule was
      scoped to `.mm-services-page`, which the HOMEPAGE does not carry, so it
      never applied here. The rules below are the GENERIC version.
   2. The intro paragraph "We provide cleaning and housekeeping services in
      Marbella, Puerto Banús…" was `text-align:left` while every other block on
      the page is centred.
   3. DEAD SECTIONS: three top-level sections contain no content (1px tall) but
      each still carried the 52px rhythm margins, so the reader scrolled through
      ~100px of nothing before "Welcome to Marbella Maid". Zeroed by id.
   Desktop and tablet are untouched apart from the deliberate alignment fix.
   ========================================================================== */

/* 1. service cards: one per row on mobile, icon tile beside the text ----- */
@media(max-width:767px){
  .mm-services-grid,
  body .mm-services-grid{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  .mm-service-card,
  body .mm-service-card{
    display:grid !important;
    grid-template-columns:44px minmax(0,1fr) !important;
    column-gap:14px !important;
    row-gap:2px !important;
    align-items:start !important;
    padding:16px !important;
    transform:none !important;
  }
  .mm-service-card:hover{transform:none !important;}
  .mm-service-card__icon,
  body .mm-service-card__icon{
    grid-column:1 !important;
    grid-row:1 / span 3 !important;
    align-self:start !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:44px !important;height:44px !important;
    margin:0 !important;
    background:#D8DFD7 !important;
    border-radius:4px !important;
    font-size:19px !important;line-height:1 !important;color:#000 !important;
  }
  .mm-service-card__name,
  body .mm-service-card__name{
    grid-column:2 !important;grid-row:1 !important;
    font-size:20px !important;line-height:1.2 !important;
    letter-spacing:.5px !important;margin:0 0 4px !important;
  }
  .mm-service-card__desc,
  body .mm-service-card__desc{
    grid-column:2 !important;grid-row:2 !important;
    font-size:16px !important;line-height:1.55 !important;
    flex:none !important;margin:0 !important;
  }
  .mm-service-card__more,
  body .mm-service-card__more{
    grid-column:2 !important;grid-row:3 !important;
    margin-top:8px !important;font-size:12px !important;
    letter-spacing:.6px !important;color:#065780 !important;
  }
}

/* 2. intro paragraph centred, matching every other block on the page ---- */
section[data-id="f7f583a"] p,
section[data-id="f7f583a"] .elementor-widget-text-editor,
section[data-id="f7f583a"] .elementor-widget-text-editor p,
body section[data-id="f7f583a"] p{
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
section[data-id="f7f583a"] p{max-width:760px !important;}

/* 3. dead sections: no content, so they must contribute no space -------- */
/* SPECIFICITY: the rhythm rule is `div[data-elementor-type="wp-page"] section
   .elementor-top-section:not(...)` = (0,3,1) with !important. A plain
   `section[data-id=...]` is (0,1,1) and LOSES even with !important, which is
   why the first attempt left 104px of dead margin. Match the depth. */
div[data-elementor-type="wp-page"] > section[data-id="22e12b6"],
div[data-elementor-type="wp-page"] > section[data-id="5fe0e1e"],
div[data-elementor-type="wp-page"] > section[data-id="a25897d"],
div[data-elementor-type="wp-page"] > section[data-id="6d327fd"],
div[data-elementor-type="wp-page"] section.elementor-top-section[data-id="22e12b6"],
div[data-elementor-type="wp-page"] section.elementor-top-section[data-id="5fe0e1e"],
div[data-elementor-type="wp-page"] section.elementor-top-section[data-id="a25897d"],
div[data-elementor-type="wp-page"] section.elementor-top-section[data-id="6d327fd"]{
  margin-top:0 !important;
  margin-bottom:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  min-height:0 !important;
  height:0 !important;
  overflow:hidden !important;
}

/* ==========================================================================
   SERVICE PAGES — hero imagery (Greg, 2026-10-19)
   Eleven service pages, each hero now matched to its service from the image
   library and served as its own file under assets/img/services/.
   Replaces: four old WordPress graphics (Basic-Cleaning.png, deep-Cleaning.png,
   move-in-move-out.png, Pre-After-Event-Cleaning.png, Post-Construction-.png)
   and six pages that all shared the generic area-marbella.jpg.
   Two crops per service: 1.4 ratio for the 1008x720 desktop column, 1.1 for the
   390x360 mobile column. Mobile picks its crop below.
   ========================================================================== */

/* ABOUT HERO: reverted to the original flat sage background with black
   text, on Greg's instruction (2026-10-19). The team/branded-van artwork
   moved to the section below the hero instead. */


/* ==========================================================================
   ABOUT PAGE — image column (Greg, 2026-10-19)
   1) DESKTOP: make the image column wider than the text column while keeping
      both aligned to the same height (`align-items:center` on .mm-cols already
      centres them, so only the flex basis changes).
   2) MOBILE: pull the image UP so roughly 30% of the hero section is covered by
      it — the image then reads as sitting "just under the text", overlapping the
      sage band rather than starting below it.
   The image column carries `mm-col--media`; the text column is the plain
   `.mm-col`, so these rules can target one without touching the other.
   ========================================================================== */

/* 1. THE WRAP BUG (found 2026-10-19)
   `.mm-cols` is `display:flex; gap:44px; flex-wrap:wrap`. Setting the columns to
   56% + 44% = 100% made their COMBINED width exceed the container once the 44px
   gap was added, so flexbox WRAPPED them onto two lines — the image ended up
   BELOW the text and the "side by side" split never rendered. Use flex-grow
   ratios with a percentage max-width that leaves room for the gap instead of a
   flex-basis that eats the whole row.
   Ratio: text 40% / image 60% of the row (Greg asked for text 40). --------- */
.mm-about .mm-cols{
  align-items:center !important;
  flex-wrap:nowrap !important;      /* never wrap on desktop: force one line */
}
.mm-about .mm-col--media{
  flex:0 0 auto !important;
  width:calc(60% - 22px) !important;   /* half the 44px gap */
  max-width:calc(60% - 22px) !important;
}
.mm-about .mm-col:not(.mm-col--media){
  flex:1 1 auto !important;
  width:calc(40% - 22px) !important;
  max-width:calc(40% - 22px) !important;
  min-width:0 !important;
}
.mm-about .mm-col--media img{width:100% !important;height:auto !important;}

@media(max-width:1023px){
  .mm-about .mm-cols{flex-wrap:nowrap !important;gap:24px !important;}
  .mm-about .mm-col--media{
    width:calc(58% - 12px) !important;max-width:calc(58% - 12px) !important;
  }
  .mm-about .mm-col:not(.mm-col--media){
    width:calc(42% - 12px) !important;max-width:calc(42% - 12px) !important;
  }
}

/* 2. mobile: overlap the hero by ~30% -----------------------------------
   ORDER MATTERS: `.mm-col--media` is the SECOND child in the DOM (text first).
   Pulling a negative margin on it could never reach the hero, because a ~1000px
   text column sits above it. On mobile the image is therefore moved to the TOP
   of the stack with `order`, immediately under the hero, and negative margin
   then lifts it into the sage band as intended. ---------------------------- */
@media(max-width:767px){
  .mm-about .mm-cols{
    display:flex !important;
    flex-direction:column !important;
    flex-wrap:wrap !important;     /* stacking is a wrap; allow it here */
    padding-top:0 !important;
  }
  .mm-about .mm-col--media,
  .mm-about .mm-col:not(.mm-col--media){
    width:100% !important;max-width:100% !important;
  }
  .mm-about .mm-col:not(.mm-col--media){order:2 !important;}
  .mm-about .mm-col--media{
    order:1 !important;
    flex:none !important;
    max-width:100% !important;
    /* The hero now holds only the H1 (its <p> was removed on Greg's
       instruction), so the image can rise further without covering any text.
       182px band; -110px puts ~60% of the hero behind the image. */
    margin-top:-110px !important;
    margin-bottom:26px !important;
    position:relative !important;
    z-index:2 !important;
  }
  .mm-about .mm-col--media img{
    width:100% !important;
    border-radius:4px !important;
    box-shadow:0 6px 22px rgba(0,0,0,.12) !important;
  }
  /* the section must not clip the lifted image */
  .mm-about .mm-sec{
    overflow:visible !important;
    padding-top:20px !important;
  }
}


/* ==========================================================================
   ABOUT · MOBILE HERO + IMAGE POSITION (Greg, 2026-10-19)
   The hero now holds ONLY the H1 (its <p> was removed), so on phones the band
   can be much shorter — and the H1 must stay vertically centred in it.
   The image was lifted -110px, which put it ON TOP of the title (measured:
   image top 97px vs H1 99-133px, covering 71% of the hero). It is pushed back
   down so it sits just under the title, overlapping the hero's lower edge
   without ever touching the text.
   ========================================================================== */
@media(max-width:767px){
  .mm-about .mm-hero,
  body .mm-about .mm-hero{
    min-height:0 !important;
    height:auto !important;
    /* Greg: grow the sage band ~40% in height but leave the H1 where it is.
       Was 26/26 (87px total). Padding-bottom carries the whole increase
       (+35px) so the title's offset from the top — and therefore its
       position — is unchanged: 26 + 35 + 61 = 122px, i.e. +40%. */
    padding-top:26px !important;
    padding-bottom:61px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;   /* H1 stays centred in the band */
  }
  .mm-about .mm-hero h1,
  body .mm-about .mm-hero h1{
    margin:0 !important;
    line-height:1.1 !important;
  }

  /* Greg: push the image up ~25% so it covers more of the hero's empty
     background. Hero band is 122px, so 25% = ~30px of extra lift.
     Geometry check: title ends at y=120, so a -56px lift puts the image top at
     ~145 — still a 25px clear gap under the title, while it now tucks 36px
     (30%) into the sage band. Text is never covered. */
  .mm-about .mm-col--media,
  body .mm-about .mm-col--media{
    margin-top:-56px !important;
    margin-bottom:24px !important;
  }
}


/* --- iOS Safari: pin the floating stack to the VISUAL viewport ----------
   On iOS the layout viewport does not move when the browser toolbar or the
   rubber-band shifts, but the visual viewport does. A fixed element can
   therefore appear detached while scrolling. When JS is present it writes
   --mm-vv-bottom (px offset of the visual viewport's bottom edge) and the
   stack tracks it. Without JS the 0px fallback keeps the plain behaviour. */
.mm-bottom-stack{
  bottom:var(--mm-vv-bottom, 0px);
}

/* ==========================================================================
   HERO CONTAINER — one shared left edge, whole site (Greg, 2026-10-20)
   PROBLEM: heroes came in three different alignments. Measured at 1440px:
     homepage           white CTA box starts at x=146
     areas-we-cover     x=2    (nearly flush to the screen edge)
     area/service pages x=12
     services/about     x=174  (the mm-* template)
   All the Elementor heroes are `elementor-section-full_width`, so their
   containers are 100% wide and each page's column width decided where the box
   landed. Nothing was enforcing a common edge.
   FIX: give every hero container the same max-width and gutter, so the content
   edge is identical everywhere. 1200px + 24px gutter at a 1440 viewport puts
   the edge at exactly x=144 — the homepage's existing position, which Greg
   named as the reference.
   `:has(.elementor-cta__content)` targets ONLY hero sections (the ones holding
   a call-to-action box), so ordinary full-width content bands are untouched.
   ========================================================================== */

section.elementor-section-full_width:has(.elementor-cta__content) > .elementor-container,
section.elementor-section-full_width:has(.elementor-cta) > .elementor-container{
  max-width:1200px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:24px !important;
  padding-right:24px !important;
  box-sizing:border-box !important;
}

/* the mm-* template heroes (services / about / contact) use .mm-wrap instead */
.mm-hero .mm-wrap,
.mm-about .mm-hero .mm-wrap,
.mm-services-page .mm-hero .mm-wrap,
.mm-contact .mm-hero .mm-wrap{
  max-width:1200px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:24px !important;
  padding-right:24px !important;
  box-sizing:border-box !important;
}

/* tablets and phones: keep the same gutter, drop the cap */
@media(max-width:1247px){
  section.elementor-section-full_width:has(.elementor-cta__content) > .elementor-container,
  section.elementor-section-full_width:has(.elementor-cta) > .elementor-container{
    max-width:100% !important;
    padding-left:20px !important;
    padding-right:20px !important;
  }
  .mm-hero .mm-wrap,
  .mm-about .mm-hero .mm-wrap,
  .mm-services-page .mm-hero .mm-wrap,
  .mm-contact .mm-hero .mm-wrap{
    max-width:100% !important;
    padding-left:20px !important;
    padding-right:20px !important;
  }
}
@media(max-width:767px){
  /* HERO ON PHONES: the container keeps its 16px gutter so the TEXT has a margin,
     but the photo column must run full bleed. Padding the container narrowed the
     hero photo to 343px on a 375px viewport.
     Greg, 21 Oct 2026: the hero image must be full width on mobile. */
  .mm-hero .mm-wrap,
  .mm-about .mm-hero .mm-wrap,
  .mm-services-page .mm-hero .mm-wrap,
  .mm-contact .mm-hero .mm-wrap{
    padding-left:16px !important;
    padding-right:16px !important;
  }
  /* the elementor hero: kill the container gutter so the PHOTO runs full bleed.
     Written at maximum specificity because the shared 16px rule above uses the
     same !important and an identical selector, and lost the tie. */
  section.elementor-section.elementor-section-full_width:has(.elementor-cta__content) > .elementor-container.elementor-container,
  section.elementor-section.elementor-section-full_width:has(.elementor-cta) > .elementor-container.elementor-container,
  .elementor-317 section.elementor-section-full_width:has(.elementor-cta__content) > .elementor-container,
  .elementor-317 section.elementor-section-full_width:has(.elementor-cta) > .elementor-container{
    padding-left:0 !important;
    padding-right:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  section.elementor-section-full_width:has(.elementor-cta__content) > .elementor-container > .elementor-column:not(.elementor-col-100),
  section.elementor-section-full_width:has(.elementor-cta) > .elementor-container > .elementor-column:not(.elementor-col-100){
    padding-left:16px !important;
    padding-right:16px !important;
  }
  /* THE PHOTO COLUMN RUNS FULL BLEED — structural, not per-page.
     There are 33 different hero photo columns across the site (738091c8 on the
     home/LPs, 3b135c14 on areas-we-cover, 4addf0a9 on area pages, ...), so keying
     off an ID cannot work. Instead: ANY column at 66% inside a full-width hero
     loses its gutter, because that column is always the photo half. */
  /* target by CLASS, not by a direct-child path: some pages wrap the container
     with elementor-column-gap-no and the strict path missed them entirely. */
  section.elementor-section-full_width .elementor-column.elementor-col-66,
  section.elementor-section-full_width .elementor-column.elementor-col-33:last-child{
    padding-left:0 !important;
    padding-right:0 !important;
  }
  /* and the widget-wrap inside it, which carries Elementor's 10px column gap */
  section.elementor-section-full_width .elementor-column.elementor-col-66 > .elementor-widget-wrap,
  section.elementor-section-full_width .elementor-column.elementor-col-33:last-child > .elementor-widget-wrap{
    padding-left:0 !important;
    padding-right:0 !important;
    background-position:center center !important;
  }
  /* the TEXT half keeps its margin so copy never touches the screen edge */
  section.elementor-section-full_width .elementor-column.elementor-col-33:first-child > .elementor-widget-wrap{
    padding-left:16px !important;
    padding-right:16px !important;
  }
}

/* The homepage hero section carries its own `padding-left:144px`/`padding-right:144px`
   (a per-page Elementor setting). With the shared 1200px container centred inside
   that reduced 1152px track, home's content landed at x=218 while every other hero
   sat at x=146 — a 72px discrepancy. Zeroing the section padding lets the shared
   container centre in the full 1440px width, matching the rest of the site. */
section.elementor-section-full_width:has(.elementor-cta__content),
section.elementor-section-full_width:has(.elementor-cta){
  padding-left:0 !important;
  padding-right:0 !important;
}

/* Area and service pages carry Elementor's default 10px column gap on the
   widget-wrap holding the hero CTA, so their white box started at x=156 while
   home/areas-we-cover/hero templates sat at 144. Zeroing that gap on the FIRST
   column of a hero section aligns the box to the same content edge. */
section.elementor-section-full_width:has(.elementor-cta__content) .elementor-column:first-child > .elementor-widget-wrap,
section.elementor-section-full_width:has(.elementor-cta) .elementor-column:first-child > .elementor-widget-wrap{
  padding-left:0 !important;
}

/* ==========================================================================
   COMBO-PAGE HEROES — same content edge as the rest of the site
   The 30 area x service combo pages were generated by six different scripts and
   each one laid out its hero differently. Measured at 1440px, the H1 started at
   20, 24, 0, 344 and 340px. Normalising all of them to one 1200px container with
   a 24px gutter => content edge at 144px, identical to the Elementor heroes and
   to the mm-* template heroes.
   Covers every variant found: `section.mm-hero`, `section.hero`, and heroes
   wrapped in `.page-content` / `.container`.
   ========================================================================== */
section.mm-hero,
section.hero{
  padding-left:0 !important;
  padding-right:0 !important;
}
section.mm-hero > *,
section.hero > *{
  max-width:1200px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:24px !important;
  padding-right:24px !important;
  box-sizing:border-box !important;
}
/* the puerto-banus / san-pedro variant wraps everything in a capped column */
section.hero .page-content,
section.hero .container,
section.mm-hero .container{
  max-width:1200px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:24px !important;
  padding-right:24px !important;
  box-sizing:border-box !important;
}
section.hero .page-content > *,
section.hero .container > *{
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

@media(max-width:1247px){
  section.mm-hero > *, section.hero > *,
  section.mm-hero .container, section.hero .container,
  section.hero .page-content{
    max-width:100% !important;
    padding-left:20px !important;
    padding-right:20px !important;
  }
}
@media(max-width:767px){
  section.mm-hero > *, section.hero > *,
  section.mm-hero .container, section.hero .container,
  section.hero .page-content{
    padding-left:16px !important;
    padding-right:16px !important;
  }
}

/* Final combo variants:
   - puerto-banus has NO hero section wrapper; `.page-content` sits straight in
     <main> and is capped at 800px, putting its H1 at x=344.
   - la-cala-de-mijas uses a bare <center> element, H1 at x=8.
   Both are brought onto the same 1200px / 24px-gutter track as everything else. */
main > .page-content{
  max-width:1200px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:24px !important;
  padding-right:24px !important;
  box-sizing:border-box !important;
}
main > center{
  display:block !important;
  max-width:1200px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:24px !important;
  padding-right:24px !important;
  box-sizing:border-box !important;
  text-align:left !important;
}
/* an H1 must never inherit a stray centred/zero-padded container */
main > center > h1,
main > .page-content > h1{
  margin-left:0 !important;
  margin-right:0 !important;
}
@media(max-width:1247px){
  main > .page-content,
  main > center{max-width:100% !important;padding-left:20px !important;padding-right:20px !important;}
}
@media(max-width:767px){
  main > .page-content,
  main > center{padding-left:16px !important;padding-right:16px !important;}
}

/* ==========================================================================
   COMBO-PAGE INTERNAL LINKS (Greg, 2026-10-20)
   The 30 area x service pages had almost no internal links: Fuengirola
   regular-domestic linked to ONE sibling page. These blocks add a proper silo:
   the 4 sibling services in the same town, the same service in neighbouring
   towns, and the hub pages. Built as real <ul> lists so the anchor text is
   descriptive ("Deep Cleaning in Marbella"), not "click here".
   ========================================================================== */
.mm-related{
  max-width:1200px;
  margin:0 auto;
  padding:48px 24px 8px;
  box-sizing:border-box;
}
.mm-related h2{
  font-family:'Bebas Neue',Impact,sans-serif;
  font-size:var(--mm-h3);
  font-weight:500;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:#000;
  margin:0 0 12px;
  line-height:1.15;
}
.mm-related h2 + .mm-related-list{margin-bottom:26px;}
.mm-related-list{
  list-style:none;
  margin:0 0 8px;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:10px 28px;
}
.mm-related-list li{
  font-family:'Roboto',Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  color:#333;
}
.mm-related-list li a{
  color:#065780;
  text-decoration:none;
  border-bottom:1px solid rgba(6,87,120,.25);
}
.mm-related-list li a:hover{color:#000;border-bottom-color:#000;}
@media(max-width:767px){
  .mm-related{padding:32px 16px 8px;}
  .mm-related h2{font-size:var(--mm-h3-m);}
  .mm-related-list{grid-template-columns:1fr;gap:8px;}
}

/* ==========================================================================
   COMBO-PAGE HERO — ONE canonical design (Greg, 2026-10-20)
   The 30 area x service pages were generated by six different scripts and each
   laid out its hero differently. Measured at 1440px, the H1 sat at x=20, 24, 0,
   344 and 340; heights ranged 176px to 80vh; and Fuengirola's hero was
   TRANSPARENT with no image at all — the local beach photo it already owned
   sat below it as a plain <img>.
   This replaces all of that with one design that matches the rest of the site:
   the area's real photo behind a dark scrim, H1 + intro + CTA centred in a
   1200px track, one height, one type scale.
   The area photo is chosen per page from `data-area` — every one of these pages
   is about a specific town, so the hero now shows that town.
   ========================================================================== */
.mm-combo-hero{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  padding:0 !important;
  min-height:52vh !important;
  height:auto !important;
  background-color:#111111 !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
  box-sizing:border-box !important;
}
/* the scrim: a pseudo-element so the photo is never washed out by the colour */
.mm-combo-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.62));
  z-index:0;
  pointer-events:none;
}
.mm-combo-hero > *{
  position:relative !important;
  z-index:1 !important;
  max-width:760px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:24px !important;
  padding-right:24px !important;
  box-sizing:border-box !important;
}
.mm-combo-hero h1,
.mm-combo-hero p,
.mm-combo-hero h2{
  color:#ffffff !important;
  text-shadow:0 2px 12px rgba(0,0,0,.55) !important;
  text-align:center !important;
}
.mm-combo-hero h1{
  font-family:'Bebas Neue',Impact,sans-serif !important;
  font-size:var(--mm-h1) !important;
  font-weight:500 !important;
  letter-spacing:1.5px !important;
  text-transform:uppercase !important;
  line-height:1.05 !important;
  margin:0 0 16px !important;
}
.mm-combo-hero p{
  font-family:'Roboto',Arial,sans-serif !important;
  font-size:18px !important;
  font-weight:300 !important;
  line-height:1.6 !important;
  letter-spacing:0 !important;
  margin:0 0 26px !important;
}
.mm-combo-hero .seo-book-now,
.mm-combo-hero .cta,
.mm-combo-hero a[class*="btn"]{
  display:inline-block !important;
  background:#D8DFD7 !important;
  color:#000000 !important;
  border:2px solid #D8DFD7 !important;
  border-radius:0 !important;
  font-family:'Bebas Neue',Impact,sans-serif !important;
  font-size:22px !important;
  font-weight:500 !important;
  letter-spacing:1px !important;
  text-transform:uppercase !important;
  padding:15px 40px !important;
  text-decoration:none !important;
  text-shadow:none !important;
  margin:0 !important;
}
.mm-combo-hero .seo-book-now:hover,
.mm-combo-hero .cta:hover,
.mm-combo-hero a[class*="btn"]:hover{
  background:#ffffff !important;
  border-color:#ffffff !important;
  color:#000000 !important;
}

/* per-town photo ------------------------------------------------ */
.mm-combo-hero[data-area="marbella"]                {background-image:url("../img/area-marbella.jpg") !important;}
.mm-combo-hero[data-area="estepona"]                {background-image:url("../img/area-estepona.jpg") !important;}
.mm-combo-hero[data-area="fuengirola"]              {background-image:url("../img/area-fuengirola.jpg") !important;}
.mm-combo-hero[data-area="benalmadena"]             {background-image:url("../img/area-benalmadena.jpg") !important;}
.mm-combo-hero[data-area="san-pedro-de-alcantara"]  {background-image:url("../img/area-san-pedro-de-alcantara.jpg") !important;}
.mm-combo-hero[data-area="puerto-banus"]            {background-image:url("../img/area-puerto-banus.jpg") !important;}

@media(max-width:767px){
  .mm-combo-hero{min-height:42vh !important;}
  .mm-combo-hero > *{padding-left:16px !important;padding-right:16px !important;}
  .mm-combo-hero h1{font-size:var(--mm-h1-m) !important;margin-bottom:12px !important;}
  .mm-combo-hero p{font-size:16px !important;margin-bottom:20px !important;}
  .mm-combo-hero .seo-book-now,
  .mm-combo-hero .cta,
  .mm-combo-hero a[class*="btn"]{font-size:18px !important;padding:13px 28px !important;}
}

/* ==========================================================================
   COMBO-PAGE BODY — one content track, one rhythm (Greg, 2026-10-20)
   Measured on /fuengirola/regular-domestic-cleaning/ before this block:
     .intro           padding 0, width 1440  (text edge to edge)
     .service-details padding 0, width 1440
     .area-details    padding 0, width 1440
     .faq             padding 0, width 1440
     .bottom-cta      padding 0, width 1440
   Every body section ran the full viewport width with no container and no
   vertical spacing, so the page read as one wall of 1440px-wide text while the
   header, footer and the related-links block all sat on a 1200px track.
   This puts every body section on the SAME 1200px track with the SAME gutter
   and the SAME vertical rhythm as the rest of the site.
   ========================================================================== */

/* one track for every body section on the combo pages --------------- */
main > section.intro,
main > section.service-details,
main > section.area-details,
main > section.faq,
main > section.bottom-cta,
main section.intro,
main section.service-details,
main section.area-details,
main section.faq,
main section.bottom-cta{
  max-width:1200px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:24px !important;
  padding-right:24px !important;
  box-sizing:border-box !important;
}

/* inner .container must not add a second gutter */
main section.intro > .container,
main section.service-details > .container,
main section.area-details > .container,
main section.faq > .container,
main section.bottom-cta > .container,
main section.intro > div,
main section.service-details > div,
main section.area-details > div,
main section.faq > div,
main section.bottom-cta > div{
  max-width:100% !important;
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

/* vertical rhythm: one gap between body sections -------------------- */
main > section.intro,
main > section.service-details,
main > section.area-details,
main > section.faq{
  margin-top:var(--mm-gap-section) !important;
  margin-bottom:0 !important;
}
main > section.intro{ margin-top:56px !important; }

/* readable measure for long copy */
main section.intro p,
main section.service-details p,
main section.area-details p,
main section.faq p{
  max-width:74ch !important;
}
main section.service-details h2,
main section.service-details h3,
main section.area-details h2,
main section.faq h2,
main section.intro h2{
  margin-top:34px !important;
  margin-bottom:10px !important;
}
main section.intro h2:first-child,
main section.service-details h2:first-of-type,
main section.area-details h2:first-of-type,
main section.faq h2:first-of-type{
  margin-top:0 !important;
}
main section.intro p,
main section.service-details p,
main section.area-details p,
main section.faq p{
  margin:0 0 14px !important;
}
main section.service-details ul,
main section.service-details ol,
main section.area-details ul,
main section.faq ul{
  margin:0 0 16px !important;
  padding-left:22px !important;
  max-width:74ch !important;
}
main section.service-details li,
main section.area-details li,
main section.faq li{
  margin:0 0 8px !important;
}

/* FAQ reads as a list of real questions, not body copy */
main section.faq h3{
  margin-top:20px !important;
  margin-bottom:6px !important;
}

/* the closing CTA band: centred, on the same track ------------------ */
main > section.bottom-cta{
  margin-top:52px !important;
  margin-bottom:56px !important;
  text-align:center !important;
}
main > section.bottom-cta h2{
  margin:0 0 18px !important;
}

@media(max-width:767px){
  main > section.intro,
  main > section.service-details,
  main > section.area-details,
  main > section.faq,
  main > section.bottom-cta{
    padding-left:16px !important;
    padding-right:16px !important;
  }
  main > section.intro,
  main > section.service-details,
  main > section.area-details,
  main > section.faq{
    margin-top:var(--mm-gap-section-m) !important;
  }
  main > section.intro{margin-top:32px !important;}
  main section.service-details h2,
  main section.service-details h3,
  main section.area-details h2,
  main section.faq h2{margin-top:26px !important;}
}

/* ==========================================================================
   COMBO-PAGE FAQ + BODY PHOTOGRAPHY
   The FAQ markup is native <details>/<summary>, which browsers render with a
   bare triangle and no spacing — that is what looked unfinished. Styled here as
   bordered accordion rows on the same 1200px track.
   Also: these pages had ZERO imagery below the hero. `.mm-body-photo` is the
   hook for the area photograph in the intro (see the markup pass).
   ========================================================================== */
main section.faq details{
  border-top:1px solid #D8DFD7 !important;
  padding:16px 0 !important;
  max-width:80ch !important;
}
main section.faq details:last-of-type{border-bottom:1px solid #D8DFD7 !important;}
main section.faq summary{
  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.25 !important;
  color:#000000 !important;
  cursor:pointer !important;
  list-style:none !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:flex-start !important;
  gap:16px !important;
  padding-right:4px !important;
}
main section.faq summary::-webkit-details-marker{display:none !important;}
main section.faq summary::after{
  content:"+";
  font-family:'Roboto',Arial,sans-serif;
  font-size:22px;
  line-height:1;
  color:#065780;
  flex:0 0 auto;
}
main section.faq details[open] summary::after{content:"\2013";}
main section.faq details p{
  font-family:'Roboto',Arial,sans-serif !important;
  font-size:16px !important;
  font-weight:300 !important;
  line-height:1.7 !important;
  color:#333333 !important;
  margin:12px 0 0 !important;
  max-width:70ch !important;
}

/* body photograph in the intro: a wide 16:9 band on the same track */
.mm-body-photo{
  max-width:1200px !important;
  margin:0 auto 40px !important;
  padding:0 24px !important;
  box-sizing:border-box !important;
}
.mm-body-photo img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:16/9 !important;
  object-fit:cover !important;
  border-radius:4px !important;
}
@media(max-width:767px){
  .mm-body-photo{padding:0 16px !important;margin-bottom:28px !important;}
  main section.faq summary{font-size:18px !important;}
  main section.faq details{padding:14px 0 !important;}
}

/* ==========================================================================
   COMBO BODY — correction (Greg, 2026-10-20, second pass)
   Greg's words: the body photo "is a huge picture underneath the hero which
   completely ruins the whole look and design", and "the positioning of the
   text is completely out of scale".
   What was wrong:
     1. The photo rendered 1152x648 (16:9 at full track width) — a monster that
        pushed all real content below the fold.
     2. Body copy sat in a 657px column with nothing beside it, so the page was
        a skinny ribbon of text floating in a 1200px track. No hierarchy.
   Fix: the photo becomes a proper inset figure (max 380px tall, 16:6 band) and
   the body copy flows in TWO columns on desktop, the same way the About page
   does. One column on mobile.
   ========================================================================== */

/* 1. the photo: an inset band, not a wall ---------------------------- */
.mm-body-photo{
  max-width:1200px !important;
  margin:40px auto 44px !important;
  padding:0 24px !important;
  box-sizing:border-box !important;
}
.mm-body-photo img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-height:340px !important;
  aspect-ratio:auto !important;
  object-fit:cover !important;
  object-position:center 55% !important;
  border-radius:4px !important;
}

/* 2. body copy: two columns on desktop, real measure ---------------- */
main section.intro > .container,
main section.service-details > .container,
main section.area-details > .container{
  display:block !important;
}
main section.intro p,
main section.service-details p,
main section.area-details p{
  max-width:none !important;
}
/* a readable two-column flow without touching the markup */
main section.intro .container,
main section.service-details .container,
main section.area-details .container{
  columns:2;
  column-gap:56px;
  column-rule:0;
}
/* headings must NOT split across columns */
main section.intro h2,
main section.service-details h2,
main section.service-details h3,
main section.area-details h2{
  column-span:all;
  break-after:avoid;
  break-inside:avoid;
  margin-top:34px !important;
}
main section.intro h2:first-child,
main section.service-details h2:first-of-type,
main section.area-details h2:first-of-type{margin-top:0 !important;}
main section.intro p,
main section.service-details p,
main section.area-details p{
  break-inside:avoid;
  margin:0 0 16px !important;
}
main section.service-details ul,
main section.service-details ol,
main section.area-details ul{
  break-inside:avoid;
  margin:0 0 18px !important;
  padding-left:22px !important;
  max-width:none !important;
}

@media(max-width:1023px){
  main section.intro .container,
  main section.service-details .container,
  main section.area-details .container{columns:1;}
  .mm-body-photo img{max-height:300px !important;}
}
@media(max-width:767px){
  .mm-body-photo{margin:28px auto 30px !important;padding:0 16px !important;}
  .mm-body-photo img{max-height:220px !important;}
}

/* ==========================================================================
   COMBO BODY — third pass, after full section audit (Greg, 2026-10-20)
   The audit found the REAL cause of the "everything is messed up" look:
     index 2 in <main> was an <img> 1080px tall — the ORIGINAL area photo,
     still in the markup as a second copy. My new .mm-body-photo duplicated it
     instead of replacing it. Two full-width beach photos stacked, one of them
     1080px, is what buried the page. The duplicate is now REMOVED from all 30
     pages, so only the controlled .mm-body-photo band remains.
   Hero was measuring 520px, not the 468 I verified earlier, because the extra
   image stretched the flow. Now that it is gone the hero is pinned exactly.
   Also: the trailing Google-map iframe was 600px wide on a 1200px track.
   ========================================================================== */

/* hero: pin both breakpoints exactly, no drift from surrounding flow */
.mm-combo-hero{
  min-height:468px !important;
  height:468px !important;
}
@media(max-width:1023px){
  .mm-combo-hero{min-height:420px !important;height:420px !important;}
}
@media(max-width:767px){
  .mm-combo-hero{min-height:360px !important;height:360px !important;}
}

/* the map iframe: centre it on the track and stop it looking orphaned */
main > iframe{
  display:block !important;
  width:100% !important;
  max-width:1000px !important;
  height:380px !important;
  margin:48px auto 56px !important;
  border:0 !important;
  border-radius:4px !important;
}

/* the body photo now the ONLY image after the hero: give it presence but keep
   it a band, never a wall */
.mm-body-photo{margin:44px auto 48px !important;}
.mm-body-photo img{max-height:340px !important;}

/* tighten the gap between hero and the first body block */
main > section.intro{margin-top:44px !important;}

/* the related-links block sits immediately under the FAQ — reduce its top pad
   so it does not read as a separate page */
.mm-related{padding-top:8px !important;}

/* ==========================================================================
   COMBO BODY — fourth pass: ALIGNMENT (Greg, 2026-10-20)
   The audit exposed that every body paragraph was rendering `text-align:center`.
   Cause: an old inline rule shipped in these pages
     div[data-elementor-type="wp-page"] ... , main h1, main h2, main h3, main p
     { text-align:center }
   which centres ALL <p> inside <main> — including body copy and FAQ answers.
   Centred paragraphs are unreadable past two lines and are what made the type
   look "out of scale". Long copy must be left-aligned; only the hero and the
   closing CTA stay centred.
   ========================================================================== */
main section.intro p,
main section.intro li,
main section.service-details p,
main section.service-details li,
main section.area-details p,
main section.area-details li,
main section.faq p,
main section.faq li,
main section.faq summary,
main section.intro h2,
main section.service-details h2,
main section.service-details h3,
main section.area-details h2,
main section.faq h2{
  text-align:left !important;
}

/* only these two stay centred */
main section.bottom-cta,
main section.bottom-cta h2,
main section.bottom-cta p{text-align:center !important;}

/* FAQ answers sit under their question, indented to the summary text */
main section.faq details p{padding-left:0 !important;}

/* the map iframe was 600px on a 1200px track — centre it at full width */
main > iframe{
  display:block !important;
  width:100% !important;
  max-width:1200px !important;
  height:400px !important;
  margin:44px auto 56px !important;
  border:0 !important;
  border-radius:4px !important;
  box-sizing:border-box !important;
}

/* the map iframe: it carries width="600" as an HTML attribute, which beats CSS
   width unless we override both. Now full track width, centred. */
main > iframe.mm-map,
iframe.mm-map{
  display:block !important;
  width:100% !important;
  max-width:1200px !important;
  height:400px !important;
  margin:44px auto 56px !important;
  border:0 !important;
  border-radius:4px !important;
  box-sizing:border-box !important;
}

/* ==========================================================================
   COMBO BODY — FIFTH PASS: adopt the HOMEPAGE design language
   Greg: "compare it with the rest of the website design. Use the homepage as a
   guide… it's completely not following any design principles we have."
   He is right, and here is the measured proof. The HOMEPAGE does this:
     - statement bands  : centred heading + centred copy, ~760px measure
     - content sections : SINGLE column, LEFT aligned, ~1120px measure
     - generous vertical rhythm, nothing in two columns
   My combo pages were doing a two-column newspaper flow at 548px per column,
   which exists nowhere else on the site. That is the design breach.
   This pass removes the columns and adopts the homepage's two modes:
   a left-aligned single column at 1120px, and centred statement bands at 760px.
   ========================================================================== */

/* 1. drop the two-column flow entirely ------------------------------- */
main section.intro .container,
main section.service-details .container,
main section.area-details .container{
  columns:auto !important;
  column-count:auto !important;
  column-gap:normal !important;
  display:block !important;
}

/* 2. content sections: single column, left, homepage measure -------- */
main section.service-details,
main section.area-details{
  max-width:1120px !important;
}
main section.service-details p,
main section.service-details li,
main section.area-details p,
main section.area-details li,
main section.service-details ul,
main section.service-details ol,
main section.area-details ul{
  max-width:100% !important;
  text-align:left !important;
}

/* 3. statement band (.intro): centred, 760px, like the homepage ----- */
main section.intro{
  max-width:760px !important;
  text-align:center !important;
}
main section.intro h2,
main section.intro p{
  text-align:center !important;
  max-width:100% !important;
}

/* 4. FAQ: left aligned list, homepage measure ----------------------- */
main section.faq{
  max-width:1120px !important;
}
main section.faq h2{text-align:left !important;}
main section.faq details{max-width:100% !important;}

/* 5. one consistent vertical rhythm, matching the homepage's air ---- */
main section.intro{margin-top:64px !important;margin-bottom:8px !important;}
main section.service-details{margin-top:72px !important;}
main section.area-details{margin-top:72px !important;}
main section.faq{margin-top:72px !important;}
main section.bottom-cta{margin-top:72px !important;margin-bottom:64px !important;}

/* 6. headings: one size for body section titles (homepage uses the
   same weight/tracking throughout; only the hero is bigger) --------- */
main section.intro h2,
main section.service-details h2,
main section.service-details h3,
main section.area-details h2,
main section.faq h2{
  font-family:'Bebas Neue',Impact,sans-serif !important;
  font-size:32px !important;
  font-weight:500 !important;
  letter-spacing:1.2px !important;
  text-transform:uppercase !important;
  line-height:1.15 !important;
  color:#000000 !important;
  margin:0 0 12px !important;
}
main section.service-details h3{
  font-size:26px !important;
  letter-spacing:1px !important;
  margin-top:30px !important;
}
main section.intro h2{margin-bottom:16px !important;}

/* 7. body copy: homepage measure and colour ------------------------- */
main section.intro p,
main section.service-details p,
main section.service-details li,
main section.area-details p,
main section.area-details li,
main section.faq p{
  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;
  margin:0 0 16px !important;
}

/* 8. the body photo: full content width, a clean band --------------- */
.mm-body-photo{
  max-width:1120px !important;
  margin:36px auto 0 !important;
  padding:0 24px !important;
}
.mm-body-photo img{
  max-height:380px !important;
  border-radius:4px !important;
}

/* 9. related links block: same measure and rhythm as the rest ------ */
.mm-related{
  max-width:1120px !important;
  padding:64px 24px 0 !important;
  margin:0 auto !important;
}
.mm-related h2{font-size:26px !important;letter-spacing:1px !important;}

/* 10. map: same measure --------------------------------------------- */
main > iframe.mm-map{
  max-width:1120px !important;
  margin:56px auto 64px !important;
}

@media(max-width:1200px){
  main section.service-details,
  main section.area-details,
  main section.faq,
  .mm-body-photo,
  .mm-related,
  main > iframe.mm-map{max-width:100% !important;}
  main section.intro{max-width:100% !important;padding-left:24px !important;padding-right:24px !important;}
}
@media(max-width:767px){
  main section.intro h2,
  main section.service-details h2,
  main section.area-details h2,
  main section.faq h2{font-size:26px !important;}
  main section.service-details h3{font-size:22px !important;}
  main section.intro{margin-top:40px !important;}
  main section.service-details,
  main section.area-details,
  main section.faq{margin-top:48px !important;}
  .mm-body-photo{margin-top:28px !important;padding:0 16px !important;}
  .mm-body-photo img{max-height:240px !important;}
  .mm-related{padding:44px 16px 0 !important;}
  main > iframe.mm-map{margin:36px auto 44px !important;height:300px !important;}
}

/* ==========================================================================
   COMBO BODY — SIXTH PASS: handle the OTHER TWO markup shapes
   There are three different body structures across the 30 pages:
     A) Fuengirola / Benalmádena / Marbella  -> <section class="intro|service-details|
        area-details|faq|bottom-cta">   (handled in the fifth pass)
     B) Estepona (5 pages)                  -> ONE <div class="mm-wrap"> holding
        every h2 and paragraph
     C) San Pedro / Puerto Banús (10 pages) -> bare <section> tags
   B and C were getting no styling at all, which is why they still looked wrong.
   These rules give them the same homepage language: single left column at
   1120px, 32px Bebas headings, Roboto 16/300 body, one rhythm.
   ========================================================================== */

/* --- B: the .mm-wrap body (Estepona) ------------------------------- */
main > .mm-wrap,
main .mm-wrap{
  max-width:1120px !important;
  margin:64px auto 0 !important;
  padding:0 24px !important;
  box-sizing:border-box !important;
}
main .mm-wrap h2{
  font-family:'Bebas Neue',Impact,sans-serif !important;
  font-size:32px !important;
  font-weight:500 !important;
  letter-spacing:1.2px !important;
  text-transform:uppercase !important;
  line-height:1.15 !important;
  color:#000000 !important;
  margin:34px 0 12px !important;
  text-align:left !important;
}
main .mm-wrap h2:first-child{margin-top:0 !important;}
main .mm-wrap p,
main .mm-wrap 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:#333333 !important;
  margin:0 0 16px !important;
  text-align:left !important;
}
main .mm-wrap ul,
main .mm-wrap ol{margin:0 0 18px !important;padding-left:22px !important;}
main .mm-wrap li{margin:0 0 8px !important;}
main .mm-wrap h3{
  font-family:'Bebas Neue',Impact,sans-serif !important;
  font-size:26px !important;font-weight:500 !important;
  letter-spacing:1px !important;text-transform:uppercase !important;
  color:#000 !important;margin:28px 0 10px !important;text-align:left !important;
}

/* --- C: bare <section> bodies (San Pedro / Puerto Banús) ----------- */
main > section:not([class]),
main > section[class=""]{
  max-width:1120px !important;
  margin:48px auto 0 !important;
  padding:0 24px !important;
  box-sizing:border-box !important;
}
main > section:not([class]) h1,
main > section:not([class]) h2,
main > section:not([class]) h3,
main > section[class=""] h2{
  font-family:'Bebas Neue',Impact,sans-serif !important;
  font-size:32px !important;font-weight:500 !important;
  letter-spacing:1.2px !important;text-transform:uppercase !important;
  line-height:1.15 !important;color:#000 !important;
  margin:32px 0 12px !important;text-align:left !important;
}
main > section:not([class]) h2:first-child,
main > section[class=""] h2:first-child{margin-top:0 !important;}
main > section:not([class]) p,
main > section:not([class]) li,
main > section[class=""] p{
  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:#333 !important;margin:0 0 16px !important;text-align:left !important;
}
main > section:not([class]) ul,
main > section:not([class]) ol{margin:0 0 18px !important;padding-left:22px !important;}
main > section:not([class]) li{margin:0 0 8px !important;}

/* --- the closing CTA on the bare-section pages --------------------- */
main > section.mm-cta,
main section.mm-cta{
  max-width:1120px !important;
  margin:72px auto 64px !important;
  padding:0 24px !important;
  text-align:center !important;
}
main section.mm-cta h2{
  font-family:'Bebas Neue',Impact,sans-serif !important;
  font-size:32px !important;font-weight:500 !important;
  letter-spacing:1.2px !important;text-transform:uppercase !important;
  color:#000 !important;margin:0 0 18px !important;text-align:center !important;
}

@media(max-width:767px){
  main > .mm-wrap,
  main .mm-wrap,
  main > section:not([class]),
  main section.mm-cta{
    margin-top:40px !important;padding:0 16px !important;max-width:100% !important;
  }
  main .mm-wrap h2,
  main > section:not([class]) h2,
  main section.mm-cta h2{font-size:26px !important;}
  main .mm-wrap h3,
  main > section:not([class]) h3{font-size:22px !important;}
}

/* ==========================================================================
   COMBO BODY — SEVENTH PASS: the last two inconsistencies
   1. `.intro` paragraphs were still centred on some pages. `.intro` is a
      STATEMENT band on the homepage (centred, 760px) but on these combo pages it
      holds a full town paragraph — a long read that must be LEFT aligned. The
      intro is therefore moved to the content measure, not the statement measure.
   2. Hero body copy rendered 18px on some pages and 16px on others. The site's
      body size is 16px; the hero subtitle matches at 18px ONLY because it is a
      lead line. Pinning every hero subtitle to 18px removes the variance.
   ========================================================================== */

/* the combo intro is body content, not a statement band ---- */
main section.intro{
  max-width:1120px !important;
  text-align:left !important;
  margin-top:56px !important;
}
main section.intro h2,
main section.intro p{
  text-align:left !important;
  max-width:100% !important;
}
main section.intro h2{margin-bottom:12px !important;}

/* one hero subtitle size everywhere ---- */
.mm-combo-hero p{
  font-size:18px !important;
  line-height:1.6 !important;
  margin:0 0 26px !important;
}
@media(max-width:767px){
  .mm-combo-hero p{font-size:16px !important;margin-bottom:20px !important;}
  main section.intro{margin-top:40px !important;max-width:100% !important;}
}

/* ==========================================================================
   COMBO BODY — EIGHTH PASS: heading token convergence
   Two leftover sizes broke the single heading scale:
     - FAQ questions rendered 28px because they inherit --mm-h3, while every
       other body H3 on the site is 26px. Pinned to 26px.
     - The related-links block rendered 40px because it inherits --mm-h2 (the
       homepage SECTION token). Inside a combo page's body it must read as a
       sub-heading, so it takes 26px like the other list titles.
   Result: body headings are exactly two sizes, 32px (section) / 26px (sub),
   matching the homepage's own hierarchy.
   ========================================================================== */
main section.faq h3,
main .mm-wrap h3,
main > section:not([class]) h3{
  font-size:26px !important;
  letter-spacing:1px !important;
  font-weight:500 !important;
  font-family:'Bebas Neue',Impact,sans-serif !important;
  text-transform:uppercase !important;
  line-height:1.2 !important;
  color:#000000 !important;
  margin:26px 0 8px !important;
  text-align:left !important;
}
.mm-related h2,
.mm-related h2:first-child{
  font-size:26px !important;
  letter-spacing:1px !important;
  font-weight:500 !important;
  font-family:'Bebas Neue',Impact,sans-serif !important;
  text-transform:uppercase !important;
  line-height:1.2 !important;
  color:#000000 !important;
  margin:0 0 12px !important;
  text-align:left !important;
}
.mm-related h2 + .mm-related-list{margin-bottom:24px !important;}
@media(max-width:767px){
  main section.faq h3,
  main .mm-wrap h3,
  main > section:not([class]) h3,
  .mm-related h2{font-size:22px !important;}
}

/* ==========================================================================
   COMBO BODY — NINTH PASS: the FOURTH markup shape (.mm-content)
   Marbella's 5 combo pages use their own template:
     <div class="mm-content"> with <p class="mm-breadcrumb">, .mm-faq-q /
     .mm-faq-a pairs and no <section> wrappers at all.
   None of the previous passes could reach it, so those pages still rendered
   40px section headings and 28px FAQ questions.
   Also: `.mm-breadcrumb` inherits `text-align:start`, which my alignment audit
   counted as a violation. Breadcrumbs are a nav element, not body copy — they
   are excluded from the body-copy rules and styled on their own line.
   ========================================================================== */

/* --- the .mm-content body ------------------------------------------ */
main .mm-content{
  max-width:1120px !important;
  margin:56px auto 0 !important;
  padding:0 24px !important;
  box-sizing:border-box !important;
}
main .mm-content h2{
  font-family:'Bebas Neue',Impact,sans-serif !important;
  font-size:32px !important;
  font-weight:500 !important;
  letter-spacing:1.2px !important;
  text-transform:uppercase !important;
  line-height:1.15 !important;
  color:#000000 !important;
  margin:34px 0 12px !important;
  text-align:left !important;
}
main .mm-content h2:first-of-type{margin-top:0 !important;}
main .mm-content h3{
  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.2 !important;
  color:#000000 !important;
  margin:26px 0 8px !important;
  text-align:left !important;
}
main .mm-content p,
main .mm-content 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:#333333 !important;
  margin:0 0 16px !important;
  text-align:left !important;
}
main .mm-content ul,
main .mm-content ol{margin:0 0 18px !important;padding-left:22px !important;}

/* FAQ pairs, styled as the same accordion look */
main .mm-content .mm-faq-q{
  font-family:'Bebas Neue',Impact,sans-serif !important;
  font-size:22px !important;
  font-weight:500 !important;
  letter-spacing:1px !important;
  text-transform:uppercase !important;
  line-height:1.25 !important;
  color:#000000 !important;
  margin:22px 0 6px !important;
  padding-top:16px !important;
  border-top:1px solid #D8DFD7 !important;
  text-align:left !important;
}
main .mm-content .mm-faq-a{
  font-family:'Roboto',Arial,sans-serif !important;
  font-size:16px !important;
  font-weight:300 !important;
  line-height:1.7 !important;
  color:#333333 !important;
  margin:0 0 18px !important;
  text-align:left !important;
}

/* breadcrumb: its own quiet line, never part of body copy */
main .mm-breadcrumb,
main p.mm-breadcrumb{
  font-family:'Roboto',Arial,sans-serif !important;
  font-size:13px !important;
  font-weight:400 !important;
  line-height:1.5 !important;
  letter-spacing:.2px !important;
  color:#777777 !important;
  margin:0 0 20px !important;
  text-align:left !important;
}
main .mm-breadcrumb a{color:#065780 !important;text-decoration:none;}

/* --- .mm-related headings: force the sub-heading size -------------- */
.mm-related h2,
main .mm-related h2,
.mm-related .mm-related-list + h2{
  font-size:26px !important;
  letter-spacing:1px !important;
  font-weight:500 !important;
  font-family:'Bebas Neue',Impact,sans-serif !important;
  text-transform:uppercase !important;
  line-height:1.2 !important;
  color:#000000 !important;
  margin:26px 0 12px !important;
  text-align:left !important;
}
.mm-related h2:first-child{margin-top:0 !important;}

@media(max-width:767px){
  main .mm-content{margin-top:36px !important;padding:0 16px !important;max-width:100% !important;}
  main .mm-content h2{font-size:26px !important;}
  main .mm-content h3{font-size:22px !important;}
  main .mm-content .mm-faq-q{font-size:20px !important;}
  .mm-related h2{font-size:22px !important;}
}

/* The old "More from Marbella Maid" link block shipped with no useful class and
   was mistakenly caught by the CTA styles. It is redundant now that
   `.mm-related` provides a full silo, so it is hidden rather than restyled —
   its two links are already covered by the related block. */
main section.mm-legacy-links{display:none !important;}

/* ==========================================================================
   PHOTO HEROES — restore full-width image (Greg, 2026-10-21)
   The 20 Oct "one shared content edge" rule capped every CTA hero container at
   1200px. That aligned the CTA box, but it ALSO shrank the hero PHOTO column,
   so background-size:cover cropped the image hard on a wide monitor.
   Measured at 3440px: homepage photo 806px -> 2364px after the fix; area pages
   identical (806px, capped at 1200px).
   Fix: a hero whose section actually holds a background-image gets its
   container back to full width. Text-only heroes keep the 1200px edge, so the
   rest of yesterday's alignment work is untouched.
   ========================================================================== */
section.elementor-section-full_width:has(.elementor-cta__content):has([style*="background-image"]) > .elementor-container,
section.elementor-section-full_width:has(.elementor-cta):has([style*="background-image"]) > .elementor-container{
  max-width: none !important;
  width: 100% !important;
}

/* Area-page heroes: the photo lives on a widget-wrap styled by an inline
   <style> block in the page itself (area-*.jpg), not the Elementor kit, so the
   selector above cannot see it. These are the CTA heroes that also carry the
   page H1 and a large background photo — matched by the section that holds a
   call-to-action AND a heading. */
section.elementor-section-full_width:has(.elementor-cta__content) > .elementor-container{
  max-width: none !important;
  width: 100% !important;
}

/* ==========================================================================
   FINAL OVERRIDE — hero photo must run full bleed on phones.
   The shared rule above sets 16px on the hero column with :has() + !important,
   which outranks a plain class chain. This block repeats the same :has() shape
   so specificity matches, and comes later so it wins on order.
   Greg, 21 Oct 2026.
   ========================================================================== */
@media(max-width:767px){
  section.elementor-section-full_width:has(.elementor-cta__content) > .elementor-container > .elementor-column.elementor-col-66,
  section.elementor-section-full_width:has(.elementor-cta) > .elementor-container > .elementor-column.elementor-col-66,
  section.elementor-section-full_width:has(.elementor-cta__content) .elementor-column.elementor-col-66,
  section.elementor-section-full_width:has(.elementor-cta) .elementor-column.elementor-col-66,
  section.elementor-section-full_width:has(.elementor-cta__content) > .elementor-container > .elementor-column:last-child,
  section.elementor-section-full_width:has(.elementor-cta) > .elementor-container > .elementor-column:last-child{
    padding-left:0 !important;
    padding-right:0 !important;
  }
  section.elementor-section-full_width:has(.elementor-cta__content) > .elementor-container > .elementor-column.elementor-col-66 > .elementor-widget-wrap,
  section.elementor-section-full_width:has(.elementor-cta) > .elementor-container > .elementor-column.elementor-col-66 > .elementor-widget-wrap,
  section.elementor-section-full_width:has(.elementor-cta__content) .elementor-column.elementor-col-66 > .elementor-widget-wrap,
  section.elementor-section-full_width:has(.elementor-cta) .elementor-column.elementor-col-66 > .elementor-widget-wrap{
    padding-left:0 !important;
    padding-right:0 !important;
  }
  /* the text half keeps its gutter */
  section.elementor-section-full_width:has(.elementor-cta__content) > .elementor-container > .elementor-column:first-child:not(.elementor-col-66),
  section.elementor-section-full_width:has(.elementor-cta) > .elementor-container > .elementor-column:first-child:not(.elementor-col-66){
    padding-left:16px !important;
    padding-right:16px !important;
  }
}

/* --- Header phone number: a primary conversion element, not fine print ----
   The header phone is an .elementor-icon-box-title, so it inherited the h4
   scale (20px) while its phone icon renders at 30px. The icon dwarfed the
   number. Sized above the icon so the number leads. Header scoped only: the
   feature icon-boxes on the homepage body keep their own size. */
header .elementor-widget-icon-box .elementor-icon-box-title,
header .elementor-widget-icon-box .elementor-icon-box-title a,
body header .elementor-widget-icon-box .elementor-icon-box-title a{
  font-size:26px !important;
  line-height:1.1 !important;
}
@media(max-width:1024px){
  header .elementor-widget-icon-box .elementor-icon-box-title,
  header .elementor-widget-icon-box .elementor-icon-box-title a,
  body header .elementor-widget-icon-box .elementor-icon-box-title a{font-size:24px !important;}
}
@media(max-width:767px){
  header .elementor-widget-icon-box .elementor-icon-box-title,
  header .elementor-widget-icon-box .elementor-icon-box-title a,
  body header .elementor-widget-icon-box .elementor-icon-box-title a{font-size:20px !important;}
}

/* --- Inline CTA + lead sentence (2026-10-23) -----------------------------
   Two homepage faults Greg spotted:
   1. "Our professional and friendly staff are committed to getting the job
      done" was an <h2> at 40px in a 570px column — a whole sentence shouting,
      wrapping to 3 lines. It is a lead sentence, so it is set as one.
   2. The "Get in Touch / Ready for a clean home?" block was plain body copy
      with NO buttons, so the call to action did not read as one.
   The button style copies the site's own system measured off the live page:
   square corners (0px), 2px #000 border, uppercase, Bebas Neue, sage fill. */
.mm-lead-sentence{
  font-family:'Roboto',Arial,sans-serif !important;
  font-size:20px !important;
  font-weight:500 !important;
  line-height:1.55 !important;
  letter-spacing:0 !important;
  color:#000000 !important;
  margin:0 0 18px !important;
  max-width:34ch;
}
@media(max-width:767px){
  .mm-lead-sentence{font-size:18px !important;max-width:none;}
}

.mm-inline-cta{
  margin:34px 0 6px;
  padding:32px 36px;
  background:#D8DFD7;
  border-left:4px solid #000000;
  box-sizing:border-box;
}
.mm-inline-cta h3{
  margin:0 0 10px !important;
}
.mm-inline-cta__copy{
  max-width:62ch;
  margin:0 0 22px !important;
}
.mm-inline-cta__actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
}
.mm-cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  padding:16px 34px;
  background:#ffffff;
  color:#000000 !important;
  border:2px solid #000000;
  border-radius:0;
  font-family:'Bebas Neue',Impact,sans-serif !important;
  font-size:22px !important;
  font-weight:500 !important;
  letter-spacing:1px !important;
  line-height:1.1 !important;
  text-transform:uppercase;
  text-decoration:none !important;
  transition:background .2s, color .2s;
  cursor:pointer;
}
.mm-cta-btn:hover,
.mm-cta-btn:focus-visible{
  background:#000000;
  color:#ffffff !important;
  text-decoration:none !important;
}
.mm-cta-btn--primary{
  background:#000000;
  color:#ffffff !important;
}
.mm-cta-btn--primary:hover,
.mm-cta-btn--primary:focus-visible{
  background:#333333;
  border-color:#333333;
  color:#ffffff !important;
}
@media(max-width:767px){
  .mm-inline-cta{padding:24px 20px;margin-top:26px;}
  .mm-inline-cta__actions{flex-direction:column;align-items:stretch;}
  .mm-cta-btn{width:100%;}
}

/* --- Mobile spacing above "Services We Provide" (2026-10-23) --------------
   Greg on his iPhone: "it still has a huge gap above it on the mobile".
   Measured at 390: the section carries margin-top 52px AND the inner
   .elementor-widget-wrap carries its own margin-top 50px on top, so the
   heading sat 102px below the paragraph above it — double the page's own
   52px rhythm, above a heading only 28px tall. One gap gets one rhythm:
   the inner 50px is dropped on mobile so the gap is a single 52px.
   Desktop keeps its existing spacing (Greg approved that earlier). */
@media(max-width:767px){
  .elementor-element-60164f3f > .elementor-widget-wrap,
  .elementor-element-60164f3f > .elementor-widget-wrap.elementor-element-populated{
    margin-top:0 !important;
  }
}