.elementor-kit-5{--e-global-color-primary:#C1121F;--e-global-color-secondary:#000000;--e-global-color-text:#333333;--e-global-color-accent:#C7A45E;--e-global-color-34b2857:#F9F5EE;--e-global-color-7397709:#FFFFFF;--e-global-color-b73d51e:#FCFAF6;--e-global-color-41b3366:#A00E19;--e-global-color-5fdf69b:#C7A45E;--e-global-typography-primary-font-family:"Libre Baskerville";--e-global-typography-primary-font-size:45px;--e-global-typography-primary-font-weight:700;--e-global-typography-primary-line-height:1.12px;--e-global-typography-primary-letter-spacing:0.8px;--e-global-typography-secondary-font-family:"Inter";--e-global-typography-secondary-font-size:23px;--e-global-typography-secondary-font-weight:800;--e-global-typography-secondary-letter-spacing:0.6px;--e-global-typography-secondary-word-spacing:0.2px;--e-global-typography-text-font-family:"Lato";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Lato";--e-global-typography-accent-font-weight:700;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ==========================================================
TRUEFLOW 10.6U-FIX11 — SITEWIDE CSS (DROP-IN REPLACEMENT)
Date: 2026-01-30
Notes:
- TRUEFLOW API .elementor-kit-5s/vars remain load-bearing.
- GP UI primitives are opt-in and do not touch .gp-btn.
- Compat patch remains final, last-win.
========================================================== */

/* ==========================================================
TRUEFLOW API (UNCHANGED / LOAD-BEARING)
Load-bearing .elementor-kit-5s/vars. Treat as API.
Do not refactor without regression proof.
========================================================== */

/* ---------------- ROOT VARIABLES ---------------- */
:root{
--gp-black:#000;
--gp-gold:#C7A45E;
--gp-gold-light:#FFD782;
--gp-gold-soft:rgba(255,215,130,.25);
--gp-gold-glow:rgba(255,230,160,.30);
--gp-cream:#F9F5EE;
--gp-white:#FFF;

--tf-hero-height:100vh;
--tf-sticky-height:112px;
--tf-logo-optical-y:0px;

--morph-progress:0;

--tf-nav-height:100vh;
--tf-hero-spacer-height:100vh;
--tf-logo-h:320px;
--tf-logo-w:520px;
--tf-logo-mobile-op:1;
--tf-logo-desktop-op:0;
--tf-arrow-op:1;

--tf-ease:cubic-bezier(.37,0,.24,1);
--tf-dur:.45s;
--tf-dur-fast:.28s;

--cta-offset:80px;

--z-aura:150;
--z-sparkles:200;
--z-hero:250;
--z-arrow:350;
--z-hamburger:900;
--z-nav:5000;
--z-drawer:4500;
--z-cta:99999;
}

@supports (height:100svh){
:root{
--tf-hero-height:100svh;
--tf-nav-height:100svh;
--tf-hero-spacer-height:100svh;
}
}

/* ---------------- ROOT TOKEN EXTENSIONS (NON-BREAKING) ----------------
Adds reusable tokens WITHOUT changing any existing token values.
Safe: nothing references these unless you opt-in later.
----------------------------------------------------------------------- */
:root{
/* Allowed blacks (canon) */
--gp-black-000:#000;
--gp-black-premium:#0B0B0C;
--gp-black-base:var(--gp-black-premium);
--gp-black-deep:#070708;


/* Brand reds (CTA DNA) */
--gp-rose:#C1121F;
--gp-rose-hover:#A00E19;

/* Typography stacks */
--gp-font-sans:Montserrat, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
--gp-font-serif:"Libre Baskerville", Georgia, "Times New Roman", Times, serif;

/* Radii vocabulary */
--gp-radius-card:18px;
--gp-radius-card-sm:16px;
--gp-radius-pill:20px;
--gp-radius-chip:999px;

/* Motion defaults (section-safe) */
--gp-ease:var(--tf-ease);
--gp-fast:300ms;
--gp-med:520ms;

/* Focus ring defaults */
--gp-focus-color:rgba(255,215,130,.75);
--gp-focus-width:2px;
--gp-focus-offset:6px;
--gp-focus-radius:12px;

/* Reveal defaults (shared) */
--gp-reveal-y:10px;
--gp-reveal-dur:520ms;
--gp-reveal-ease:var(--tf-ease);

/* Secondary nav height token (matches existing fallback) */
--secondary-nav-height:84px;
}

/* ---------------- GLOBAL BASELINE ---------------- */
html, body{
margin:0;
padding:0;
background:var(--gp-black);
color:var(--gp-cream);
overflow-x:hidden;
scroll-behavior:smooth;
box-sizing:border-box;
overscroll-behavior:none;
}
*, *::before, *::after{ box-sizing:border-box; }

.gp-hero{
min-height:clamp(420px, 56vw, 70vh);
}

.elementor-section,
.elementor-container,
.elementor-widget-wrap,
.elementor-widget-container{
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
transform-style:preserve-3d;
}

/* ---------------- H1 WRAP / LINE HEIGHT FIX ---------------- */
main#content h1,
.site-main h1,
.elementor-page h1,
.elementor-heading-title.elementor-size-default{
white-space:normal !important;
overflow-wrap:anywhere;
word-break:normal !important;
hyphens:auto;
line-height:1.15 !important;
height:auto !important;
}

.elementor-widget-heading,
.elementor-widget-heading .elementor-widget-container{
min-height:0 !important;
height:auto !important;
}

@media (max-width:767.98px){
main#content h1.elementor-heading-title,
.site-main h1.elementor-heading-title{
font-size:clamp(28px, 8.5vw, 44px) !important;
line-height:1.12 !important;
}
}

/* ---------------- ELEMENTOR SAFETY (NAV) ---------------- */
#main-nav, #secondary-nav, #mobile-sticky-cta{
position:relative;
overflow:visible !important;
isolation:isolate;
}
#main-nav > .e-con-inner,
#secondary-nav > .e-con-inner,
#mobile-sticky-cta > .e-con-inner{
display:contents !important;
}

