/* ════════════════════════════════════════════════════════════════════
   MASTERFLOW PLUMBING — single-page site
   24/7 plumbers · Cape Town · blue water system · droplet + wave motif
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --mf-ink:      #0A2240;   /* deepest navy — body text on light */
  --mf-navy:     #0C3A6E;   /* deep brand navy — dark sections, headings */
  --mf-navy-2:   #0A2E57;   /* darker navy for gradients */
  --mf-blue:     #1573CC;   /* primary water blue — accents, links, motif */
  --mf-blue-deep:#0E5BA8;   /* button bg / hover (white passes AA) */
  --mf-sky:      #58C5EE;   /* bright sky highlight — accents, droplet */
  --mf-ice:      #F2F7FB;   /* paper / page background */
  --mf-ice-2:    #E7EFF6;   /* secondary paper */
  --mf-line:     rgba(12,58,110,.12);
  --mf-wa:       #25D366;

  --display-font:'Sora', Arial, sans-serif;
  --body-font:   'Inter', system-ui, sans-serif;
  --mf-ease:     cubic-bezier(.25,.46,.45,.94);

  --mf-maxw:1200px; --mf-radius:14px;
  --sp-section: clamp(4rem,9vw,7rem);
  --mf-shadow: 0 20px 54px -26px rgba(10,34,64,.5);
}

