/* ==========================================================================
   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{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:9998;
  display:flex;
  flex-direction:column;
  /* opaque backstop so nothing can ever shine through between sections */
  background:var(--mm-stack-bg);
  border-top:0;
}

/* --- 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;
}