#main-nav > .elementor-element{
display:contents !important;
}

#main-nav .elementor-nav-menu--dropdown,
#main-nav .elementor-nav-menu__container.elementor-nav-menu--dropdown,
#secondary-nav .elementor-nav-menu--dropdown,
#secondary-nav .elementor-nav-menu__container.elementor-nav-menu--dropdown{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
pointer-events:none !important;
height:0 !important;
}

#main-nav .elementor-menu-toggle,
#secondary-nav .elementor-menu-toggle{
display:none !important;
}

/* ---------------- DESKTOP/TABLET FLOW SPACER ---------------- */
#tf-nav-spacer{
width:100%;
height:var(--tf-hero-spacer-height, 100svh);
pointer-events:none;
background:transparent;
}
@media (max-width:767.98px){
#tf-nav-spacer{
display:none !important;
height:0 !important;
}
}

/* ---------------- MAIN NAV ROOT ---------------- */
#main-nav{
width:100%;
background:var(--gp-black);
border-bottom:1px solid rgba(255,215,130,.25);
box-shadow:0 0 14px rgba(199,164,94,.35);
z-index:var(--z-nav);
margin:0;

height:var(--tf-hero-height);
max-height:var(--tf-hero-height);

display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:flex-start !important;
}

@media (min-width:768px){
body.trueflow-ready #main-nav{
position:fixed !important;
top:0;
left:0;
width:100%;
height:var(--tf-nav-height, 100svh) !important;
max-height:var(--tf-nav-height, 100svh) !important;

display:block !important;
padding:0 !important;

background:rgba(0,0,0, calc(0.92 + 0.06 * var(--morph-progress)));
backdrop-filter:blur(calc(12px * var(--morph-progress)));

box-shadow:
0 0 14px rgba(199,164,94, calc(0.28 + 0.18 * var(--morph-progress))),
0 4px 18px rgba(0,0,0, calc(0.10 + 0.45 * var(--morph-progress)));

overflow:hidden !important;
}

body.trueflow-ready #main-nav .e-con,
body.trueflow-ready #main-nav .elementor-widget,
body.trueflow-ready #main-nav .elementor-widget-container,
body.trueflow-ready #main-nav .elementor-element{
position:static !important;
transform:none !important;
filter:none !important;
}

body.trueflow-ready #main-nav #gp-logo,
body.trueflow-ready #main-nav #gp-hamburger,
body.trueflow-ready #main-nav #book-online-ottawa-plumbers,
body.trueflow-ready #main-nav #call-613-423-4321-for-ottawa-plumbing-services,
body.trueflow-ready #main-nav #gp-arrow-down{
position:absolute !important;
margin:0 !important;
right:auto !important;
bottom:auto !important;
will-change:top,left,opacity,width,height;
}

body.trueflow-ready #main-nav #gp-logo{
width:var(--tf-logo-w, 520px) !important;
height:var(--tf-logo-h, 320px) !important;
}

body.trueflow-ready #main-nav #gp-arrow-down{
opacity:var(--tf-arrow-op, 1);
}
}

@media (max-width:767.98px){
#main-nav{
position:relative;
height:var(--tf-hero-height) !important;
max-height:var(--tf-hero-height) !important;
min-height:var(--tf-hero-height) !important;
}
}

body:not(.trueflow-ready) #main-nav{
height:100vh !important;
min-height:100vh !important;
display:flex !important;
flex-direction:column !important;
justify-content:center !important;
align-items:center !important;
}

/* ---------------- FIX8: ELEMENTOR EDITOR VISIBILITY ----------------
JS is disabled in Elementor editor mode; keep logo visible in builder.
--------------------------------------------------------------- */
body.elementor-editor-active #main-nav .nav-logo-wrapper,
body.elementor-editor-preview #main-nav .nav-logo-wrapper,
body.elementor_library-template-default #main-nav .nav-logo-wrapper{
opacity:1 !important;
transition:none !important;
}

/* ---------------- LOGO SYSTEM ---------------- */
.nav-logo-wrapper{
position:relative;
display:grid;
place-items:center;
pointer-events:auto;
z-index:var(--z-hero);
isolation:isolate;

opacity:0;
transition:opacity .6s ease;
}
body.trueflow-ready .nav-logo-wrapper{ opacity:1; }

.nav-logo{
grid-area:1 / 1;
max-width:80vw;
height:auto;
user-select:none;
-webkit-user-drag:none;
pointer-events:none;
}

#main-nav .nav-logo.mobile-logo{ opacity:1; }
#main-nav .nav-logo.desktop-logo{ opacity:0; }

@media (min-width:768px){
body.trueflow-ready #main-nav #gp-logo .nav-logo{
width:100% !important;
height:100% !important;
max-width:none !important;
object-fit:contain;
}
body.trueflow-ready #main-nav #gp-logo .nav-logo.mobile-logo{
opacity:var(--tf-logo-mobile-op, 1) !important;
}
body.trueflow-ready #main-nav #gp-logo .nav-logo.desktop-logo{
opacity:var(--tf-logo-desktop-op, 0) !important;
}
}

@media (max-width:767.98px){
#main-nav .nav-logo.mobile-logo{
height:clamp(180px,50vh,360px) !important;
max-width:90vw !important;
filter:drop-shadow(0 0 20px var(--gp-gold-glow));
transform:scale(1.03);
}
#main-nav .nav-logo.desktop-logo{ opacity:0 !important; }
}

