:root {
            --navy: #103962;
            --blue: #174b85;
            --orange: #ef7a2d;
            --ink: #1c2b3c
        }

        html {
            scroll-behavior: smooth;
            scroll-padding-top: 96px
        }

        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-behavior: auto
            }
        }

        body {
            font-family: "DM Sans",sans-serif;
            color: var(--ink)
        }

        .site-shell {
            width: 100%;
            overflow: hidden
        }

        .display-font {
            font-family: "Fraunces",serif
        }

        .focus-ring:focus-visible {
            outline: 3px solid rgba(239,122,45,.6);
            outline-offset: 4px
        }

        .nav-link {
            position: relative
        }

            .nav-link::after {
                content: "";
                position: absolute;
                left: 0;
                bottom: -7px;
                height: 2px;
                width: 0;
                background: var(--orange);
                transition: width .22s ease
            }

            .nav-link:hover::after {
                width: 100%
            }

        .hero-shade {
            background: linear-gradient(90deg,rgba(10,35,61,.92) 0%,rgba(10,35,61,.72) 42%,rgba(10,35,61,.12) 100%)
        }

        .gateway-float {
            animation: float 6s ease-in-out infinite
        }

        @keyframes float {
            0%,100% {
                transform: translate(0,0)
            }

            33% {
                transform: translate(-8px,6px)
            }

            66% {
                transform: translate(8px10 ZARpx)
            }
        }

        .rise {
            animation: rise .8s ease both
        }

        .delay-1 {
            animation-delay: .12s
        }

        .delay-2 {
            animation-delay: .24s
        }

        .delay-3 {
            animation-delay: .36s
        }

        @keyframes rise {
            from {
                opacity: 0;
                transform: translateY(24px)
            }

            to {
                opacity: 1;
                transform: translateY(0)
            }
        }

        .card-lift {
            transition: transform .25s ease,box-shadow .25s ease
        }

            .card-lift:hover {
                transform: translateY(-6px);
                box-shadow: 0 24px 45px rgba(16,57,98,.12)
            }

        .gateway-card {
            transition: transform .3s ease,box-shadow .3s ease
        }

            .gateway-card:hover {
                transform: translateY(-8px);
                box-shadow: 0 30px 60px rgba(16,57,98,.18)
            }

        .mobile-menu {
            display: none
        }

            .mobile-menu.is-open {
                display: block
            }

        .view-hidden {
            display: none !important
        }

        .switcher-pill {
            border-radius: 999px;
            padding: 4px;
            background: #e8eef5;
            display: inline-flex
        }

        .switcher-btn {
            padding: 6px 14px;
            border-radius: 999px;
            font-size: 13px;
            font-weight: 600;
            transition: all .2s;
            cursor: pointer;
            border: none;
            background: transparent;
            color: var(--navy)
        }

            .switcher-btn.active {
                background: var(--orange);
                color: #fff
            }

        .before-after {
            --split: 52%
        }

        .before-layer {
            clip-path: inset(0 calc(100% - var(--split)) 0 0)
        }

        .slider-thumb {
            left: var(--split)
        }

        .range-control {
            appearance: none;
            background: transparent
        }

            .range-control::-webkit-slider-thumb {
                appearance: none;
                width: 30px;
                height: 30px;
                border-radius: 50%;
                background: #fff;
                border: 4px solid var(--orange);
                box-shadow: 0 2px 8px rgba(0,0,0,.22);
                cursor: ew-resize
            }

            .range-control::-moz-range-thumb {
                width: 22px;
                height: 22px;
                border-radius: 50%;
                background: #fff;
                border: 4px solid var(--orange);
                cursor: ew-resize
            }

        .bill-range {
            appearance: none;
            height: 8px;
            border-radius: 999px;
            background: #dbe7f2
        }

            .bill-range::-webkit-slider-thumb {
                appearance: none;
                width: 22px;
                height: 22px;
                border-radius: 50%;
                background: var(--orange);
                cursor: pointer
            }

            .bill-range::-moz-range-thumb {
                width: 22px;
                height: 22px;
                border: 0;
                border-radius: 50%;
                background: var(--orange);
                cursor: pointer
            }

        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height .3s ease
        }

        .faq-item.is-open .faq-answer {
            max-height: 300px;
            padding-top: .75rem
        }

        .faq-item.is-open .faq-chevron {
            transform: rotate(180deg)
        }

        .faq-chevron {
            transition: transform .25s ease
        }

        .testimonial-slide {
            display: none
        }

            .testimonial-slide.active {
                display: block
            }

        @media(max-width:767px) {
            .hero-shade {
                background: linear-gradient(0deg,rgba(10,35,61,.94),rgba(10,35,61,.60) 65%,rgba(10,35,61,.18))
            }
        }

