/* ============================================================
   CLEANITIZE — global helper CSS (WP Customizer ▸ Additional CSS)
   Only for effects native Elementor settings cannot reproduce:
   hover lifts, keyframe animations, decorative pseudo-elements,
   the looping process connector, mega-menu, CF7 form styling.
   Classes are attached to native Elementor widgets/containers.
   ============================================================ */
:root{
  --cz-brand:#0090A8; --cz-brand-strong:#00788C; --cz-navy:#0A3D47; --cz-navy-strong:#062E37;
  --cz-fresh:#1FA971; --cz-fresh-strong:#168A5C; --cz-tint:#E4F4F7; --cz-tint2:#F1F9FB;
  --cz-fresh-tint:#E3F6EE; --cz-ink:#0B2E34; --cz-ink-soft:#2E5258; --cz-muted:#5E8086;
  --cz-line:#DDEDF0; --cz-wa:#25D366;
  --sh-sm:0 2px 8px rgba(15,42,43,.06);
  --sh-md:0 14px 34px -16px rgba(15,42,43,.22);
  --sh-lg:0 30px 70px -30px rgba(15,42,43,.34);
}

.cz-hl{ color:var(--cz-brand-strong); }
.cz-rel{ position:relative; }

/* ---------- flex-row layout fixes (containers/widgets default to width:100%) ---------- */
.cz-row{ width:100%; }
.cz-row > .elementor-widget, .cz-row > .e-con{ width:auto!important; }
.cz-tile-ic, .cz-qc-ic, .cz-feat-dot, .cz-fc-ic{ width:auto!important; flex:0 0 auto; }
.cz-stat{ width:auto!important; flex:0 1 auto; }
.cz-head{ max-width:660px; margin-left:auto!important; margin-right:auto!important; width:100%; }
.cz-remove-strip{ max-width:820px; margin-left:auto!important; margin-right:auto!important; }

/* ---------- "more services" divider heading ---------- */
.cz-more-head .elementor-heading-title{ display:flex; align-items:center; gap:14px; justify-content:center; }
.cz-more-head .elementor-heading-title::before,.cz-more-head .elementor-heading-title::after{ content:""; height:1px; background:var(--cz-line); flex:1; }