/* Aura layers */
.glow-layer{
position:absolute;
inset:-90%;
border-radius:50%;
pointer-events:none;
mix-blend-mode:screen;
z-index:var(--z-aura);
animation:goldAura 14s ease-in-out infinite;
}
.glow-layer.glow-outer{
background:radial-gradient(circle, rgba(255,230,180,.18), rgba(255,215,130,.10) 40%, transparent 90%);
filter:blur(100px);
opacity:.5;
}
.glow-layer.glow-inner{
background:radial-gradient(circle, rgba(255,240,200,.10), rgba(255,255,255,.14) 50%, transparent 100%);
filter:blur(70px);
opacity:.45;
}

@media (min-width:768px){
#main-nav .glow-layer{
opacity:calc(.8 - 0.4 * var(--morph-progress));
}
}

/* Hover / proximity glow */
.hover-glow-layer{
position:absolute;
inset:-65%;
border-radius:50%;
pointer-events:none;
background:radial-gradient(circle at center, rgba(255,215,130,.25) 0%, rgba(255,215,130,.05) 40%, transparent 80%);
opacity:0;
filter:blur(95px);
mix-blend-mode:screen;
transition:opacity 1s ease, transform 1.5s ease;
z-index:calc(var(--z-aura) + 5);
}
.hover-glow-layer.active,
.tf-glow-active .hover-glow-layer{
opacity:1 !important;
transform:scale(1.06);
}
@media (hover:hover){
#gp-logo:hover .hover-glow-layer{
opacity:1 !important;
transform:scale(1.08);
}
#gp-hamburger:hover{
color:var(--gp-gold-light);
filter:drop-shadow(0 0 10px rgba(255,215,130,.65));
}
}

/* Sparkles */
.nav-logo-sparkles{
position:absolute;
inset:0;
z-index:var(--z-sparkles);
pointer-events:none;
}
.nav-sparkle{
position:absolute;
width:3px;
height:3px;
border-radius:50%;
background:radial-gradient(circle,#fff 0%,rgba(255,255,255,.4)60%,transparent 100%);
mix-blend-mode:screen;
filter:drop-shadow(0 0 2px rgba(255,230,160,.55));
animation:sparkleBlink 4s ease-in-out infinite, sparkleDrift 18s ease-in-out infinite;
opacity:0;
transform:scale(.6);
}

/* Animations */
@keyframes logoBreath{
0%,100%{ filter:brightness(1) drop-shadow(0 0 4px var(--gp-gold-soft)); }
50%{ filter:brightness(1.08) drop-shadow(0 0 9px var(--gp-gold-glow)); }
}
@keyframes goldAura{
0%,100%{ opacity:.45; transform:scale(1); }
50%{ opacity:.9; transform:scale(1.06); }
}
@keyframes sparkleBlink{
0%,80%,100%{ opacity:0; transform:scale(.6); }
40%{ opacity:1; transform:scale(1.3); }
50%{ opacity:.7; transform:scale(.8); }
}
@keyframes sparkleDrift{
0%,100%{ transform:translate(0,0) scale(.6); }
50%{ transform:translate(3px,-4px) scale(.9); }
}

@media (min-width:768px){
body.trueflow-ready #main-nav #gp-logo .nav-logo{
transform:translateY(var(--tf-logo-optical-y, 0px));
}
}

/* ---------------- CURSOR SPARKLES + TOUCH COMET ---------------- */
.cursor-sparkle, .touch-comet{
position:fixed;
width:6px;
height:6px;
border-radius:50%;
pointer-events:none;
mix-blend-mode:screen;
background:radial-gradient(circle,var(--gp-gold-light) 0%,transparent 75%);
opacity:.9;
animation:cursorFade .85s ease-out forwards;
z-index:999999;
}
@keyframes cursorFade{
0%{ opacity:.9; transform:translate(-50%,-50%) scale(1); }
100%{ opacity:0; transform:translate(-50%,-50%) scale(.85); }
}

/* ---------------- HAMBURGER ---------------- */
#gp-hamburger{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
font-size:2.2rem;
color:var(--gp-gold);
cursor:pointer;
transform-origin:center;
transition: color .35s ease, transform .45s var(--tf-ease), filter .35s ease;
animation:toggleBreath 10s ease-in-out infinite;
z-index:var(--z-hamburger);

pointer-events:auto !important;
touch-action:manipulation;
-webkit-tap-highlight-color:transparent;
}
.hamburger-glow-layer{
position:absolute;
inset:-60%;
border-radius:50%;
pointer-events:none;
mix-blend-mode:screen;
filter:blur(65px);
background:radial-gradient(circle, rgba(255,220,150,.18), rgba(255,200,100,.12) 40%, transparent 75% );
opacity:.55;
z-index:-1;
animation:goldAura 14s ease-in-out infinite;
}

#gp-hamburger.spin-open{ transform:rotate(90deg) scale(1.06) !important; }
#gp-hamburger.spin-close{ transform:rotate(0deg) scale(1) !important; }
#gp-hamburger.tf-glow-active{
color:var(--gp-gold-light);
filter:drop-shadow(0 0 10px rgba(255,215,130,.65));
}

@keyframes toggleBreath{
0%,100%{
filter: drop-shadow(0 0 4px rgba(255,215,130,.30)) drop-shadow(0 0 8px rgba(255,215,130,.18));
}
50%{
filter: drop-shadow(0 0 10px rgba(255,215,130,.55)) drop-shadow(0 0 18px rgba(255,215,130,.30));
}
}

/* ---------------- CTA BUTTONS (BOOK / CALL) ---------------- */
#book-online-ottawa-plumbers,
#call-613-423-4321-for-ottawa-plumbing-services{
display:flex !important;
align-items:center;
justify-content:center;
margin:12px auto !important;
z-index:var(--z-hero);
transition: transform .3s ease, opacity .3s ease, filter .3s ease;
will-change:transform, opacity;
}
@media (hover:hover){
#book-online-ottawa-plumbers:hover,
#call-613-423-4321-for-ottawa-plumbing-services:hover,
#book-online-ottawa-plumbers.tf-glow-active,
#call-613-423-4321-for-ottawa-plumbing-services.tf-glow-active{
transform:scale(1.06);
filter:drop-shadow(0 0 12px var(--gp-gold-glow));
}
}

