/* Atomware Toolkit Flow Pro 0.1.19 */

/* ===== 1) Every WhatsApp button: green background, white text and icon.
   Hover changes ONLY the background (darker green): no lift, scale, shadow, border or text-colour change.
   Green: #25D366 / hover #1EBE5A on every WhatsApp button (Chappy's choice). Known trade-off: white
   on #25D366 is 1.98:1 (2.45:1 on #1EBE5A), below WCAG AA; text kept 600+ weight.
   Covers: Elementor buttons linking to wa.me / api.whatsapp.com (Home "Service area" info card, the white
   "WhatsApp us" pill fp-btn--outline e.g. 2e0d4865, hero/CTA buttons, old sticky bar), panel "Start chat"
   (.fp-wa__cta), mega menu row (.fp-mega__wa). Call/phone buttons are not touched. ===== */
html body.flowpro:not(.fp-x):not(.fp-y):not(.fp-z) :is(a.elementor-button[href*="wa.me"],a.elementor-button[href*="api.whatsapp.com"],.fp-wa a.fp-wa__cta,.fp-mega a.fp-mega__wa){
  background:#25D366!important;background-color:#25D366!important;background-image:none!important;color:#FFFFFF!important;font-weight:600!important;
  border-color:transparent!important;box-shadow:none!important;transform:none!important;filter:none!important;
  transition:background-color .15s ease!important}
html body.flowpro:not(.fp-x):not(.fp-y):not(.fp-z) :is(a.elementor-button[href*="wa.me"],a.elementor-button[href*="api.whatsapp.com"],.fp-wa a.fp-wa__cta,.fp-mega a.fp-mega__wa):is(:hover,:active){
  background:#1EBE5A!important;background-color:#1EBE5A!important;color:#FFFFFF!important;
  border-color:transparent!important;box-shadow:none!important;transform:none!important;filter:none!important}