/* ── Reset / base ──────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; }
body {
  margin:0;
  font-family:var(--body-font);
  font-weight:400;
  color:var(--mf-ink);
  background:var(--mf-ice);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img { max-width:100%; height:auto; display:block; }
a { color:inherit; }
ul { margin:0; padding:0; list-style:none; }
h1,h2,h3 { margin:0; font-family:var(--display-font); font-weight:700; line-height:1.08; }
button { font-family:inherit; }

:focus-visible { outline:3px solid var(--mf-blue); outline-offset:3px; border-radius:4px; }

.mf-skip {
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--mf-blue-deep); color:#fff; padding:12px 18px;
  font-family:var(--display-font); font-weight:600; letter-spacing:.04em; text-decoration:none;
  border-radius:0 0 10px 0;
}
.mf-skip:focus { left:12px; top:12px; }

.mf-wrap {
  max-width:var(--mf-maxw);
  margin-inline:auto;
  padding-inline:clamp(1.25rem,5vw,2.5rem);
}

/* ── Shared typographic helpers ───────────────────────────────────── */
.mf-eyebrow {
  display:inline-flex; align-items:center; gap:.65em;
  font-family:var(--display-font); font-weight:600;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mf-blue); margin:0 0 1rem;
}
.mf-eyebrow--light { color:var(--mf-sky); }
.mf-tick {
  display:inline-block; width:24px; height:8px; border-radius:999px;
  background:linear-gradient(90deg, var(--mf-blue), var(--mf-sky));
}
.mf-eyebrow--light .mf-tick { background:linear-gradient(90deg, var(--mf-sky), #fff); }
.mf-h2 {
  font-size:clamp(1.9rem,4.4vw,3rem);
  letter-spacing:-.01em; color:var(--mf-navy);
  margin:0 0 .35em;
}
.mf-section-head { max-width:720px; margin:0 0 clamp(2.5rem,5vw,3.5rem); }
.mf-section-head--light .mf-h2 { color:#fff; }
.mf-section-intro { font-size:clamp(1rem,1.6vw,1.15rem); color:#4d5d70; margin:.5rem 0 0; max-width:640px; }
.mf-section-intro--light { color:rgba(255,255,255,.85); }

/* ── Buttons ──────────────────────────────────────────────────────── */
.mf-btn {
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  background:var(--mf-blue-deep); color:#fff; text-decoration:none;
  font-family:var(--display-font); font-weight:600; font-size:.92rem;
  letter-spacing:.02em;
  padding:15px 30px; border:2px solid var(--mf-blue-deep); border-radius:999px;
  cursor:pointer; line-height:1;
  transition:transform .25s var(--mf-ease), background .25s var(--mf-ease), border-color .25s var(--mf-ease), box-shadow .25s var(--mf-ease);
}
.mf-btn > * { position:relative; z-index:1; }
.mf-btn svg { fill:currentColor; }
.mf-btn::before {
  content:''; position:absolute; top:0; left:-130%; width:60%; height:100%; z-index:0;
  background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 70%, transparent 100%);
  transform:skewX(-18deg); pointer-events:none;
  transition:left .85s var(--mf-ease);
}
.mf-btn:hover { transform:translateY(-2px); background:var(--mf-navy); border-color:var(--mf-navy); box-shadow:0 16px 32px -14px rgba(14,91,168,.7); }
.mf-btn:hover::before { left:135%; }
.mf-btn--sm { padding:11px 20px; font-size:.82rem; }
.mf-btn--block { width:100%; }
.mf-btn--ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,.7); }
.mf-btn--ghost:hover { background:rgba(255,255,255,.12); border-color:#fff; }
.mf-btn--wa { background:var(--mf-wa); border-color:var(--mf-wa); color:#fff; }
.mf-btn--wa:hover { background:#1ebe5a; border-color:#1ebe5a; box-shadow:0 16px 32px -14px rgba(37,211,102,.65); }

/* ── Wave dividers (the motif) ────────────────────────────────────── */
.mf-wave { position:absolute; left:0; width:100%; height:clamp(46px,7vw,90px); z-index:3; display:block; pointer-events:none; }
.mf-wave path { fill:var(--mf-ice); }
.mf-wave--top { top:-1px; }
.mf-wave--bottom { bottom:-1px; }

/* faint droplet texture on pale bands */
.mf-dropwash {
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='none' stroke='%231573CC' stroke-width='1' opacity='.10'%3E%3Cpath d='M22 14 C22 14 30 23 30 29 a8 8 0 0 1 -16 0 C14 23 22 14 22 14 Z'/%3E%3Cpath d='M67 59 C67 59 75 68 75 74 a8 8 0 0 1 -16 0 C59 68 67 59 67 59 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:90px 90px;
}

/* ════════════════════════════════════════════════════════════════════
   HEADER / NAV
   ═══════════════════════════════════════════════════════════════════ */
.mf-header {
  position:fixed; top:0; left:0; right:0; z-index:90;
  padding:18px 0;
  background:transparent; border-bottom:1px solid transparent;
  transition:background .45s var(--mf-ease), padding .4s var(--mf-ease),
             backdrop-filter .45s ease, border-bottom-color .45s ease, box-shadow .45s ease;
}
.mf-header.is-scrolled {
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(150%) blur(10px);
  -webkit-backdrop-filter:saturate(150%) blur(10px);
  border-bottom-color:var(--mf-line);
  padding:10px 0;
  box-shadow:0 8px 30px -18px rgba(10,34,64,.4);
}
.mf-header__inner { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }

/* Brand */
.mf-brand { display:inline-flex; align-items:center; gap:.65rem; text-decoration:none; }
.mf-brand__mark { display:inline-flex; flex-shrink:0; }
.mf-mark-badge { fill:#fff; }
.mf-header.is-scrolled .mf-mark-badge { fill:var(--mf-navy); }
.mf-brand__word { display:flex; flex-direction:column; line-height:1; font-family:var(--display-font); }
.mf-brand__master { color:#fff; font-weight:800; font-size:1.12rem; letter-spacing:.01em; }
.mf-header.is-scrolled .mf-brand__master { color:var(--mf-navy); }
.mf-brand__plumbing { color:var(--mf-sky); font-weight:600; font-size:.62rem; letter-spacing:.42em; margin-top:3px; }
.mf-header.is-scrolled .mf-brand__plumbing { color:var(--mf-blue); }
.mf-brand__master--light { color:#fff; }

/* Nav */
.mf-nav { display:flex; align-items:center; gap:1.6rem; }
.mf-nav__list { display:flex; align-items:center; gap:1.5rem; }
.mf-nav__list a {
  font-family:var(--display-font); font-weight:500; font-size:.9rem;
  letter-spacing:.01em; text-decoration:none;
  color:rgba(255,255,255,.92); position:relative; padding:4px 0;
  transition:color .2s ease;
}
.mf-header.is-scrolled .mf-nav__list a { color:var(--mf-ink); }
.mf-nav__list a::after {
  content:''; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background:linear-gradient(90deg, var(--mf-blue), var(--mf-sky)); transition:width .3s var(--mf-ease);
}
.mf-nav__list a:hover { color:#fff; }
.mf-header.is-scrolled .mf-nav__list a:hover { color:var(--mf-blue); }
.mf-nav__list a:hover::after { width:100%; }
.mf-nav__util { display:flex; align-items:center; gap:.8rem; }
.mf-iconlink {
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  color:rgba(255,255,255,.92); border:1px solid rgba(255,255,255,.32);
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.mf-iconlink svg { fill:currentColor; }
.mf-iconlink:hover { background:#fff; color:var(--mf-navy); border-color:#fff; transform:translateY(-1px); }
.mf-iconlink--wa:hover { background:var(--mf-wa); color:#fff; border-color:var(--mf-wa); }
.mf-header.is-scrolled .mf-iconlink { color:var(--mf-navy); border-color:var(--mf-line); }
.mf-header.is-scrolled .mf-iconlink:hover { background:var(--mf-navy); color:#fff; border-color:var(--mf-navy); }
.mf-header.is-scrolled .mf-iconlink--wa:hover { background:var(--mf-wa); border-color:var(--mf-wa); }

/* Burger */
.mf-burger {
  display:none; flex-direction:column; gap:5px; width:44px; height:44px;
  align-items:center; justify-content:center;
  background:transparent; border:1px solid rgba(255,255,255,.34); border-radius:12px;
  cursor:pointer; padding:0;
  transition:border-color .3s ease;
}
.mf-burger span { display:block; width:20px; height:2px; border-radius:2px; background:#fff; transition:transform .3s var(--mf-ease), opacity .2s ease, background .3s ease; }
.mf-header.is-scrolled .mf-burger { border-color:var(--mf-line); }
.mf-header.is-scrolled .mf-burger span { background:var(--mf-navy); }
body.mf-menu-open .mf-burger span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
body.mf-menu-open .mf-burger span:nth-child(2) { opacity:0; }
body.mf-menu-open .mf-burger span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile overlay */
.mf-mobile {
  position:fixed; inset:0; z-index:80;
  background:linear-gradient(150deg, var(--mf-navy) 0%, var(--mf-navy-2) 100%);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .35s var(--mf-ease), visibility .35s, transform .35s var(--mf-ease);
}
body.mf-menu-open .mf-mobile { opacity:1; visibility:visible; transform:translateY(0); }
.mf-mobile__inner { text-align:center; padding:2rem; width:100%; max-width:420px; }
.mf-mobile nav { display:flex; flex-direction:column; gap:1.2rem; margin-bottom:2rem; }
.mf-mobile nav a {
  font-family:var(--display-font); font-weight:600; font-size:1.6rem;
  letter-spacing:.01em; color:#fff; text-decoration:none;
  transition:color .2s ease;
}
.mf-mobile nav a:hover { color:var(--mf-sky); }
.mf-mobile__cta { width:100%; }
.mf-mobile__util { display:flex; justify-content:center; gap:1.6rem; margin-top:2rem; }
.mf-mobile__util a {
  font-family:var(--display-font); font-weight:500; font-size:.85rem; letter-spacing:.06em;
  color:rgba(255,255,255,.72); text-decoration:none;
}
.mf-mobile__util a:hover { color:#fff; }
.mf-mobile__close {
  position:absolute; top:1rem; right:1.1rem;
  width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:0; color:#fff; font-size:2.4rem; line-height:1;
  cursor:pointer; border-radius:50%; transition:color .2s ease, background .2s ease;
}
.mf-mobile__close:hover { color:var(--mf-sky); background:rgba(255,255,255,.08); }

/* ════════════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════════ */
.mf-hero {
  position:relative;
  min-height:100svh; min-height:620px;
  display:flex; align-items:flex-end;
  padding:160px 0 clamp(6rem,11vw,8.5rem);
  color:#fff; overflow:hidden;
  background:var(--mf-navy);
}
.mf-hero__bg {
  position:absolute; inset:-6% 0; z-index:0;
  background-image:url('images/hero-plumber.webp');
  background-size:cover; background-position:center;
  will-change:transform;
}
.mf-hero__img { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.mf-hero__scrim {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 95% at 10% 100%, rgba(21,115,204,.34) 0%, transparent 50%),
    linear-gradient(100deg, rgba(10,34,64,.94) 0%, rgba(10,34,64,.7) 40%, rgba(10,34,64,.24) 72%, rgba(10,34,64,.5) 100%),
    linear-gradient(0deg, rgba(8,28,52,.9) 0%, transparent 44%);
}
.mf-hero__inner { position:relative; z-index:2; max-width:780px; }
.mf-hero__eyebrow { color:var(--mf-sky); margin-bottom:1.1rem; }
.mf-hero__title {
  font-family:var(--display-font); font-weight:800;
  font-size:clamp(2.5rem,6.6vw,4.6rem); line-height:1.02; letter-spacing:-.02em;
  margin:0 0 1.1rem;
  text-shadow:0 2px 30px rgba(0,0,0,.35);
}
.mf-hero__sub {
  font-size:clamp(1rem,1.7vw,1.18rem); line-height:1.65; font-weight:400;
  color:rgba(255,255,255,.92); max-width:620px; margin:0 0 2rem;
}
.mf-hero__cta { display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:2.2rem; }
.mf-hero__trust { display:flex; flex-wrap:wrap; gap:.6rem .7rem; }
.mf-hero__trust li {
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--display-font); font-weight:500; font-size:.76rem;
  letter-spacing:.04em; color:#fff;
  padding:8px 15px; border:1px solid rgba(255,255,255,.34); border-radius:999px;
  background:rgba(255,255,255,.07);
}
.mf-hero__trust li::before {
  content:''; width:7px; height:7px; border-radius:50%;
  background:linear-gradient(180deg, var(--mf-sky), var(--mf-blue));
  box-shadow:0 0 0 3px rgba(88,197,238,.22);
}
.mf-scrollcue {
  position:absolute; left:50%; bottom:84px; z-index:4; transform:translateX(-50%);
  width:26px; height:42px; border:2px solid rgba(255,255,255,.55); border-radius:14px;
  display:flex; justify-content:center; padding-top:7px;
}
.mf-scrollcue span { display:block; width:3px; height:8px; background:#fff; border-radius:2px; animation:mfScroll 1.8s var(--mf-ease) infinite; }
@keyframes mfScroll { 0%{opacity:0;transform:translateY(0);} 30%{opacity:1;} 60%{opacity:1;transform:translateY(12px);} 100%{opacity:0;transform:translateY(16px);} }

/* Hero load stagger */
@keyframes mfHeroIn { from{opacity:0;transform:translateY(24px);} to{opacity:1;transform:translateY(0);} }
.mf-hero__eyebrow,.mf-hero__title,.mf-hero__sub,.mf-hero__cta,.mf-hero__trust {
  opacity:0; animation:mfHeroIn 1s var(--mf-ease) forwards;
}
.mf-hero__eyebrow { animation-delay:.15s; }
.mf-hero__title { animation-delay:.30s; }
.mf-hero__sub { animation-delay:.45s; }
.mf-hero__cta { animation-delay:.60s; }
.mf-hero__trust { animation-delay:.68s; }

/* ════════════════════════════════════════════════════════════════════
   ABOUT
   ═══════════════════════════════════════════════════════════════════ */
.mf-about { position:relative; background:var(--mf-ice); padding:var(--sp-section) 0; overflow:hidden; }
.mf-about__grid {
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr; gap:clamp(2.5rem,5vw,4rem); align-items:center;
}
.mf-about__copy p { color:#46586c; margin:0 0 1.1rem; }
.mf-about__copy p:first-of-type { margin-top:.4rem; }

/* media frame with blue offset block + droplet clip */
.mf-about__media { position:relative; }
.mf-about__block {
  position:absolute; inset:auto auto -18px -18px; width:62%; height:78%; z-index:0;
  background:linear-gradient(150deg, var(--mf-blue), var(--mf-sky)); border-radius:24px;
  transform:rotate(-3deg);
}
.mf-about__media img {
  position:relative; z-index:1; width:100%; aspect-ratio:3/4; object-fit:cover;
  border-radius:24px;
  clip-path:polygon(0 0, 100% 0, 100% 92%, 0 100%);
  box-shadow:var(--mf-shadow);
}
@media (min-width:900px) {
  .mf-about__grid { grid-template-columns:1.05fr .95fr; }
}

/* Seals — circular badges echoing the logo spheres */
.mf-seals { display:flex; flex-wrap:wrap; gap:1.6rem; margin-top:2.2rem; }
.mf-seal {
  position:relative; width:118px; flex-shrink:0;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.7rem;
  font-family:var(--display-font);
}
.mf-seal__ico {
  position:relative; display:flex; align-items:center; justify-content:center;
  width:70px; height:70px; border-radius:50%;
  background:linear-gradient(150deg, var(--mf-blue-deep), var(--mf-navy)); color:#fff;
  box-shadow:0 14px 30px -14px rgba(14,91,168,.7);
}
.mf-seal__ico svg { fill:currentColor; }
.mf-seal__ring { position:absolute; inset:5px; border-radius:50%; border:1.5px solid rgba(255,255,255,.4); }
.mf-seal__txt { font-size:.74rem; font-weight:600; line-height:1.3; letter-spacing:.02em; color:var(--mf-navy); }

/* ════════════════════════════════════════════════════════════════════
   STATS  (navy band, wave motif)
   ═══════════════════════════════════════════════════════════════════ */
.mf-stats {
  position:relative; background:linear-gradient(135deg, var(--mf-navy) 0%, var(--mf-navy-2) 100%);
  color:#fff; padding:clamp(5rem,9vw,7rem) 0 clamp(5rem,9vw,7rem); overflow:hidden;
}
.mf-stats__flow {
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%2358C5EE' stroke-width='1' opacity='.14'%3E%3Cpath d='M0 40 C40 10 80 70 160 40'/%3E%3Cpath d='M0 90 C40 60 80 120 160 90'/%3E%3Cpath d='M0 140 C40 110 80 170 160 140'/%3E%3C/g%3E%3C/svg%3E");
  background-size:200px 200px;
}
.mf-stats__grid {
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
}
.mf-stat { padding:1rem 1.6rem; position:relative; text-align:center; }
.mf-stat:not(:last-child) { border-right:1px solid rgba(88,197,238,.25); }
.mf-stat__num {
  display:block; font-family:var(--display-font); font-weight:800;
  font-size:clamp(2.8rem,7vw,4.2rem); line-height:1;
  letter-spacing:-.02em;
  background:linear-gradient(180deg, #fff 0%, var(--mf-sky) 130%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#fff;
}
.mf-stat__label {
  display:block; margin:.7rem auto 0; font-size:.92rem; line-height:1.45;
  color:rgba(255,255,255,.78); font-weight:400; max-width:22ch;
}

/* ════════════════════════════════════════════════════════════════════
   SERVICES
   ═══════════════════════════════════════════════════════════════════ */
.mf-services { position:relative; background:var(--mf-ice); padding:var(--sp-section) 0; overflow:hidden; }
.mf-services .mf-wrap { position:relative; z-index:1; }
.mf-svc-grid {
  display:grid; grid-template-columns:1fr; gap:clamp(1.4rem,2.6vw,2rem);
}
.mf-svc {
  background:#fff; border:1px solid var(--mf-line); border-radius:var(--mf-radius); overflow:hidden;
  box-shadow:var(--mf-shadow);
  display:flex; flex-direction:column;
  transition:transform .5s var(--mf-ease), box-shadow .5s var(--mf-ease);
}
.mf-svc:hover { transform:translateY(-6px); box-shadow:0 34px 66px -30px rgba(10,34,64,.55); }
.mf-svc__media { position:relative; overflow:hidden; aspect-ratio:16/11; }
.mf-svc__media img {
  width:100%; height:100%; object-fit:cover;
  clip-path:polygon(0 0, 100% 0, 100% 88%, 0 100%);
  transition:transform .85s var(--mf-ease);
}
.mf-svc:hover .mf-svc__media img { transform:scale(1.06); }
.mf-svc__cat {
  position:absolute; left:18px; bottom:20px; z-index:2;
  font-family:var(--display-font); font-weight:600; font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase; color:#fff;
  background:var(--mf-blue-deep); padding:7px 15px; border-radius:999px;
  box-shadow:0 8px 18px -8px rgba(10,34,64,.6);
}
.mf-svc__body { padding:clamp(1.4rem,2.5vw,2rem); display:flex; flex-direction:column; flex:1; }
.mf-svc__title {
  position:relative; font-size:clamp(1.3rem,2.3vw,1.7rem); color:var(--mf-navy);
  letter-spacing:-.01em; padding-bottom:.5rem; margin-bottom:.5rem;
}
.mf-svc__title::after {
  content:''; position:absolute; left:0; bottom:0; height:3px; width:40px; border-radius:999px;
  background:linear-gradient(90deg, var(--mf-blue), var(--mf-sky)); transition:width .5s var(--mf-ease);
}
.mf-svc:hover .mf-svc__title::after { width:88px; }
.mf-svc__tag {
  font-family:var(--body-font); font-weight:600; font-size:.96rem; color:var(--mf-blue-deep);
  margin:0 0 1rem; line-height:1.45;
}
/* scope lists — droplet markers */
.mf-scope { display:grid; grid-template-columns:1fr; gap:.5rem; margin-top:auto; }
.mf-scope li {
  position:relative; padding-left:1.5rem; font-size:.92rem; line-height:1.5; color:#3d4f63;
}
.mf-scope li::before {
  content:''; position:absolute; left:0; top:.3em; width:14px; height:14px;
  background:linear-gradient(180deg, var(--mf-sky), var(--mf-blue));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 C12 2 20 11 20 16 a8 8 0 0 1 -16 0 C4 11 12 2 12 2 Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 C12 2 20 11 20 16 a8 8 0 0 1 -16 0 C4 11 12 2 12 2 Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Service 4 — wide chip card, no photo */
.mf-svc--wide .mf-svc__panel {
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  padding:clamp(1.8rem,3vw,2.6rem);
  background:linear-gradient(135deg, var(--mf-navy) 0%, var(--mf-navy-2) 100%);
  color:#fff; height:100%;
}
.mf-svc--wide .mf-svc__panel::before {
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%2358C5EE' stroke-width='1' opacity='.16'%3E%3Cpath d='M0 50 C40 20 80 80 160 50'/%3E%3Cpath d='M0 110 C40 80 80 140 160 110'/%3E%3C/g%3E%3C/svg%3E");
  background-size:220px 220px;
}
.mf-svc--wide .mf-svc__panel > * { position:relative; z-index:1; }
.mf-svc__badge {
  display:inline-flex; align-items:center; justify-content:center; width:54px; height:54px;
  border-radius:16px; background:linear-gradient(150deg, var(--mf-blue), var(--mf-sky)); color:#fff;
  margin-bottom:1.1rem; box-shadow:0 14px 30px -14px rgba(21,115,204,.8);
}
.mf-svc__badge svg { fill:currentColor; }
.mf-svc--wide .mf-svc__title { color:#fff; }
.mf-svc--wide .mf-svc__title::after { background:linear-gradient(90deg, var(--mf-sky), #fff); }
.mf-svc--wide .mf-svc__tag { color:var(--mf-sky); }
.mf-chips { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem; }
.mf-chips li {
  font-family:var(--body-font); font-weight:500; font-size:.86rem; color:#fff;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  padding:9px 16px; border-radius:999px;
  transition:background .25s ease, transform .25s ease;
}
.mf-svc--wide .mf-svc__panel:hover .mf-chips li { background:rgba(255,255,255,.12); }

/* desktop: 3-col grid, wide feature 4th card full width */
@media (min-width:760px) {
  .mf-svc-grid { grid-template-columns:1fr 1fr; }
}
@media (min-width:1024px) {
  .mf-svc-grid { grid-template-columns:repeat(3,1fr); }
  .mf-svc--wide { grid-column:1 / -1; }
  .mf-svc--wide .mf-svc__panel {
    display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1.5rem 2.4rem;
  }
  .mf-svc__badge { margin-bottom:0; align-self:start; }
  .mf-svc--wide .mf-svc__title { margin-bottom:.4rem; padding-bottom:.4rem; }
  .mf-svc--wide .mf-svc__tag { margin-bottom:0; }
  .mf-svc--wide .mf-chips { margin-top:0; grid-column:3; grid-row:1 / span 2; flex-direction:column; align-items:flex-end; }
  .mf-svc--wide .mf-svc__badge { grid-row:1 / span 2; }
}

/* ════════════════════════════════════════════════════════════════════
   REVIEWS  (navy band)
   ═══════════════════════════════════════════════════════════════════ */
.mf-reviews { position:relative; background:linear-gradient(135deg, var(--mf-navy) 0%, var(--mf-navy-2) 100%); color:#fff; padding:clamp(5rem,9vw,7rem) 0; overflow:hidden; }
.mf-reviews .mf-wrap { position:relative; z-index:2; }
.mf-review-grid { display:grid; grid-template-columns:1fr; gap:1.4rem; }
.mf-review {
  position:relative; margin:0;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--mf-radius); padding:2rem 1.8rem 1.7rem;
  transition:transform .4s var(--mf-ease), background .4s ease, border-color .4s ease;
}
.mf-review::before {
  content:''; position:absolute; top:0; left:0; height:4px; width:46px; border-radius:0 0 999px 0;
  background:linear-gradient(90deg, var(--mf-sky), var(--mf-blue)); transition:width .45s var(--mf-ease);
}
.mf-review:hover { transform:translateY(-5px); background:rgba(255,255,255,.08); border-color:rgba(88,197,238,.3); }
.mf-review:hover::before { width:100%; }
.mf-review__quote {
  position:absolute; top:.6rem; right:1.3rem; z-index:0;
  font-family:var(--display-font); font-weight:800; font-size:4.2rem; line-height:1;
  color:rgba(88,197,238,.18); pointer-events:none;
}
.mf-stars { position:relative; z-index:1; color:#FFC83D; font-size:1.05rem; letter-spacing:.12em; margin-bottom:.9rem; }
.mf-review blockquote {
  position:relative; z-index:1; margin:0; font-size:.98rem; line-height:1.7;
  color:rgba(255,255,255,.92); font-weight:400;
}
.mf-review figcaption { position:relative; z-index:1; margin-top:1.3rem; display:flex; flex-direction:column; gap:.15rem; }
.mf-review__name { font-family:var(--display-font); font-weight:600; font-size:1rem; color:#fff; }
.mf-review__src { font-size:.78rem; letter-spacing:.06em; color:var(--mf-sky); }
.mf-reviews__more { text-align:center; margin:2.4rem 0 0; }
.mf-reviews__more a {
  display:inline-flex; align-items:center; gap:.4em;
  font-family:var(--display-font); font-weight:600; font-size:.95rem;
  color:var(--mf-sky); text-decoration:none;
  border-bottom:2px solid transparent; padding-bottom:2px; transition:border-color .25s ease, color .25s ease;
}
.mf-reviews__more a svg { fill:currentColor; transition:transform .25s ease; }
.mf-reviews__more a:hover { color:#fff; border-bottom-color:var(--mf-sky); }
.mf-reviews__more a:hover svg { transform:translateX(3px); }

@media (min-width:680px) { .mf-review-grid { grid-template-columns:1fr 1fr; } }

/* ════════════════════════════════════════════════════════════════════
   PROOF  (before/after gallery)
   ═══════════════════════════════════════════════════════════════════ */
.mf-proof { position:relative; background:var(--mf-ice-2); padding:var(--sp-section) 0; overflow:hidden; }
.mf-proof .mf-wrap { position:relative; z-index:1; }
.mf-proof__grid { display:grid; grid-template-columns:1fr; gap:clamp(1.6rem,3vw,2.4rem); }
.mf-proof__tile { position:relative; margin:0; }
.mf-proof__media {
  position:relative; overflow:hidden; border-radius:var(--mf-radius);
  box-shadow:var(--mf-shadow); background:#fff; border:1px solid var(--mf-line);
}
.mf-proof__media img { width:100%; height:auto; display:block; transition:transform .9s var(--mf-ease); }
.mf-proof__tile:hover .mf-proof__media img { transform:scale(1.04); }
.mf-proof__tile figcaption {
  display:inline-flex; align-items:center; gap:.55em; margin-top:1rem;
  font-family:var(--display-font); font-weight:600; font-size:1rem; color:var(--mf-navy);
}
.mf-proof__tile figcaption::before {
  content:''; width:22px; height:4px; border-radius:999px;
  background:linear-gradient(90deg, var(--mf-blue), var(--mf-sky));
}
@media (min-width:760px) {
  .mf-proof__grid { grid-template-columns:.78fr 1.22fr; align-items:start; }
  .mf-proof__tile--a .mf-proof__media { aspect-ratio:877/1169; }
  .mf-proof__tile--b .mf-proof__media { aspect-ratio:1170/877; }
  .mf-proof__tile--a .mf-proof__media img,
  .mf-proof__tile--b .mf-proof__media img { width:100%; height:100%; object-fit:cover; }
}

/* ════════════════════════════════════════════════════════════════════
   AREAS  (navy band)
   ═══════════════════════════════════════════════════════════════════ */
.mf-areas { position:relative; background:linear-gradient(135deg, var(--mf-blue-deep) 0%, var(--mf-navy) 100%); color:#fff; padding:clamp(5rem,9vw,7rem) 0; overflow:hidden; }
.mf-areas__inner { position:relative; z-index:2; text-align:center; }
.mf-areas .mf-section-head { margin-inline:auto; }
.mf-areas__pills {
  display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem 1rem; margin:0 auto; max-width:840px;
}
.mf-areas__pills li {
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--display-font); font-weight:600; font-size:1rem; color:#fff;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
  padding:12px 22px; border-radius:999px;
  transition:transform .3s var(--mf-ease), background .3s ease, border-color .3s ease;
}
.mf-areas__pills li:hover { transform:translateY(-3px); background:rgba(255,255,255,.14); border-color:var(--mf-sky); }
.mf-pin { display:inline-flex; align-items:center; justify-content:center; color:var(--mf-sky); }
.mf-pin svg { fill:currentColor; }
.mf-areas__note {
  margin:1.8rem 0 0; font-family:var(--display-font); font-weight:500; font-size:.92rem;
  letter-spacing:.04em; color:rgba(255,255,255,.72);
}

/* ════════════════════════════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════════════════════════ */
.mf-faq { position:relative; background:var(--mf-ice); padding:var(--sp-section) 0; overflow:hidden; }
.mf-faq .mf-wrap { position:relative; z-index:1; }
.mf-faq__grid { display:grid; grid-template-columns:1fr; gap:clamp(2rem,4vw,3.5rem); align-items:start; }
.mf-faq__intro .mf-section-intro { margin-bottom:1.6rem; }
.mf-faq__cta { margin-top:.4rem; }
.mf-faq__item { border-bottom:1px solid var(--mf-line); }
.mf-faq__item summary {
  position:relative; list-style:none; cursor:pointer; padding:1.25rem 3rem 1.25rem 0;
  font-family:var(--display-font); font-weight:600; font-size:1.06rem;
  color:var(--mf-navy); letter-spacing:-.005em; line-height:1.4;
  transition:color .2s ease, padding-left .25s ease;
}
.mf-faq__item summary::-webkit-details-marker { display:none; }
.mf-faq__item:hover summary { color:var(--mf-blue); padding-left:.4rem; }
.mf-faq__mark { position:absolute; right:0; top:1.45rem; width:20px; height:20px; flex-shrink:0; }
.mf-faq__mark::before,.mf-faq__mark::after {
  content:''; position:absolute; background:var(--mf-blue); border-radius:2px;
  transition:transform .3s var(--mf-ease), opacity .3s ease;
}
.mf-faq__mark::before { left:0; top:9px; width:20px; height:2px; }
.mf-faq__mark::after { left:9px; top:0; width:2px; height:20px; }
.mf-faq__item[open] .mf-faq__mark::after { transform:rotate(90deg); opacity:0; }
.mf-faq__item[open] summary { color:var(--mf-blue); }
.mf-faq__item p { margin:0; padding:0 2rem 1.4rem 0; font-size:.96rem; color:#46586c; line-height:1.7; }

@media (min-width:900px) { .mf-faq__grid { grid-template-columns:.82fr 1.18fr; } }

/* ════════════════════════════════════════════════════════════════════
   CTA
   ═══════════════════════════════════════════════════════════════════ */
.mf-cta { position:relative; background:var(--mf-navy); color:#fff; padding:var(--sp-section) 0; overflow:hidden; }
.mf-cta__bg {
  position:absolute; inset:0; z-index:0;
  background-image:linear-gradient(120deg, rgba(10,34,64,.93) 0%, rgba(12,58,110,.82) 55%, rgba(10,46,87,.9) 100%), url('images/cta-bathroom.webp');
  background-size:cover; background-position:center;
}
.mf-cta__wave {
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.6;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%2358C5EE' stroke-width='1.2' opacity='.12'%3E%3Cpath d='M0 60 C50 20 100 100 200 60'/%3E%3Cpath d='M0 130 C50 90 100 170 200 130'/%3E%3C/g%3E%3C/svg%3E");
  background-size:260px 260px;
}
.mf-cta__inner {
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr; gap:clamp(2.2rem,4vw,3.5rem); align-items:center;
}
.mf-cta__copy .mf-h2 { color:#fff; text-shadow:0 2px 18px rgba(8,28,52,.5); }
.mf-cta__sub { font-size:clamp(1rem,1.7vw,1.15rem); color:rgba(255,255,255,.88); margin:.4rem 0 1.8rem; max-width:46ch; }
.mf-cta__buttons { display:flex; flex-wrap:wrap; gap:.8rem; }

/* form */
.mf-form {
  background:#fff; color:var(--mf-ink); border-radius:18px;
  padding:clamp(1.6rem,3vw,2.4rem); box-shadow:0 34px 76px -30px rgba(0,0,0,.7);
  border:1px solid rgba(255,255,255,.4);
}
.mf-form__head {
  font-family:var(--display-font); font-weight:700; font-size:1.35rem;
  letter-spacing:-.01em; color:var(--mf-navy); margin:0 0 1.4rem;
}
.mf-field { margin-bottom:1.05rem; }
.mf-field label {
  display:block; font-family:var(--display-font); font-weight:600; font-size:.78rem;
  letter-spacing:.04em; color:var(--mf-navy); margin-bottom:.45rem;
}
.mf-field input, .mf-field select, .mf-field textarea {
  width:100%; font:inherit; font-size:16px; color:var(--mf-ink);
  background:#fff; border:1px solid #c9d8e6; border-radius:12px;
  padding:12px 14px; min-height:48px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.mf-field textarea { min-height:104px; resize:vertical; line-height:1.5; }
.mf-field select { appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231573CC' d='M0 0h12L6 8z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:36px;
}
.mf-field input:focus, .mf-field select:focus, .mf-field textarea:focus {
  outline:none; border-color:var(--mf-blue); box-shadow:0 0 0 3px rgba(21,115,204,.16);
}
.mf-field__err { display:none; margin-top:.4rem; font-size:.8rem; color:#c0392b; font-weight:500; }
.mf-field.is-invalid input, .mf-field.is-invalid textarea, .mf-field.is-invalid select { border-color:#e05b4c; background:#fff7f6; }
.mf-field.is-invalid .mf-field__err { display:block; }
.mf-form__submit { margin-top:.5rem; }
.mf-form__alt { margin:1rem 0 0; font-size:.86rem; color:#5a6b7d; text-align:center; }
.mf-form__alt a { color:var(--mf-blue-deep); font-weight:600; text-decoration:underline; }
.mf-form__alt a:hover { color:var(--mf-blue); }

@media (min-width:920px) {
  .mf-cta__inner { grid-template-columns:1fr .92fr; align-items:center; }
}

/* ════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════ */
.mf-footer { position:relative; background:var(--mf-ink); color:rgba(255,255,255,.75); padding:clamp(3rem,6vw,4.5rem) 0 2rem; }
.mf-footer__accent {
  position:absolute; top:0; left:0; right:0; height:5px;
  background:linear-gradient(90deg, var(--mf-blue) 0%, var(--mf-sky) 40%, transparent 75%);
}
.mf-footer__grid {
  display:grid; grid-template-columns:1fr; gap:2.2rem;
  border-bottom:1px solid rgba(255,255,255,.1); padding-bottom:2.4rem;
}
.mf-footer .mf-brand__plumbing { color:var(--mf-sky); }
.mf-footer__tag { font-size:.9rem; color:rgba(255,255,255,.62); margin:1rem 0 1.3rem; max-width:34ch; line-height:1.6; }
.mf-footer__social { display:flex; gap:.7rem; }
.mf-footer__social .mf-iconlink { color:rgba(255,255,255,.85); border-color:rgba(255,255,255,.2); }
.mf-footer__social .mf-iconlink:hover { background:#fff; color:var(--mf-navy); border-color:#fff; }
.mf-footer__social .mf-iconlink--wa:hover { background:var(--mf-wa); color:#fff; border-color:var(--mf-wa); }
.mf-footer__col h3 {
  font-family:var(--display-font); font-weight:600; font-size:.82rem;
  letter-spacing:.1em; text-transform:uppercase; color:#fff; margin:0 0 1rem;
}
.mf-footer__col ul { display:flex; flex-direction:column; gap:.6rem; }
.mf-footer__col a { color:rgba(255,255,255,.72); text-decoration:none; font-size:.92rem; transition:color .2s ease; }
.mf-footer__col a:hover { color:var(--mf-sky); }
.mf-footer__fine { padding-top:1.6rem; font-size:.8rem; color:rgba(255,255,255,.5); line-height:1.6; }
@media (min-width:640px) {
  .mf-footer__grid { grid-template-columns:1.6fr 1fr 1fr 1.5fr; gap:2rem; }
}

/* ════════════════════════════════════════════════════════════════════
   STICKY WHATSAPP FAB
   ═══════════════════════════════════════════════════════════════════ */
.mf-fab {
  position:fixed; right:18px; bottom:18px; z-index:70;
  width:58px; height:58px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--mf-wa); color:#fff; text-decoration:none;
  box-shadow:0 10px 28px -8px rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.85);
  transition:opacity .35s var(--mf-ease), transform .35s var(--mf-ease), visibility .35s;
}
.mf-fab svg { fill:#fff; }
.mf-fab.is-visible { opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.mf-fab:hover { transform:translateY(-2px) scale(1.05); }
.mf-fab::before {
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid rgba(37,211,102,.45); opacity:0;
  animation:mfWaPulse 2.8s ease-out infinite; pointer-events:none;
}
@keyframes mfWaPulse { 0%{transform:scale(.85);opacity:.7;} 70%{transform:scale(1.25);opacity:0;} 100%{transform:scale(1.25);opacity:0;} }

/* ════════════════════════════════════════════════════════════════════
   REVEALS
   ═══════════════════════════════════════════════════════════════════ */
[data-reveal] {
  opacity:0; transform:translateY(34px);
  transition:opacity 1s var(--mf-ease), transform 1s var(--mf-ease);
  will-change:opacity, transform;
}
[data-reveal].is-revealed { opacity:1; transform:translateY(0); }

[data-reveal-stagger] > * {
  opacity:0; transform:translateY(26px);
  transition:opacity .85s var(--mf-ease), transform .85s var(--mf-ease);
}
[data-reveal-stagger].is-revealed > * { opacity:1; transform:translateY(0); }
[data-reveal-stagger].is-revealed > *:nth-child(1){transition-delay:.05s;}
[data-reveal-stagger].is-revealed > *:nth-child(2){transition-delay:.10s;}
[data-reveal-stagger].is-revealed > *:nth-child(3){transition-delay:.15s;}
[data-reveal-stagger].is-revealed > *:nth-child(4){transition-delay:.20s;}
[data-reveal-stagger].is-revealed > *:nth-child(5){transition-delay:.25s;}
[data-reveal-stagger].is-revealed > *:nth-child(n+6){transition-delay:.30s;}

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE — NAV
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width:1024px) {
  .mf-nav { display:none; }
  .mf-burger { display:flex; }
}

@media (max-width:640px) {
  .mf-hero { align-items:flex-end; }
  .mf-hero__cta .mf-btn { flex:1 1 auto; }
  .mf-stats__grid { grid-template-columns:1fr; }
  .mf-stat:not(:last-child) { border-right:0; border-bottom:1px solid rgba(88,197,238,.25); padding-bottom:1.5rem; }
  .mf-stat { padding:1.4rem 1rem; }
  .mf-seals { gap:1.4rem; justify-content:flex-start; }
  .mf-seal { width:104px; }
}

/* ════════════════════════════════════════════════════════════════════
   REDUCED MOTION — force-reveal everything (headless-safe)
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal] { opacity:1 !important; transform:none !important; }
  [data-reveal-stagger] > * { opacity:1 !important; transform:none !important; }
  .mf-hero__eyebrow,.mf-hero__title,.mf-hero__sub,.mf-hero__cta,.mf-hero__trust {
    opacity:1 !important; animation:none !important;
  }
  .mf-scrollcue span { animation:none !important; }
  .mf-fab { animation:none !important; }
  .mf-fab::before { animation:none !important; }
}