/* ---------------- MAIN HERO DOWN ARROW ---------------- */
#gp-arrow-down{
font-size:34px;
line-height:1;
color:var(--gp-gold-light);
text-shadow:0 0 10px var(--gp-gold-glow), 0 0 20px var(--gp-gold-soft);
z-index:var(--z-arrow);
pointer-events:auto;
animation:scrollBounce 1.9s ease-in-out infinite;
transform-origin:center;
cursor:pointer;
transition: filter .25s ease, text-shadow .25s ease, font-size .25s ease, opacity .25s ease;

user-select:none;
-webkit-user-select:none;
-webkit-tap-highlight-color:transparent;
}
#gp-arrow-down.tf-glow-active{
text-shadow: 0 0 14px rgba(255,215,130,.9), 0 0 30px rgba(255,215,130,.6);
}

@media (hover:hover){
#gp-arrow-down:hover{
animation-play-state:paused;
font-size:40px;
filter:drop-shadow(0 0 12px rgba(255,215,130,.75));
text-shadow: 0 0 18px rgba(255,215,130,.95), 0 0 34px rgba(255,215,130,.65);
}
}
#gp-arrow-down:focus-visible{
outline:2px solid rgba(255,215,130,.75);
outline-offset:6px;
border-radius:12px;
}

@keyframes scrollBounce{
0%,100%{ transform:translateY(0); }
25%{ transform:translateY(6px); }
50%{ transform:translateY(-4px); }
75%{ transform:translateY(3px); }
}

/* ---------------- SECONDARY NAV (DRAWER) ---------------- */
#secondary-nav{
width:100%;
opacity:0;
visibility:hidden;
transform:translateY(-14px);
pointer-events:none;

border-bottom:1px solid rgba(255,215,130,.25);
z-index:var(--z-drawer);

transition:
opacity var(--tf-dur) var(--tf-ease),
transform var(--tf-dur) var(--tf-ease),
max-height var(--tf-dur) var(--tf-ease),
padding var(--tf-dur) var(--tf-ease),
visibility 0s linear var(--tf-dur);
}

@media (min-width:768px){
body.trueflow-ready #secondary-nav{
position:fixed !important;
top:var(--tf-nav-height, var(--tf-sticky-height)) !important;
left:0 !important;
width:100% !important;

z-index:calc(var(--z-nav) - 1) !important;

display:flex !important;
flex-direction:row;
justify-content:center;
align-items:center;

overflow:hidden;
max-height:0;
padding:0;
}

body.trueflow-ready #secondary-nav.is-open{
opacity:1 !important;
visibility:visible !important;
transform:translateY(0) !important;
pointer-events:auto !important;

max-height:var(--secondary-nav-height, 84px);
padding:18px 0;

transition:
opacity var(--tf-dur) var(--tf-ease),
transform var(--tf-dur) var(--tf-ease),
max-height var(--tf-dur) var(--tf-ease),
padding var(--tf-dur) var(--tf-ease),
visibility 0s linear 0s;
}

#wp-secondary-nav,
#secondary-nav .elementor-nav-menu{
display:flex;
flex-direction:row;
gap:clamp(16px,2.2vw,32px);
list-style:none;
margin:0;
padding:0;
}

#wp-secondary-nav a,
#secondary-nav .elementor-nav-menu a{
color:var(--gp-cream);
text-decoration:none;
text-transform:uppercase;
letter-spacing:.06em;
font-size:clamp(13px,0.8vw + 0.35rem,16px);
position:relative;
transition:color .3s ease, text-shadow .3s ease;
}
#wp-secondary-nav a:hover,
#secondary-nav .elementor-nav-menu a:hover{
color:var(--gp-gold-light);
text-shadow: 0 0 6px rgba(255,215,130,.7), 0 0 12px rgba(255,200,100,.35);
}
}

@media (max-width:767.98px){
#secondary-nav{
position:relative;
min-height:100svh !important;
display:none;
flex-direction:column;
justify-content:flex-start;
align-items:center;
padding:24px 16px;
}
#secondary-nav.is-open{
display:flex !important;
opacity:1 !important;
visibility:visible !important;
transform:translateY(0) !important;
pointer-events:auto !important;

transition:
opacity var(--tf-dur) var(--tf-ease),
transform var(--tf-dur) var(--tf-ease),
visibility 0s linear 0s;
}

#wp-secondary-nav,
#secondary-nav .elementor-nav-menu{
flex:1;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:5vh;
list-style:none;
margin:0;
padding:0;
min-height:70vh;
}
#wp-secondary-nav a,
#secondary-nav .elementor-nav-menu a{
text-decoration:none;
text-transform:uppercase;
letter-spacing:.08em;
font-size:clamp(17px,4vw,22px);
}
}

/* Secondary nav arrows */
#gp-secondary-up, #gp-secondary-down{
display:flex;
align-items:center;
justify-content:center;
width:100%;
font-size:32px;
color:var(--gp-gold-light);
text-shadow:0 0 10px var(--gp-gold-glow), 0 0 18px var(--gp-gold-soft);
animation:scrollBounce 1.9s ease-in-out infinite;
line-height:1;
cursor:pointer;

user-select:none;
-webkit-user-select:none;
-webkit-tap-highlight-color:transparent;
}
#gp-secondary-up{ font-size:30px; margin-bottom:24px; }
#gp-secondary-down{ margin-top:auto; margin-bottom:24px; }
@media (min-width:768px){
#gp-secondary-up, #gp-secondary-down{ display:none !important; }
}

/* ---------------- MOBILE STICKY CTA ---------------- */
#tf-mobile-cta-home{
width:100%;
height:0;
pointer-events:none;
background:transparent;
}

