/* Atomware Toolkit – Flow Pro Plumbing 0.1.2 (card art: no crop, 3:2 / 1:1 mobile). Scoped to body.flowpro + fp-* classes set in Elementor (Advanced > CSS Classes). */
/* Specificity: body.flowpro .elementor .fp-* (0,3,1+) beats Elementor per-element CSS (.elementor-N .elementor-element.elementor-element-ID = 0,3,0). */
.flowpro{--fp-ink:#130D13;--fp-navy:#122A47;--fp-deep:#104778;--fp-blue:#2152D0;--fp-light:#85ADCA;--fp-accent:#5B9BFF;--fp-radius:16px;--fp-ease:cubic-bezier(.2,.7,.2,1);--fp-bar-h:64px;
  --fp-shadow:0 1px 2px rgba(18,42,71,.08),0 12px 32px rgba(18,42,71,.14);--fp-shadow-hover:0 2px 4px rgba(18,42,71,.10),0 18px 40px rgba(18,42,71,.20)}

/* ---------- Hero (fp-hero) ---------- */
body.flowpro .elementor .fp-hero{position:relative;background-color:var(--fp-ink);overflow:hidden}
body.flowpro .elementor .fp-hero__content{position:relative;z-index:2;max-width:560px}
body.flowpro .elementor .fp-hero__title .elementor-heading-title,body.flowpro .elementor .fp-hero__title h1{color:#fff;text-wrap:balance}
body.flowpro .elementor .fp-accent{color:var(--fp-accent)}
body.flowpro .elementor .fp-hero__sub,body.flowpro .elementor .fp-hero__sub p{color:rgba(255,255,255,.92);max-width:52ch}
body.flowpro .elementor .fp-hero__buttons{display:flex;flex-wrap:wrap;gap:12px}
/* 0.1.2: old Icon List trust rule removed (trust strip is now the art strip fp-trust-v2) */
body.flowpro .elementor .fp-trust-v2 p,body.flowpro .elementor .fp-trust-v2 .elementor-heading-title{white-space:nowrap}
@media (max-width:1024px){body.flowpro .elementor .fp-hero__content{max-width:600px}}
@media (max-width:767px){
  body.flowpro .elementor .fp-hero__buttons{flex-direction:column;align-items:stretch}
  body.flowpro .elementor .fp-hero__buttons .elementor-button{width:100%;justify-content:center}
}

/* ---------- Buttons (fp-btn) ---------- */
body.flowpro .elementor .fp-btn .elementor-button{min-height:48px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-weight:600;transition:background-color .2s var(--fp-ease),color .2s var(--fp-ease),border-color .2s var(--fp-ease),transform .2s var(--fp-ease)}
body.flowpro .elementor .fp-btn--primary .elementor-button{background:var(--fp-blue);color:#fff}
body.flowpro .elementor .fp-btn--primary .elementor-button:hover{background:var(--fp-deep);color:#fff}
body.flowpro .elementor .fp-btn--outline .elementor-button{background:transparent;color:#fff;border:2px solid #fff}
body.flowpro .elementor .fp-btn--outline .elementor-button:hover{background:#fff;color:var(--fp-navy)}
@media (max-width:767px){body.flowpro .elementor .fp-btn .elementor-button{min-height:52px}}

/* ---------- Service cards (fp-card in loop item 121) ---------- */
body.flowpro .elementor .fp-cards .swiper-slide{height:auto}
body.flowpro .elementor .fp-cards .e-loop-item{height:100%}
body.flowpro .elementor .fp-card{height:100%;display:flex;flex-direction:column;background:#fff;border-radius:var(--fp-radius);box-shadow:var(--fp-shadow);overflow:hidden;transition:transform .25s var(--fp-ease),box-shadow .25s var(--fp-ease)}
body.flowpro .elementor .fp-card>.e-con-inner{height:100%;display:flex;flex-direction:column;padding:0;gap:0;max-width:none}
body.flowpro .elementor .fp-card:hover{transform:translateY(-4px);box-shadow:var(--fp-shadow-hover)}
body.flowpro .elementor .fp-card__media{position:relative;padding:0;overflow:hidden;line-height:0}
body.flowpro .elementor .fp-card__media picture{display:block}
/* 0.1.2: the art is 1200x800 (3:2) with its notch at the bottom: same ratio = nothing cropped (0.1.0 forced 16:10) */
body.flowpro .elementor .fp-card__media img{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:center;transition:transform .35s var(--fp-ease)}
body.flowpro .elementor .fp-card:hover .fp-card__media img{transform:scale(1.03)}
@media (max-width:767px){body.flowpro .elementor .fp-card__media picture.fp-card-art img{aspect-ratio:1/1}}
body.flowpro .elementor .fp-card__body{flex:1 1 auto;display:flex;flex-direction:column;gap:12px;padding:24px;border:0}
body.flowpro .elementor .fp-card__body .elementor-heading-title{color:var(--fp-navy)}
body.flowpro .elementor .fp-card__excerpt{color:var(--fp-ink);font-size:16px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
body.flowpro .elementor .fp-card__btn{margin-top:auto}
/* 0.1.2: text button "View service →" (blue pill dropped) */
body.flowpro .elementor .fp-card__btn .elementor-button,body.flowpro .elementor a.fp-card__btn{min-height:44px;display:inline-flex;align-items:center;gap:6px;padding:0;border:0;border-radius:0;background:transparent;color:var(--fp-blue);font-weight:600;text-decoration:none;box-shadow:none}
body.flowpro .elementor .fp-card__btn .elementor-button:hover,body.flowpro .elementor .fp-card__btn .elementor-button:focus,body.flowpro .elementor a.fp-card__btn:hover{background:transparent;color:var(--fp-deep)}
body.flowpro .elementor .fp-card__btn .elementor-button-icon{display:none!important}
body.flowpro .elementor .fp-card__btn .elementor-button-text::before{content:none!important}
body.flowpro .elementor .fp-card__btn .elementor-button-content-wrapper::after,body.flowpro .elementor .fp-card__btn .elementor-button::after{content:none!important}
body.flowpro .elementor .fp-card__btn .elementor-button-text::after{content:"\2192";display:inline-block;margin-left:6px;transition:transform .2s var(--fp-ease)}
body.flowpro .elementor .fp-card__btn .elementor-button:hover .elementor-button-text::after{transform:translateX(4px)}
@media (max-width:767px){body.flowpro .elementor .fp-card__body{padding:20px}}

/* ---------- Who we work for (fp-who) ---------- */
/* 0.1.2: art has its own ratio (3:2 desktop, 4:5 mobile): no forced ratio/crop; the column is rounded */
body.flowpro .elementor .fp-who__col{border-radius:16px;overflow:hidden}
body.flowpro .elementor .fp-who__col img{display:block;width:100%;height:auto;border-radius:0}

/* ---------- 0.1.2 helpers (no visual change) ---------- */
body.flowpro .elementor .fp-divider{margin:0;line-height:0}
body.flowpro .elementor .fp-footer-top{pointer-events:none}

/* ---------- Sticky mobile bar (fp-mobile-bar) ---------- */
@media (max-width:767px){
  body.flowpro .elementor .fp-mobile-bar{padding-bottom:env(safe-area-inset-bottom)}
  body.flowpro .elementor .fp-mobile-bar .elementor-button{min-height:56px;width:100%;justify-content:center;border-radius:0}
  body.flowpro{padding-bottom:calc(var(--fp-bar-h) + env(safe-area-inset-bottom))}
}
@media (min-width:768px){body.flowpro .elementor .fp-mobile-bar{display:none!important}}

/* ---------- Focus ---------- */
.flowpro a:focus-visible,.flowpro button:focus-visible,.flowpro input:focus-visible,.flowpro select:focus-visible,.flowpro textarea:focus-visible,.flowpro .elementor-button:focus-visible{outline:3px solid var(--fp-light);outline-offset:3px;border-radius:6px}
.flowpro .fp-hero a:focus-visible,.flowpro .fp-mobile-bar a:focus-visible{outline-color:#fff}

/* ---------- Motion ---------- */
.flowpro .elementor-invisible{animation-duration:.45s!important}
@media (prefers-reduced-motion:reduce){
  .flowpro *,.flowpro *::before,.flowpro *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .flowpro .elementor-invisible{visibility:visible!important;opacity:1!important}
  .flowpro .animated{animation:none!important;transform:none!important}
  body.flowpro .elementor .fp-card:hover,body.flowpro .elementor .fp-card:hover .fp-card__media img,body.flowpro .elementor .fp-card__btn .elementor-button:hover .elementor-button-text::after{transform:none}
}

/* 0.1.3 picture wrapper behaves like the img it wraps */
body.flowpro .elementor picture.fp-card-art{display:block;width:100%}
body.flowpro .elementor picture.fp-card-art img{width:100%}

/* ---------- 0.1.4 (PACK-8-POLISH) ---------- */
/* Loop Carousel: room for the card shadow (0 12px 32px) so it is not clipped by .swiper overflow:hidden (no grey band). */
body.flowpro .elementor .fp-cards .swiper{padding:8px 24px 48px;margin:-8px -24px -48px}
@media (max-width:767px){body.flowpro .elementor .fp-cards .swiper{padding:8px 12px 40px;margin:-8px -12px -40px}}

/* "Where we work" section (fp-area) – 3 equal navy cards */
body.flowpro .elementor .fp-area{position:relative;overflow:hidden}
body.flowpro .elementor .fp-area::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background-image:linear-gradient(rgba(133,173,202,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(133,173,202,.06) 1px,transparent 1px);background-size:48px 48px}
body.flowpro .elementor .fp-area > *{position:relative;z-index:1}
body.flowpro .elementor .fp-area__grid{align-items:stretch}
body.flowpro .elementor .fp-area__card{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-start;color:#fff;border:1px solid rgba(133,173,202,.22);border-radius:16px;box-shadow:inset 0 3px 0 #2152D0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='10' viewBox='0 0 96 10'%3E%3Cpath d='M11.5 0.5H84.5L96 10H0Z' fill='%23122A47' stroke='%2385ADCA' stroke-opacity='.35'/%3E%3C/svg%3E") 50% 100%/96px 10px no-repeat,linear-gradient(160deg,#16335A 0%,#122A47 70%)}
body.flowpro .elementor .fp-area__card .elementor-heading-title{color:#fff}
body.flowpro .elementor .fp-area__card .elementor-widget-text-editor{flex-grow:1;color:#C9D6E8}
body.flowpro .elementor .fp-area__card .elementor-widget-text-editor p{margin:0}
body.flowpro .elementor .fp-area__card .fp-card__btn{margin-top:auto}
body.flowpro .elementor .fp-area__card .fp-card__btn .elementor-button{color:#fff}
body.flowpro .elementor .fp-area__card .fp-card__btn .elementor-button:hover{color:#85ADCA}
body.flowpro .elementor .fp-area__card .fp-card__btn .elementor-button-text::after{color:#85ADCA}

/* Icon tile: works for an Icon widget (Font Awesome / uploaded SVG) or an Image widget (SVG/PNG) with class fp-area__icon. */
body.flowpro .elementor .fp-area__icon{width:auto;margin:7px 0 28px 7px;line-height:0}
body.flowpro .elementor .fp-area__icon .elementor-icon-wrapper{display:block;line-height:0}
body.flowpro .elementor .fp-area__icon .elementor-icon,
body.flowpro .elementor .fp-area__icon img{box-sizing:border-box;width:64px;height:64px;padding:18px;border-radius:50%;background:#2152D0;color:#fff;fill:#fff;display:flex;align-items:center;justify-content:center;object-fit:contain;vertical-align:top;box-shadow:0 0 0 6px #122A47,0 0 0 7px rgba(133,173,202,.45);font-size:28px;line-height:1}
body.flowpro .elementor .fp-area__icon .elementor-icon svg{width:28px;height:28px}
body.flowpro .elementor .fp-area__icon .elementor-icon svg [stroke]:not([stroke="none"]){stroke:#fff}
body.flowpro .elementor .fp-area__icon .elementor-icon i{color:#fff}
/* Fallback when no icon is chosen yet: the same chip with a droplet. */
body.flowpro .elementor .fp-area__icon .elementor-icon:empty{background:#2152D0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3s6 6.5 6 11a6 6 0 0 1-12 0c0-4.5 6-11 6-11z'/%3E%3C/svg%3E") center/28px no-repeat}
body.flowpro .elementor .fp-area__icon:empty::before{content:"";display:block;width:64px;height:64px;border-radius:50%;background:#2152D0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3s6 6.5 6 11a6 6 0 0 1-12 0c0-4.5 6-11 6-11z'/%3E%3C/svg%3E") center/28px no-repeat;box-shadow:0 0 0 6px #122A47,0 0 0 7px rgba(133,173,202,.45)}
@media (max-width:767px){body.flowpro .elementor .fp-area__icon{margin-bottom:20px}}

/* Accent word in headings (wrap in <span class="fp-accent">) */
body.flowpro .elementor .fp-accent{color:#2152D0}
body.flowpro .elementor .fp-area .fp-accent{color:#85ADCA}

/* Service body (PACK-9): prose + tick list */
body.flowpro .elementor .fp-svc-body .elementor-widget-text-editor{max-width:720px;color:#130D13;font-size:18px;line-height:1.6}
body.flowpro .elementor .fp-svc-list ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
body.flowpro .elementor .fp-svc-list li{position:relative;padding-left:36px;line-height:1.6;color:#130D13}
body.flowpro .elementor .fp-svc-list li::before{content:"";position:absolute;left:0;top:.15em;width:24px;height:24px;border-radius:50%;background:#2152D0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat}

/* Footer tap targets on phones (PACK-8 5.13) */
@media (max-width:767px){body.flowpro [data-elementor-type="footer"] .elementor-icon-list-item>a,body.flowpro [data-elementor-type="footer"] .elementor-nav-menu a{min-height:44px;display:flex;align-items:center}}

/* ---------- 0.1.5 (Chappy, 29 Oct 2026) ---------- */
/* 1. No grid-line overlay: switch off the 0.1.4 48 px grid on the navy "Where we work" section. */
body.flowpro .elementor .fp-area::before{content:none!important;background-image:none!important}
/* 2. Remove the "Got a plumbing problem?" CTA band directly above the footer (one Elementor container per page).
      Home 17: 70bca28 · About 31: 4e3f5ca · Services 33: 7f90e700 · Contact 35: 5b08a19b ·
      Single templates 228: 190d6dd3 · 377: cc4aa36 · 380: 2cfa5e9b · 383: 781915e2.
      The footer (template 41, wave fp-footer-top) then sits directly under the previous section. */
body.flowpro .elementor-element-70bca28,body.flowpro .elementor-element-4e3f5ca,body.flowpro .elementor-element-7f90e700,body.flowpro .elementor-element-5b08a19b,
body.flowpro .elementor-element-190d6dd3,body.flowpro .elementor-element-cc4aa36,body.flowpro .elementor-element-2cfa5e9b,body.flowpro .elementor-element-781915e2{display:none!important}