/* ---------- quote section (dark) contact rows ---------- */
.cz-lead-dark .elementor-widget-container{ color:#B9DAD7; }
.cz-qc-ic .elementor-icon{ width:46px; height:46px; border-radius:12px; background:rgba(255,255,255,.1); display:grid!important; place-items:center; color:#fff; font-size:22px; }
.cz-qc-ic.wa .elementor-icon{ background:#25D366; color:#073f1d; }
/* qc icons are inline SVGs inheriting the dark ink global — force light so they show on the
   navy band (WhatsApp variant stays dark-green on its green chip) */
.cz-qc-ic .elementor-icon, .cz-qc-ic .elementor-icon svg, .cz-qc-ic .elementor-icon i{ color:#fff!important; fill:#fff!important; }
.cz-qc-ic.wa .elementor-icon, .cz-qc-ic.wa .elementor-icon svg, .cz-qc-ic.wa .elementor-icon i{ color:#073f1d!important; fill:#073f1d!important; }
.cz-qc-sub .elementor-widget-container{ font-size:13.5px; color:#A8CECB; }
.cz-qc-row:hover{ background:rgba(255,255,255,.11)!important; }

/* ---------- hero trust chips ---------- */
.cz-trust-chip{ display:inline-flex!important; flex:0 0 auto!important; align-items:center; gap:8px; background:var(--cz-tint2); border:1px solid #EAF6F8; border-radius:100px; padding:9px 15px; width:auto!important; }
.cz-trust-chip > .elementor-widget{ width:auto!important; flex:0 0 auto!important; margin:0; }
.cz-trust-chip .elementor-icon{ font-size:16px; }
.cz-trust-chip .elementor-widget-text-editor{ font-size:14px; font-weight:600; color:var(--cz-navy); }

/* ---------- hero float cards ---------- */
.cz-float-card{ position:absolute; z-index:2; display:flex!important; flex-direction:row; align-items:center; gap:12px; background:#fff; border-radius:18px; box-shadow:var(--sh-lg); padding:14px 16px; border:1px solid #EAF6F8; width:auto!important; max-width:240px; }
.cz-fc-ic .elementor-icon{ width:42px; height:42px; border-radius:12px; display:grid!important; place-items:center; background:var(--cz-tint); color:var(--cz-brand-strong); font-size:22px; }
.cz-float-card .cz-fc-ic{ width:auto; flex:none; }
.cz-fc-b .elementor-heading-title{ font-family:"Bricolage Grotesque",sans-serif; font-size:15px; line-height:1.2; color:var(--cz-ink); }
.cz-fc-s .elementor-widget-container{ font-size:12.5px; color:var(--cz-muted); }
.cz-float-1{ top:18px; left:-28px; } .cz-float-2{ bottom:64px; right:-34px; } .cz-float-2 .cz-fc-ic .elementor-icon{ background:#E4F4F7; color:var(--cz-navy-strong); }
.cz-float-3{ bottom:-22px; left:30px; } .cz-float-3 .cz-fc-ic .elementor-icon{ background:#E7F7EE; color:#1B9E5A; }
@media (max-width:860px){ .cz-float-1{ left:0; } .cz-float-2{ right:0; } .cz-float-3{ left:0; bottom:-30px; } }

/* ---------- hero stats ---------- */
.cz-stats{ border-top:1px solid var(--cz-line); }
.cz-stat-num .elementor-heading-title{ font-family:"Bricolage Grotesque",sans-serif; font-size:clamp(28px,3.4vw,40px); color:var(--cz-brand-strong); line-height:1.05; }
.cz-stat-num.fresh .elementor-heading-title{ color:var(--cz-fresh-strong); }
.cz-stat-lbl .elementor-widget-container{ font-size:14px; color:var(--cz-muted); font-weight:600; }

/* ---------- generic chip (remove-strip) ---------- */
.cz-rs-chip{ display:inline-flex!important; flex:0 0 auto!important; align-items:center; gap:7px; background:var(--cz-tint); color:var(--cz-navy); border-radius:100px; padding:8px 15px; width:auto!important; }
.cz-rs-chip > .elementor-widget{ width:auto!important; flex:0 0 auto!important; margin:0; }
.cz-rs-chip .elementor-icon{ font-size:15px; color:var(--cz-brand-strong); }
.cz-rs-chip .elementor-widget-text-editor{ font-size:14px; font-weight:600; color:var(--cz-navy); }

/* ---------- icon tile (round) used in cards/points ---------- */
.cz-tile-ic .elementor-icon{ width:46px; height:46px; border-radius:13px; display:grid!important; place-items:center; background:var(--cz-tint); color:var(--cz-brand-strong); font-size:23px; }
.cz-tile-ic.fresh .elementor-icon{ background:var(--cz-fresh-tint); color:var(--cz-fresh-strong); }
.cz-tile-ic.navy .elementor-icon{ background:#E4F4F7; color:var(--cz-navy); }
.cz-tile-ic.lg .elementor-icon{ width:56px; height:56px; border-radius:16px; font-size:28px; }

/* ---------- buttons: hover lift + shine sweep (native has color hover only) ---------- */
.cz-btn .elementor-button{ position:relative; overflow:hidden; transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s, background .2s, color .2s, border-color .2s; }
.cz-btn .elementor-button:hover{ transform:translateY(-3px); }
.cz-btn .elementor-button::after{ content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent); transform:skewX(-18deg); transition:left .6s cubic-bezier(.4,0,.2,1); pointer-events:none; }
.cz-btn .elementor-button:hover::after{ left:130%; }
.cz-btn-ghost .elementor-button:hover{ box-shadow:var(--sh-md); }

/* ---------- eyebrow: uppercase label preceded by a cyan dash ---------- */
.cz-eyebrow{ }
.cz-eyebrow .elementor-heading-title,.cz-eyebrow .elementor-widget-container{ display:inline-flex; align-items:center; gap:8px; }
.cz-eyebrow .elementor-heading-title::before{ content:""; width:22px; height:2px; background:var(--cz-navy); border-radius:2px; display:inline-block; }
.cz-eyebrow.cz-eyebrow-center .elementor-heading-title{ justify-content:center; }
.cz-eyebrow.cz-eyebrow-center .elementor-heading-title::after{ content:""; width:22px; height:2px; background:var(--cz-navy); border-radius:2px; display:inline-block; }
.cz-eyebrow.cz-on-dark .elementor-heading-title::before,.cz-eyebrow.cz-on-dark .elementor-heading-title::after{ background:#6FC6DC; }

/* ---------- hero pill with pulsing green dot ---------- */
.cz-pill .elementor-heading-title{ display:inline-flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--cz-line); box-shadow:var(--sh-sm); border-radius:100px; padding:8px 16px 8px 14px; }
.cz-pill .elementor-heading-title::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--cz-wa); box-shadow:0 0 0 0 rgba(37,211,102,.5); animation:czDot 2.4s ease-out infinite; flex:none; }
@keyframes czDot{ 0%{box-shadow:0 0 0 0 rgba(37,211,102,.45);} 70%,100%{box-shadow:0 0 0 9px rgba(37,211,102,0);} }

/* ---------- hero photo frame (offset cyan outline behind photo) ---------- */
.cz-hero-photo{ position:relative; }
.cz-hero-photo::before{ content:""; position:absolute; inset:-14px -14px auto auto; width:64%; height:70%; border:1.5px solid var(--cz-brand); border-radius:34px; z-index:0; opacity:.5; pointer-events:none; }
.cz-hero-photo img{ position:relative; z-index:1; }

/* ---------- floating hero cards: gentle bob ---------- */
@keyframes czFloaty{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);} }
.cz-float .elementor-icon-box-wrapper,.cz-float{ }
.cz-float-1{ animation:czFloaty 6s ease-in-out infinite; }
.cz-float-2{ animation:czFloaty 6s ease-in-out infinite .8s; }
.cz-float-3{ animation:czFloaty 7s ease-in-out infinite 1.6s; }

/* ---------- generic card lift ---------- */
.cz-card{ transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s; }
.cz-card:hover{ transform:translateY(-8px); box-shadow:var(--sh-lg); }

/* ---------- service cards: image zoom + colored top accent on hover ---------- */
.cz-svc-card{ overflow:hidden; transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-top-color .3s; border-top:3px solid transparent; }
.cz-svc-card:hover{ transform:translateY(-8px); box-shadow:var(--sh-lg); }
.cz-svc-card .elementor-widget-image img{ transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.cz-svc-card:hover .elementor-widget-image img{ transform:scale(1.08); }
.cz-svc-1:hover{ border-top-color:var(--cz-brand); }
.cz-svc-2:hover{ border-top-color:var(--cz-fresh); }
.cz-svc-3:hover{ border-top-color:var(--cz-navy); }
.cz-svc-4:hover{ border-top-color:var(--cz-brand-strong); }
/* service number badge */
.cz-svc-num{ position:absolute; top:12px; left:12px; z-index:3; width:34px; height:34px; border-radius:10px; color:#fff; display:grid; place-items:center; font-family:"Bricolage Grotesque",sans-serif; font-weight:700; box-shadow:var(--sh-sm); }
.cz-svc-num.n1{ background:var(--cz-brand); } .cz-svc-num.n2{ background:var(--cz-fresh); }
.cz-svc-num.n3{ background:var(--cz-navy); } .cz-svc-num.n4{ background:var(--cz-brand-strong); }
.cz-svc-card .elementor-widget-heading a:hover{ color:var(--cz-brand-strong); }
/* learn-more arrow nudge */
.cz-svc-link a:hover,.cz-svc-card:hover .cz-svc-link a{ gap:12px; }

/* ---------- image cover heights (Elementor image widget has no height crop) ---------- */
.cz-hero-photo img{ height:clamp(380px,42vw,520px); width:100%; object-fit:cover; }
.cz-why-img img{ height:clamp(400px,42vw,500px); width:100%; object-fit:cover; }
.cz-feat-img img{ height:clamp(400px,44vw,520px); width:100%; object-fit:cover; }
.cz-svc-card .elementor-widget-image img{ height:210px; width:100%; object-fit:cover; border-radius:0; }
.cz-svc-card .elementor-widget-image,.cz-svc-card .elementor-widget-image .elementor-widget-container{ line-height:0; }

/* ---------- service card learn-more link ---------- */
.cz-svc-link a{ display:inline-flex; align-items:center; gap:7px; color:var(--cz-brand-strong); font-weight:700; font-size:14.5px; transition:gap .2s; }
.cz-svc-card .elementor-widget-heading a{ color:var(--cz-ink); transition:color .2s; }

/* ---------- photo + floating badge wrapper ---------- */
.cz-photo-wrap{ position:relative; }
.cz-why-badge{ position:absolute; bottom:-18px; right:-14px; display:flex!important; flex-direction:row; align-items:center; gap:12px; background:#fff; border:1px solid #EAF6F8; border-radius:18px; padding:14px 18px; box-shadow:var(--sh-lg); width:auto!important; max-width:250px; z-index:2; }
@media (max-width:880px){ .cz-why-badge{ right:0; } }

/* ---------- featured green check dots ---------- */
.cz-feat-dot .elementor-icon{ width:26px; height:26px; border-radius:8px; background:var(--cz-fresh); color:#fff; display:grid!important; place-items:center; font-size:15px; }
.cz-feat-pt .elementor-widget-text-editor{ font-size:15.5px; font-weight:600; color:var(--cz-ink-soft); }

/* ---------- process node ---------- */
.cz-proc-node{ width:76px; height:76px; border-radius:50%; background:#fff; border:2px solid var(--cz-tint); margin:0 auto 22px; display:grid!important; place-items:center; box-shadow:var(--sh-md); position:relative; }
.cz-proc-node .elementor-icon{ font-size:32px; color:var(--cz-brand-strong); }
.cz-proc-step.last.lit .cz-proc-node .elementor-icon{ color:var(--cz-fresh-strong); }
.cz-proc-step h3,.cz-proc-step .elementor-widget-heading{ font-size:19px; }

/* ---------- FAQ accordion ---------- */
.cz-faq{ max-width:820px; margin-left:auto!important; margin-right:auto!important; }
.cz-faq .elementor-accordion-item{ background:#fff; border:1px solid var(--cz-line)!important; border-radius:18px; box-shadow:var(--sh-sm); overflow:hidden; margin-bottom:14px; }
.cz-faq .elementor-tab-title{ padding:20px 22px!important; font-family:"Bricolage Grotesque",sans-serif!important; font-weight:700; font-size:17px; color:var(--cz-ink)!important; border:none!important; }
.cz-faq .elementor-tab-content{ padding:0 22px 20px!important; color:var(--cz-ink-soft); font-size:15px; line-height:1.65; border:none!important; }
.cz-faq .elementor-accordion-icon{ color:var(--cz-brand-strong); }

/* ---------- "more services" image tiles ---------- */
.cz-tile{ position:relative; display:block; aspect-ratio:16/9; }
.cz-tile .elementor-widget-image{ position:absolute; inset:0; margin:0; }
.cz-tile .elementor-widget-image,.cz-tile .elementor-widget-image .elementor-widget-container,.cz-tile .elementor-widget-image img{ width:100%; height:100%; object-fit:cover; }
.cz-tile{ position:relative; overflow:hidden; border-radius:18px; box-shadow:var(--sh-sm); transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.cz-tile:hover{ transform:translateY(-6px); box-shadow:var(--sh-lg); }
.cz-tile img{ transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.cz-tile:hover img{ transform:scale(1.06); }
.cz-tile .cz-tile-cap{ position:absolute; left:12px; right:12px; bottom:12px; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:10px; background:rgba(10,61,71,.82); color:#fff; font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:15px; padding:10px 14px; border-radius:11px; }
.cz-tile .cz-tile-cap::after{ content:"→"; transition:transform .25s; }
.cz-tile:hover .cz-tile-cap::after{ transform:translateX(4px); }

/* ---------- why-points: slide right on hover ---------- */
.cz-why-point{ transition:transform .25s, box-shadow .25s, border-color .25s; }
.cz-why-point:hover{ transform:translateX(6px); box-shadow:var(--sh-md); border-color:var(--cz-tint); }
/* benefit / contact rows */
.cz-row-hover{ transition:transform .25s, box-shadow .25s, background .25s, border-color .25s; }
.cz-row-hover:hover{ transform:translateX(5px); box-shadow:var(--sh-md); }

/* chips */
.cz-chip .elementor-heading-title,.cz-chip{ }

/* ---------- icon tile rotate on card hover (why cleanitize) ---------- */
.cz-icon-tile .elementor-icon{ transition:transform .3s; }
.cz-card:hover .cz-icon-tile .elementor-icon{ transform:rotate(-6deg) scale(1.05); }

/* ---------- floating info badge ---------- */
.cz-badge{ box-shadow:var(--sh-lg); }

/* ---------- featured ribbon ---------- */
.cz-ribbon{ position:absolute; top:22px; left:-16px; z-index:3; background:var(--cz-navy); color:#fff; font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:14px; padding:10px 18px; border-radius:100px; box-shadow:0 16px 34px -16px rgba(10,61,71,.4); }

/* ---------- PROCESS connector: dashed line + traveling progress + lit nodes ---------- */
.cz-proc{ position:relative; }
/* the 4 steps sit in their own grid above the connector layer */
.cz-proc-steps{ position:relative; z-index:1; }
/* connector layer: absolute overlay so the progress bars never take grid cells */
.cz-proc-track{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.cz-proc::before{ content:""; position:absolute; top:38px; left:12%; right:12%; height:2px; background:repeating-linear-gradient(90deg,var(--cz-brand) 0 10px,transparent 10px 20px); opacity:.35; z-index:0; }
/* Elementor's .e-con::before injects a width that beats right:12% and runs the
   dashed line the full container width (past node 4). Force left+right to size it. */
.cz-proc::before{ width:auto!important; left:12%!important; right:12%!important; }
.cz-proc .cz-proc-prog{ position:absolute; top:37px; width:0; height:4px; border-radius:4px; z-index:1; }
.cz-proc .cz-proc-prog.cyan{ left:12.5%; background:var(--cz-brand); box-shadow:0 4px 12px -2px rgba(0,144,168,.5); transition:width .8s cubic-bezier(.4,0,.2,1); }
.cz-proc .cz-proc-prog.green{ left:62.5%; background:var(--cz-fresh); box-shadow:0 4px 12px -2px rgba(31,169,113,.5); transition:width .8s cubic-bezier(.4,0,.2,1); }
/* riding dot at the leading edge of each bar (cyan rides 1->3, hands off to green 3->4) */
.cz-proc .cz-proc-prog::after{ content:""; position:absolute; right:-7px; top:50%; width:14px; height:14px; border-radius:50%; transform:translateY(-50%); opacity:0; transition:opacity .3s; }
.cz-proc .cz-proc-prog.cyan::after{ background:var(--cz-brand); box-shadow:0 0 0 5px rgba(0,144,168,.18); }
.cz-proc .cz-proc-prog.green::after{ background:var(--cz-fresh); box-shadow:0 0 0 5px rgba(31,169,113,.2); }
.cz-proc.run .cz-proc-prog.cyan::after{ opacity:1; }
.cz-proc.s4 .cz-proc-prog.cyan::after{ opacity:0; }
.cz-proc.s4 .cz-proc-prog.green::after{ opacity:1; }
/* node lift when lit */
.cz-proc-step .cz-proc-node{ transition:transform .45s cubic-bezier(.2,.8,.2,1), border-color .45s, box-shadow .45s, background .45s; }
.cz-proc-step.lit .cz-proc-node{ border-color:var(--cz-brand)!important; background:var(--cz-tint2); transform:translateY(-6px) scale(1.04); box-shadow:0 16px 32px -12px rgba(0,144,168,.55); }
.cz-proc-step.lit.last .cz-proc-node{ border-color:var(--cz-fresh)!important; background:var(--cz-fresh-tint); box-shadow:0 16px 32px -12px rgba(31,169,113,.55); }
/* freeze all transitions during the JS reset so bars/nodes snap back instantly */
.cz-proc.no-anim .cz-proc-prog,.cz-proc.no-anim .cz-proc-node{ transition:none!important; animation:none!important; }
.cz-proc-node{ position:relative; }
.cz-proc-tag{ position:absolute; top:-6px; right:-6px; width:26px; height:26px; border-radius:50%; background:var(--cz-navy); color:#fff; display:grid; place-items:center; font-family:"Bricolage Grotesque",sans-serif; font-size:13px; font-weight:700; z-index:2; }
.cz-proc-step.last .cz-proc-tag{ background:var(--cz-fresh); }
/* the number digit is an inner heading-title that inherits the dark 'primary' global;
   force it white so it shows on the navy/green badge */
.cz-proc-tag .elementor-heading-title{ color:#fff!important; }
@media (max-width:760px){ .cz-proc::before,.cz-proc .cz-proc-prog{ display:none; } }

/* ---------- WhatsApp buttons: legible dark-green label + icon ----------
   The Kit 'accent' (navy #0A3D47) global overrode the intended #073f1d on every
   WhatsApp button (cz_button fg=>'navy' linked the global, which wins), so the
   "WhatsApp …" label rendered bluey-navy on the green pill — low-contrast / hard
   to read. Force the intended dark green on text + icon for ALL wa.me buttons so
   they're consistent and legible. (white on #25D366 is only ~1.8:1, so dark green
   is the correct high-contrast choice here.) */
.elementor-button[href*="wa.me"],
.elementor-button[href*="wa.me"] .elementor-button-text,
.elementor-button[href*="wa.me"] .elementor-button-icon{ color:#073f1d!important; fill:#073f1d!important; }
.elementor-button[href*="wa.me"] svg,
.elementor-button[href*="wa.me"] svg path{ fill:#073f1d!important; }
/* inline "Speak with Cleanitize on WhatsApp" link in the quote form was teal (#00788C,
   bluey) — match the WhatsApp dark green so every WhatsApp touchpoint is the same colour */
.cz-quote-form a[href*="wa.me"]{ color:#073f1d!important; }

/* ---------- floating WhatsApp button (fixed) ---------- */
.cz-float-wa{ position:fixed!important; right:20px; bottom:20px; z-index:200; }
.cz-float-wa .elementor-button{ background:var(--cz-wa); color:#073f1d; border-radius:100px; box-shadow:0 14px 32px -8px rgba(37,211,102,.6); transition:transform .25s, box-shadow .25s; }
.cz-float-wa .elementor-button:hover{ transform:translateY(-3px) scale(1.02); box-shadow:0 18px 38px -8px rgba(37,211,102,.7); }
@media (max-width:600px){ .cz-float-wa .elementor-button span.elementor-button-text{ display:none; } .cz-float-wa{ right:16px; bottom:16px; } }

/* ---------- header sticky transparent->white ---------- */
.cz-header{ position:sticky!important; top:0; z-index:100; overflow-x:clip; transition:background .3s, box-shadow .3s, padding .3s; }
/* HFE nests .cz-header inside a short <header>/.elementor wrapper, so sticky on .cz-header has
   no room to stick. The <header> wrapper's parent (.hfeed.site) spans the whole page — make the
   wrapper itself sticky so the bar stays pinned on scroll (fixes mobile especially). */
.site > header{ position:sticky!important; top:0; z-index:100; }
.cz-header.cz-scrolled{ background:rgba(255,255,255,.92)!important; backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--cz-line),0 10px 30px -22px rgba(15,42,43,.4); }
.elementor-sticky--effects.cz-header{ background:rgba(255,255,255,.9)!important; backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--cz-line),0 10px 30px -22px rgba(15,42,43,.4); }
.cz-logo img{ height:36px; width:auto; display:block; }
.cz-logo-foot img{ height:40px; width:auto; display:block; }
/* ===== NATIVE HEADER NAV (full control) ===== */
.cz-hdr-bar{ position:relative; }
.cz-menu{ display:flex!important; flex-direction:row; align-items:center; gap:2px; }
.cz-menu > .elementor-widget, .cz-menu > .e-con{ width:auto!important; }
.cz-mlink a{ display:inline-flex; align-items:center; gap:5px; padding:9px 14px; border-radius:100px; font-family:"Manrope",sans-serif; font-weight:600; font-size:15px; color:var(--cz-ink-soft); position:relative; transition:color .2s; white-space:nowrap; }
.cz-mlink a:hover{ color:var(--cz-brand-strong); }
.cz-mlink a::after{ content:""; position:absolute; left:14px; right:14px; bottom:6px; height:2px; background:var(--cz-brand); border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform .28s cubic-bezier(.2,.8,.2,1); }
.cz-mlink a:hover::after{ transform:scaleX(1); }
.cz-chev{ font-size:11px; }
.cz-has-drop{ position:static; width:auto!important; }
.cz-drop{ position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%); display:none!important; flex-direction:column; min-width:250px; background:#fff; border:1px solid var(--cz-line); border-radius:14px; box-shadow:var(--sh-lg); padding:8px; z-index:140; }
/* Services dropdown now opens on CLICK (cz.js toggles .cz-open) with a smooth fade/slide —
   see the min-width:1101 rules below. (Hover-to-open removed.) */
.cz-dlink{ width:100%; }
.cz-dlink a{ display:block; padding:9px 12px; border-radius:10px; font-size:14px; font-weight:600; color:var(--cz-ink-soft); white-space:nowrap; }
.cz-dlink a:hover{ background:var(--cz-tint); color:var(--cz-brand-strong); }
.cz-burger{ display:none!important; cursor:pointer; }
.cz-burger .elementor-icon{ color:var(--cz-navy); font-size:24px; }
/* header bar balance: the boxed bar's flex row is .e-con-inner; its three items
   (logo / nav / actions) are Elementor content_width:full = width:100%, which made
   the flex row shrink chaotically (logo image overflowed onto the nav). Size each
   item to its content so space-between can balance them: logo left, nav centred,
   actions right. The nav stays shrinkable so it never overruns the actions. */
.cz-hdr-bar .e-con-inner{ gap:18px!important; }
.cz-hdr-bar .e-con-inner > *{ width:auto!important; flex:0 0 auto!important; }
.cz-header .cz-menu{ flex:0 1 auto!important; min-width:0; }
.cz-mlink a{ padding:9px 11px; }
@media (max-width:1100px){
  .cz-burger{ display:flex!important; }
  .cz-hide-mobile{ display:none!important; }
  /* IMPORTANT: backdrop-filter on the scrolled header makes it a *containing block* for the
     fixed mobile menu (a DOM descendant), so once scrolled the menu's bottom:0 anchored to the
     46px header bar and collapsed to a sliver. Drop it at mobile so the panel fills the viewport.
     The header stays a near-opaque white bar + shadow, so it still reads solid on scroll. */
  .cz-header.cz-scrolled, .elementor-sticky--effects.cz-header{ backdrop-filter:none!important; -webkit-backdrop-filter:none!important; }
  /* full-screen mobile menu: a fixed panel split into a scrolling nav list (.cz-menu-scroll,
     wrapper added by cz.js) + a non-scrolling Request-a-Quote footer, so the CTA can NEVER be
     covered by the scrolling list — no sticky/z-index reliance (robust on iOS Safari, where
     position:sticky + -webkit-overflow-scrolling paints under the momentum-scrolled content).
     cz.js sets inline `top` to the header's exact bottom on open (falls back to 64px). */
  .cz-menu{ position:fixed!important; top:64px; left:0; right:0; bottom:0; flex-direction:column!important; flex-wrap:nowrap!important; align-items:stretch!important;
    width:auto!important; max-width:none; background:#fff; border:0; border-radius:0; box-shadow:0 16px 30px -20px rgba(15,42,43,.4);
    padding:0!important; gap:0!important; overflow:hidden!important; overscroll-behavior:contain;
    display:none!important; z-index:250; }
  .cz-menu-scroll{ flex:1 1 auto; min-height:0; width:100%; display:flex; flex-direction:column; align-items:stretch; gap:2px;
    overflow-y:auto; overscroll-behavior:contain; padding:18px 22px 12px; }
  /* each top-level item full-width in the single column (was content-width + wrapping sideways) */
  .cz-menu-scroll > .elementor-widget, .cz-menu-scroll > .e-con, .cz-menu > .cz-menu-cta{ width:100%!important; flex:0 0 auto!important; }
  .cz-hdr-bar.cz-open .cz-menu{ display:flex!important; }
  .cz-mlink a{ width:100%; padding:11px 14px; font-size:16px; }
  .cz-mlink a::after{ display:none; }
  .cz-has-drop{ width:100%!important; }
  .cz-drop{ position:static!important; transform:none; display:flex!important; box-shadow:none; border:none; padding:0 0 0 10px; min-width:0; }
}
/* Request-a-Quote CTA inside the mobile nav panel (injected by cz.js) — hidden elsewhere */
.cz-menu-cta{ display:none; }
@media (max-width:600px){
  /* phone header = logo (left) + burger (right) on ONE row; no wrap, no crowding */
  .cz-hdr-bar .e-con-inner{ flex-wrap:nowrap!important; gap:12px!important; }
  .cz-header .cz-logo img{ height:30px!important; }
  .cz-header.cz-scrolled .cz-logo img{ height:26px!important; }
  .cz-hdr-bar .e-con-inner > *:last-child .elementor-button{ display:none!important; } /* hide top Request a Quote pill */
  /* Request a Quote as a non-scrolling footer at the bottom of the menu panel — a flex sibling
     of .cz-menu-scroll (cz.js appends it last), OUTSIDE the scroll area, so it's always fully
     visible and can never be covered by the scrolling nav list (no sticky/z-index needed). */
  .cz-menu-cta{ display:block; flex:0 0 auto; width:auto; margin:0;
    padding:12px 22px calc(14px + env(safe-area-inset-bottom)); background:#fff;
    border-top:1px solid var(--cz-line); box-shadow:0 -10px 22px -12px rgba(15,42,43,.22); }
  .cz-menu-cta a{ display:block; text-align:center; background:var(--cz-navy); color:#fff!important; font-family:"Manrope",sans-serif; font-weight:700; font-size:16px; padding:13px 18px; border-radius:100px; }
  .cz-menu-cta a:hover{ background:var(--cz-navy-strong); }
}

/* ---------- footer ---------- */
.cz-foot-links a{ color:#A8CECB; transition:color .2s; }
.cz-foot-links a:hover{ color:#fff; }
.cz-foot-links ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.cz-foot-links li{ font-size:14.5px; }
.cz-foot-social .elementor-icon{ width:40px; height:40px; border-radius:11px; background:rgba(255,255,255,.07); display:grid!important; place-items:center; color:#DDF0EE; font-size:19px; transition:background .25s, transform .25s; }
.cz-foot-social .elementor-icon:hover{ background:#0090A8; transform:translateY(-3px); color:#fff; }
.cz-foot-contact .elementor-icon-list-icon svg,.cz-foot-contact .elementor-icon-list-icon i{ color:#6FD8CE; fill:#6FD8CE; }

/* ---------- CF7 quote form styling (matches design inputs) ---------- */
.cz-quote-form .wpcf7-form{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cz-quote-form .cz-fld{ display:flex; flex-direction:column; gap:7px; margin:0; min-width:0; }
.cz-quote-form .cz-f-full{ grid-column:1 / -1; }
.cz-quote-form .wpcf7-response-output{ grid-column:1 / -1; margin:0; border-radius:12px; font-size:14px; }
.cz-quote-form .wpcf7-spinner{ margin:8px auto 0; }
.cz-quote-form label{ font-size:13px; font-weight:700; color:var(--cz-ink-soft); font-family:"Manrope",sans-serif; }
.cz-quote-form input,.cz-quote-form select,.cz-quote-form textarea{
  font-family:"Manrope",sans-serif; font-size:15px; color:var(--cz-ink); padding:13px 15px;
  border:1.5px solid var(--cz-line); border-radius:12px; background:#F3FAFB; width:100%; min-width:0; max-width:100%; box-sizing:border-box; transition:border-color .2s, box-shadow .2s, background .2s;
}
.cz-quote-form select{ text-overflow:ellipsis; appearance:none; -webkit-appearance:none; }
.cz-quote-form input:focus,.cz-quote-form select:focus,.cz-quote-form textarea:focus{ outline:none; border-color:var(--cz-brand); background:#fff; box-shadow:0 0 0 4px var(--cz-tint); }
.cz-quote-form textarea{ resize:vertical; min-height:92px; }
.cz-quote-form .wpcf7-submit{
  grid-column:1 / -1; width:100%; background:var(--cz-navy); color:#fff; border:none; border-radius:100px;
  font-family:"Manrope",sans-serif; font-weight:700; font-size:17px; padding:17px 32px; cursor:pointer; transition:transform .22s, background .2s, box-shadow .22s;
  box-shadow:0 16px 34px -16px rgba(10,61,71,.4); margin-top:6px;
}
.cz-quote-form .wpcf7-submit:hover{ transform:translateY(-3px); background:var(--cz-navy-strong); }
@media (max-width:600px){ .cz-quote-form .wpcf7-form{ grid-template-columns:1fr; } }

/* ---------- final CTA box decorative circles ---------- */
.cz-cta-box{ position:relative; overflow:hidden; }
.cz-cta-box::before,.cz-cta-box::after{ content:""; position:absolute; border-radius:50%; background:rgba(255,255,255,.08); pointer-events:none; }
.cz-cta-box::before{ width:320px; height:320px; top:-120px; right:-80px; }
.cz-cta-box::after{ width:240px; height:240px; bottom:-120px; left:-60px; }

/* ============ secondary pages ============ */
/* overflow-x:clip (not hidden) blocks horizontal scroll WITHOUT creating a scroll
   container — so it doesn't break position:sticky on the header (esp. on mobile). */
html,body{ overflow-x:clip; max-width:100%; }
/* mobile overflow guard */
@media (max-width:767px){
  .elementor-widget{ max-width:100%!important; }
  .cz-stats{ gap:22px 30px!important; }
  .cz-float-card{ max-width:200px!important; }
}
/* breadcrumb */
.cz-crumb a{ color:var(--cz-brand-strong); }
.cz-crumb .elementor-widget-container{ font-size:13.5px; color:var(--cz-muted); font-weight:600; }
/* service hero chips */
.cz-hchip{ display:inline-flex!important; flex:0 0 auto!important; align-items:center; gap:7px; background:var(--cz-tint2); border:1px solid #EAF6F8; border-radius:100px; padding:8px 14px; width:auto!important; }
.cz-hchip > .elementor-widget{ width:auto!important; flex:0 0 auto!important; margin:0; }
.cz-hchip .elementor-icon{ font-size:15px; color:var(--cz-brand-strong); }
.cz-hchip .elementor-widget-text-editor{ font-size:13.5px; font-weight:600; color:var(--cz-navy); }
.cz-hero-media img{ height:clamp(320px,38vw,440px); width:100%; object-fit:cover; }
/* dark "matters" section */
.cz-matters .cz-eyebrow .elementor-heading-title{ color:var(--cz-brand-light); }
.cz-matters .cz-eyebrow .elementor-heading-title::before,.cz-matters .cz-eyebrow .elementor-heading-title::after{ background:var(--cz-brand-light); }
.cz-info-tile{ background:#fff; border:1px solid var(--cz-line); border-radius:18px; padding:24px 22px; box-shadow:var(--sh-sm); transition:transform .25s,box-shadow .25s; }
.cz-info-tile:hover{ transform:translateY(-5px); box-shadow:var(--sh-md); }
.cz-info-tile-ic .elementor-icon{ width:52px; height:52px; border-radius:14px; background:var(--cz-tint); color:var(--cz-brand-strong); display:grid!important; place-items:center; font-size:26px; }
.cz-info-tile.fresh .cz-info-tile-ic .elementor-icon{ background:var(--cz-fresh-tint); color:var(--cz-fresh-strong); }
.cz-info-b .elementor-heading-title{ font-family:"Bricolage Grotesque",sans-serif; font-size:17px; color:var(--cz-ink); }
.cz-info-p .elementor-widget-container{ font-size:14px; color:var(--cz-ink-soft); }
/* contact cards */
.cz-contact-card{ transition:transform .25s,box-shadow .25s,border-color .25s; }
.cz-contact-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); border-color:var(--cz-tint)!important; }
.cz-cc-ic{ width:auto!important; flex:0 0 auto; }
.cz-cc-ic .elementor-icon{ width:46px; height:46px; border-radius:12px; background:var(--cz-tint); color:var(--cz-brand-strong); display:grid!important; place-items:center; font-size:22px; }
.cz-cc-ic.wa .elementor-icon{ background:var(--cz-wa); color:#073f1d; }
.cz-cc-b .elementor-heading-title{ font-family:"Bricolage Grotesque",sans-serif; font-size:15.5px; color:var(--cz-ink); }
.cz-cc-s .elementor-widget-container{ font-size:13px; color:var(--cz-muted); }
/* CTA band (brand cyan box) */
.cz-cta-box h2,.cz-cta-box .elementor-heading-title{ color:#fff; }
.cz-cta-box .cz-cta-sub .elementor-widget-container{ color:#E0F5F3; }
/* related cards (service pages) */
.cz-related-card{ transition:transform .25s,box-shadow .25s,border-color .25s; }
.cz-related-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); border-color:var(--cz-tint)!important; }
.cz-related-card .cz-cc-b .elementor-heading-title{ font-size:15.5px; }
/* included grid (service pages) */
.cz-incl-ic{ width:auto!important; flex:0 0 auto; }
.cz-incl-ic .elementor-icon{ width:34px; height:34px; border-radius:9px; background:var(--cz-tint); color:var(--cz-brand-strong); display:grid!important; place-items:center; font-size:19px; }
.cz-incl-item.fresh .cz-incl-ic .elementor-icon{ background:var(--cz-fresh-tint); color:var(--cz-fresh-strong); }
.cz-incl-b .elementor-heading-title{ font-family:"Bricolage Grotesque",sans-serif; font-size:16px; color:var(--cz-ink); }
.cz-incl-p .elementor-widget-container{ font-size:14px; color:var(--cz-ink-soft); }
/* service points (cyan dot) */
.cz-svc-dot{ width:auto!important; flex:0 0 auto; }
.cz-svc-dot .elementor-icon{ width:26px; height:26px; border-radius:8px; background:var(--cz-brand); color:#fff; display:grid!important; place-items:center; font-size:15px; }
.cz-svc-pt .elementor-widget-text-editor{ font-size:15.5px; color:var(--cz-ink-soft); }
.cz-svc-figure img{ height:clamp(320px,40vw,460px); width:100%; object-fit:cover; }
/* about photos */
.cz-about-img img{ width:100%; object-fit:cover; }
.cz-about-tag{ display:inline-flex!important; flex:0 0 auto!important; width:auto!important; background:var(--cz-tint); color:var(--cz-navy); border-radius:100px; padding:8px 16px; font-size:14px; font-weight:600; }
.cz-about-tag.fresh{ background:var(--cz-fresh-tint); color:var(--cz-fresh-strong); }
/* before/after comparison */
.cz-ba-card img{ width:100%; height:clamp(220px,28vw,300px); object-fit:cover; }
/* before/after comparison cards + placeholder slots */
.cz-baf-note{ display:inline-flex!important; width:auto!important; gap:10px; align-items:center; background:var(--cz-tint); border:1px dashed var(--cz-navy); color:var(--cz-navy-strong); border-radius:100px; padding:9px 18px; }
.cz-baf-note .elementor-widget-container{ font-size:13.5px; font-weight:700; color:var(--cz-navy-strong); }
.cz-ba-card{ background:#fff; border:1px solid var(--cz-line); border-radius:26px; padding:22px; box-shadow:var(--sh-sm); }
.cz-ba-head-ic{ width:auto!important; flex:0 0 auto; }
.cz-ba-head-ic .elementor-icon{ width:46px; height:46px; border-radius:12px; background:var(--cz-tint); color:var(--cz-brand-strong); display:grid!important; place-items:center; font-size:22px; }
.cz-ba-head-b .elementor-heading-title{ font-family:"Bricolage Grotesque",sans-serif; font-size:18px; color:var(--cz-ink); }
.cz-ba-head-s .elementor-widget-container{ font-size:13.5px; color:var(--cz-muted); }
/* real client before/after pairs: UNIFORM fixed 4:3 frames (object-fit:cover) so every
   before/after is the same tidy size; per-image focus keeps the baked-in "Before"/"After"
   label + main subject in view. Side-by-side on desktop/tablet, stacked on phones. */
/* UNIFORM fixed 4:3 frames, but the WHOLE photo fits inside (object-fit:contain) so tall
   pieces (gaming chair, wingback armchair) are never cropped — they sit centered on a soft
   neutral mat. Every frame is the same tidy size; labels always fully visible. */
.cz-bapair-img{ aspect-ratio:1/1; overflow:hidden; border-radius:16px; background:#eef4f6; border:1px solid var(--cz-line); min-height:0; display:block!important; }
/* the <img> is nested in Elementor's widget wrappers, so the whole chain must fill the frame
   height for object-fit to work against it (else the image just sits at natural size). */
.cz-bapair-img .elementor-widget-image,
.cz-bapair-img .elementor-widget-container,
.cz-bapair-img figure,
.cz-bapair-img a{ height:100%!important; width:100%; margin:0!important; padding:0!important; display:block; line-height:0; }
.cz-bapair .cz-bapair-img img{ width:100%!important; height:100%!important; object-fit:contain!important; object-position:50% 50%; display:block; }
.cz-bapair-grid{ align-items:start; }
.cz-ba-slot{ border:2px dashed #BFE0E6!important; border-radius:18px; min-height:220px; align-items:center!important; justify-content:center!important; background:#F7FCFD; text-align:center; padding:20px; }
.cz-ba-slot .elementor-icon{ font-size:30px; color:#9bc6cf; }
.cz-ba-lbl .elementor-heading-title{ font-family:"Bricolage Grotesque",sans-serif; font-size:20px; letter-spacing:.08em; color:var(--cz-muted); }
.cz-ba-hint .elementor-widget-container{ font-size:13px; color:#9bb3b8; }
/* blog cards */
.cz-blog-card{ overflow:hidden; transition:transform .3s,box-shadow .3s; }
.cz-blog-card:hover{ transform:translateY(-8px); box-shadow:var(--sh-lg); }
.cz-blog-card .elementor-widget-image img{ width:100%; height:200px; object-fit:cover; }
.cz-blog-pill .elementor-heading-title{ display:inline-block; background:var(--cz-tint); color:var(--cz-brand-strong); border-radius:100px; padding:5px 12px; font-family:"Manrope",sans-serif; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.cz-blog-meta .elementor-widget-container{ font-size:13px; color:var(--cz-muted); }
.cz-blog-card .cz-svc-link a{ margin-top:6px; }
/* single post */
.cz-cover img{ width:100%; height:clamp(300px,40vw,460px); object-fit:cover; border-radius:26px; }
.cz-post-cat .elementor-heading-title{ display:inline-block; background:var(--cz-tint); color:var(--cz-brand-strong); border-radius:100px; padding:6px 14px; font-family:"Manrope",sans-serif; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.cz-post-byline .elementor-widget-container{ font-size:14px; color:var(--cz-muted); font-weight:600; }
.cz-post-body{ max-width:760px; margin-left:auto!important; margin-right:auto!important; }
.cz-post-body .elementor-widget-container{ font-size:17px; line-height:1.75; color:var(--cz-ink-soft); }
.cz-post-body h2{ font-family:"Bricolage Grotesque",sans-serif; font-size:28px; color:var(--cz-ink); margin:32px 0 12px; letter-spacing:-.02em; line-height:1.15; }
.cz-post-body p{ margin:0 0 18px; }
.cz-post-body ul{ margin:0 0 18px; padding-left:22px; }
.cz-post-body li{ margin:0 0 8px; }
.cz-post-body a{ color:var(--cz-brand-strong); font-weight:700; }
.cz-post-body strong{ color:var(--cz-ink); }
.cz-post-body .post-callout{ background:var(--cz-tint); border-radius:18px; padding:20px 24px; margin:24px 0; }
.cz-post-body .post-callout b{ display:block; color:var(--cz-brand-strong); font-family:"Bricolage Grotesque",sans-serif; margin-bottom:6px; }

/* ---------- before/after comparison tag badges ---------- */
.cz-ba-tag{ position:absolute; bottom:16px; z-index:3; background:rgba(15,42,43,.7); color:#fff; font-weight:700; font-size:12.5px; padding:6px 14px; border-radius:100px; letter-spacing:.04em; text-transform:uppercase; }
.cz-ba-before .cz-ba-tag{ left:16px; } .cz-ba-after .cz-ba-tag{ right:16px; }
.cz-ba-note{ display:inline-flex; gap:10px; align-items:center; background:var(--cz-tint); border:1px dashed var(--cz-navy); color:var(--cz-navy-strong); border-radius:100px; padding:9px 18px; font-size:13.5px; font-weight:700; }

/* ---------- reduce-motion safety ---------- */
@media (prefers-reduced-motion:reduce){
  .cz-float-1,.cz-float-2,.cz-float-3,.cz-pill .elementor-heading-title::before{ animation:none!important; }
  .cz-btn .elementor-button::after{ display:none; }
  .cz-proc .cz-proc-prog{ transition:none; }
}

/* ============================================================
   HOME QA POLISH PASS
   The global Elementor Kit injects
     .elementor-widget-heading .elementor-heading-title{ color:primary }
   (and text/link colours) inline in the page <head>, which beats the
   container-level colours set in the build. These rules target the
   inner elements so the intended colours/contrast actually win.
   ============================================================ */

/* 1. Service cards — dark titles + always-white badge numbers */
.cz-svc-card .elementor-widget-heading a{ color:var(--cz-ink)!important; }
.cz-svc-card .elementor-widget-heading a:hover{ color:var(--cz-brand-strong)!important; }
.cz-svc-num,
.cz-svc-num .elementor-heading-title{ color:#fff!important; }

/* 2. "More services" image-tile captions — white text on a solid band */
.cz-tile .cz-tile-cap,
.cz-tile .cz-tile-cap .elementor-heading-title{ color:#fff!important; }
.cz-tile .cz-tile-cap{ background:rgba(8,48,56,.9); }

/* 3. Featured "Most requested" ribbon — white text */
.cz-ribbon,
.cz-ribbon .elementor-heading-title{ color:#fff!important; }

/* 4. Featured checklist — white ticks on the green tiles */
.cz-feat-dot .elementor-icon,
.cz-feat-dot .elementor-icon i,
.cz-feat-dot .elementor-icon svg{ color:#fff!important; fill:#fff!important; }

/* 5. Hero float cards + "Detail-driven" badge — tidy spacing, dark title,
      and keep each line on a single line */
.cz-float-card,
.cz-why-badge{ max-width:none!important; padding:14px 18px; gap:14px; flex-direction:row!important; flex-wrap:nowrap!important; align-items:center!important; }
.cz-float-card > .cz-fc-ic,
.cz-why-badge > .cz-fc-ic{ order:0; align-self:center; }
.cz-float-card .cz-fc-ic .elementor-icon,
.cz-why-badge .cz-fc-ic .elementor-icon{ width:44px; height:44px; border-radius:13px; font-size:21px; }
.cz-fc-b .elementor-heading-title{ font-family:"Bricolage Grotesque",sans-serif; font-size:15px; font-weight:700; line-height:1.25; color:var(--cz-ink)!important; white-space:nowrap; }
.cz-fc-s .elementor-widget-container{ font-size:13px; line-height:1.3; color:var(--cz-muted)!important; white-space:nowrap; }

/* 6. FAQ — constrain + centre, consistent title colour, toggle on the right */
.cz-faq{ max-width:820px!important; margin-left:auto!important; margin-right:auto!important; }
.cz-faq .elementor-tab-title{ display:flex!important; align-items:center; justify-content:space-between; gap:14px; }
.cz-faq .elementor-tab-title,
.cz-faq .elementor-tab-title.elementor-active,
.cz-faq .elementor-tab-title .elementor-accordion-title{ color:var(--cz-ink)!important; }
.cz-faq .elementor-tab-title .elementor-accordion-title{ order:1; }
.cz-faq .elementor-tab-title .elementor-accordion-icon{ order:2; float:none!important; margin:0!important; padding:0!important; width:30px; height:30px; border-radius:9px; background:var(--cz-tint); display:grid!important; place-items:center; flex:none; }
.cz-faq .elementor-accordion-icon i{ color:var(--cz-brand-strong); font-size:14px; }

/* 7. Dark CTA / contact section — legible white text */
#quote .cz-lead-dark,
#quote .cz-lead-dark *{ color:rgba(255,255,255,.92)!important; }
#quote .cz-qc-sub,
#quote .cz-qc-sub *{ color:rgba(255,255,255,.8)!important; }

/* ============================================================
   FIX PASS 2 (mu-plugin only): logo ratio, 1440 content cap,
   header shrink, scroll-reveal, count-up, mega-menu image swap.
   Classes cz-wrap / cz-reveal / cz-mega* are injected by cz.js.
   ============================================================ */

/* 1 — header logo: restore natural aspect (~228px @ 36px tall); kill the 99px squash */
.cz-header .cz-logo,
.cz-header .cz-logo a,
.cz-header .cz-logo .elementor-widget-container{ width:auto!important; max-width:none!important; }
.cz-header .cz-logo img,
.cz-header img[src*="wordmark"]{ height:36px; width:auto!important; max-width:none!important; object-fit:contain; }

/* 2 — cap inner content at 1440px (section backgrounds stay full-bleed on the outer container) */
.cz-wrap{ max-width:1440px; margin-inline:auto; }

/* 3 — header shrinks on scroll */
.cz-header{ transition:background .3s, box-shadow .3s, padding .25s ease; }
.cz-header.cz-scrolled{ padding-top:9px; padding-bottom:9px; }
.cz-header.cz-scrolled .cz-logo img{ height:30px; }

/* 4 — scroll-reveal fade-up (groups tagged by cz.js) */
.cz-reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.cz-reveal.cz-in{ opacity:1; transform:translateY(0); }
/* The settled reveal state owns `transform`, tying specificity with `:hover` and
   (being later) killing the hover lift. Re-raise each card's hover above it,
   preserving its designed motion (lift vs slide). */
.cz-reveal.cz-in.cz-svc-card:hover,
.cz-reveal.cz-in.cz-card:hover,
.cz-reveal.cz-in.cz-blog-card:hover{ transform:translateY(-8px); box-shadow:var(--sh-lg); }
.cz-reveal.cz-in.cz-tile:hover{ transform:translateY(-6px); box-shadow:var(--sh-lg); }
.cz-reveal.cz-in.cz-info-tile:hover{ transform:translateY(-5px); box-shadow:var(--sh-md); }
.cz-reveal.cz-in.cz-contact-card:hover,
.cz-reveal.cz-in.cz-related-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); }
.cz-reveal.cz-in.cz-why-point:hover{ transform:translateX(6px); box-shadow:var(--sh-md); }
@media (prefers-reduced-motion: reduce){ .cz-reveal{ opacity:1!important; transform:none!important; transition:none; } }

/* 6 — mega-menu preview image swap (panel injected by cz.js) */
/* desktop mega is left-anchored to the header bar (.cz-has-drop is position:static,
   so this anchors to .cz-hdr-bar) and sized to its content so the featured image is
   always contained — no fixed cap that the content could exceed. */
.cz-drop.cz-mega{ flex-direction:row!important; gap:24px; padding:24px; left:0; transform:none; width:max-content; max-width:calc(100vw - 56px); }
/* Elementor containers default to position:relative; neutralise the ones between the
   dropdown and the header bar so the mega anchors to .cz-hdr-bar (left:0 = bar left). */
@media (min-width:1101px){
  .cz-menu, .cz-has-drop{ position:static!important; }
  .cz-menu-scroll{ display:contents; }   /* transparent on desktop so the nav stays a horizontal row */
  .cz-hdr-bar > .e-con-inner{ position:relative!important; }   /* anchor mega to the boxed content (left gutter) */
  /* Services mega opens on CLICK (.cz-open toggled by cz.js), with a smooth fade + slide.
     Kept in the DOM (opacity/visibility) rather than display:none so it can transition. */
  .cz-has-drop .cz-drop.cz-mega{ display:flex!important; opacity:0; visibility:hidden; transform:translateY(-8px); pointer-events:none;
    transition:opacity .24s ease, transform .24s ease, visibility 0s linear .24s; }
  .cz-has-drop.cz-open .cz-drop.cz-mega{ opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
    transition:opacity .24s ease, transform .24s ease; }
  .cz-chev{ display:inline-block; transition:transform .24s ease; }
  .cz-has-drop.cz-open .cz-chev{ transform:rotate(180deg); }
}
.cz-mega-cols{ display:flex; flex-direction:row; gap:30px; }
.cz-mega-col{ display:flex; flex-direction:column; gap:2px; min-width:148px; }
.cz-mega-col .cz-dlink a{ padding:11px 12px; }
.cz-mega-h{ font-family:"Manrope",sans-serif; font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--cz-brand-strong); margin:2px 0 9px 12px; }
/* stretch the image panel to the columns' height (NOT a fixed min-height — that
   overflowed the white container when the link columns were shorter). */
.cz-mega-feat{ position:relative; flex:0 0 240px; align-self:stretch; border-radius:14px; overflow:hidden; background:var(--cz-tint); }
.cz-mf{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .28s ease; }
.cz-mf.is-active{ opacity:1; }
.cz-mega-cap{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:18px 16px 14px; color:#fff; font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:16px; background:linear-gradient(to top,rgba(11,46,52,.85),rgba(11,46,52,0)); }
@media (max-width:1100px){
  /* Services submenu (mega) as a clearly-nested list: hug the "Services" link (was a big
     20px flex gap), indent the whole submenu under a connector line, and separate the
     category groups so it no longer reads as one undifferentiated block of text. */
  .cz-has-drop{ gap:2px!important; }
  /* collapsed by default — expands only when "Services" is tapped (.cz-open toggled by
     cz.js), with a smooth max-height + fade so the burger panel doesn't show it up-front */
  .cz-drop.cz-mega{ flex-direction:column!important; gap:0; width:auto; max-width:none; left:0; transform:none;
    margin:0 0 0 6px; padding:0 0 0 16px; border-left:2px solid var(--cz-line);
    max-height:0; opacity:0; overflow:hidden;
    transition:max-height .34s ease, opacity .24s ease, margin .28s ease, padding .28s ease; }
  .cz-has-drop.cz-open .cz-drop.cz-mega{ max-height:760px; opacity:1; margin:4px 0 8px 6px; padding:4px 0 4px 16px; }
  .cz-mega-cols{ flex-direction:column; gap:20px; }          /* clear space BETWEEN categories */
  .cz-mega-col{ min-width:0; gap:0; }                        /* tight WITHIN a category */
  .cz-mega-h{ margin:0 0 3px 12px; }                         /* category label sits atop its group */
  .cz-mega-col .cz-dlink a{ padding:10px 12px; }             /* compact, still tappable rows */
  .cz-mega-feat{ display:none; }
}

/* ============================================================
   PARITY FIX PASS — 2026-06-18  (mu-plugin CSS is the live source of truth)
   Restores reference values that the Kit global re-map (accent=teal #0090A8,
   secondary=navy #0A3D47) + Elementor framework overrides had shifted. The build
   links colours to globals, so these scoped !important rules pin them back.
   ============================================================ */

/* #4 — emphasis bands: bg links to the 'accent' global (teal); reference is navy.
   Scoped to the CTA/stat bands only — NOT a global teal swap. */
/* The full-bleed home CTA (#quote) and the services stat band (.cz-matters) are NAVY
   in the reference; the rounded cta_band boxes (.cz-cta-box) are TEAL — keep the build's
   teal there (earlier navy override was wrong). */
.cz-matters{ background-color:#0A3D47!important; }
#quote{ background-color:#0A3D47!important; }
/* cta_band text the global re-map shifted: light sub-text + navy / dark-green labels */
.cz-cta-box .cz-cta-sub, .cz-cta-box .cz-cta-sub *{ color:#E0F5F3!important; }
.cz-cta-box .cz-btn .elementor-button{ color:#0A3D47!important; }
.cz-cta-box .cz-btn:has([class*="whatsapp"]) .elementor-button,
.cz-cta-box .cz-btn:has([class*="whatsapp"]) .elementor-button svg{ color:#073f1d!important; fill:#073f1d!important; }

/* #5 — eyebrow text links to 'secondary' global (navy); reference is brand-strong
   teal. (Dash stays navy, matching the reference; on-dark eyebrows untouched.) */
.cz-eyebrow:not(.cz-on-dark) .elementor-heading-title{ color:#00788C!important; }

/* #6 — icon-chip icons render dark (ink global) although CSS asked for brand tint.
   Icons are inline SVG, so override both color and fill. */
.cz-fc-ic .elementor-icon, .cz-fc-ic .elementor-icon svg, .cz-fc-ic .elementor-icon i,
.cz-tile-ic:not(.fresh) .elementor-icon, .cz-tile-ic:not(.fresh) .elementor-icon svg,
.cz-rs-chip .elementor-icon, .cz-rs-chip .elementor-icon svg,
.cz-incl-item:not(.fresh) .cz-incl-ic .elementor-icon, .cz-incl-item:not(.fresh) .cz-incl-ic .elementor-icon svg,
.cz-info-tile:not(.fresh) .cz-info-tile-ic .elementor-icon, .cz-info-tile:not(.fresh) .cz-info-tile-ic .elementor-icon svg,
.cz-cc-ic:not(.wa) .elementor-icon, .cz-cc-ic:not(.wa) .elementor-icon svg{ color:var(--cz-brand-strong)!important; fill:var(--cz-brand-strong)!important; }
.cz-tile-ic.fresh .elementor-icon, .cz-tile-ic.fresh .elementor-icon svg,
.cz-incl-item.fresh .cz-incl-ic .elementor-icon, .cz-incl-item.fresh .cz-incl-ic .elementor-icon svg,
.cz-info-tile.fresh .cz-info-tile-ic .elementor-icon, .cz-info-tile.fresh .cz-info-tile-ic .elementor-icon svg{ color:var(--cz-fresh-strong)!important; fill:var(--cz-fresh-strong)!important; }
.cz-cc-ic.wa .elementor-icon, .cz-cc-ic.wa .elementor-icon svg{ color:#073f1d!important; fill:#073f1d!important; }
.cz-feat-dot .elementor-icon, .cz-feat-dot .elementor-icon svg{ color:#fff!important; fill:#fff!important; }
/* footer social icons rendered dark on the dark footer; restore light tint */
.cz-foot-social .elementor-icon, .cz-foot-social .elementor-icon svg{ color:#DDF0EE!important; fill:#DDF0EE!important; }
.cz-foot-social .elementor-icon:hover, .cz-foot-social .elementor-icon:hover svg{ color:#fff!important; fill:#fff!important; }

/* #7 — before/after tags as overlay pill chips (were plain static text) */
.cz-ba-slot{ position:relative; }
.cz-ba-lbl{ position:absolute!important; top:12px; left:12px; width:auto!important; z-index:2; margin:0!important; }
.cz-ba-lbl .elementor-heading-title{ font-family:"Manrope",sans-serif!important; font-size:12px!important; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff!important; background:rgba(11,46,52,.78); border-radius:100px; padding:5px 12px; }
.cz-ba-card .cz-ba-slot:nth-child(2) .cz-ba-lbl{ left:auto; right:12px; }
/* #7b — image-filled before/after + progress slots (real photos, drop the dashed placeholder look) */
.cz-ba-slot.cz-ba-filled{ border:0!important; padding:0!important; min-height:0!important; background:transparent!important; overflow:hidden; border-radius:14px; }
.cz-ba-slot.cz-ba-filled .cz-ba-img,
.cz-ba-slot.cz-ba-filled .cz-ba-img img{ display:block; width:100%; height:clamp(220px,28vw,300px); object-fit:cover; border-radius:14px; }
.cz-prog-photo.cz-ba-filled{ display:flex; flex-direction:column; }
.cz-prog-cap .elementor-widget-container{ font-size:13.5px; font-weight:600; color:var(--cz-ink-soft); text-align:center; margin-top:10px; }

/* #8 — mobile hero H1 to match reference clamp (~38px @390, was ~32) */
@media (max-width:767px){ .cz-hero h1.elementor-heading-title{ font-size:38px!important; } }

/* ============ Sofa service pages — material "types", "issues we treat" & example results ============ */
/* example "type" tile (image-topped card) */
.cz-extile{ transition:transform .25s,box-shadow .25s; }
.cz-extile:hover{ transform:translateY(-5px); box-shadow:var(--sh-md); }
.cz-extile-media{ width:100%; }
.cz-extile-media .elementor-widget-image,
.cz-extile-media .elementor-widget-container{ margin:0!important; line-height:0; }
.cz-extile-media img{ display:block; width:100%; height:172px; object-fit:cover; border-radius:0!important; }
.cz-extile-b .elementor-heading-title{ color:var(--cz-ink)!important; font-size:18px; }
.cz-extile-p .elementor-widget-container{ color:var(--cz-ink-soft)!important; }
/* issue tile (compact icon + label + text) */
.cz-issue{ transition:transform .25s,box-shadow .25s; }
.cz-issue:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); }
.cz-issue-ic{ flex:0 0 44px; }
.cz-issue-ic .elementor-icon{ width:44px; height:44px; border-radius:12px; background:var(--cz-tint); display:grid!important; place-items:center; font-size:18px; }
.cz-issue-ic .elementor-icon, .cz-issue-ic .elementor-icon svg{ color:var(--cz-brand-strong)!important; fill:var(--cz-brand-strong)!important; }
.cz-issue-b .elementor-heading-title{ color:var(--cz-ink)!important; font-size:16px; font-weight:700; line-height:1.25; }
.cz-issue-p .elementor-widget-container{ color:var(--cz-ink-soft)!important; font-size:14px; line-height:1.5; }
/* issue PHOTO tile — real "problem" photo on top + label + text (replaces the flat icon
   tiles on the "problems we tackle" grids). Image sits larger on mobile (was too small). */
.cz-issue-photo{ transition:transform .28s, box-shadow .28s; }
.cz-issue-photo:hover{ transform:translateY(-5px); box-shadow:var(--sh-md); }
.cz-issue-media{ width:100%; overflow:hidden; }
.cz-issue-media .elementor-widget-image,
.cz-issue-media .elementor-widget-container{ margin:0!important; line-height:0; }
.cz-issue-media img{ display:block; width:100%; height:186px; object-fit:cover; border-radius:0!important; transition:transform .5s ease; }
.cz-issue-photo:hover .cz-issue-media img{ transform:scale(1.06); }
.cz-issue-photo .cz-issue-b .elementor-heading-title{ font-size:18px; }
@media (max-width:1024px){ .cz-issue-media img{ height:172px; } }
@media (max-width:767px){ .cz-issue-media img{ height:220px; } }
@media (max-width:600px){ .cz-issue-media img{ height:200px; } }
/* example "case study" card (before/after image + situation/did/result) */
.cz-case{ transition:transform .25s,box-shadow .25s; }
.cz-case:hover{ transform:translateY(-5px); box-shadow:var(--sh-md); }
.cz-case-media{ position:relative; width:100%; }
.cz-case-media .elementor-widget-image,
.cz-case-media .elementor-widget-container{ margin:0!important; line-height:0; }
.cz-case-media img{ display:block; width:100%; height:208px; object-fit:cover; border-radius:0!important; }
.cz-case-tag{ position:absolute!important; left:14px; bottom:14px; width:auto!important; margin:0!important; z-index:2; }
.cz-case-tag .elementor-heading-title{ font-family:"Manrope",sans-serif!important; font-size:12px!important; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#fff!important; background:rgba(0,144,168,.92); border-radius:100px; padding:6px 13px; }
.cz-case-lbl .elementor-heading-title{ font-family:"Manrope",sans-serif!important; font-size:11.5px!important; font-weight:700; letter-spacing:.10em; text-transform:uppercase; color:var(--cz-brand-strong)!important; }
.cz-case-txt .elementor-widget-container{ color:var(--cz-ink-soft)!important; font-size:14.5px; line-height:1.55; }
/* ============ 2026-06-25 UX tweaks: centered quote button + mobile sticky/WA/breadcrumb ============ */
/* Center the "Request a Quote" submit. CF7 wraps [submit] in a bare <p>, which was a single
   grid cell (left column) — span it full width and center a content-width pill. */
.cz-quote-form .wpcf7-form > p{ grid-column:1 / -1; text-align:center; margin:6px 0 0; }
.cz-quote-form .wpcf7-submit{ width:auto!important; display:inline-block; min-width:240px; margin-top:0; }
@media (max-width:600px){
  /* full-width, easy-tap submit on phones */
  .cz-quote-form .wpcf7-submit{ width:100%!important; min-width:0; }
  /* bigger floating WhatsApp icon + tap target on mobile */
  .cz-float-wa .elementor-button{ padding:15px 22px!important; }
  .cz-float-wa .elementor-button-icon{ font-size:28px!important; }
  .cz-float-wa .elementor-button-icon svg{ width:28px!important; height:28px!important; }
  /* breadcrumbs kept for SEO (internal links + BreadcrumbList) — just made compact on mobile */
  .cz-crumb .elementor-widget-container{ font-size:12px; line-height:1.55; }
}
/* ===== clickable cards (stretched-link overlay) + hide breadcrumb on mobile ===== */
.cz-haslink{ position:relative; }
.cz-haslink > .elementor-widget-html{ position:absolute!important; inset:0; z-index:6; margin:0!important; padding:0!important; }
.cz-haslink .cz-stretch{ display:block; position:absolute; inset:0; }
.cz-haslink{ cursor:pointer; }
@media (max-width:600px){
  /* breadcrumb hidden visually on mobile (Rank Math BreadcrumbList schema is separate & stays) */
  .cz-crumb-sec, .e-con.e-parent:has(.cz-crumb){ display:none!important; }
}
/* ===== hero chips on one line + service points row on mobile + FAQ WA link ===== */
/* keep the 4 hero chips on a single line (swipe-scroll if they overflow on small screens) */
.cz-hero-chips{ flex-wrap:nowrap!important; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
.cz-hero-chips::-webkit-scrollbar{ display:none; }
/* "why book" points: tick on the LEFT, text on the RIGHT (Elementor flips to column on mobile) */
.cz-svc-pt{ flex-direction:row!important; align-items:flex-start!important; }
/* WhatsApp number links inside FAQ answers stay on-brand */
.cz-faq a[href*="wa.me"]{ color:var(--cz-brand-strong)!important; font-weight:700; text-decoration:none; }
/* tick-point: keep icon + text side-by-side on mobile (text was taking 100% and wrapping below) */
.cz-svc-pt{ flex-wrap:nowrap!important; }
.cz-svc-pt > .cz-svc-dot{ flex:0 0 auto!important; width:auto!important; }
.cz-svc-pt > .elementor-widget-text-editor,
.cz-svc-pt > .elementor-widget{ flex:1 1 auto!important; width:auto!important; min-width:0; }
/* hide the floating WhatsApp button while the mobile menu is open (was covering menu items) */
body.cz-nav-open .cz-float-wa, body.cz-nav-open .cz-float-wa-wrap{ display:none!important; }
/* service points: vertically center the tick with its text (was sitting too high) */
.cz-svc-pt{ align-items:center!important; }
/* why-book layout: title+lead (top) / panel image / points+button (bottom).
   desktop = text column on the left, panel on the right; mobile = image BELOW the title+lead. */
.cz-wb-grid{ display:grid; grid-template-columns:1fr 1fr; grid-template-areas:"top img" "bot img"; column-gap:56px; align-items:center; }
.cz-wb-top{ grid-area:top; }
.cz-wb-img{ grid-area:img; align-self:center; }
.cz-wb-img img{ width:100%; height:auto; display:block; }
.cz-wb-bot{ grid-area:bot; margin-top:26px; }
@media (max-width:1024px){
  .cz-wb-grid{ display:flex; flex-direction:column; align-items:stretch; }
  .cz-wb-img{ margin:24px 0; }
  .cz-wb-bot{ margin-top:0; }
}
/* centre the why-book "Get a Quote" button on mobile (was left-aligned when stacked) */
@media (max-width:767px){
  .cz-wb-cta{ align-items:center!important; }
  .cz-wb-cta .elementor-button-wrapper{ text-align:center!important; }
}
/* B&A reframe: single real cleaning photo per card + caption */
.cz-work-img .cz-ba-img, .cz-work-img .cz-ba-img img{ height:clamp(240px,32vw,340px)!important; }
.cz-work-cap .elementor-widget-container{ font-size:14.5px; color:var(--cz-ink-soft); line-height:1.55; }
/* ===== issue / example icon tiles: icon closer to text, bigger, animated (2026-07-02) ===== */
/* Elementor's default flex:1 stretched .cz-issue-ic to half the row (huge gap) — hug the badge */
.cz-issue-ic{ flex:0 0 auto!important; width:auto!important; align-self:flex-start; }
.cz-issue-ic .elementor-icon{ width:54px!important; height:54px!important; font-size:25px!important; border-radius:14px; transition:background .3s; }
/* hover: badge fills brand, icon turns white */
.cz-issue:hover .cz-issue-ic .elementor-icon, .cz-extile-icon:hover .cz-issue-ic .elementor-icon{ background:var(--cz-brand)!important; }
.cz-issue:hover .cz-issue-ic .elementor-icon svg, .cz-issue:hover .cz-issue-ic .elementor-icon i,
.cz-extile-icon:hover .cz-issue-ic .elementor-icon svg, .cz-extile-icon:hover .cz-issue-ic .elementor-icon i{ color:#fff!important; fill:#fff!important; }
@media (prefers-reduced-motion: no-preference){
  @keyframes czIconPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.15); } }
  .cz-issue-ic .elementor-icon svg, .cz-issue-ic .elementor-icon i{ animation:czIconPulse 2.6s ease-in-out infinite; transform-origin:center; }
  .cz-issue:nth-child(3n+2) .cz-issue-ic .elementor-icon svg, .cz-issue:nth-child(3n+2) .cz-issue-ic .elementor-icon i{ animation-delay:.5s; }
  .cz-issue:nth-child(3n)   .cz-issue-ic .elementor-icon svg, .cz-issue:nth-child(3n)   .cz-issue-ic .elementor-icon i{ animation-delay:1s; }
  .cz-extile-icon:nth-child(2n) .cz-issue-ic .elementor-icon svg{ animation-delay:.6s; }
}
/* related-service cards: real photo thumbnail instead of an icon */
.cz-rc-photo{ flex:0 0 auto!important; width:auto!important; }
.cz-rc-photo .elementor-widget-image, .cz-rc-photo .elementor-widget-container{ margin:0!important; line-height:0; }
.cz-rc-photo img{ width:76px; height:76px; object-fit:cover; border-radius:12px!important; display:block; }
/* on mobile the related-service cards are full-width, so make them image-topped with a
   big full-bleed photo (was a tiny 62px side thumbnail) — matches the problem cards */
@media (max-width:767px){
  .cz-related-card{ flex-direction:column!important; align-items:stretch!important; padding:0!important; overflow:hidden; }
  .cz-rc-photo{ width:100%!important; }
  .cz-rc-photo img{ width:100%!important; height:190px; border-radius:0!important; }
  .cz-related-card > .e-con:not(.cz-rc-photo){ padding:16px 20px 20px!important; }
}

/* ============ CONTACT PAGE (matches reference Contact Us.html) ============ */
.cz-c-hero{ max-width:760px; }
/* contact-method cards (WhatsApp / Call / Email) */
.cz-cm-card{ height:100%; transition:transform .25s, box-shadow .25s, border-color .25s; }
.cz-cm-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); border-color:var(--cz-tint)!important; }
.cz-cm-ic{ width:auto!important; flex:0 0 auto; margin-bottom:16px; }
.cz-cm-ic .elementor-icon{ width:52px; height:52px; border-radius:14px; background:var(--cz-tint); display:grid!important; place-items:center; font-size:24px; }
.cz-cm-ic .elementor-icon, .cz-cm-ic .elementor-icon svg{ color:var(--cz-brand-strong)!important; fill:var(--cz-brand-strong)!important; }
.cz-cm-ic.wa .elementor-icon{ background:#E4FBEC; }
.cz-cm-ic.wa .elementor-icon, .cz-cm-ic.wa .elementor-icon svg{ color:#128C3E!important; fill:#128C3E!important; }
.cz-cm-h .elementor-heading-title{ font-size:19px; color:var(--cz-ink)!important; }
.cz-cm-p .elementor-widget-container{ color:var(--cz-muted); font-size:14.5px; line-height:1.55; margin-top:6px; }
.cz-cm-val{ margin-top:auto!important; }
.cz-cm-val .elementor-heading-title{ font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:17px; color:var(--cz-ink)!important; padding-top:16px; }
.cz-cm-go .elementor-widget-container{ color:var(--cz-brand-strong); font-weight:700; font-size:14px; margin-top:12px; }
.cz-cm-go .cz-cm-arrow{ display:inline-block; transition:transform .25s; }
.cz-cm-card:hover .cz-cm-go .cz-cm-arrow{ transform:translateX(4px); }
/* navy info cards (opening hours / service area) */
.cz-info-card{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:24px; }
.cz-info-card h4.cz-ic-h{ color:#fff; font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:17px; margin:0 0 14px; }
.cz-hours-row{ display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.08); font-size:14.5px; }
.cz-hours-row:last-child{ border-bottom:0; }
.cz-hours-row span:first-child{ color:#B9DAD7; }
.cz-hours-row span:last-child{ color:#fff; font-weight:600; }
.cz-hours-row .cz-badge{ background:rgba(37,211,102,.16); color:#6ff0a0; font-size:12px; font-weight:700; padding:3px 10px; border-radius:100px; }
.cz-area-list{ display:flex; flex-wrap:wrap; gap:8px; }
.cz-area-list span{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); color:#DDF0EE; font-size:12.5px; font-weight:600; padding:6px 12px; border-radius:100px; }
.cz-info-note{ display:flex; gap:12px; align-items:flex-start; color:#B9DAD7; font-size:13.5px; line-height:1.55; margin-top:16px; }
.cz-info-note svg{ width:20px; height:20px; flex:none; color:#6FD8CE; margin-top:1px; }
/* quote-form privacy consent line */
.cz-quote-form .cz-form-consent{ font-size:12.5px; color:var(--cz-muted); text-align:center; line-height:1.5; }
.cz-quote-form .cz-form-consent a{ color:#00788C; font-weight:600; text-decoration:underline; }
/* legal pages (privacy policy) */
.cz-legal{ max-width:820px; }
.cz-legal-date .elementor-widget-container{ color:var(--cz-muted); }
.cz-legal-body .elementor-widget-container{ color:var(--cz-ink-soft); font-size:16px; line-height:1.7; }
.cz-legal-body h2{ font-family:"Bricolage Grotesque",sans-serif; color:var(--cz-ink); font-size:24px; font-weight:700; line-height:1.2; margin:34px 0 12px; }
.cz-legal-body p{ margin:0 0 14px; }
.cz-legal-body ul{ margin:0 0 14px; padding-left:22px; }
.cz-legal-body li{ margin:0 0 8px; }
.cz-legal-body a{ color:#00788C; font-weight:600; }

/* ============ MOBILE ALIGNMENT STANDARD (2026-07-03) ============
   Desktop keeps centered section heads; on phones everything is LEFT-aligned to match the
   heroes/cards/body (centered multi-line text read poorly and looked inconsistent). Applies
   to .cz-head section heads + the centered Before/After hero. CTA boxes stay centered. */
@media (max-width:767px){
  .cz-head{ align-items:flex-start!important; text-align:left!important; }
  .cz-head .elementor-heading-title,
  .cz-head .elementor-widget-container,
  .cz-head .elementor-widget-text-editor{ text-align:left!important; }
  /* centered eyebrow -> left: left-justify and drop the trailing dash ("— LABEL") */
  .cz-eyebrow.cz-eyebrow-center .elementor-heading-title{ justify-content:flex-start!important; }
  .cz-eyebrow.cz-eyebrow-center .elementor-heading-title::after{ display:none!important; }
}