#mobile-sticky-cta{
position:relative;
top:0;
left:0;
width:100%;
display:flex !important;
flex-direction:row !important;
align-items:center;
justify-content:space-between;
gap:8px;
padding:8px 10px;
background:transparent !important;

opacity:1;
pointer-events:auto;

border:none !important;
box-shadow:none !important;
z-index:var(--z-cta);
transition: opacity var(--tf-dur-fast) ease, transform var(--tf-dur-fast) ease, filter var(--tf-dur-fast) ease;
}
#mobile-sticky-cta > .cta-cell{
flex:1;
display:flex;
align-items:center;
justify-content:center;
}
#mobile-sticky-cta img.center-logo{
height:54px;
width:auto;
object-fit:contain;
}

#mobile-sticky-cta.visible{ opacity:1; pointer-events:auto; }
#mobile-sticky-cta.hidden{
opacity:0;
pointer-events:none;
height:0 !important;
padding:0 !important;
overflow:hidden !important;
}

#mobile-sticky-cta.is-stuck{
position:fixed;
top:0;
left:0;
width:100%;
background:transparent !important;
filter:none;

transform:translate3d(0,0,0);
-webkit-transform:translate3d(0,0,0);
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
will-change:transform, opacity;
}

@media (min-width:768px){
#tf-mobile-cta-home{ display:none !important; height:0 !important; }
#mobile-sticky-cta{ display:none !important; }
}

@media (max-width:767.98px){
#secondary-nav.is-open ~ #tf-mobile-cta-home,
#secondary-nav.is-open ~ #mobile-sticky-cta{
display:none !important;
height:0 !important;
padding:0 !important;
overflow:hidden !important;
opacity:0 !important;
pointer-events:none !important;
}

#mobile-sticky-cta.visible + .elementor-section,
#mobile-sticky-cta.visible + section{
margin-top:12px !important;
}
}

/* ---------------- DRAWER PLACEMENT (MOBILE) ---------------- */
@media (max-width:767.98px){
body #main-nav + #secondary-nav,
body header #secondary-nav{
position:relative !important;
top:auto !important;
left:0 !important;
width:100% !important;
}
}

/* ---------------- REDUCED MOTION ---------------- */
@media (prefers-reduced-motion:reduce){
*, *::before, *::after{
animation-duration:.001ms !important;
animation-iteration-count:1 !important;
transition-duration:.001ms !important;
}
html, body{
scroll-behavior:auto !important;
}
}

/* ---------------- MOBILE HERO / CTA PATCH ---------------- */
@media (max-width:767.98px){
#main-nav.hero-mode{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:flex-start !important;
padding:clamp(20px,6vh,32px) 16px 24px !important;

height:var(--tf-hero-height) !important;
min-height:var(--tf-hero-height) !important;
max-height:var(--tf-hero-height) !important;

position:relative !important;
}
#main-nav.hero-mode > *{
margin-left:auto !important;
margin-right:auto !important;
}
#main-nav.hero-mode #gp-logo{
margin-top:0 !important;
margin-bottom:clamp(16px,4vh,28px) !important;
}
#main-nav.hero-mode #gp-hamburger,
#main-nav.hero-mode #book-online-ottawa-plumbers,
#main-nav.hero-mode #call-613-423-4321-for-ottawa-plumbing-services{
margin-top:clamp(10px,2.4vh,18px) !important;
margin-bottom:0 !important;
}
#main-nav.hero-mode #call-613-423-4321-for-ottawa-plumbing-services{
margin-bottom:8px !important;
}

#book-online-ottawa-plumbers,
#call-613-423-4321-for-ottawa-plumbing-services{
display:flex !important;
opacity:1 !important;
visibility:visible !important;
position:relative !important;
z-index:var(--z-hero) !important;
}

#main-nav.hero-mode .elementor-element.elementor-absolute,
#main-nav.hero-mode .elementor-element.elementor-fixed{
position:static !important;
inset:auto !important;
top:auto !important;
right:auto !important;
bottom:auto !important;
left:auto !important;
}

#main-nav.hero-mode .elementor-widget-html,
#main-nav.hero-mode .elementor-widget-html > .elementor-widget-container{
display:contents !important;
position:static !important;
inset:auto !important;
top:auto !important;
right:auto !important;
bottom:auto !important;
left:auto !important;
}

#main-nav.hero-mode #gp-arrow-down{
opacity:1 !important;
visibility:visible !important;

position:absolute !important;
inset:auto !important;
top:auto !important;
right:auto !important;
bottom:calc(18px + env(safe-area-inset-bottom,0)) !important;
left:50% !important;

translate:-50% 0 !important;

margin:0 !important;

width:max-content !important;
text-align:center !important;

animation:scrollBounce 1.9s ease-in-out infinite !important;

z-index:var(--z-arrow) !important;
pointer-events:auto !important;
}
}

/* ---------------- CURSOR FALLBACK (HAMBURGER) ---------------- */
body.tf-hamburger-hot,
body.tf-hamburger-hot *{
cursor:pointer !important;
}

/* ---------------- INSTANT MOBILE LCP ---------------- */
@media (max-width: 767.98px) {
#main-nav .nav-logo-wrapper{
opacity: 1 !important;
transition: none !important;
}

#main-nav .nav-logo.mobile-logo{
opacity: 1 !important;
display: block !important;
}

#main-nav .nav-logo.desktop-logo{
opacity: 0 !important;
display: none !important;
}
}

/* ==========================================================
TRUEFLOW PATCH — Secondary-nav pointer line through text
Forces Elementor pointer pseudo-element to the underline zone
(No layout changes, no menu widget edits required)
========================================================== */

#secondary-nav .elementor-nav-menu a.elementor-item{
position: relative;
text-decoration: none !important; /* keep your current style */
}

/* Elementor pointer is usually drawn on ::after */
#secondary-nav .elementor-nav-menu a.elementor-item::after{
top:auto !important;
bottom:-6px !important; /* tweak: -4px to -10px if you want */
transform:none !important;
}