html body.flowpro:not(.fp-x):not(.fp-y):not(.fp-z) :is(a.elementor-button[href*="wa.me"],a.elementor-button[href*="api.whatsapp.com"],.fp-wa a.fp-wa__cta,.fp-mega a.fp-mega__wa) :is(span,.elementor-button-text,.elementor-button-icon){color:#FFFFFF!important}
html body.flowpro:not(.fp-x):not(.fp-y):not(.fp-z) :is(a.elementor-button[href*="wa.me"],a.elementor-button[href*="api.whatsapp.com"],.fp-wa a.fp-wa__cta,.fp-mega a.fp-mega__wa) svg{fill:#FFFFFF!important;color:#FFFFFF!important}
html body.flowpro:not(.fp-x):not(.fp-y):not(.fp-z) :is(a.elementor-button[href*="wa.me"],a.elementor-button[href*="api.whatsapp.com"],.fp-wa a.fp-wa__cta,.fp-mega a.fp-mega__wa) svg [fill]:not([fill="none"]){fill:#FFFFFF!important}
html body.flowpro:not(.fp-x):not(.fp-y):not(.fp-z) :is(a.elementor-button[href*="wa.me"],a.elementor-button[href*="api.whatsapp.com"],.fp-wa a.fp-wa__cta,.fp-mega a.fp-mega__wa):focus-visible{outline:3px solid #122A47!important;outline-offset:3px!important}
/* Floating button (icon only): hover = background only. */
html body.flowpro .fp-wa .fp-wa__toggle{transition:background-color .15s ease!important}
html body.flowpro .fp-wa:not(.is-open) .fp-wa__toggle{background:#25D366!important}
html body.flowpro .fp-wa .fp-wa__toggle:hover,html body.flowpro .fp-wa .fp-wa__toggle:active{transform:none!important;filter:none!important;}
html body.flowpro .fp-wa:not(.is-open) .fp-wa__toggle:hover{background:#1EBE5A!important}

/* ===== 2) Contact icon lists (Gqeberha / phone / email) – same spacing as the 0.1.15 footer rows.
   Contact page card 43375a7 + any icon list with tel:/mailto: links outside the footer.
   Desktop (>=1025): 10px gap. Tablet/phone (<=1024): no gap, every row min 44px. ===== */
body.flowpro :is(.elementor-element-43375a7,.elementor-widget-icon-list:has(a[href^="tel:"]),.elementor-widget-icon-list:has(a[href^="mailto:"])):not([data-elementor-type="footer"] *) .elementor-icon-list-items{display:flex!important;flex-direction:column!important;gap:10px!important;margin:0!important;padding:0!important}
body.flowpro :is(.elementor-element-43375a7,.elementor-widget-icon-list:has(a[href^="tel:"]),.elementor-widget-icon-list:has(a[href^="mailto:"])):not([data-elementor-type="footer"] *) .elementor-icon-list-item{padding-top:0!important;padding-bottom:0!important;margin:0!important}
body.flowpro :is(.elementor-element-43375a7,.elementor-widget-icon-list:has(a[href^="tel:"]),.elementor-widget-icon-list:has(a[href^="mailto:"])):not([data-elementor-type="footer"] *) .elementor-icon-list-item::after{display:none!important}
@media (max-width:1024px){
  body.flowpro :is(.elementor-element-43375a7,.elementor-widget-icon-list:has(a[href^="tel:"]),.elementor-widget-icon-list:has(a[href^="mailto:"])):not([data-elementor-type="footer"] *) .elementor-icon-list-items{gap:0!important}
  body.flowpro :is(.elementor-element-43375a7,.elementor-widget-icon-list:has(a[href^="tel:"]),.elementor-widget-icon-list:has(a[href^="mailto:"])):not([data-elementor-type="footer"] *) .elementor-icon-list-item{min-height:44px!important;display:flex!important;align-items:center!important}
  body.flowpro :is(.elementor-element-43375a7,.elementor-widget-icon-list:has(a[href^="tel:"]),.elementor-widget-icon-list:has(a[href^="mailto:"])):not([data-elementor-type="footer"] *) .elementor-icon-list-item>a{min-height:44px!important;display:flex!important;align-items:center!important}
}

/* 0.1.19 Contact "Get in touch": both columns start on one line (form intro
   line level with the left card's top edge). Section padding comes from the
   site-wide scale (added once the staging audit lands). Form untouched. */
@media (min-width:768px){
 body.flowpro .elementor .elementor-element.elementor-element-f7ffb12>.e-con-inner{align-items:stretch}
 body.flowpro .elementor .elementor-element.elementor-element-bda2c6f{justify-content:flex-start!important;padding-top:0!important;margin-top:0!important}
 body.flowpro .elementor .elementor-element.elementor-element-cb8f924{margin-top:0!important;padding-top:0!important}
 body.flowpro .elementor-element-cb8f924 .elementor-widget-container>*:first-child,body.flowpro .elementor-element-cb8f924 p:first-child{margin-top:0!important;padding-top:0!important}
}

/* 0.1.19 Certificates: photo replaces the illustration; navy frame and blue square dropped. */
.fp-coc .fp-coc__art.fp-coc__art--photo{background:none!important;padding:0!important;border-radius:12px;overflow:hidden;aspect-ratio:1/1;display:block}
.fp-coc .fp-coc__art.fp-coc__art--photo::before{content:none!important;display:none!important}
.fp-coc .fp-coc__art.fp-coc__art--photo picture{display:block;width:100%!important;max-width:none!important;height:100%;margin:0!important}
.fp-coc .fp-coc__art.fp-coc__art--photo img{width:100%!important;height:100%!important;object-fit:cover;border-radius:12px}

/* floating button: no shadow/lift/filter change on hover */
@media (min-width:1025px){html body.flowpro .fp-wa .fp-wa__toggle,html body.flowpro .fp-wa .fp-wa__toggle:hover,html body.flowpro .fp-wa .fp-wa__toggle:active{box-shadow:4px 4px 10px rgba(0,0,0,.15)!important;transform:none!important;filter:none!important}}

/* 0.1.19 Whole service card clickable (loop item 121, .fp-card on Home, Services and
   "Other services"). Stretched link: the post-title link (accessible name = service name)
   gets a ::after over the card; the button stays above it. No nested anchors, no JS. */
body.flowpro .elementor .e-con.fp-card{position:relative!important;cursor:pointer}
body.flowpro .elementor .fp-card>.e-con-inner,body.flowpro .elementor .fp-card .e-con,body.flowpro .elementor .fp-card .elementor-widget-theme-post-title,body.flowpro .elementor .fp-card .elementor-heading-title{position:static!important}
body.flowpro .elementor .fp-card .elementor-widget-theme-post-title a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
body.flowpro .elementor .fp-card .fp-card__btn{position:relative;z-index:2}
body.flowpro .elementor .fp-card .elementor-widget-theme-post-title a:focus-visible{outline:none}
body.flowpro .elementor .fp-card:has(.elementor-widget-theme-post-title a:focus-visible){outline:3px solid #2152D0;outline-offset:3px}

/* 0.1.19 Site-wide spacing scale (from audit/padding-staging.json, staging measured 2026-11-02).
   VISIBLE space top = bottom: phone 80 / tablet 96 / desktop 112. Padding = measured carrier padding
   + (target - measured visible). Heroes, header, footer, hidden CTA bands untouched. */
@media (max-width:767px){
 html body.flowpro .elementor .elementor-element.elementor-element-12b09a5d>.e-con-inner{padding-top:70px!important;padding-bottom:70px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-378c8dd3>.e-con-inner{padding-top:80px!important;padding-bottom:60px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-42b8caa2>.e-con-inner{padding-top:13px!important;padding-bottom:26px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-51c17fae>.e-con-inner{padding-top:80px!important;padding-bottom:60px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-59eb08c2>.e-con-inner{padding-top:70px!important;padding-bottom:56px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-5a3fcd22>.e-con-inner{padding-top:70px!important;padding-bottom:70px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-5ddd64cc>.e-con-inner{padding-top:80px!important;padding-bottom:60px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-6a60ad9d>.e-con-inner{padding-top:70px!important;padding-bottom:70px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-6b033d2d{padding-top:70px!important;padding-bottom:30px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-71ea48d3>.e-con-inner{padding-top:80px!important;padding-bottom:60px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-798fc060>.e-con-inner{padding-top:80px!important;padding-bottom:60px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-7b960665>.e-con-inner{padding-top:80px!important;padding-bottom:60px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-7d40cbe9>.e-con-inner{padding-top:70px!important;padding-bottom:70px!important}
}
@media (min-width:768px) and (max-width:1023px){
 html body.flowpro .elementor .elementor-element.elementor-element-12b09a5d>.e-con-inner{padding-top:86px!important;padding-bottom:86px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-378c8dd3>.e-con-inner{padding-top:96px!important;padding-bottom:72px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-42b8caa2>.e-con-inner{padding-top:13px!important;padding-bottom:66px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-51c17fae>.e-con-inner{padding-top:96px!important;padding-bottom:72px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-59eb08c2>.e-con-inner{padding-top:86px!important;padding-bottom:72px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-5a3fcd22>.e-con-inner{padding-top:86px!important;padding-bottom:86px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-5ddd64cc>.e-con-inner{padding-top:96px!important;padding-bottom:72px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-6a60ad9d>.e-con-inner{padding-top:86px!important;padding-bottom:86px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-6b033d2d{padding-top:86px!important;padding-bottom:62px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-71ea48d3>.e-con-inner{padding-top:96px!important;padding-bottom:72px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-798fc060>.e-con-inner{padding-top:96px!important;padding-bottom:72px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-7b960665>.e-con-inner{padding-top:96px!important;padding-bottom:72px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-7d40cbe9>.e-con-inner{padding-top:86px!important;padding-bottom:86px!important}
}
@media (min-width:1024px) and (max-width:1024px){
 html body.flowpro .elementor .elementor-element.elementor-element-12b09a5d>.e-con-inner{padding-top:86px!important;padding-bottom:86px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-378c8dd3>.e-con-inner{padding-top:96px!important;padding-bottom:72px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-42b8caa2>.e-con-inner{padding-top:13px!important;padding-bottom:66px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-51c17fae>.e-con-inner{padding-top:96px!important;padding-bottom:72px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-59eb08c2>.e-con-inner{padding-top:86px!important;padding-bottom:86px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-5a3fcd22>.e-con-inner{padding-top:86px!important;padding-bottom:86px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-5ddd64cc>.e-con-inner{padding-top:96px!important;padding-bottom:72px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-6a60ad9d>.e-con-inner{padding-top:86px!important;padding-bottom:86px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-6b033d2d{padding-top:86px!important;padding-bottom:62px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-71ea48d3>.e-con-inner{padding-top:96px!important;padding-bottom:72px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-798fc060>.e-con-inner{padding-top:96px!important;padding-bottom:72px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-7b960665>.e-con-inner{padding-top:96px!important;padding-bottom:72px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-7d40cbe9>.e-con-inner{padding-top:86px!important;padding-bottom:86px!important}
}
@media (min-width:1025px){
 html body.flowpro .elementor .elementor-element.elementor-element-12b09a5d>.e-con-inner{padding-top:102px!important;padding-bottom:88px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-378c8dd3>.e-con-inner{padding-top:112px!important;padding-bottom:88px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-42b8caa2>.e-con-inner{padding-top:0px!important;padding-bottom:50px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-51c17fae>.e-con-inner{padding-top:112px!important;padding-bottom:88px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-59eb08c2>.e-con-inner{padding-top:102px!important;padding-bottom:102px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-5a3fcd22>.e-con-inner{padding-top:102px!important;padding-bottom:102px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-5ddd64cc>.e-con-inner{padding-top:112px!important;padding-bottom:88px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-6a60ad9d>.e-con-inner{padding-top:102px!important;padding-bottom:102px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-6b033d2d{padding-top:102px!important;padding-bottom:62px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-71ea48d3>.e-con-inner{padding-top:112px!important;padding-bottom:88px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-798fc060>.e-con-inner{padding-top:112px!important;padding-bottom:88px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-7b960665>.e-con-inner{padding-top:112px!important;padding-bottom:88px!important}
 html body.flowpro .elementor .elementor-element.elementor-element-7d40cbe9>.e-con-inner{padding-top:102px!important;padding-bottom:102px!important}
}
/* empty 70px spacers before the footer collapsed so the space above the footer = the scale */
html body.flowpro .elementor .elementor-element.elementor-element-47e8568,html body.flowpro .elementor .elementor-element.elementor-element-140d059,html body.flowpro .elementor .elementor-element.elementor-element-0c838f2{display:none!important}
/* Contact f7ffb12: the left card's background is the visible edge (its text is centred inside it),
   so the section inner carries the scale directly on both sides; left card and form column share one top line. */
html body.flowpro .elementor .elementor-element.elementor-element-f7ffb12>.e-con-inner{padding-top:112px!important;padding-bottom:112px!important;align-items:flex-start!important}
html body.flowpro .elementor .elementor-element.elementor-element-f7ffb12 .elementor-element-da77970{align-self:stretch}
@media (max-width:1024px){html body.flowpro .elementor .elementor-element.elementor-element-f7ffb12>.e-con-inner{padding-top:96px!important;padding-bottom:96px!important}}
@media (max-width:767px){html body.flowpro .elementor .elementor-element.elementor-element-f7ffb12>.e-con-inner{padding-top:80px!important;padding-bottom:80px!important}}