/* ==========================================================================
   ADDED EFFECTS — custom cursor, scroll reveal, word-by-word reveal
   Everything below is additive and namespaced with a "wpk-fx" prefix so it
   won't collide with existing Tailwind or component classes. Delete this
   block (and the matching JS block in main.js) to fully remove the effects.
   ========================================================================== */

/* ---- 1. Custom cursor -----------------------------------------------------
   A small dot that snaps to the pointer, plus a ring that trails behind it
   and grows over links/buttons/cards. Desktop + mouse only — never touches
   touchscreens, and form fields keep the native cursor for usability.
   To turn this off entirely, delete the <body class="wpk-fx-cursor-on">
   class in index.html (or just remove this whole rule block). */
@media (hover: hover) and (pointer: fine){
    body.wpk-fx-cursor-on{ cursor: none; }
    body.wpk-fx-cursor-on input,
    body.wpk-fx-cursor-on textarea,
    body.wpk-fx-cursor-on select,
    body.wpk-fx-cursor-on [type="range"]{ cursor: auto; }
}
.wpk-fx-cursor-dot, .wpk-fx-cursor-ring{
    position: fixed;
    top: 0; left: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 300;
    transform: translate(-50%, -50%);
}
.wpk-fx-cursor-dot{
    width: 6px; height: 6px;
    background: var(--orange);
}
.wpk-fx-cursor-ring{
    width: 34px; height: 34px;
    border: 1px solid rgba(16,57,98,0.55);
    transition: width .25s cubic-bezier(.22,.68,0,1.01),
                height .25s cubic-bezier(.22,.68,0,1.01),
                border-color .25s ease, background .25s ease;
}
/* over dark hero sections the ring switches to white so it stays visible */
.wpk-fx-cursor-ring.wpk-fx-on-dark{ border-color: rgba(255,255,255,.7); }
.wpk-fx-cursor-ring.wpk-fx-hover{
    width: 56px; height: 56px;
    background: rgba(239,122,45,.12);
    border-color: var(--orange);
}

/* ---- 2. General scroll reveal ---------------------------------------------
   A fade + lift for content that isn't part of the hero (which already
   animates on load via the .rise class above). Add "wpk-reveal" to any
   element and it'll ease into place the first time it scrolls into view.
   Cards, FAQ items, and project tiles across the page use this. */
.wpk-reveal{
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.22,.68,0,1.01), transform .7s cubic-bezier(.22,.68,0,1.01);
}
.wpk-reveal.wpk-fx-in-view{
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
    .wpk-reveal, .wpk-word-reveal .wpk-word{ transition: none; }
}

/* ---- 3. Word-by-word text reveal ------------------------------------------
   Add the class "wpk-word-reveal" to any paragraph and the JS will split it
   into per-word spans that sharpen into place left to right as it scrolls
   into view (or shortly after load, for text that's already on screen). */