/* Safety: if Elementor/theme draws it with ::before instead */
#secondary-nav .elementor-nav-menu a.elementor-item::before{
top: auto !important;
bottom: -6px !important;
transform: none !important;
}

/* ==========================================================
2) GP CORE PRIMITIVES (LOW-RISK CONSOLIDATION TARGETS)
These are safe to centralize because they’re intended to be
reused across sections and are commonly duplicated.
========================================================== */

/* Shared reveal primitive (works with existing JS that toggles .gp-in)
- Base .gp-reveal matches widget patterns (transition on .gp-in, transform:none on .gp-in)
- gp-reveal--io is motion-gated: only active when an ancestor sets [data-gp-motion="1"]
- gp-reveal--card matches “card reveal” transition list used in widgets
--------------------------------------------------------------- */
.gp-reveal{
  opacity:0;
  transform:translateY(var(--gp-reveal-y, 10px));
}
.gp-reveal.gp-in{
  opacity:1;
  transform:none;
  transition:
    opacity var(--gp-reveal-dur, 520ms) var(--gp-reveal-ease, var(--tf-ease)),
    transform var(--gp-reveal-dur, 520ms) var(--gp-reveal-ease, var(--tf-ease));
  transition-delay:var(--gp-delay, 0ms);
}
.gp-reveal--wc{ will-change:opacity, transform; }

/* Motion-gated reveal (replaces widget .elementor-kit-5s like .widget[data-gp-motion="1"] .item{...}) */
[data-gp-motion="1"] .gp-reveal--io{
  opacity:0;
  transform:translateY(var(--gp-reveal-y, 10px));
}
[data-gp-motion="1"] .gp-reveal--io.gp-in{
  opacity:1;
  transform:none;
  transition:
    opacity var(--gp-reveal-dur, 520ms) var(--gp-reveal-ease, var(--gp-ease, var(--tf-ease))),
    transform var(--gp-reveal-dur, 520ms) var(--gp-reveal-ease, var(--gp-ease, var(--tf-ease)));
  transition-delay:var(--gp-delay, 0ms);
}

/* Card reveal: adds the box-shadow / border-color parts used by your details cards */
[data-gp-motion="1"] .gp-reveal--io.gp-in.gp-reveal--card{
  transition:
    opacity var(--gp-reveal-dur, 520ms) var(--gp-reveal-ease, var(--gp-ease, var(--tf-ease))),
    transform var(--gp-reveal-dur, 520ms) var(--gp-reveal-ease, var(--gp-ease, var(--tf-ease))),
    box-shadow 180ms var(--gp-ease, var(--tf-ease)),
    border-color 180ms var(--gp-ease, var(--tf-ease));
  transition-delay:var(--gp-delay, 0ms);
}

/* ==========================================================
3) GP UI PRIMITIVES (OPT-IN / ZERO-REGRESSION)
Safe primitives for future section refactors.

Opt-in only via gp-ui-* classes (currently unused by production markup).

Do NOT apply to .gp-btn (reserved/overloaded across systems).
========================================================== */

/* Layout shells */
.gp-ui-shell{ width:100%; max-width:1140px; margin-left:auto; margin-right:auto; }
.gp-ui-shell--wide{ max-width:1200px; }
.gp-ui-shell--narrow{ max-width:900px; }

/* Accessibility helper */
.gp-ui-visually-hidden{
position:absolute !important;
width:1px !important;
height:1px !important;
padding:0 !important;
margin:-1px !important;
overflow:hidden !important;
clip:rect(0,0,0,0) !important;
white-space:nowrap !important;
border:0 !important;
}

/* Focus ring helper (opt-in) */
.gp-ui-focus:focus-visible{
outline:var(--gp-focus-width,2px) solid var(--gp-focus-color, rgba(255,215,130,.75));
outline-offset:var(--gp-focus-offset,6px);
border-radius:var(--gp-focus-radius,12px);
}
/* Alias (opt-in; handy when you don’t want gp-ui-* naming in markup) */
.gp-focus-ring:focus-visible{
outline:var(--gp-focus-width,2px) solid var(--gp-focus-color, rgba(255,215,130,.75));
outline-offset:var(--gp-focus-offset,6px);
border-radius:var(--gp-focus-radius,12px);
}

/* Glass card base (opt-in)
Supports bridge vars so widgets can move their card surface into sitewide without visual change.
--------------------------------------------------------------- */
.gp-ui-card{
background:var(--gp-card-bg, var(--gp-card, rgba(0,0,0,.60)));
border:1px solid var(--gp-card-stroke, var(--gp-stroke, rgba(199,164,94,.24)));
border-radius:var(--gp-card-radius, var(--gp-radius-card, 18px));
box-shadow:var(--gp-card-shadow, 0 0 18px rgba(199,164,94,.18), 0 18px 48px rgba(0,0,0,.45));
backdrop-filter:blur(var(--gp-card-blur, 10px));
-webkit-backdrop-filter:blur(var(--gp-card-blur, 10px));
}
.gp-ui-card--soft{ background:var(--gp-card-soft, rgba(0,0,0,.48)); }
.gp-ui-card--hard{ background:var(--gp-card-hard, rgba(0,0,0,.72)); }

/* Chip / pill base (opt-in) */
.gp-ui-chip{
display:inline-flex;
align-items:center;
justify-content:center;
padding:var(--gp-chip-pad, 6px 12px);
border-radius:var(--gp-chip-radius, 999px);
border:1px solid rgba(199,164,94,.25);
background:rgba(0,0,0,.35);
color:var(--gp-cream);
text-decoration:none;
user-select:none;
-webkit-tap-highlight-color:transparent;
}
.gp-ui-chip:focus-visible{
outline:var(--gp-focus-width,2px) solid var(--gp-focus-color, rgba(255,215,130,.75));
outline-offset:var(--gp-focus-offset,6px);
border-radius:var(--gp-focus-radius,12px);
}