.wpk-word-reveal .wpk-word{
    display: inline-block;
    opacity: 0.15;
    filter: blur(3px);
    transform: translateY(6px);
    transition: opacity .5s ease, filter .5s ease, transform .5s ease;
    transition-delay: calc(var(--i, 0) * 45ms);
}
.wpk-word-reveal.wpk-fx-in-view .wpk-word{
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

/* ---- 4. Site preloader -----------------------------------------------------
   Full-screen splash shown while the page loads. Fades and removes itself
   once window "load" fires (with a small minimum display time so it never
   just flashes on fast connections). See js/main.js for the control logic. */
#site-preloader{
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    transition: opacity .6s ease, visibility .6s ease;
}
#preloader-lottie{
    width: 200px;
    height: auto;
    max-height: 90px;
    display: block;
    object-fit: contain;
}
#preloader-label{
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
    color: rgba(255,255,255,0.75);
}
#preloader-bar{
    position: relative;
    width: 180px;
    height: 3px;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    overflow: hidden;
}
#preloader-bar span{
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: 40%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(239,122,45,0) 0%, var(--orange) 60%, #fff 100%);
    animation: wpk-preloader-slide 1.3s ease-in-out infinite;
}
@keyframes wpk-preloader-slide{
    0%{ left: -40%; }
    100%{ left: 100%; }
}
#site-preloader.preloader-hidden{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce){
    #site-preloader{ transition: none; }
    #preloader-bar span{ animation: none; left: 0; width: 100%; }
}

/* ---- 5. Nav link reveal ----------------------------------------------------
   Add "wpk-nav-reveal" to a nav-links container and "wpk-nav-item" to each
   link inside it. JS assigns each link a --i index and toggles
   "wpk-fx-in-view" on the container whenever it's shown (on first reveal of
   the header, and again every time the Home/Business switcher is used), so
   the links sharpen into place left to right, one at a time. */
.wpk-nav-reveal .wpk-nav-item{
    display: inline-block;
    opacity: 0;
    filter: blur(3px);
    transform: translateY(-4px);
    transition: opacity .45s ease, filter .45s ease, transform .45s ease;
    transition-delay: calc(var(--i, 0) * 70ms);
}
.wpk-nav-reveal.wpk-fx-in-view .wpk-nav-item{
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
    .wpk-nav-reveal .wpk-nav-item{ transition: none; opacity: 1; filter: none; transform: none; }
}

/* ---- 8. Business-view header theme ----------------------------------------
   The shared header defaults to the light/residential theme. When Business
   is active (main.js toggles "biz-theme" on #site-header and #mobile-menu),
   it switches to a dark theme so it doesn't clash with the business
   section's dark backgrounds. */
#site-header.biz-theme{
    background: rgba(6, 23, 37, .92);
    border-bottom-color: rgba(255,255,255,.08);
}
#site-header.biz-theme .nav-link{
    color: rgba(255,255,255,.75);
}
#site-header.biz-theme .nav-link:hover{
    color: #fff;
}
#site-header.biz-theme #menu-toggle{
    color: #fff;
}
#mobile-menu.biz-theme{
    background: rgb(6, 23, 37);
    border-top-color: rgba(255,255,255,.08);
}
#mobile-menu.biz-theme a{
    color: rgba(255,255,255,.85);
}

/* ---- 9. Back to top button -------------------------------------------- */
#back-to-top{
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity .3s ease, transform .3s ease, background-color .2s ease;
}
#back-to-top.is-visible{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
#back-to-top:hover{
    background: var(--orange) !important;
}
@media (prefers-reduced-motion: reduce){
    #back-to-top{ transition: opacity .15s linear; transform: none; }
}

/* ---- 6. Before/after label fade --------------------------------------------
   The "Before"/"After" tags on the home-page comparison slider fade out once
   their matching image fully fills the frame, since the label becomes
   redundant (and visually noisy) once there's nothing left to compare
   against. Toggled via JS on the slider's "input" event. */
.canva-tag{
    transition: opacity .25s ease, transform .25s ease;
}
.canva-tag.is-hidden-edge{
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
}

/* ---- 7. Process step note --------------------------------------------------
   Small inline callout used inside a process step card (e.g. the "there may
   be a fee for this assessment" note under step 3). Orange background with
   dark text so it reads as an important aside without looking like an error. */
.wpk-process-note{
    margin: 12px 0 0;
    padding: 10px 11px;
    display: block;
    border: 1px solid var(--orange);
    border-radius: 12px;
    background: var(--orange);
    color: #111111;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
}