/* Button primitive (opt-in; NOT .gp-btn) */
.gp-ui-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:.55em;
padding:var(--gp-btn-pad, 10px 20px);
border-radius:var(--gp-btn-radius, 20px);
border:1px solid transparent;
font-family:var(--gp-font-sans);
font-weight:700;
letter-spacing:1px;
line-height:1;
text-decoration:none;
cursor:pointer;
user-select:none;
-webkit-tap-highlight-color:transparent;
transition: transform .3s ease, filter .3s ease, background-color .3s ease, color .3s ease, border-color .3s ease, opacity .3s ease;
will-change:transform;
}
@media (hover:hover){
.gp-ui-btn:hover{
transform:scale(1.06);
filter:drop-shadow(0 0 12px var(--gp-gold-glow));
}
}
.gp-ui-btn:focus-visible{
outline:var(--gp-focus-width,2px) solid var(--gp-focus-color, rgba(255,215,130,.75));
outline-offset:var(--gp-focus-offset,6px);
border-radius:var(--gp-focus-radius,12px);
}

/* CTA variant aligned to canonical red pill DNA (opt-in) */
.gp-ui-btn--cta{
background:var(--gp-rose, #C1121F);
color:#FFF;
}
@media (hover:hover){
.gp-ui-btn--cta:hover{
background:var(--gp-rose-hover, #A00E19);
border-color:var(--gp-gold);
color:var(--gp-gold);
}
}

/* Variant helpers that ONLY apply when combined with gp-ui-btn (no .gp-btn collisions) */
.gp-ui-btn.gp-btn--gold{
background:linear-gradient(180deg, rgba(255,215,130,0.96), rgba(199,164,94,0.96));
color:rgba(11,11,12,0.96);
border-color:rgba(199,164,94,0.55);
}
@media (hover:hover){
.gp-ui-btn.gp-btn--gold:hover{
border-color:rgba(199,164,94,0.72);
filter:drop-shadow(0 0 12px var(--gp-gold-glow));
}
}
.gp-ui-btn.gp-btn--ghost{
background:rgba(0,0,0,.32);
color:var(--gp-cream);
border-color:rgba(199,164,94,.35);
}
@media (hover:hover){
.gp-ui-btn.gp-btn--ghost:hover{
border-color:rgba(199,164,94,.55);
}
}

/* Hover-lift helper (opt-in; use on cards, list items, etc.) */
.gp-ui-hoverlift{
transition: transform .35s var(--tf-ease), filter .35s var(--tf-ease);
will-change:transform;
}
@media (hover:hover){
.gp-ui-hoverlift:hover{
transform:translateY(-2px);
filter:drop-shadow(0 0 14px rgba(255,215,130,.22));
}
}

/* Top rule helper (opt-in; matches your “gold rule” accent) */
.gp-ui-toprule{
position:relative;
}
.gp-ui-toprule::before{
content:"";
position:absolute;
left:16px;
right:16px;
top:0;
height:1px;
background:linear-gradient(90deg, rgba(199,164,94,0.00), rgba(255,215,130,0.65), rgba(199,164,94,0.00));
box-shadow:0 0 16px rgba(199,164,94,.12);
pointer-events:none;
opacity:.95;
}

/* Sheen / reflection sweep (opt-in) */
.gp-ui-sheen{
position:relative;
overflow:hidden;
}


.gp-ui-sheen::after{
content:"";
position:absolute;
inset:-40% -60%;
transform:rotate(18deg) translateX(-70%);
background:linear-gradient(120deg,
rgba(255,255,255,0.00) 0%,
rgba(255,255,255,0.20) 22%,
rgba(255,255,255,0.00) 45%
);
opacity:0;
pointer-events:none;
transition:transform var(--gp-med,520ms) var(--gp-ease), opacity 220ms var(--gp-ease);
}
@media (hover:hover){
.gp-ui-sheen:hover::after{
transform:rotate(18deg) translateX(70%);
opacity:1;
}
}

/* Spotlight FX helper (opt-in; driven by CSS vars --gp-mx/--gp-my) */
.gp-fx-spotlight{
position:relative;
overflow:hidden;
isolation:isolate;
}
.gp-fx-spotlight::before{
content:"";
position:absolute;
inset:-40%;
background:radial-gradient(circle at var(--gp-mx, 50%) var(--gp-my, 20%),
rgba(255,215,130,0.22) 0%,
rgba(255,215,130,0.10) 28%,
transparent 62%
);
mix-blend-mode:screen;
filter:blur(0px);
opacity:var(--gp-spotlight-op, 0);
transform:scale(1.02);
transition:opacity var(--gp-med,520ms) var(--gp-ease);
pointer-events:none;
z-index:0;
}

/* Edge fade helper for horizontal scrollers (opt-in) */
.gp-edge-fade{
position:relative;
isolation:isolate;
}
.gp-edge-fade::before,
.gp-edge-fade::after{
content:"";
position:absolute;
top:0;
bottom:0;
width:var(--gp-edge-fade-w, 34px);
pointer-events:none;
z-index:1;
}
.gp-edge-fade::before{
left:0;
background:linear-gradient(90deg, rgba(0,0,0,0.85), rgba(0,0,0,0.00));
}
.gp-edge-fade::after{
right:0;
background:linear-gradient(270deg, rgba(0,0,0,0.85), rgba(0,0,0,0.00));
}

/* Reveal base (opt-in; avoids .gp-in) */
.gp-ui-reveal{
opacity:0;
transform:translateY(10px);
transition: opacity var(--tf-dur,.45s) var(--tf-ease), transform var(--tf-dur,.45s) var(--tf-ease);
will-change:opacity, transform;
}
.gp-ui-reveal.gp-ui-in{
opacity:1;
transform:translateY(0);
}

/* Section shell + spacing tokens (opt-in) */
.gp-ui-section{
--gp-ui-pad-x:16px;
--gp-ui-pad-y:clamp(52px, 6.6vw, 96px);
padding:var(--gp-ui-pad-y) var(--gp-ui-pad-x);
}
.gp-ui-section--tight{ --gp-ui-pad-y:clamp(36px, 5vw, 72px); }
.gp-ui-section--loose{ --gp-ui-pad-y:clamp(64px, 8vw, 120px); }

/* Vertical rhythm helper (opt-in) */
.gp-ui-stack{ --gp-ui-stack-gap:16px; }
.gp-ui-stack > * + *{ margin-top:var(--gp-ui-stack-gap); }
.gp-ui-stack--sm{ --gp-ui-stack-gap:10px; }
.gp-ui-stack--lg{ --gp-ui-stack-gap:24px; }

/* Eyebrow / heading accents (opt-in) */
.gp-ui-eyebrow{
display:inline-flex;
align-items:center;
gap:10px;
margin:0;
font-family:var(--gp-font-sans);
font-weight:850;
letter-spacing:.12em;
text-transform:uppercase;
font-size:12px;
color:rgba(255,255,255,.70);
}
.gp-ui-eyebrow::before{
content:"";
width:42px;
height:1px;
background:linear-gradient(90deg, rgba(199,164,94,0.00), rgba(255,215,130,0.85), rgba(199,164,94,0.00));
box-shadow:0 0 16px rgba(199,164,94,.12);
opacity:.95;
flex:0 0 auto;
}

.gp-ui-heading-accent{
position:relative;
display:inline-block;
}
.gp-ui-heading-accent::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:-0.22em;
height:2px;
border-radius:999px;
background:linear-gradient(90deg, rgba(199,164,94,0.00), rgba(255,215,130,0.85), rgba(199,164,94,0.00));
box-shadow:0 0 22px rgba(199,164,94,0.18);
pointer-events:none;
}

/* Performance helper (opt-in): cheapen below-the-fold sections without changing layout */
.gp-ui-cv-auto{
content-visibility:auto;
contain-intrinsic-size: 1px 900px;
}
/* ==========================================================
   3A) GP UI HELPERS (OPT-IN / ZERO-REGRESSION)
   Purpose:
   - Reduce repeated widget boilerplate for padding, inner width, text rhythm.
   - Safe: does NOTHING unless you add gp-ui-* classes to markup.
   - Does NOT touch .gp-btn.
========================================================== */

/* Section wrapper: consistent horizontal padding + centered content */
.gp-ui-wrap{
  width:100%;
  max-width:1140px;
  margin-left:auto;
  margin-right:auto;
  padding-left:16px;
  padding-right:16px;
}

/* Responsive grid helper (simple, covers 80% of “card grid” needs) */
.gp-ui-grid{
  display:grid;
  gap:clamp(12px, 1.8vw, 18px);
  grid-template-columns:repeat(1, minmax(0,1fr));
}
@media (min-width:680px){
  .gp-ui-grid--2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (min-width:1020px){
  .gp-ui-grid--3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}

/* Text rhythm helper: use when you want consistent paragraph/list spacing */
.gp-ui-text{
  --gp-ui-text: rgba(232,229,222,0.90);
  --gp-ui-text-soft: rgba(232,229,222,0.78);

  color:var(--gp-ui-text);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:clamp(15.5px, 0.45vw + 14px, 18px);
  line-height:1.65;
  text-shadow:0 1px 14px rgba(0,0,0,0.32);
}
.gp-ui-text p{ margin:0; }
.gp-ui-text p + p{ margin-top:12px; }

.gp-ui-text ul,
.gp-ui-text ol{
  margin:12px 0 0;
  padding-left:18px;
}
.gp-ui-text li{ margin:6px 0; }

.gp-ui-text a{
  color:rgba(255,215,130,0.92);
  text-decoration:none;
  border-bottom:1px solid rgba(255,215,130,0.32);
  transition:border-color var(--tf-dur-fast,.28s) var(--tf-ease), color var(--tf-dur-fast,.28s) var(--tf-ease);
}
.gp-ui-text a:hover{
  color:rgba(255,215,130,1);
  border-bottom-color:rgba(255,215,130,0.70);
}
.gp-ui-text a:focus-visible{
  outline:var(--gp-focus-width,2px) solid var(--gp-focus-color, rgba(255,215,130,.75));
  outline-offset:var(--gp-focus-offset,6px);
  border-radius:6px;
}

@media (prefers-reduced-motion:reduce){
.gp-ui-btn,
.gp-ui-reveal,
.gp-ui-hoverlift,
.gp-ui-sheen::after,
.gp-fx-spotlight::before{
transition-duration:.001ms !important;
}


.gp-ui-reveal{
transform:none !important;
}
.gp-reveal,
.gp-reveal.gp-in,
[data-gp-motion="1"] .gp-reveal--io,
[data-gp-motion="1"] .gp-reveal--io.gp-in{
opacity:1 !important;
transform:none !important;
transition:none !important;
}
.gp-fx-spotlight::before{
opacity:0 !important;
}
}

/* ==========================================================
4) COMPAT PATCHES (DO NOT REMOVE)
Must remain last. Final winning rule must stay at the bottom.
========================================================== */

/* BUGFIX (SAFE/SCOPED): invalid rgba() token fallback (Service Area gold button)
If a widget contains a malformed rgba() string, browsers drop the declaration.
This provides an intent-preserving fallback without forcing a redesign.
-------------------------------------------------------------------------- */
.gp-areas .gp-area-btn--gold{
background:radial-gradient(circle, rgba(255,215,130,0.98) 0%, rgba(199,164,94,0.82) 60%, rgba(199,164,94,0.35) 100%);
}

/* COMPAT PATCH (DO NOT REMOVE): Chromium scroll freeze fix */
html, body { overscroll-behavior:auto !important; scroll-behavior:auto !important; }/* End custom CSS */